Add All Frontend Service without Account, Search, Star

@@ -14,6 +14,7 @@
         "next-remove-imports": "^1.0.6",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-promise": "^3.0.2",
         "semantic-ui-react": "^2.0.4",
         "swr": "^1.0.1"
       },
@@ -6671,6 +6672,11 @@
         "react": "^16.8.0 || ^17"
       }
     },
+    "node_modules/react-promise": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-promise/-/react-promise-3.0.2.tgz",
+      "integrity": "sha512-Ez2aFel11b08H2HAWNnKf0GDV5ATGBmxK9UXHXxoKwCEoQey9manXDTwB2n3mhgOvMRzGH/YTHACdqQUjXf6Rw=="
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -13747,6 +13753,11 @@
         "warning": "^4.0.2"
       }
     },
+    "react-promise": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-promise/-/react-promise-3.0.2.tgz",
+      "integrity": "sha512-Ez2aFel11b08H2HAWNnKf0GDV5ATGBmxK9UXHXxoKwCEoQey9manXDTwB2n3mhgOvMRzGH/YTHACdqQUjXf6Rw=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

@@ -17,6 +17,7 @@
     "next-remove-imports": "^1.0.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-promise": "^3.0.2",
     "semantic-ui-react": "^2.0.4",
     "swr": "^1.0.1"
   },

-import auth from '../auth'
+import * as auth from '../auth'
 import axios from 'axios';
 import { SERVER_BASE_URL } from '..';
 
