refactor: 애니 목록 페이지에서 카드 컴포넌트 변경 #305

src/features/animes/components/AnimeCard/index.tsx

@@ -1,5 +1,4 @@
 import { Star } from "@phosphor-icons/react";
-import { Link } from "react-router-dom";
 
 import { calcStarRatingAvg } from "@/utils/common";
 
@@ -26,6 +25,9 @@ export interface AnimeCardProps {
 
   /** 페이지 이동 */
   onClick: (animeId: number, e: React.MouseEvent) => void;
+
+  /** style: 사용되는 곳에 따라 width를 다르게 설정 */
+  display?: "default" | "carousel";
 }
 
 export default function AnimeCard({
@@ -34,10 +36,16 @@ export default function AnimeCard({
   title,
   starScoreAvg,
   onClick,
+  display = "default",
 }: AnimeCardProps) {
   return (
-    <AnimeCardContainer onClick={(e: React.MouseEvent) => onClick(id, e)}>
-      <Image image={thumbnail} />
+    <AnimeCardContainer
+      onClick={(e: React.MouseEvent) => onClick(id, e)}
+      display={display}
+    >
+      <div className="image-container">
+        <Image className="image" image={thumbnail} />
+      </div>
       <InfoContainer>
         <Title>{title}</Title>
         <Rating>

src/features/animes/components/AnimeCard/style.ts

@@ -1,16 +1,54 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
+import { AnimeCardProps } from ".";
+
 interface ImageProps {
   image: string;
 }
 
-export const AnimeCardContainer = styled.div`
-  width: 100%;
+export const AnimeCardContainer = styled.div<Pick<AnimeCardProps, "display">>`
+  width: 100%; // display === 'carousel';
+  cursor: pointer;
+
+  ${({ theme, display }) =>
+    display === "default" &&
+    css`
+      width: calc(50% - 4px);
+      &:nth-child(odd) {
+        margin-right: 8px;
+      }
+      ${theme.mq("sm")} {
+        width: calc(33% - 4px);
+        &:nth-child(odd) {
+          margin-right: 0;
+        }
+        &:not(:nth-child(3n)) {
+          margin-right: 8px;
+        }
+      }
+
+      & .image-container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 70%;
+      }
+
+      & .image {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+      }
+    `}
 `;
 
+/** .image className */
 export const Image = styled.div<ImageProps>`
-  height: 110px;
+  height: 110px; // display === 'carousel';
   border-radius: 5px;
   ${({ image }) => css`
     background:
@@ -28,6 +66,7 @@ export const InfoContainer = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
+  margin-top: 8px;
 `;
 
 export const Title = styled.div`

src/features/animes/components/AnimeCardSkeleton/GridAnimeCardSkeleton.style.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+
+export const GridAnimeCardSkeletonContainer = styled.div`
+  width: calc(50% - 4px);
+  &:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  ${({ theme }) => theme.mq("sm")} {
+    width: calc(33% - 4px);
+    &:nth-child(odd) {
+      margin-right: 0;
+    }
+    &:not(:nth-child(3n)) {
+      margin-right: 8px;
+    }
+  }
+`;

src/features/animes/components/AnimeCardSkeleton/GridAnimeCardSkeleton.tsx

@@ -0,0 +1,11 @@
+import { GridAnimeCardSkeletonContainer } from "./GridAnimeCardSkeleton.style";
+
+import AnimeCardSkeleton from ".";
+
+export default function GridAnimeCardSkeleton() {
+  return (
+    <GridAnimeCardSkeletonContainer>
+      <AnimeCardSkeleton />
+    </GridAnimeCardSkeletonContainer>
+  );
+}

src/features/animes/components/AnimeCardSkeleton/index.tsx

@@ -5,9 +5,9 @@ import { AnimeCardSkeletonContainer } from "./style";
 export default function AnimeCardSkeleton() {
   return (
     <AnimeCardSkeletonContainer aria-busy="true">
-      <Skeleton w={160} h={110} />
-      <Skeleton w={130} h={22} />
-      <Skeleton w={40} h={22} />
+      <Skeleton w={"full"} h={110} />
+      <Skeleton w={60} h={22} wUnit="%" />
+      <Skeleton w={30} h={22} wUnit="%" />
     </AnimeCardSkeletonContainer>
   );
 }

src/features/animes/components/AnimeCardSkeleton/style.ts

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 
 export const AnimeCardSkeletonContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;

src/features/animes/components/AnimeMainCarousel/style.ts

@@ -6,6 +6,7 @@ export const AnimeMainCarouselContainer = styled.div<{ image: string }>`
   width: 100%;
   height: 545px;
   overflow: hidden;
+  cursor: pointer;
 
   ${({ theme }) => theme.mq("md")} {
     & .slick-prev,

src/features/animes/components/AnimeRanking/style.ts

@@ -98,6 +98,7 @@ export const HighlightItemContainer = styled.div`
   padding-bottom: 46%;
   margin: 0 auto;
   margin-bottom: 4px;
+  cursor: pointer;
 `;
 
 export const HighlightItem = styled.div<ItemProps>`
@@ -144,6 +145,7 @@ export const SliderItem = styled.div`
   flex-direction: column;
   gap: 8px;
   flex-shrink: 0;
+  cursor: pointer;
 
   & > div:last-of-type {
     ${({ theme }) => theme.typo["body-3-r"]}

src/features/animes/components/AnimeSlide/index.tsx

@@ -36,6 +36,7 @@ export default function AnimeSlide({ title, animes }: AnimeSlideProps) {
         {animes.map((anime) => (
           <AnimeCard
             key={anime.id}
+            display="carousel"
             id={anime.id}
             thumbnail={anime.thumbnail}
             title={anime.title}

src/features/animes/routes/List/index.tsx

@@ -1,27 +1,21 @@
 import { SlidersHorizontal } from "@phosphor-icons/react";
 import { useRef } from "react";
 import { useNavigate } from "react-router";
-import { v4 as uuid } from "uuid";
 
 import Button from "@/components/Button";
 import Empty from "@/components/Error/Empty";
 import Head from "@/components/Head";
 import Header from "@/components/Layout/Header";
-import Skeleton from "@/components/Skeleton";
 import { TabItem } from "@/components/Tabs";
 import AnimeCard from "@/features/animes/components/AnimeCard";
 import useIntersectionObserver from "@/hooks/useIntersectionObserver";
 
 import { AnimeSort } from "../../api/AnimeApi";
+import GridAnimeCardSkeleton from "../../components/AnimeCardSkeleton/GridAnimeCardSkeleton";
 import useFilterAnimes from "../../hooks/useFilterAnimes";
 
 import Filter from "./Filter";
-import {
-  AnimeListContainer,
-  Tabs,
-  Content,
-  AnimeSkeletonContainer,
-} from "./style";
+import { AnimeListContainer, Tabs, Content } from "./style";
 
 const TabItems: TabItem[] = [
   {
@@ -90,12 +84,8 @@ export default function AnimeList() {
         />
         <Content>
           {(animesQuery.isLoading || animesQuery.isFetching) &&
-            Array.from({ length: 7 }, () => (
-              <AnimeSkeletonContainer aria-busy="true" key={uuid()}>
-                <Skeleton w="full" h={152} />
-                <Skeleton w={120} h={24} />
-                <Skeleton w={30} h={24} />
-              </AnimeSkeletonContainer>
+            Array.from({ length: 7 }, (_, i) => (
+              <GridAnimeCardSkeleton key={i} />
             ))}
 
           {!animesQuery.isLoading &&
@@ -107,14 +97,11 @@ export default function AnimeList() {
           {!animesQuery.isLoading && !animesQuery.isFetching && (
             <>
               {animesQuery.data?.pages.map((item) => (
-                <>
-                  <AnimeCard
-                    {...item}
-                    key={item.id}
-                    onClick={() => navigate(`/animes/${item.id}`)}
-                  />
-                  <span>{item.id}</span>
-                </>
+                <AnimeCard
+                  {...item}
+                  key={item.id}
+                  onClick={() => navigate(`/animes/${item.id}`)}
+                />
               ))}
               <div ref={observeRef}></div>
             </>

src/features/animes/routes/List/style.ts

@@ -21,13 +21,7 @@ export const Tabs = styled(BaseTabs)`
 export const Content = styled.div`
   width: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 32px;
+  gap: 32px 0px;
+  flex-wrap: wrap;
   padding: 24px 16px;
 `;
-
-export const AnimeSkeletonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;

src/features/animes/routes/Search/SearchedAnimes/index.tsx

@@ -6,7 +6,7 @@ import Empty from "@/components/Error/Empty";
 import AnimeCard, {
   AnimeCardProps,
 } from "@/features/animes/components/AnimeCard";
-import AnimeCardSkeleton from "@/features/animes/components/AnimeCardSkeleton";
+import GridAnimeCardSkeleton from "@/features/animes/components/AnimeCardSkeleton/GridAnimeCardSkeleton";
 import useIntersectionObserver from "@/hooks/useIntersectionObserver";
 
 import { SearchedAnimesContainer } from "./style";
@@ -41,14 +41,9 @@ export default function SearchedAnimes({
     return (
       <SearchedAnimesContainer>
         <DeferredComponent>
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
+          {Array.from({ length: 4 }, (_, i) => (
+            <GridAnimeCardSkeleton key={i} />
+          ))}
         </DeferredComponent>
       </SearchedAnimesContainer>
     );
@@ -65,15 +60,14 @@ export default function SearchedAnimes({
   return (
     <SearchedAnimesContainer>
       {animes.map((anime) => (
-        <li key={anime.id}>
-          <AnimeCard
-            id={anime.id}
-            thumbnail={anime.thumbnail}
-            title={anime.title}
-            starScoreAvg={anime.starScoreAvg}
-            onClick={() => navigate(`/animes/${anime.id}`)}
-          />
-        </li>
+        <AnimeCard
+          id={anime.id}
+          key={anime.id}
+          thumbnail={anime.thumbnail}
+          title={anime.title}
+          starScoreAvg={anime.starScoreAvg}
+          onClick={() => navigate(`/animes/${anime.id}`)}
+        />
       ))}
       <div ref={observeRef}></div>
     </SearchedAnimesContainer>

src/features/animes/routes/Search/SearchedAnimes/style.ts

@@ -2,6 +2,6 @@ import styled from "@emotion/styled";
 
 export const SearchedAnimesContainer = styled.ul`
   display: flex;
-  gap: 32px 8px;
+  gap: 32px 0;
   flex-wrap: wrap;
 `;

src/features/animes/routes/Search/SuggestedAnimes/index.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router";
 import AnimeCard, {
   AnimeCardProps,
 } from "@/features/animes/components/AnimeCard";
-import AnimeCardSkeleton from "@/features/animes/components/AnimeCardSkeleton";
+import GridAnimeCardSkeleton from "@/features/animes/components/AnimeCardSkeleton/GridAnimeCardSkeleton";
 
 import { SuggestedAnimesContainer } from "./style";
 
@@ -24,10 +24,9 @@ export default function SuggestedAnimes({
       <>
         <h1>이런 애니는 어떠세요?</h1>
         <SuggestedAnimesContainer>
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
-          <AnimeCardSkeleton />
+          {Array.from({ length: 4 }, (_, i) => (
+            <GridAnimeCardSkeleton key={i} />
+          ))}
         </SuggestedAnimesContainer>
       </>
     );
@@ -38,15 +37,14 @@ export default function SuggestedAnimes({
       <h1>이런 애니는 어떠세요?</h1>
       <SuggestedAnimesContainer>
         {animes.map((anime) => (
-          <li key={anime.id}>
-            <AnimeCard
-              id={anime.id}
-              thumbnail={anime.thumbnail}
-              title={anime.title}
-              starScoreAvg={anime.starScoreAvg}
-              onClick={() => navigate(`/animes/${anime.id}`)}
-            />
-          </li>
+          <AnimeCard
+            id={anime.id}
+            key={anime.id}
+            thumbnail={anime.thumbnail}
+            title={anime.title}
+            starScoreAvg={anime.starScoreAvg}
+            onClick={() => navigate(`/animes/${anime.id}`)}
+          />
         ))}
       </SuggestedAnimesContainer>
     </>

src/features/animes/routes/Search/SuggestedAnimes/style.ts

@@ -2,6 +2,6 @@ import styled from "@emotion/styled";
 
 export const SuggestedAnimesContainer = styled.ul`
   display: flex;
-  gap: 32px 8px;
+  gap: 32px 0;
   flex-wrap: wrap;
 `;