design: 게시글 상세 페이지 디자인 추가

codeit-bootcamp-frontend · Aug 18, 2024 · 5286e59 · 5286e59
1 parent 1d8d058
commit 5286e59
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 30 deletions.
diff --git 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
@@ -8,15 +8,16 @@ 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;
 }
 
 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
@@ -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,19 +16,31 @@ 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}
           alt={`${writer.nickname}`}
           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
@@ -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
@@ -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>