-export const newPost = async (title, content, privat) => {
+export const newPost = async (
+    title,
+    explain,
+    example,
+    testinput,
+    testoutput,
+) => {
     if (!auth.validateToken()) {
         throw new Error("plz login");
     }
-    const response = await axios.post(`${SERVER_BASE_URL}/post/new`, {
+    const response = await axios.post(`${SERVER_BASE_URL}/post`, {
         token: auth.getToken(),
         title,
-        content,
-        privat,
+        explain,
+        example,
+        testinput,
+        testoutput,
     });
-    if (response.status !== 200) {
+    if (response.status !== 200 && response.status !== 201) {
         throw new Error('Failed to create new post!');
     }
-    return response.data;
+    return response.data.id;
 }
 
 export const getPostbyId = async (id) => {
-    const response = await axios.get(`${SERVER_BASE_URL}/post/${id}`);
+    const response = await axios.get(`${SERVER_BASE_URL}/post/id/${id}`);
     if (response.status !== 200) {
         throw new Error('Failed to get post!');
     }
     return response.data;
+}
+
+export const getPosts = async (takes) => {
+    const response = await axios.get(`${SERVER_BASE_URL}/post`, {
+        params: {
+            takes,
+        },
+    });
+    if (response.status !== 200) {
+        throw new Error('Failed to get posts!');
+    }
+    return response.data;
+}
+
+export const getPostsByDifficulty = async (difficulty) => {
+    const response = await axios.get(`${SERVER_BASE_URL}/post/difficulty/${difficulty}`);
+
+    if (response.status !== 200) {
+        throw new Error('Failed to get posts!');
+    }
+    console.log(response.data);
+    return response.data;
 }
\ No newline at end of file

@@ -6,25 +6,39 @@ export default function Nav() {
     const moverun = () => {
         router.push("/run")
     }
+
+    const movenew = () => {
+        router.push("/new")
+    }
+
+    const movelow = () => {
+        router.push("/difficulty/low")
+    }
+    const movemed = () => {
+        router.push("/difficulty/medium")
+    }
+    const movehigh = () => {
+        router.push("/difficulty/high")
+    }
     return (
         <nav className="navbar">
             <div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
             space-x-10 sm:space-x-20">
-                <a herf="" className="last:pr-24 cursor-pointer transition 
-                        duration-100 transform hover:scale-125 hover:text-white 
-                        active:text-blue-500">난이도 하</a>
                 <Button onClick={moverun} className="cursor-pointer transition
                         duration-100 transform hover:scale-125 hover:text-white
-                        active:text-blue-500">실행하기</Button>
-                <a herf="" className="last:pr-24 cursor-pointer transition 
-                        duration-100 transform hover:scale-125 hover:text-white 
-                        active:text-blue-500">난이도 중</a>
-                <a herf="" className="last:pr-24 cursor-pointer transition 
-                        duration-100 transform hover:scale-125 hover:text-white 
-                        active:text-blue-500">난이도 상</a>
-                <a herf="" className="last:pr-24 cursor-pointer transition 
-                        duration-100 transform hover:scale-125 hover:text-white 
-                        active:text-blue-500">북마크</a>
+                        active:text-blue-500">테스트</Button>
+                <Button onClick={movelow} className="cursor-pointer transition
+                        duration-100 transform hover:scale-125 hover:text-white
+                        active:text-blue-500">난이도 하</Button>
+                <Button onClick={movemed} className="cursor-pointer transition
+                        duration-100 transform hover:scale-125 hover:text-white
+                        active:text-blue-500">난이도 중</Button>
+                <Button onClick={movehigh} className="cursor-pointer transition
+                        duration-100 transform hover:scale-125 hover:text-white
+                        active:text-blue-500">난이도 상</Button>
+                <Button onClick={movenew} className="cursor-pointer transition
+                        duration-100 transform hover:scale-125 hover:text-white
+                        active:text-blue-500">문제 만들기</Button>
             </div>
         </nav>
     )

+import { Link } from "@nextui-org/react";
+import { getPosts } from "../api/post";
+import { useState } from "react";
+import { useEffect } from "react";
+
+export default function Popular() {
+    const [posts, setPosts] = useState([]);
+    useEffect(() => {
+        getPosts(10).then(setPosts);
+    }, []);
+    return (
+        <div>
+            <ul>
+                {posts.map(post => (
+                    <li key={post.id}>
+                        <Link href={`/post/${post.id}`}>
+                            <a>{post.title}</a>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
\ No newline at end of file

+import { Link } from "@nextui-org/react";
+import { getPostsByDifficulty } from "../../api/post";
+import { useState } from "react";
+import { useEffect } from "react";
+
+export default function Popular() {
+    const [posts, setPosts] = useState([]);
+    useEffect(() => {
+        getPostsByDifficulty(1).then(setPosts);
+    }, []);
+    return (
+        <div>
+            <ul>
+                {posts.map(post => (
+                    <li key={post.id}>
+                        <Link href={`/post/${post.id}`}>
+                            <a>{post.title}</a>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
\ No newline at end of file

+import { Link } from "@nextui-org/react";
+import { getPostsByDifficulty } from "../../api/post";
+import { useState } from "react";
+import { useEffect } from "react";
+
+export default function Popular() {
+    const [posts, setPosts] = useState([]);
+    useEffect(() => {
+        getPostsByDifficulty(2).then(setPosts);
+    }, []);
+    return (
+        <div>
+            <ul>
+                {posts.map(post => (
+                    <li key={post.id}>
+                        <Link href={`/post/${post.id}`}>
+                            <a>{post.title}</a>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
\ No newline at end of file

-import {Header} from 'semantic-ui-react'
+import { Header } from 'semantic-ui-react'
 import Head from 'next/head'
+import Popular from '../components/Popular'
 
 export default function Home() {
   return (
@@ -11,7 +12,7 @@ export default function Home() {
       </Head>
       {/* 기본 컨텐츠 */}
       <Header as='h3' textAlign='center'>인기 문제</Header>
-      
+      <Popular />
     </div>
   )
 }
\ No newline at end of file

+import { Button } from "semantic-ui-react";
+import { newPost } from "../api/post";
+
+export default function New() {
+    async function makePost(event) {
+        event.preventDefault();
+        const form = event.target;
+        const title = form.title.value;
+        const explain = form.explain.value;
+        const example = form.example.value;
+        const testinput = form.testinput.value.split("\n");
+        const testoutput = form.testoutput.value.split("\n");
+        const post = await newPost(title, explain, example, testinput, testoutput);
+        console.log(post);
+    };
+    return (
+        <div>
+            <h1>New Post</h1>
+            <form onSubmit={makePost}>
+                <label>제목</label>
+                <input type="text" id="title" />
+                <select id="level" defaultValue="1">
+                    <option value="1">LOW</option>
+                    <option value="2">MEDIUM</option>
+                    <option value="3">HIGH</option>
+                </select>
+                <label>문제 설명</label>
+                <textarea id="explain"></textarea><br />
+                <label>예시 코드</label>
+                <textarea id="example"></textarea><br />
+                <label>예시 입력(Enter로 구분)</label>
+                <textarea id="testinput"></textarea>
+                <label>예시 출력(Enter로 구분)</label>
+                <textarea id="testoutput"></textarea><br />
+                <button type="submit">제출</button>
+            </form>
+        </div>
+    );
+}
\ No newline at end of file

@@ -2,7 +2,7 @@ import { useRouter } from "next/dist/client/router"
 import { getPostbyId } from "../../api/post"
 import "@uiw/react-textarea-code-editor/dist.css";
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "semantic-ui-react";
 
 const CodeEditor = dynamic(
@@ -12,8 +12,18 @@ const CodeEditor = dynamic(
 
 export default function Post() {
     const router = useRouter()
-    const { id } = router.query
-    const post = getPostbyId(id)
+
+    const [post, setPost] = useState({})
+
+    useEffect(() => {
+        if (!router.isReady) return;
+        const { id } = router.query
+        getPostbyId(id).then(res => {
+            setPost(res)
+        })
+    }, [router.isReady]);
+
+    console.log(post);
 
     const [value, setValue] = useState("c");
 
@@ -25,8 +35,10 @@ export default function Post() {
 
     return (
         <div>
-            <p>{post.title}</p>
-            <p>{post.body}</p>
+            <h1>{post.title}</h1>
+            <p>{post.explain}</p>
+            <p>{post.testinput}</p>
+            <p>{post.testoutput}</p>
             <select value={value} onChange={(e) => setValue(e.target.value)}>
                 <option value="c">c</option>
                 <option value="cpp">cpp</option>
@@ -46,6 +58,7 @@ export default function Post() {
                 }}
             />
             <Button onClick={runCode}>Run</Button>
+            <p>{post.example}</p>
         </div>
     )
 }
\ No newline at end of file