Add Runner Test without Post

 node_modules
-a.out
-tmp.c
-
+.next

 module.exports = {
   reactStrictMode: true,
 }
+const removeImports = require("next-remove-imports")();
+module.exports = removeImports({
+  experimental: { esmExternals: true }
+});
\ No newline at end of file

@@ -9,9 +9,12 @@
   },
   "dependencies": {
     "@heroicons/react": "^1.0.5",
+    "@nextui-org/react": "^1.0.1-alpha.57",
+    "@uiw/react-textarea-code-editor": "^1.4.4",
     "axios": "^0.24.0",
     "next": "12.0.4",
     "next-auth": "^3.29.0",
+    "next-remove-imports": "^1.0.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "semantic-ui-react": "^2.0.4",
@@ -22,6 +25,7 @@
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.4",
     "postcss": "^8.3.11",
+    "react-syntax-highlighter": "^15.4.5",
     "tailwindcss": "^2.2.19"
   }
 }

@@ -13,6 +13,7 @@ export const login = async (email, password) => {
     }
     console.log(response.data.access_token)
     useSession.accessToken = response.data.access_token;
+    console.log("로그인" + useSession.accessToken);
     return response.data;
 }
 
@@ -56,6 +57,7 @@ export const refreshToken = async () => {
 }
 
 export const validateToken = async () => {
+    console.log(useSession.accessToken);
     const response = await axios.post(`${SERVER_BASE_URL}/auth/validate`, {
         token: useSession.accessToken,
     });

@@ -19,7 +19,7 @@ export const newPost = async (title, content, privat) => {
 }
 
 export const getPostbyId = async (id) => {
-    const response = await axios.get(`${SERVERBASE_URL}/post/${id}`);
+    const response = await axios.get(`${SERVER_BASE_URL}/post/${id}`);
     if (response.status !== 200) {
         throw new Error('Failed to get post!');
     }

+export * from './runner'
\ No newline at end of file

+import * as auth from '../auth';
+import axios from 'axios';
+import { SERVER_BASE_URL } from '..';
+import { useRouter } from 'next/dist/client/router';
+import { useSession } from 'next-auth/client';
+
+export const run = async (code, type) => {
+    if (!auth.validateToken()) {
+        throw new Error("plz login");
+    }
+    const response = await axios.post(`${SERVER_BASE_URL}/runner`, {
+        token: auth.getToken(),
+        code,
+        type,
+        input: '',
+    });
+    return response.data.output;
+}
\ No newline at end of file

+import { Link } from "@nextui-org/react"
 import router from "next/router"
+import { Button } from "semantic-ui-react"
 
 export default function Nav() {
+    const moverun = () => {
+        router.push("/run")
+    }
     return (
         <nav className="navbar">
             <div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
@@ -8,6 +13,9 @@ export default function Nav() {
                 <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>

 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 { Button } from "semantic-ui-react";
 
+const CodeEditor = dynamic(
+    () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
+    { ssr: false }
+);
 
 export default function Post() {
     const router = useRouter()
     const { id } = router.query
     const post = getPostbyId(id)
+
+    const [value, setValue] = useState("c");
+
+    const [code, setCode] = useState("");
+
+    const runCode = () => {
+        Runner.run(code, value);
+    }
+
     return (
         <div>
             <p>{post.title}</p>
             <p>{post.body}</p>
+            <select value={value} onChange={(e) => setValue(e.target.value)}>
+                <option value="c">c</option>
+                <option value="cpp">cpp</option>
+                <option value="js">javascript</option>
+            </select>
+            <CodeEditor
+                value={code}
+                language={value}
+                placeholder="Please Enter the Code."
+                onChange={(e) => setCode(e.target.value)}
+                padding={15}
+                style={{
+                    fontSize: 12,
+                    backgroundColor: "#f5f5f5",
+                    fontFamily:
+                        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
+                }}
+            />
+            <Button onClick={runCode}>Run</Button>
         </div>
     )
 }
\ No newline at end of file

+import "@uiw/react-textarea-code-editor/dist.css";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { Button } from "semantic-ui-react";
+import { run } from "../api/runner/runner";
+import { useRouter } from "next/dist/client/router";
+
+const CodeEditor = dynamic(
+    () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
+    { ssr: false }
+);
+
+export default function Run() {
+    const router = useRouter();
+
+    const [value, setValue] = useState("c");
+
+    const [code, setCode] = useState("");
+
+    const [answer, setAnswer] = useState("");
+
+    const runCode = async function () {
+        var result = await run(code, value);
+        console.log(result);
+        setAnswer(result);
+    }
+
+    return (<div>
+        <select value={value} onChange={(e) => setValue(e.target.value)}>
+            <option value="c">c</option>
+            <option value="cpp">cpp</option>
+            <option value="js">javascript</option>
+        </select>
+        <CodeEditor
+            value={code}
+            language={value}
+            placeholder="Please Enter the Code."
+            onChange={(e) => setCode(e.target.value)}
+            padding={15}
+            style={{
+                fontSize: 12,
+                backgroundColor: "#f5f5f5",
+                fontFamily:
+                    "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
+            }}
+        />
+        <Button onClick={runCode}>Run</Button>
+        <div>{answer}</div>
+    </div>);
+}
\ No newline at end of file