diff --git a/src/components/PCardGrid/index.tsx b/src/components/PCardGrid/index.tsx index ab351a4..0c19ab5 100644 --- a/src/components/PCardGrid/index.tsx +++ b/src/components/PCardGrid/index.tsx @@ -3,27 +3,29 @@ import * as S from './styles'; import { CommonResponseType } from '@/types/apis'; interface PCardGridProps { + /** + * Omit 과 동일 + */ pList: Pick[]; 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 ( {pList.map((perform, index) => ( - + ))} ); diff --git a/src/components/PCardGrid/styles.ts b/src/components/PCardGrid/styles.ts index 7965dcc..159e488 100644 --- a/src/components/PCardGrid/styles.ts +++ b/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}; `;