design: 댓글이 없는 경우 보이는 메시지 추가

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

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/components/CommentList/CommentList.tsx b/components/CommentList/CommentList.tsx
@@ -10,7 +10,7 @@ interface CommentListProps {
 
 function CommentList({ commentList: comments }: CommentListProps) {
   return (
-    <div className="inquiry-wrapper">
+    <div>
       {!!comments.length ? (
         <ul className="comment-lists">
           {comments.map((comment: IComment) => (
@@ -20,14 +20,17 @@ function CommentList({ commentList: comments }: CommentListProps) {
           ))}
         </ul>
       ) : (
-        <div className="no-inquiry-wrapper">
+        // TODO: EmptyContent 컴포넌트 빼내기 가능
+        <div className="flex flex-col items-center justify-center">
           <Image
             src={replayEmptyImage}
             alt="아직 문의가 없습니다"
             width={200}
             height={200}
           />
-          <div className="no-inquiry-text">아직 문의가 없습니다.</div>
+          <div className="text-base font-normal text-gray-400">
+            아직 문의가 없습니다.
+          </div>
         </div>
       )}
     </div>

diff --git a/next.config.js b/next.config.js
@@ -2,7 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com"],
+    domains: [
+      "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+      "flexible.img.hani.co.kr",
+    ],
   },
 };
 

diff --git a/pages/board/[id].tsx b/pages/board/[id].tsx
@@ -50,7 +50,9 @@ function DetailBoard({
       <div className="mb-10">
         <AddComment id={id} setCommentList={setCommentList} />
       </div>
-      <CommentList commentList={commentList} />
+      <div className="flex items-center justify-center">
+        <CommentList commentList={commentList} />
+      </div>
       <ReturnButton href="/boards" text="목록으로 돌아가기" />
     </div>
   );