Move testinput and testoutput to details, and add login redirect in /new

@@ -3,6 +3,8 @@ import { newPost } from "../api/post";
 import React from "react";
 import React from "react";
 import dynamic from "next/dynamic";
 import dynamic from "next/dynamic";
 import "@uiw/react-textarea-code-editor/dist.css";
 import "@uiw/react-textarea-code-editor/dist.css";
+import { useRouter } from "next/dist/client/router";
+import { useSession } from "next-auth/client";
 
 
 const CodeEditor = dynamic(
 const CodeEditor = dynamic(
     () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
     () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
@@ -12,7 +14,15 @@ const CodeEditor = dynamic(
 export default function New() {
 export default function New() {
     const [code, setCode] = React.useState("");
     const [code, setCode] = React.useState("");
 
 
+    
+
+    const router = useRouter();
+
     async function makePost(event) {
     async function makePost(event) {
+        if(useSession.accessToken == undefined) {
+            router.push("/login");
+            throw alert("Please Login first!");
+        }
         event.preventDefault();
         event.preventDefault();
         const form = event.target;
         const form = event.target;
         const title = form.title.value;
         const title = form.title.value;
@@ -23,6 +33,7 @@ export default function New() {
         const difficulty = form.level.value;
         const difficulty = form.level.value;
         const post = await newPost(title, explain, example, testinput, testoutput, difficulty);
         const post = await newPost(title, explain, example, testinput, testoutput, difficulty);
         console.log(post);
         console.log(post);
+        router.push("/");
     };
     };
     return (
     return (
         <div className=" mx-10">
         <div className=" mx-10">

@@ -31,7 +31,7 @@ export default function Post() {
 
 
     const [code, setCode] = useState("");
     const [code, setCode] = useState("");
 
 
-    const [answer, setAnswer] = useState("Answer Test");
+    const [answer, setAnswer] = useState("");
 
 
     const [comment, setComment] = useState("");
     const [comment, setComment] = useState("");
 
 
@@ -70,11 +70,49 @@ export default function Post() {
         setAnswer(`출력 : ${result}`);
         setAnswer(`출력 : ${result}`);
     }
     }
 
 
+    const testinput = () => {
+        const insert = post.testinput;
+        console.log("insert = " + insert);
+        if (insert === [""] || insert === undefined) {
+            console.log("없음");
+            return <div></div>
+        }
+        return <div>
+            <p>예시 입력</p>
+            {insert.map(data => {
+                return <p>{data}</p>;
+            })}
+        </div>
+    }
+
+    const testoutput = () => {
+        const insert = post.testoutput;
+        console.log("insert = " + insert);
+        if (insert === [""] || insert === undefined) {
+            console.log("없음");
+            return <div></div>
+        }
+        return <div>
+            <p>예시 출력</p>
+            {insert.map(data => {
+                return <p>{data}</p>;
+            })}
+        </div>
+    }
+
+    const explain = () => {
+        if (post.explain === undefined) {
+            return <div></div>
+        }
+        return <div>{post.explain.split("\n").map(data => {
+            return <p>{data}</p>;
+        })}
+        </div>
+    }
+
     return (
     return (
         <div className="ml-10 mr-10">
         <div className="ml-10 mr-10">
             <h3 className="text-3xl font-bold">{post.title}</h3>
             <h3 className="text-3xl font-bold">{post.title}</h3>
-            <p>{post.testinput}</p>
-            <p>{post.testoutput}</p>
             <select value={value} onChange={(e) => setValue(e.target.value)}>
             <select value={value} onChange={(e) => setValue(e.target.value)}>
                 <option value="c">c</option>
                 <option value="c">c</option>
                 <option value="cpp">cpp</option>
                 <option value="cpp">cpp</option>
@@ -83,7 +121,7 @@ export default function Post() {
                 <option value="go">golang</option>
                 <option value="go">golang</option>
                 <option value="py">python</option>
                 <option value="py">python</option>
             </select>
             </select>
-            <span className="absolute left-1/2 text-2xl font-semibold">문제 설명</span>
+            <span className=" sticky left-1/2 text-2xl font-semibold">문제 설명</span>
             <br></br>
             <br></br>
             <div className="w-6/12 inline-block">
             <div className="w-6/12 inline-block">
                 <CodeEditor
                 <CodeEditor
@@ -102,7 +140,7 @@ export default function Post() {
 
 
                 />
                 />
             </div>
             </div>
-            <div className="w-6/12 inline-block align-top">{post.explain}</div>
+            <div className="w-6/12 inline-block align-top">{explain()}</div>
             <Button onClick={runCode} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Run</Button>
             <Button onClick={runCode} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Run</Button>
             <div className="">{answer}</div>
             <div className="">{answer}</div>
             <details>
             <details>
@@ -110,6 +148,8 @@ export default function Post() {
                 <SyntaxHighlighter language="cpp">
                 <SyntaxHighlighter language="cpp">
                     {post.example || "Loading Example..."}
                     {post.example || "Loading Example..."}
                 </SyntaxHighlighter>
                 </SyntaxHighlighter>
+                <div className="w-1/2 inline-block p-2">{testinput()}</div>
+                <div className="w-1/2 inline-block p-2">{testoutput()}</div>
             </details>
             </details>
             <div>
             <div>
                 <textarea className="w-full h-24" placeholder="Write your comment..." value={comment} onChange={(e) => setComment(e.target.value)}></textarea>
                 <textarea className="w-full h-24" placeholder="Write your comment..." value={comment} onChange={(e) => setComment(e.target.value)}></textarea>