sungjin

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

...@@ -3,6 +3,8 @@ import { newPost } from "../api/post"; ...@@ -3,6 +3,8 @@ import { newPost } from "../api/post";
3 import React from "react"; 3 import React from "react";
4 import dynamic from "next/dynamic"; 4 import dynamic from "next/dynamic";
5 import "@uiw/react-textarea-code-editor/dist.css"; 5 import "@uiw/react-textarea-code-editor/dist.css";
6 +import { useRouter } from "next/dist/client/router";
7 +import { useSession } from "next-auth/client";
6 8
7 const CodeEditor = dynamic( 9 const CodeEditor = dynamic(
8 () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default), 10 () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
...@@ -12,7 +14,15 @@ const CodeEditor = dynamic( ...@@ -12,7 +14,15 @@ const CodeEditor = dynamic(
12 export default function New() { 14 export default function New() {
13 const [code, setCode] = React.useState(""); 15 const [code, setCode] = React.useState("");
14 16
17 +
18 +
19 + const router = useRouter();
20 +
15 async function makePost(event) { 21 async function makePost(event) {
22 + if(useSession.accessToken == undefined) {
23 + router.push("/login");
24 + throw alert("Please Login first!");
25 + }
16 event.preventDefault(); 26 event.preventDefault();
17 const form = event.target; 27 const form = event.target;
18 const title = form.title.value; 28 const title = form.title.value;
...@@ -23,6 +33,7 @@ export default function New() { ...@@ -23,6 +33,7 @@ export default function New() {
23 const difficulty = form.level.value; 33 const difficulty = form.level.value;
24 const post = await newPost(title, explain, example, testinput, testoutput, difficulty); 34 const post = await newPost(title, explain, example, testinput, testoutput, difficulty);
25 console.log(post); 35 console.log(post);
36 + router.push("/");
26 }; 37 };
27 return ( 38 return (
28 <div className=" mx-10"> 39 <div className=" mx-10">
......
...@@ -31,7 +31,7 @@ export default function Post() { ...@@ -31,7 +31,7 @@ export default function Post() {
31 31
32 const [code, setCode] = useState(""); 32 const [code, setCode] = useState("");
33 33
34 - const [answer, setAnswer] = useState("Answer Test"); 34 + const [answer, setAnswer] = useState("");
35 35
36 const [comment, setComment] = useState(""); 36 const [comment, setComment] = useState("");
37 37
...@@ -70,11 +70,49 @@ export default function Post() { ...@@ -70,11 +70,49 @@ export default function Post() {
70 setAnswer(`출력 : ${result}`); 70 setAnswer(`출력 : ${result}`);
71 } 71 }
72 72
73 + const testinput = () => {
74 + const insert = post.testinput;
75 + console.log("insert = " + insert);
76 + if (insert === [""] || insert === undefined) {
77 + console.log("없음");
78 + return <div></div>
79 + }
80 + return <div>
81 + <p>예시 입력</p>
82 + {insert.map(data => {
83 + return <p>{data}</p>;
84 + })}
85 + </div>
86 + }
87 +
88 + const testoutput = () => {
89 + const insert = post.testoutput;
90 + console.log("insert = " + insert);
91 + if (insert === [""] || insert === undefined) {
92 + console.log("없음");
93 + return <div></div>
94 + }
95 + return <div>
96 + <p>예시 출력</p>
97 + {insert.map(data => {
98 + return <p>{data}</p>;
99 + })}
100 + </div>
101 + }
102 +
103 + const explain = () => {
104 + if (post.explain === undefined) {
105 + return <div></div>
106 + }
107 + return <div>{post.explain.split("\n").map(data => {
108 + return <p>{data}</p>;
109 + })}
110 + </div>
111 + }
112 +
73 return ( 113 return (
74 <div className="ml-10 mr-10"> 114 <div className="ml-10 mr-10">
75 <h3 className="text-3xl font-bold">{post.title}</h3> 115 <h3 className="text-3xl font-bold">{post.title}</h3>
76 - <p>{post.testinput}</p>
77 - <p>{post.testoutput}</p>
78 <select value={value} onChange={(e) => setValue(e.target.value)}> 116 <select value={value} onChange={(e) => setValue(e.target.value)}>
79 <option value="c">c</option> 117 <option value="c">c</option>
80 <option value="cpp">cpp</option> 118 <option value="cpp">cpp</option>
...@@ -83,7 +121,7 @@ export default function Post() { ...@@ -83,7 +121,7 @@ export default function Post() {
83 <option value="go">golang</option> 121 <option value="go">golang</option>
84 <option value="py">python</option> 122 <option value="py">python</option>
85 </select> 123 </select>
86 - <span className="absolute left-1/2 text-2xl font-semibold">문제 설명</span> 124 + <span className=" sticky left-1/2 text-2xl font-semibold">문제 설명</span>
87 <br></br> 125 <br></br>
88 <div className="w-6/12 inline-block"> 126 <div className="w-6/12 inline-block">
89 <CodeEditor 127 <CodeEditor
...@@ -102,7 +140,7 @@ export default function Post() { ...@@ -102,7 +140,7 @@ export default function Post() {
102 140
103 /> 141 />
104 </div> 142 </div>
105 - <div className="w-6/12 inline-block align-top">{post.explain}</div> 143 + <div className="w-6/12 inline-block align-top">{explain()}</div>
106 <Button onClick={runCode} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Run</Button> 144 <Button onClick={runCode} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Run</Button>
107 <div className="">{answer}</div> 145 <div className="">{answer}</div>
108 <details> 146 <details>
...@@ -110,6 +148,8 @@ export default function Post() { ...@@ -110,6 +148,8 @@ export default function Post() {
110 <SyntaxHighlighter language="cpp"> 148 <SyntaxHighlighter language="cpp">
111 {post.example || "Loading Example..."} 149 {post.example || "Loading Example..."}
112 </SyntaxHighlighter> 150 </SyntaxHighlighter>
151 + <div className="w-1/2 inline-block p-2">{testinput()}</div>
152 + <div className="w-1/2 inline-block p-2">{testoutput()}</div>
113 </details> 153 </details>
114 <div> 154 <div>
115 <textarea className="w-full h-24" placeholder="Write your comment..." value={comment} onChange={(e) => setComment(e.target.value)}></textarea> 155 <textarea className="w-full h-24" placeholder="Write your comment..." value={comment} onChange={(e) => setComment(e.target.value)}></textarea>
......