Refactor: PCardGrid 컴포넌트 정리

- 컴포넌트 닫는 형식 변경
- gap string으로 받도록 함
- 로그 제거

src/components/PCardGrid/index.tsx

@@ -3,27 +3,29 @@ import * as S from './styles';
 import { CommonResponseType } from '@/types/apis';
 
 interface PCardGridProps {
+  /**
+   * Omit<PListResponseType, 'genrenm' | 'prfstate' | 'openrun' | 'area'> 과 동일
+   */
   pList: Pick<CommonResponseType, 'mt20id' | 'poster' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto'>[];
   width?: string;
+  gap?: string;
   rows?: number;
   columns?: number;
-  gap?: number;
   isRanked?: boolean;
 }
 
 export const PCardGrid = ({
   pList,
-  width = '600px',
+  width = '100%',
+  gap = '10px',
   rows = 1,
   columns = 5,
-  gap = 10,
   isRanked = false,
 }: PCardGridProps) => {
-  console.log(typeof pList);
   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} pInfo={perform} width="100%" {...(isRanked && { rank: index + 1 })} />
       ))}
     </S.PCardGrid>
   );

src/components/PCardGrid/styles.ts

@@ -1,10 +1,10 @@
 import { styled } from 'styled-components';
 
-export const PCardGrid = styled.div<{ width: string; rows: number; columns: number; gap: number }>`
+export const PCardGrid = styled.div<{ width: string; gap: string; rows: number; columns: number }>`
   margin: auto;
   width: ${({ width }) => width};
   display: grid;
   grid-template-rows: repeat(${({ rows }) => rows}, 1fr);
   grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
-  gap: ${({ gap }) => gap}px;
+  gap: ${({ gap }) => gap};
 `;