diff --git a/package-lock.json b/package-lock.json index aba1545..ea0cfbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,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", @@ -28,6 +30,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", @@ -1186,6 +1189,15 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-slick": { + "version": "0.23.13", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", + "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/styled-components": { "version": "5.1.34", "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", @@ -1569,6 +1581,11 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1652,6 +1669,11 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/esbuild": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", @@ -2180,6 +2202,12 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2215,6 +2243,14 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -2252,6 +2288,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -2620,6 +2661,27 @@ "react-dom": ">=16.8" } }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2754,6 +2816,14 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -2762,6 +2832,11 @@ "node": ">=0.10.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", diff --git a/package.json b/package.json index fb8246e..61a9ac7 100644 --- a/package.json +++ b/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", diff --git a/src/components/PCard/index.tsx b/src/components/PCard/index.tsx index 83457f7..6c1d8ab 100644 --- a/src/components/PCard/index.tsx +++ b/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; - 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 ( - + - {pInfo.prfnm} - {pInfo.fcltynm} - {pInfo.prfpdfrom + '-' + pInfo.prfpdto} + {name} + {facility} + {period} ); diff --git a/src/components/PCardGrid/index.tsx b/src/components/PCardGrid/index.tsx index ab351a4..aad74c6 100644 --- a/src/components/PCardGrid/index.tsx +++ b/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[]; + 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 ( {pList.map((perform, index) => ( - + ))} ); diff --git a/src/components/PCardSlider/index.tsx b/src/components/PCardSlider/index.tsx new file mode 100644 index 0000000..5502eb2 --- /dev/null +++ b/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 ( + + + {pList.map((perform, index) => { + return ; + })} + + + ); +}; diff --git a/src/components/PCardSlider/styles.ts b/src/components/PCardSlider/styles.ts new file mode 100644 index 0000000..2570de2 --- /dev/null +++ b/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}; + } +`; diff --git a/src/types/pItem.ts b/src/types/pItem.ts new file mode 100644 index 0000000..763e702 --- /dev/null +++ b/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; +};