Change some components, css

-export const SERVER_BASE_URL = 'http://localhost:4000';
\ No newline at end of file
+export const SERVER_BASE_URL = 'http://128.199.19.101:4000/';
\ No newline at end of file

 function Footer() {
 function Footer() {
     return (
     return (
-        <div>Copyright @ SungJin. All right reserved.</div>
+        <div className="footer">
+            <span>Copyright @ </span>
+            <a href="https://github.com/taintlesscupcake" className="to-blue-400">SungJin</a>
+            <span>. All right reserved.</span>
+        </div >
     )
     )
 }
 }
 
 

@@ -12,6 +12,7 @@ import Islogin from "./islogin"
 import Link from "next/link"
 import Link from "next/link"
 
 
 function Header() {
 function Header() {
+
     return (
     return (
         <header className="flex flex-col sm:flex-row m-5 justify-between items-center">
         <header className="flex flex-col sm:flex-row m-5 justify-between items-center">
             <Link href="/" passHref>
             <Link href="/" passHref>
@@ -20,14 +21,13 @@ function Header() {
                     <p className="text-7xl font-extrabold" >Learn In Web</p>
                     <p className="text-7xl font-extrabold" >Learn In Web</p>
                 </div></Link>
                 </div></Link>
             <div className="flex flex-grow justify-evenly max-w-sm">
             <div className="flex flex-grow justify-evenly max-w-sm">
-                <HeaderItem title='HOME' Icon={HomeIcon} />
-                <HeaderItem title='STAR' Icon={StarIcon} />
-                <HeaderItem title='SEARCH' Icon={SearchIcon} />
-                <HeaderItem title='ACCOUNT' Icon={UserIcon} />
+                <HeaderItem title='HOME' Icon={HomeIcon} link="/" />
+                <HeaderItem title='STAR' Icon={StarIcon} link="/" />
+                <HeaderItem title='SEARCH' Icon={SearchIcon} link="/" />
+                <HeaderItem title='ACCOUNT' Icon={UserIcon} link="/" />
+                <Islogin />
             </div>
             </div>
-            <Islogin />
         </header>
         </header>
-
     )
     )
 }
 }
 
 

-function HeaderItem({ Icon, title }) {
+import Link from "next/link"
+
+function HeaderItem({ Icon, title, link }) {
     return (
     return (
-        <div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white">
-            <Icon className="h-8 mb-1 group-hover:animate-bounce"/>
-            <p className="opacity-0 group-hover:opacity-100 tracking-widest">{title}</p>
-        </div>
+        <Link href={link}>
+            <div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white">
+                <Icon className="h-8 mb-1 group-hover:animate-bounce" />
+                <p className="opacity-0 group-hover:opacity-100 tracking-widest">{title}</p>
+            </div>
+        </Link>
     )
     )
 }
 }
 
 

@@ -8,14 +8,24 @@ export default function Popular() {
     useEffect(() => {
     useEffect(() => {
         getPosts(10).then(setPosts);
         getPosts(10).then(setPosts);
     }, []);
     }, []);
+    
+    const DateType = (date) => {
+        console.log(date);
+        const dateObj = new Date(date);
+        const month = dateObj.toLocaleString("default", { month: "long" });
+        const day = dateObj.getDate();
+        const year = dateObj.getFullYear();
+        return dateObj.toLocaleString();
+    }
     return (
     return (
         <div>
         <div>
             <ul>
             <ul>
                 {posts.map(post => (
                 {posts.map(post => (
                     <li key={post.id}>
                     <li key={post.id}>
-                        <Link href={`/post/${post.id}`}>
+                        <Link href={`/post/${post.id}`} className="text-xl">
                             <a>{post.title}</a>
                             <a>{post.title}</a>
                         </Link>
                         </Link>
+                        <span className="float-right">{DateType(post.createdAt)}</span>
                     </li>
                     </li>
                 ))}
                 ))}
             </ul>
             </ul>

@@ -6,8 +6,10 @@ import Footer from '../components/Footer'
 function MyApp({ Component, pageProps }) {
 function MyApp({ Component, pageProps }) {
   return (
   return (
     <div>
     <div>
-      <Header />
-      <Nav />
+      <div className="main">
+        <Header />
+        <Nav />
+      </div>
       <Component {...pageProps} />
       <Component {...pageProps} />
       <Footer />
       <Footer />
     </div>
     </div>

@@ -11,8 +11,10 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       </Head>
       {/* 기본 컨텐츠 */}
       {/* 기본 컨텐츠 */}
-      <Header as='h3' textAlign='center'>인기 문제</Header>
-      <Popular />
+      <div className='ui container fixed left-10'>
+        <h3 className="text-3xl font-bold">인기 문제</h3>
+        <Popular />
+      </div>
     </div>
     </div>
   )
   )
 }
 }
\ No newline at end of file

@@ -4,6 +4,7 @@ import "@uiw/react-textarea-code-editor/dist.css";
 import dynamic from "next/dynamic";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import { useEffect, useState } from "react";
 import { Button } from "semantic-ui-react";
 import { Button } from "semantic-ui-react";
+import { run } from "../../api/runner";
 
 
 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),
@@ -29,14 +30,17 @@ export default function Post() {
 
 
     const [code, setCode] = useState("");
     const [code, setCode] = useState("");
 
 
-    const runCode = () => {
-        Runner.run(code, value);
+    const [answer, setAnswer] = useState("asdf");
+
+    const runCode = async function () {
+        var result = await run(code, value);
+        console.log(result);
+        setAnswer(`출력 : ${result}`);
     }
     }
 
 
     return (
     return (
         <div>
         <div>
-            <h1>{post.title}</h1>
-            <p>{post.explain}</p>
+            <h3 className="text-3xl font-bold">{post.title}</h3>
             <p>{post.testinput}</p>
             <p>{post.testinput}</p>
             <p>{post.testoutput}</p>
             <p>{post.testoutput}</p>
             <select value={value} onChange={(e) => setValue(e.target.value)}>
             <select value={value} onChange={(e) => setValue(e.target.value)}>
@@ -44,20 +48,29 @@ export default function Post() {
                 <option value="cpp">cpp</option>
                 <option value="cpp">cpp</option>
                 <option value="js">javascript</option>
                 <option value="js">javascript</option>
             </select>
             </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>
+            <span className="left-100 fixed text-2xl font-semibold">문제 설명</span>
+            <br></br>
+            <div className="w-6/12 inline-block">
+                <CodeEditor
+                    value={code}
+                    language={value}
+                    placeholder="Please Enter the Code."
+                    onChange={(e) => setCode(e.target.value)}
+                    padding={15}
+                    style={{
+                        fontSize: 15,
+                        backgroundColor: "#f5f5f5",
+                        fontFamily:
+                            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
+                    }}
+                    className="w-8/12 h-96 rounded"
+
+                />
+            </div>
+            <div className="w-6/12 inline-block align-top">{post.explain}</div>
+            <Button onClick={runCode} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Run</Button>
+            <p>{runCode}</p>
+            
             <p>{post.example}</p>
             <p>{post.example}</p>
         </div>
         </div>
     )
     )

@@ -16,6 +16,27 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 }
 
 
+h3{
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5;
+  margin-bottom: 0.5rem;
+}
+
+.main {
+  margin-bottom: 2rem;
+}
+
+span.left-100.fixed {
+  left: 50%;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
 a {
 a {
   color: inherit;
   color: inherit;
   text-decoration: none;
   text-decoration: none;