Fix: PCard 관련 타입 및 구조 전부 수정

prgrms-fe-devcourse · Oct 2, 2024 · 57b62f1 · 57b62f1
1 parent b5c3606
commit 57b62f1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 32 deletions.
diff --git a/src/components/PCard/index.tsx b/src/components/PCard/index.tsx
@@ -1,25 +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'> &
-    Partial<Pick<CommonResponseType, 'fcltynm' | 'prfpdfrom' | 'prfpdto' | 'prfplcnm' | 'prfpd' | 'rnum'>>;
-  width?: string;
-}
-
-export const PCard = ({ pInfo, width = '225px' }: PCardProps) => {
-  const poster = pInfo.rnum ? 'https://www.kopis.or.kr/' + pInfo.poster : pInfo.poster;
-  const place = pInfo.fcltynm ? pInfo.fcltynm : pInfo.prfnm;
-  const prf = pInfo.prfpd ? pInfo.prfpd : pInfo.prfpdfrom + '-' + pInfo.prfpdto;
+export const PCard = ({ id, posterUrl, name, facility, period, rank, width = '225px' }: PItemType) => {
   return (
     <S.PCard width={width}>
-      <Poster src={poster} rank={pInfo.rnum} />
+      <Poster src={posterUrl} rank={rank} />
       <S.PCardText>
-        <H16>{pInfo.prfnm}</H16>
-        <P15>{place}</P15>
-        <P15>{prf}</P15>
+        <H16>{name}</H16>
+        <P15>{facility}</P15>
+        <P15>{period}</P15>
       </S.PCardText>
     </S.PCard>
   );

diff --git 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<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>
   );

diff --git a/src/components/PCardSlider/index.tsx b/src/components/PCardSlider/index.tsx
@@ -4,11 +4,10 @@ import 'slick-carousel/slick/slick-theme.css';
 import * as S from './styles';
 // import { CommonResponseType } from '@/types/apis';
 import { PCard } from '@/components/PCard';
-import { CommonResponseType } from '@/types/apis';
+import { PItemType } from '@/types/pItem';
 
 interface PCardSliderProps {
-  pList: (Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm'> &
-    Partial<Pick<CommonResponseType, 'fcltynm' | 'prfpdfrom' | 'prfpdto' | 'prfplcnm' | 'prfpd' | 'rnum'>>)[];
+  pList: PItemType[];
   width?: string;
 }
 
@@ -26,7 +25,7 @@ export const PCardSlider = ({ pList, width = '100%' }: PCardSliderProps) => {
     <S.PCardSlider width={width}>
       <Slider {...settings}>
         {pList.map((perform, index) => {
-          return <PCard key={index} pInfo={perform} width={PCardWidth} />;
+          return <PCard key={index} {...perform} width={PCardWidth} />;
         })}
       </Slider>
     </S.PCardSlider>

diff --git a/src/types/pItem.ts 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;
+};