Move testinput and testoutput to details, and add login redirect in /new
Showing
2 changed files
with
56 additions
and
5 deletions
... | @@ -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> | ... | ... |
-
Please register or login to post a comment