Merge pull request #360 from oduck-team/style/352

style: 이번주 TOP10 애니가 없을때 보여질 UI 구현
oduck-team · Mar 5, 2024 · 21caab7 · 21caab7
2 parents 38486ca + e60d35c
commit 21caab7
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 3 deletions.
diff --git 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/NotExistAnime.style.ts 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
@@ -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
@@ -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,
@@ -68,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)}
                     >
@@ -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>
 
@@ -89,12 +97,16 @@ 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>
                   </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
@@ -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"]}

diff --git 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
@@ -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`