Feat: PCardSlider 컴포넌트 구현

- react-slick 라이브러리 설치

package.json

@@ -20,6 +20,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "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",
@@ -29,6 +31,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/PCardSlider/index.tsx

@@ -0,0 +1,37 @@
+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';
+
+interface PCardSliderProps {
+  pList: Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto'>[];
+  width?: string;
+  isRanked?: boolean;
+}
+
+export const PCardSlider = ({ pList, width = '600px', isRanked = false }: PCardSliderProps) => {
+  const settings = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+  };
+  return (
+    <S.PCardSlider width={width}>
+      <Slider {...settings}>
+        {pList.map((perform, index) => {
+          return (
+            <PCard
+              key={index}
+              pInfo={perform}
+              width={`calc(${width} / 5.2)`}
+              {...(isRanked && { rank: index + 1 })}
+            ></PCard>
+          );
+        })}
+      </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};
+  }
+`;