From ef57bfd97841c0c5c3c7eee6446750afa6f4adca Mon Sep 17 00:00:00 2001
From: lybell-art <futireflugel@gmail.com>
Date: Tue, 20 Aug 2024 18:34:58 +0900
Subject: [PATCH] =?UTF-8?q?[modify]=20=EA=B8=B0=EB=8C=80=ED=8F=89=20?=
 =?UTF-8?q?=EC=97=86=EC=9D=84=20=EB=95=8C=20=ED=8F=B4=EB=B0=B1=20UI=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(resolve=20#84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comment/commentCarousel/CommentCarousel.jsx      |  3 +++
 .../commentCarousel/CommentCarouselNoData.jsx        | 12 ++++++++++++
 src/mainPage/features/comment/mock.js                |  2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/mainPage/features/comment/commentCarousel/CommentCarouselNoData.jsx

diff --git a/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx b/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx
index 8cd7eda1..e607e98c 100644
--- a/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx
+++ b/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@common/dataFetch/getQuery.js";
 import { fetchServer } from "@common/dataFetch/fetchServer.js";
+import CommentCarouselNoData from "./CommentCarouselNoData.jsx";
 import AutoScrollCarousel from "../autoScrollCarousel";
 import { formatDate } from "@common/utils.js";
 import { EVENT_ID } from "@common/constants.js";
@@ -14,6 +15,8 @@ function mask(string) {
 function CommentCarousel() {
   const { comments } = useQuery("comment-data", () => fetchServer(`/api/v1/comment/${EVENT_ID}`));
 
+  if(comments.length === 0) return <CommentCarouselNoData />;
+
   return (
     <div className="w-full h-[29rem]">
       <AutoScrollCarousel speed={0.1} gap={28}>
diff --git a/src/mainPage/features/comment/commentCarousel/CommentCarouselNoData.jsx b/src/mainPage/features/comment/commentCarousel/CommentCarouselNoData.jsx
new file mode 100644
index 00000000..2ed1dae0
--- /dev/null
+++ b/src/mainPage/features/comment/commentCarousel/CommentCarouselNoData.jsx
@@ -0,0 +1,12 @@
+function CommentCarouselNoData() {
+  return (
+    <div className="w-full h-[29rem] flex justify-center items-center px-6">
+      <div className="w-full max-w-[1200px] h-96 bg-neutral-50 flex flex-col justify-center items-center gap-4">
+        <img src="/icons/error.svg" alt="기대평 없음" width="120" height="120" />
+        <p className="text-body-l text-red-500 font-bold">기대평이 없어요!</p>
+      </div>
+    </div>
+  );
+}
+
+export default CommentCarouselNoData;
diff --git a/src/mainPage/features/comment/mock.js b/src/mainPage/features/comment/mock.js
index 72d9c60b..c48122b8 100644
--- a/src/mainPage/features/comment/mock.js
+++ b/src/mainPage/features/comment/mock.js
@@ -2,7 +2,7 @@ import { http, HttpResponse } from "msw";
 import { makeLorem } from "@common/mock/utils.js";
 
 function getCommentMock() {
-  return Array.from({ length: 2 }, (_, i) => {
+  return Array.from({ length: 20 }, (_, i) => {
     return {
       id: i * 100 + Math.floor(Math.random() * 99),
       content: makeLorem(5, 12),