Feat: Panel 컴포넌트 구현

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,9 +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};
 `;

src/components/Panel/index.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import * as S from './styles';
+import { H32 } from '@/components/Text';
+
+interface PanelProps {
+  children: ReactNode;
+  title: string;
+  width?: string;
+}
+
+export const Panel = ({ children, title, width = '100%' }: PanelProps) => {
+  return (
+    <S.Panel width={width}>
+      <H32>{title}</H32>
+      {children}
+    </S.Panel>
+  );
+};

src/components/Panel/styles.ts

@@ -0,0 +1,10 @@
+import { styled } from 'styled-components';
+
+export const Panel = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+
+  & > h2 {
+    margin: 3rem 0;
+    text-align: center;
+  }
+`;