Merge pull request #306 from oduck-team/feat/298

feat: 캐러셀 라이브러리 적용
oduck-team · Nov 21, 2023 · 5a1e721 · 5a1e721
2 parents bd8f80b + 81a8a18
commit 5a1e721
Show file tree

Hide file tree

Showing 20 changed files with 609 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,8 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.14.2",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "uuid": "^9.0.1",
     "uuidv4": "^6.2.13",
     "zod": "^3.22.4"
@@ -43,6 +45,7 @@
     "@types/node": "^20.4.5",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-slick": "^0.23.12",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",

diff --git a/src/features/animes/api/AnimeApi.ts b/src/features/animes/api/AnimeApi.ts
@@ -102,19 +102,10 @@ export default class AnimeApi {
   }
 
   async getListOfRecentReviewed(): Promise<getListOfRecentReviewedResponse[]> {
-    return [
-      listOfRecentReviewedMock.at(-1) as getListOfRecentReviewedResponse,
-      ...listOfRecentReviewedMock,
-      listOfRecentReviewedMock[0],
-    ];
+    return listOfRecentReviewedMock;
+
     //FIXME: URI 수정
-    // 무한 캐러셀을 위한 배열 확장
-    // return get<getListOfRecentReviewedResponse[]>(`/someURI`) //
-    //   .then((data) => [
-    //     data.at(-1) as getListOfRecentReviewedResponse,
-    //     ...data,
-    //     data[0],
-    //   ]);
+    // return get<getListOfRecentReviewedResponse[]>(`/someURI`);
   }
 
   async getTOP10List(): Promise<TOP10ListResponse[]> {

diff --git a/src/features/animes/components/AnimeCard/index.tsx b/src/features/animes/components/AnimeCard/index.tsx
@@ -24,31 +24,29 @@ export interface AnimeCardProps {
   /** 애니 평점 */
   starScoreAvg: number;
 
-  /** UI 사이즈 */
-  size?: "md" | "lg";
+  /** 페이지 이동 */
+  onClick: (animeId: number, e: React.MouseEvent) => void;
 }
 
 export default function AnimeCard({
   id,
   thumbnail,
   title,
   starScoreAvg,
-  size,
+  onClick,
 }: AnimeCardProps) {
   return (
-    <AnimeCardContainer size={size}>
-      <Link to={`/animes/${id}`}>
-        <Image image={thumbnail} size={size} />
-        <InfoContainer size={size}>
-          <Title>{title}</Title>
-          <Rating>
-            <Star weight="fill" />
-            <span>
-              {starScoreAvg === 0 ? "평가 전" : calcStarRatingAvg(starScoreAvg)}
-            </span>
-          </Rating>
-        </InfoContainer>
-      </Link>
+    <AnimeCardContainer onClick={(e: React.MouseEvent) => onClick(id, e)}>
+      <Image image={thumbnail} />
+      <InfoContainer>
+        <Title>{title}</Title>
+        <Rating>
+          <Star weight="fill" />
+          <span>
+            {starScoreAvg === 0 ? "평가 전" : calcStarRatingAvg(starScoreAvg)}
+          </span>
+        </Rating>
+      </InfoContainer>
     </AnimeCardContainer>
   );
 }
diff --git a/src/features/animes/components/AnimeCard/style.ts b/src/features/animes/components/AnimeCard/style.ts
@@ -1,28 +1,16 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-interface CardProps {
-  size?: "md" | "lg";
-}
-
-interface ImageProps extends CardProps {
+interface ImageProps {
   image: string;
 }
 
-export const AnimeCardContainer = styled.div<CardProps>`
-  width: ${({ size = "md" }) => (size === "md" ? `160px` : `100%`)};
-  flex-shrink: 0;
-  & > a {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
+export const AnimeCardContainer = styled.div`
+  width: 100%;
 `;
 
 export const Image = styled.div<ImageProps>`
-  width: 100%;
-  height: ${({ size = "md" }) => (size === "md" ? `110px` : `152px`)};
+  height: 110px;
   border-radius: 5px;
   ${({ image }) => css`
     background:
@@ -31,11 +19,11 @@ export const Image = styled.div<ImageProps>`
   `}
   background-size: cover;
   background-position: center;
+  margin-bottom: 8px;
 `;
 
-export const InfoContainer = styled.div<CardProps>`
+export const InfoContainer = styled.div`
   width: 100%;
-  height: ${({ size = "md" }) => (size === "md" ? `65px` : `fit-content`)};
   display: flex;
   flex-direction: column;
   align-items: flex-start;

diff --git a/src/features/animes/components/AnimeCarousel/SlideItem.tsx b/src/features/animes/components/AnimeCarousel/SlideItem.tsx
@@ -9,6 +9,10 @@ interface SlideItemProps {
   anime: getListOfRecentReviewedResponse;
 }
 
+/**
+ * depreacted
+ * SliderItem 컴포넌트로 변경
+ * */
 export default function SlideItem({ anime }: SlideItemProps) {
   const navigate = useNavigate();
   return (

diff --git a/src/features/animes/components/AnimeCarousel/index.tsx b/src/features/animes/components/AnimeCarousel/index.tsx
@@ -15,6 +15,10 @@ import {
   IndicatorContainer,
 } from "./style";
 
+/**
+ * depreacted
+ * AnimeMainCarousel 컴포넌트로 변경
+ * */
 export default function AnimeCarousel() {
   const [currentSlide, setCurrentSlide] = useState(1); // 현재 슬라이드 인덱스
   const [translateValue, setTranslateValue] = useState(0); // 슬라이드 이동(translate)를 위해 사용

diff --git a/src/features/animes/components/AnimeMainCarousel/SliderItem.style.ts b/src/features/animes/components/AnimeMainCarousel/SliderItem.style.ts
@@ -0,0 +1,69 @@
+import styled from "@emotion/styled";
+import { Star } from "@phosphor-icons/react";
+
+export const SliderItemContainer = styled.section`
+  position: relative;
+  padding: 24px 16px;
+`;
+
+export const Image = styled.img`
+  width: 100%;
+  height: 497px;
+  object-fit: cover;
+  border-radius: 10px;
+  background: rgb(140, 140, 140);
+  background: linear-gradient(
+    180deg,
+    rgba(140, 140, 140, 1) 0%,
+    rgba(0, 0, 0, 1) 100%
+  );
+`;
+
+export const InfoContainer = styled.div`
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 46px;
+  padding: 0 32px 24px;
+  color: ${({ theme }) => theme.colors.neutral["05"]};
+`;
+
+export const Title = styled.h5`
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: 8px;
+  ${({ theme }) => theme.typo["title-2-m"]}
+`;
+
+export const ReviewContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Review = styled.span`
+  ${({ theme }) => theme.typo["body-3-r"]}
+  display: block;
+  width: 70%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const RatingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.secondary[50]};
+`;
+
+export const StarIcon = styled(Star)`
+  color: ${({ theme }) => theme.colors.secondary[50]};
+  margin-right: 4px;
+`;
+
+export const Score = styled.span`
+  ${({ theme }) => theme.typo["body-2-r"]}
+`;