Add full support comment, with some design

@@ -66,6 +66,9 @@ export const refreshToken = async () => {
 
 export const validateToken = async () => {
     console.log(useSession.accessToken);
+    if(useSession.accessToken == undefined){
+        return false;
+    }
     const response = await axios.post(`${SERVER_BASE_URL}/auth/validate`, {
         token: useSession.accessToken,
     }).catch(err => {

@@ -12,7 +12,7 @@ export const newPost = async (
     difficulty,
 ) => {
     if (!auth.validateToken()) {
-        throw new Error("plz login");
+        throw alert("Please login first.");
     }
     const response = await axios.post(`${SERVER_BASE_URL}/post`, {
         token: auth.getToken(),
@@ -60,6 +60,9 @@ export const getPostsByDifficulty = async (difficulty) => {
 }
 
 export const createComment = async (id, content) => {
+    if (!await auth.validateToken()) {
+        throw alert("Please login first.");
+    }
     const response = await axios.post(`${SERVER_BASE_URL}/post/comment/${id}`, {
         token : useSession.accessToken,
         content,

@@ -6,7 +6,7 @@ import { useSession } from 'next-auth/client';
 
 export const run = async (code, type) => {
     if (!auth.validateToken()) {
-        throw new Error("plz login");
+        throw alert("Please login first.");
     }
     const response = await axios.post(`${SERVER_BASE_URL}/runner`, {
         token: auth.getToken(),

@@ -26,7 +26,7 @@ export default function Popular() {
                     <li key={post.id}>
                         <a onClick={() => router.push(`/post/${post.id}`)} className="cursor-pointer transition
                         duration-100 transform hover:text-white text-2xl">
-                            <a>{post.title}</a>
+                            {post.title}
                         </a>
                         <span className="float-right">{DateType(post.createdAt)}</span>
                     </li>

@@ -11,7 +11,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       {/* 기본 컨텐츠 */}
-      <div className='ui container fixed left-10'>
+      <div className='ui container relative left-10'>
         <h3 className="text-3xl font-bold">인기 문제</h3>
         <Popular />
       </div>

@@ -7,7 +7,7 @@ export default function Login() {
 
     return (
         <div className="flex h-auto">
-            <div className="w-auto inline-block p-3 bg-black rounded-lg m-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"/>

@@ -36,22 +36,24 @@ export default function Post() {
     const [comment, setComment] = useState("");
 
     const addComment = async () => {
+        console.log("comment is " + comment);
         const { id } = router.query
-        const response = await createComment(id, comment)
+        await createComment(id, comment)
     }
 
     const displayComment = () => {
         console.log(post.comments);
         if (post.comments != undefined) {
             return post.comments.map(comment => (
-                <div className="w-full">
-                    <div className="w-full flex justify-between">
-                        <div className="w-1/2">
-                            <span className="text-gray-700">{comment.username}</span>
+                <div className="flex w-full border-carbon border-4 rounded-xl my-2">
+                    <div className="w-full justify-between">
+                        <div className=" mx-2">
+                            <p className="text-black w-[90%]">{comment.content}</p>
+                            <span className="text-black float-right">{`작성자 : ${comment.author.name}`}</span>
                         </div>
                     </div>
-                </div>)
-            )
+                </div>
+            ));
         }
         return <div></div>
     }