From ec5c53e7813f0c06984d3753ca92250672cd387b Mon Sep 17 00:00:00 2001
From: presentKey <kim.hyeonjae4@gmail.com>
Date: Tue, 5 Mar 2024 00:37:40 +0900
Subject: [PATCH 1/2] =?UTF-8?q?style:=20=EC=9D=B4=EB=B2=88=EC=A3=BC=20TOP1?=
 =?UTF-8?q?0=20=EC=95=A0=EB=8B=88=EA=B0=80=20=EC=97=86=EC=9D=84=EB=95=8C?=
 =?UTF-8?q?=20=EB=B3=B4=EC=97=AC=EC=A7=88=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AnimeRanking/NotExistAnime.style.ts       | 37 +++++++++++++++++++
 .../components/AnimeRanking/NotExistAnime.tsx | 14 +++++++
 .../animes/components/AnimeRanking/index.tsx  | 12 ++++++
 .../animes/components/AnimeRanking/style.ts   |  1 +
 4 files changed, 64 insertions(+)
 create mode 100644 src/features/animes/components/AnimeRanking/NotExistAnime.style.ts
 create mode 100644 src/features/animes/components/AnimeRanking/NotExistAnime.tsx

diff --git a/src/features/animes/components/AnimeRanking/NotExistAnime.style.ts b/src/features/animes/components/AnimeRanking/NotExistAnime.style.ts
new file mode 100644
index 00000000..32488b27
--- /dev/null
+++ b/src/features/animes/components/AnimeRanking/NotExistAnime.style.ts
@@ -0,0 +1,37 @@
+import styled from "@emotion/styled";
+
+export const NotExistAnimeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  background: rgb(255, 255, 255);
+  background: linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(244, 244, 245, 1) 80%
+  );
+  border-radius: 5px;
+  ${({ theme }) => theme.typo["body-3-m"]}
+  color: ${({ theme }) => theme.colors.neutral[70]};
+
+  & img {
+    width: 80px;
+    height: 80px;
+    ${({ theme }) => theme.mq("sm")} {
+      width: 100px;
+      height: 100px;
+      margin-top: 16px;
+    }
+  }
+
+  & span {
+    margin-top: 8px;
+
+    ${({ theme }) => theme.mq("sm")} {
+      margin-top: 16px;
+    }
+  }
+`;
diff --git a/src/features/animes/components/AnimeRanking/NotExistAnime.tsx b/src/features/animes/components/AnimeRanking/NotExistAnime.tsx
new file mode 100644
index 00000000..8fc15bed
--- /dev/null
+++ b/src/features/animes/components/AnimeRanking/NotExistAnime.tsx
@@ -0,0 +1,14 @@
+import { NotExistAnimeContainer } from "./NotExistAnime.style";
+
+interface NotExistAnimeProps {
+  message?: string;
+}
+
+export default function NotExistAnime({ message }: NotExistAnimeProps) {
+  return (
+    <NotExistAnimeContainer>
+      <img src="/logo/logo-empty.png" alt="집계중" />
+      {message && <span>{message}</span>}
+    </NotExistAnimeContainer>
+  );
+}
diff --git a/src/features/animes/components/AnimeRanking/index.tsx b/src/features/animes/components/AnimeRanking/index.tsx
index c9fb445e..9241b16a 100644
--- a/src/features/animes/components/AnimeRanking/index.tsx
+++ b/src/features/animes/components/AnimeRanking/index.tsx
@@ -7,6 +7,7 @@ import { useApi } from "@/hooks/useApi";
 import { SyncingMainCarousel, SyncingSubCarousel } from "@/libs/carousel";
 
 import AnimeRankingLoading from "./AnimeRankingLoading";
+import NotExistAnime from "./NotExistAnime";
 import {
   HighlightItem,
   HighlightItemContainer,
@@ -78,6 +79,13 @@ export default function AnimeRanking({ title }: AnimeRankingProps) {
                     </HighlightItem>
                   </HighlightItemContainer>
                 ))}
+
+                {Array.from({ length: 10 - animes.length }, (_, i) => (
+                  <NotExistAnime
+                    key={i + animes.length + 1}
+                    message="애니 리뷰를 부탁해요."
+                  />
+                ))}
               </Slider>
             </MainCarouselContainer>
 
@@ -95,6 +103,10 @@ export default function AnimeRanking({ title }: AnimeRankingProps) {
                     <div>{ani.title}</div>
                   </SliderItem>
                 ))}
+
+                {Array.from({ length: 10 - animes.length }, (_, i) => (
+                  <NotExistAnime key={i + animes.length + 1} />
+                ))}
                 {/* carousel 레이아웃 망가짐 방지: div 추가  */}
                 <div />
               </Slider>
diff --git a/src/features/animes/components/AnimeRanking/style.ts b/src/features/animes/components/AnimeRanking/style.ts
index bc1a9b60..a1062283 100644
--- a/src/features/animes/components/AnimeRanking/style.ts
+++ b/src/features/animes/components/AnimeRanking/style.ts
@@ -112,6 +112,7 @@ export const HighlightItem = styled.div<ItemProps>`
   flex-direction: column;
   justify-content: flex-end;
   transition: all 0.5s;
