Merge pull request #99 from prgrms-fe-devcourse/79-feature/pcardslide…

…r-component

Feat: PCardSlider 컴포넌트 구현

package.json

@@ -21,6 +21,8 @@
     "react-dom": "^18.3.1",
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.26.2",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.13",
     "vite-tsconfig-paths": "^5.0.1",
     "xml-js": "^1.6.11",
@@ -30,6 +32,7 @@
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-slick": "^0.23.13",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",

src/components/PCard/index.tsx

@@ -1,22 +1,16 @@
 import * as S from './styles';
 import { H16, P15 } from '@/components/Text';
 import { Poster } from '@/components/Poster';
-import { CommonResponseType } from '@/types/apis';
+import { PItemType } from '@/types/pItem';
 
-interface PCardProps {
-  pInfo: Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto'>;
-  width?: string;
-  rank?: number | null;
-}
-
-export const PCard = ({ pInfo, width = '225px', rank = null }: PCardProps) => {
+export const PCard = ({ id, posterUrl, name, facility, period, rank, width = '225px' }: PItemType) => {
   return (
     <S.PCard width={width}>
-      <Poster src={pInfo.poster} rank={rank}></Poster>
+      <Poster src={posterUrl} rank={rank} />
       <S.PCardText>
-        <H16>{pInfo.prfnm}</H16>
-        <P15>{pInfo.fcltynm}</P15>
-        <P15>{pInfo.prfpdfrom + '-' + pInfo.prfpdto}</P15>
+        <H16>{name}</H16>
+        <P15>{facility}</P15>
+        <P15>{period}</P15>
       </S.PCardText>
     </S.PCard>
   );

src/components/PCardGrid/index.tsx

@@ -1,29 +1,20 @@
 import { PCard } from '@/components/PCard';
 import * as S from './styles';
-import { CommonResponseType } from '@/types/apis';
+import { PItemType } from '@/types/pItem';
 
 interface PCardGridProps {
-  pList: Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto'>[];
+  pList: PItemType[];
   width?: string;
   rows?: number;
   columns?: number;
   gap?: number;
-  isRanked?: boolean;
 }
 
-export const PCardGrid = ({
-  pList,
-  width = '600px',
-  rows = 1,
-  columns = 5,
-  gap = 10,
-  isRanked = false,
-}: PCardGridProps) => {
-  console.log(typeof pList);
+export const PCardGrid = ({ pList, width = '600px', rows = 1, columns = 5, gap = 10 }: PCardGridProps) => {
   return (
     <S.PCardGrid width={width} rows={rows} columns={columns} gap={gap}>
       {pList.map((perform, index) => (
-        <PCard key={index} pInfo={perform} width="100%" {...(isRanked && { rank: index + 1 })}></PCard>
+        <PCard key={index} {...perform} width="100%" rank={index + 1}></PCard>
       ))}
     </S.PCardGrid>
   );

src/components/PCardSlider/index.tsx

@@ -0,0 +1,33 @@
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import * as S from './styles';
+// import { CommonResponseType } from '@/types/apis';
+import { PCard } from '@/components/PCard';
+import { PItemType } from '@/types/pItem';
+
+interface PCardSliderProps {
+  pList: PItemType[];
+  width?: string;
+}
+
+export const PCardSlider = ({ pList, width = '100%' }: PCardSliderProps) => {
+  const settings = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+    swipeToSlide: true,
+  };
+  const widthType = width.match(/[^0-9]/g)?.join('');
+  const PCardWidth = widthType === '%' ? '98%' : `calc(${width} / 5.2)`;
+  return (
+    <S.PCardSlider width={width}>
+      <Slider {...settings}>
+        {pList.map((perform, index) => {
+          return <PCard key={index} {...perform} width={PCardWidth} />;
+        })}
+      </Slider>
+    </S.PCardSlider>
+  );
+};

src/components/PCardSlider/styles.ts

@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+
+export const PCardSlider = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+  .slick-prev::before,
+  .slick-next::before {
+    color: ${({ theme }) => theme.colors.gray};
+  }
+`;

src/types/pItem.ts

@@ -0,0 +1,9 @@
+export type PItemType = {
+  id: string;
+  posterUrl: string;
+  name: string;
+  facility: string;
+  period: string;
+  rank?: number;
+  width?: string;
+};