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>
+        <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}>
                 <form onSubmit={handleSubmit}>
-                <label htmlFor="name">Name</label>
-                <input type="text" id="name" />
+                    <input type="email" id="email" placeholder="email" className="my-2 rounded-sm" />
                     <br />
                     <br />
-                <label htmlFor="email">Email</label>
-                <input type="email" id="email" />
+                    <input type="text" id="name" placeholder="nickname" className="my-2 rounded-sm" />
                     <br />
                     <br />
-                <label htmlFor="password">Password</label>
-                <input type="password" id="password" />
+                    <input type="password" id="password" className="my-2 rounded-sm" placeholder="password" />
                     <br />
                     <br />
-                <label htmlFor="password-confirm">Confirm Password</label>
-                <input type="password" id="password-confirm" />
+                    <input type="password" id="passwordConfirm" className="my-2 rounded-sm" placeholder="password confirm" />
                     <br />
                     <br />
-                <button type="submit">Signup</button>
+                    <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>
                 </form>
             </div>
             </div>
+        </div>
+
     );
     );
-}
 
 
-function handleSubmit(event) {
+    async function handleSubmit(event) {
         event.preventDefault();
         event.preventDefault();
         const form = event.target;
         const form = event.target;
         const name = form.name.value;
         const name = form.name.value;
@@ -36,12 +37,14 @@ function handleSubmit(event) {
             alert("Passwords do not match");
             alert("Passwords do not match");
             return;
             return;
         }
         }
-    const signup = auth.signup(name, email, password);
-    if(!signup) {
+        const signup = await auth.signup(name, email, password);
+        if (!signup) {
             alert("Signup failed");
             alert("Signup failed");
         }
         }
         else {
         else {
             alert("Signup success");
             alert("Signup success");
-        return push("/");
+            return router.push("/");
+        }
     }
     }
 }
 }
+