Add full support for difficulty pages.

+import { Link } from "@nextui-org/react";
+import { getPostsByDifficulty } from "../../api/post";
+import { useState } from "react";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+export default function Popular() {
+    const [posts, setPosts] = useState([]);
+    const router = useRouter();
+    useEffect(() => {
+        getPostsByDifficulty(3).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 (
+        <div className="ml-10 mr-10">
+            <ul>
+                {posts.map(post => (
+                    <li key={post.id}>
+                        <a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
+                        duration-100 transform hover:text-white text-2xl">
+                            {post.title}
+                        </a>
+                        <span className="float-right">{DateType(post.createdAt)}</span>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
\ No newline at end of file

@@ -2,20 +2,33 @@ import { Link } from "@nextui-org/react";
 import { getPostsByDifficulty } from "../../api/post";
 import { getPostsByDifficulty } from "../../api/post";
 import { useState } from "react";
 import { useState } from "react";
 import { useEffect } from "react";
 import { useEffect } from "react";
+import { useRouter } from "next/router";
 
 
 export default function Popular() {
 export default function Popular() {
     const [posts, setPosts] = useState([]);
     const [posts, setPosts] = useState([]);
+    const router = useRouter();
     useEffect(() => {
     useEffect(() => {
         getPostsByDifficulty(1).then(setPosts);
         getPostsByDifficulty(1).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 className="ml-10 mr-10">
             <ul>
             <ul>
                 {posts.map(post => (
                 {posts.map(post => (
                     <li key={post.id}>
                     <li key={post.id}>
-                        <Link href={`/post/${post.id}`}>
-                            <a>{post.title}</a>
-                        </Link>
+                        <a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
+                        duration-100 transform hover:text-white text-2xl">
+                            {post.title}
+                        </a>
+                        <span className="float-right">{DateType(post.createdAt)}</span>
                     </li>
                     </li>
                 ))}
                 ))}
             </ul>
             </ul>

@@ -2,20 +2,33 @@ import { Link } from "@nextui-org/react";
 import { getPostsByDifficulty } from "../../api/post";
 import { getPostsByDifficulty } from "../../api/post";
 import { useState } from "react";
 import { useState } from "react";
 import { useEffect } from "react";
 import { useEffect } from "react";
+import { useRouter } from "next/router";
 
 
 export default function Popular() {
 export default function Popular() {
     const [posts, setPosts] = useState([]);
     const [posts, setPosts] = useState([]);
+    const router = useRouter();
     useEffect(() => {
     useEffect(() => {
         getPostsByDifficulty(2).then(setPosts);
         getPostsByDifficulty(2).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 className="ml-10 mr-10">
             <ul>
             <ul>
                 {posts.map(post => (
                 {posts.map(post => (
                     <li key={post.id}>
                     <li key={post.id}>
-                        <Link href={`/post/${post.id}`}>
-                            <a>{post.title}</a>
-                        </Link>
+                        <a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
+                        duration-100 transform hover:text-white text-2xl">
+                            {post.title}
+                        </a>
+                        <span className="float-right">{DateType(post.createdAt)}</span>
                     </li>
                     </li>
                 ))}
                 ))}
             </ul>
             </ul>

 import * as auth from "../api/auth";
 import * as auth from "../api/auth";
-import push from "next/router";
+import { useRouter } from "next/router";
 
 
 export default function Signup() {
 export default function Signup() {
+
+    const router = useRouter();
+
     return (
     return (
-        <div>
-            <h1>Signup</h1>
-            <form onSubmit={handleSubmit}>
-                <label htmlFor="name">Name</label>
-                <input type="text" id="name" />
-                <br />
-                <label htmlFor="email">Email</label>
-                <input type="email" id="email" />
-                <br />
-                <label htmlFor="password">Password</label>
-                <input type="password" id="password" />
-                <br />
-                <label htmlFor="password-confirm">Confirm Password</label>
-                <input type="password" id="password-confirm" />
-                <br />
-                <button type="submit">Signup</button>
-            </form>
+        <div className="flex h-auto">
+            <div className="w-auto inline-block p-3 rounded-lg m-auto">
+                <h1 className="font-bold text-4xl text-center">회원가입</h1>
+                <form onSubmit={handleSubmit}>
+                    <input type="email" id="email" placeholder="email" className="my-2 rounded-sm" />
+                    <br />
+                    <input type="text" id="name" placeholder="nickname" className="my-2 rounded-sm" />
+                    <br />
+                    <input type="password" id="password" className="my-2 rounded-sm" placeholder="password" />
+                    <br />
+                    <input type="password" id="passwordConfirm" className="my-2 rounded-sm" placeholder="password confirm" />
+                    <br />
+                    <button type="submit" className="mt-2 px-4 py-2 text-base font-semibold text-white transition duration-500 transform bg-blue-300 rounded-lg hover:shadow-lg focus:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-300 motion-reduce:transform-none hover:scale-105 tramsform">Signup</button>
+                </form>
+            </div>
         </div>
         </div>
+
     );
     );
-}
 
 
-function handleSubmit(event) {
-    event.preventDefault();
-    const form = event.target;
-    const name = form.name.value;
-    const email = form.email.value;
-    const password = form.password.value;
-    const passwordConfirm = form.passwordConfirm.value;
-    console.log(name, email, password, passwordConfirm);
-    if (password !== passwordConfirm) {
-        alert("Passwords do not match");
-        return;
+    async function handleSubmit(event) {
+        event.preventDefault();
+        const form = event.target;
+        const name = form.name.value;
+        const email = form.email.value;
+        const password = form.password.value;
+        const passwordConfirm = form.passwordConfirm.value;
+        console.log(name, email, password, passwordConfirm);
+        if (password !== passwordConfirm) {
+            alert("Passwords do not match");
+            return;
+        }
+        const signup = await auth.signup(name, email, password);
+        if (!signup) {
+            alert("Signup failed");
+        }
+        else {
+            alert("Signup success");
+            return router.push("/");
+        }
     }
     }
-    const signup = auth.signup(name, email, password);
-    if(!signup) {
-        alert("Signup failed");
-    }
-    else {
-        alert("Signup success");
-        return push("/");
-    }
-}
\ No newline at end of file
+}
+