+  z-index: 10;
 
   & > h3 {
     ${({ theme }) => theme.typo["body-3-r"]}

From e60d35c4dd0bd71d07f949559d469260b6f6caba Mon Sep 17 00:00:00 2001
From: presentKey <kim.hyeonjae4@gmail.com>
Date: Tue, 5 Mar 2024 01:39:11 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EA=B0=80=20=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=ED=9A=8C?=
 =?UTF-8?q?=EC=83=89=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/animes/components/AnimeCard/index.tsx            | 2 +-
 src/features/animes/components/AnimeRanking/index.tsx         | 4 ++--
 src/features/reviews/components/ReviewCard/Animation.style.ts | 1 +
 .../users/routes/Profile/TabMenu/BookmarkCard.style.ts        | 1 +
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/animes/components/AnimeCard/index.tsx b/src/features/animes/components/AnimeCard/index.tsx
index 645159e1..8aabffee 100644
--- a/src/features/animes/components/AnimeCard/index.tsx
+++ b/src/features/animes/components/AnimeCard/index.tsx
@@ -44,7 +44,7 @@ export default function AnimeCard({
       display={display}
     >
       <div className="image-container">
-        <Image className="image" image={thumbnail} />
+        <Image className="image" image={thumbnail || ""} />
       </div>
       <InfoContainer>
         <Title>{title}</Title>
diff --git a/src/features/animes/components/AnimeRanking/index.tsx b/src/features/animes/components/AnimeRanking/index.tsx
index 9241b16a..11501d72 100644
--- a/src/features/animes/components/AnimeRanking/index.tsx
+++ b/src/features/animes/components/AnimeRanking/index.tsx
@@ -69,7 +69,7 @@ export default function AnimeRanking({ title }: AnimeRankingProps) {
                 {animes.map((ani, i) => (
                   <HighlightItemContainer key={ani.animeId}>
                     <HighlightItem
-                      image={ani.thumbnail}
+                      image={ani.thumbnail || ""}
                       data-anime-id={ani.animeId}
                       onClick={(e: React.MouseEvent) => handleClick(e)}
                     >
@@ -97,7 +97,7 @@ export default function AnimeRanking({ title }: AnimeRankingProps) {
               >
                 {animes.map((ani, i) => (
                   <SliderItem key={ani.animeId}>
-                    <SliderItemImage image={ani.thumbnail}>
+                    <SliderItemImage image={ani.thumbnail || ""}>
                       <Rank className="sub-carousel">{i + 1}</Rank>
                     </SliderItemImage>
                     <div>{ani.title}</div>
diff --git a/src/features/reviews/components/ReviewCard/Animation.style.ts b/src/features/reviews/components/ReviewCard/Animation.style.ts
index 7cb759df..ce8cc5f3 100644
--- a/src/features/reviews/components/ReviewCard/Animation.style.ts
+++ b/src/features/reviews/components/ReviewCard/Animation.style.ts
@@ -12,6 +12,7 @@ export const ImageContainer = styled.div`
   overflow: hidden;
   border-radius: 4px;
   margin-right: 8px;
+  background-color: #d9d9d9;
 `;
 
 export const Image = styled.img`
diff --git a/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts b/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts
index f5b248e1..b1344a10 100644
--- a/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts
+++ b/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts
@@ -22,6 +22,7 @@ export const ImageContainer = styled.div`
   overflow: hidden;
   border-radius: 4px;
   margin-right: 8px;
+  background-color: #d9d9d9;
 `;
 
 export const Image = styled.img`