From 5286e590ec5cac17c1d8547b50e6c4d52ba6cf31 Mon Sep 17 00:00:00 2001
From: Jeongmin Oh <ojm51@naver.com>
Date: Sun, 18 Aug 2024 23:18:47 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AddComment.tsx                | 12 ++++----
 components/AllArticleList/AllArticle.tsx |  5 ++--
 components/CommentList/Comment.tsx       | 26 +++++++++++++----
 components/DetailArticle.tsx             | 36 ++++++++++++++----------
 pages/board/[id].tsx                     |  8 ++++--
 5 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/components/AddComment.tsx b/components/AddComment.tsx
index 9f0659ccf..24fdeeee3 100644
--- a/components/AddComment.tsx
+++ b/components/AddComment.tsx
@@ -69,11 +69,13 @@ function AddComment({ id, setCommentList }: AddCommentProps) {
           />
         );
       })}
-      <AddButton
-        buttonText="등록"
-        isFormComplete={isFormComplete}
-        onClick={postComment}
-      />
+      <div className="text-right">
+        <AddButton
+          buttonText="등록"
+          isFormComplete={isFormComplete}
+          onClick={postComment}
+        />
+      </div>
     </div>
   );
 }
diff --git a/components/AllArticleList/AllArticle.tsx b/components/AllArticleList/AllArticle.tsx
index 120ac11cf..bf830fe76 100644
--- a/components/AllArticleList/AllArticle.tsx
+++ b/components/AllArticleList/AllArticle.tsx
@@ -8,6 +8,7 @@ import Image from "next/image";
 import profileImage from "@/assets/images/img_profile.png";
 import likeIconFull from "@/assets/images/ic_heart_full.png";
 import likeIconEmpty from "@/assets/images/ic_heart_empty.png";
+import defaultProductImage from "@/assets/images/img_product_empty.png";
 
 interface AllArticleProps {
   article: Article;
@@ -15,8 +16,8 @@ interface AllArticleProps {
 
 function AllArticle({ article }: AllArticleProps) {
   const { id, title, image, writer, likeCount, createdAt } = article;
-
   const [isLikeClicked, setIsLikeClicked] = useState<boolean>(false);
+  const productImage = image || defaultProductImage;
 
   const handleLikeButtonClick = () => {
     setIsLikeClicked((prevIsLikeClicked) => !prevIsLikeClicked);
@@ -28,7 +29,7 @@ function AllArticle({ article }: AllArticleProps) {
         <h4 className={styles.title}>{title}</h4>
         <Image
           className={styles.productImage}
-          src={image}
+          src={productImage}
           alt="상품 이미지"
           width={72}
           height={72}
diff --git a/components/CommentList/Comment.tsx b/components/CommentList/Comment.tsx
index 038497a67..59fb7e750 100644
--- a/components/CommentList/Comment.tsx
+++ b/components/CommentList/Comment.tsx
@@ -1,7 +1,9 @@
 import { IComment } from "@/types/comment";
 import getTimeElapsed from "@/lib/getTimeElapsed";
+
 import Image from "next/image";
 import defaultProfileImage from "@/assets/images/img_profile.png";
+import kebabMenuIcon from "@/assets/images/ic_kebab.png";
 
 interface CommentProps {
   comment: IComment;
@@ -14,9 +16,19 @@ function Comment({ comment }: CommentProps) {
   const timeElapsed = getTimeElapsed(new Date(updatedAt));
 
   return (
-    <div className="comment-wrapper">
-      <div className="comment-content">{content}</div>
-      <div className="writer-wrapper">
+    <div className="mb-6 border-b border-gray-200 bg-[#fcfcfc] pb-3">
+      <div className="mb-6 flex items-center justify-between">
+        <div>{content}</div>
+        <button>
+          <Image
+            src={kebabMenuIcon}
+            alt="케밥 메뉴 아아콘"
+            width={24}
+            height={24}
+          />
+        </button>
+      </div>
+      <div className="flex items-center justify-start gap-2">
         <Image
           className="writer image"
           src={profileImage}
@@ -24,9 +36,11 @@ function Comment({ comment }: CommentProps) {
           width={40}
           height={40}
         />
-        <div className="comment-info">
-          <div className="nickname">{writer.nickname}</div>
-          <div className="time-elapsed">{timeElapsed}</div>
+        <div className="flex flex-col items-start justify-start">
+          <div className="text-xs font-normal text-gray-600">
+            {writer.nickname}
+          </div>
+          <div className="text-xs font-normal text-gray-400">{timeElapsed}</div>
         </div>
       </div>
     </div>
diff --git a/components/DetailArticle.tsx b/components/DetailArticle.tsx
index efc5bda06..e8788542a 100644
--- a/components/DetailArticle.tsx
+++ b/components/DetailArticle.tsx
@@ -24,13 +24,15 @@ function DetailArticle({ article }: DetailArticleProps) {
     <section>
       <div className="mb-6 border-b">
         <div className="mb-4 flex items-center justify-between">
-          <h3>{title}</h3>
-          <Image
-            src={kebabMenuIcon}
-            alt="케밥 메뉴 아아콘"
-            width={24}
-            height={24}
-          />
+          <h3 className="text-xl font-bold text-gray-800">{title}</h3>
+          <button>
+            <Image
+              src={kebabMenuIcon}
+              alt="케밥 메뉴 아아콘"
+              width={24}
+              height={24}
+            />
+          </button>
         </div>
         <div className="mb-4 flex items-center justify-start">
           <div className="mr-8 flex items-center justify-start gap-4 border-r">
@@ -41,24 +43,28 @@ function DetailArticle({ article }: DetailArticleProps) {
               height={40}
             />
             <div className="mr-8 flex items-center justify-between gap-2">
-              <h5>{writer.nickname || "Anonymous"}</h5>
-              <h5>{formatDate(createdAt)}</h5>
+              <h5 className="text-sm font-medium text-gray-600">
+                {writer.nickname || "Anonymous"}
+              </h5>
+              <h5 className="text-sm font-normal text-gray-400">
+                {formatDate(createdAt)}
+              </h5>
             </div>
           </div>
-          <div className="flex items-center justify-between gap-1 rounded-full border border-gray-200 px-3 py-1">
-            <button onClick={handleLikeButtonClick}>
+          <button onClick={handleLikeButtonClick}>
+            <div className="flex items-center justify-center gap-1 rounded-full border border-gray-200 px-3 py-1">
               <Image
                 src={isLikeClicked ? likeIconFull : likeIconEmpty}
                 alt="좋아요 아이콘"
                 width={32}
                 height={32}
               />
-            </button>
-            <h5>{likeCount}</h5>
-          </div>
+              <h5 className="text-gray-500">{likeCount}</h5>
+            </div>
+          </button>
         </div>
       </div>
-      <h4>{content}</h4>
+      <h4 className="text-lg font-normal text-gray-800">{content}</h4>
     </section>
   );
 }
diff --git a/pages/board/[id].tsx b/pages/board/[id].tsx
index 8491812a8..20d18fe69 100644
--- a/pages/board/[id].tsx
+++ b/pages/board/[id].tsx
@@ -44,8 +44,12 @@ function DetailBoard({
 
   return (
     <div>
-      <DetailArticle article={article} />
-      <AddComment id={id} setCommentList={setCommentList} />
+      <div className="mb-8">
+        <DetailArticle article={article} />
+      </div>
+      <div className="mb-10">
+        <AddComment id={id} setCommentList={setCommentList} />
+      </div>
       <CommentList commentList={commentList} />
       <ReturnButton href="/boards" text="목록으로 돌아가기" />
     </div>