feat : Grid, Container 컴포넌트 구현

README.old.md

@@ -32,8 +32,8 @@ FE 카카오 선물하기 1주차 과제: React 기초
     - [o] radius props에 따라 모서리 둥글게 적용
     - [o] image Element 기본 속성 모두 사용
 - GoodsItem 컴포넌트 구현
-    - [] default 형태와 ranking 형태 컴포넌트 구현
-    - [] Ranking 컴포넌트 랭킹 지정
+    - [o] default 형태와 ranking 형태 컴포넌트 구현
+    - [o] Ranking 컴포넌트 랭킹 지정
 - Grid, Container 컴포넌트 구현
 
 ## 요구 사항

src/stories/Container.css

@@ -0,0 +1,5 @@
+.container {
+    margin: 0 auto;
+    padding: 1rem;
+  }
+

src/stories/Container.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Container from './Container';
+
+export default {
+  title: 'Layout/Container',
+  component: Container,
+  argTypes: {
+    maxWidth: { control: 'text' },
+    children: { control: 'text' },
+    flexDirection: { control: 'radio', options: ['row', 'column'] },
+    justifyContent: {
+      control: 'radio',
+      options: ['center', 'flex-start', 'flex-end', 'space-between', 'space-around'],
+    },
+    alignItems: {
+      control: 'radio',
+      options: ['center', 'flex-start', 'flex-end', 'baseline', 'stretch'],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => <Container {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  maxWidth: '100%',
+  children: 'Hello, world!',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+export const FullScreen = Template.bind({});
+FullScreen.args = {
+  maxWidth: '100%',
+  children: 'Hello, world!',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+};

src/stories/Container.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Container.css';
+
+interface ContainerProps {
+  maxWidth?: string;
+  children: React.ReactNode;
+  flexDirection?: 'row' | 'column';
+  justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+}
+
+const Container: React.FC<ContainerProps> = ({
+  maxWidth,
+  children,
+  flexDirection = 'row',
+  justifyContent = 'flex-start',
+  alignItems = 'stretch',
+}) => {
+  const style = {
+    maxWidth,
+    display: 'flex',
+    flexDirection,
+    justifyContent,
+    alignItems,
+  };
+
+  return <div style={style}>{children}</div>;
+};
+
+export default Container;

src/stories/Grid.css

@@ -0,0 +1,5 @@
+.grid {
+    display: grid;
+    gap: var(--gap);
+  }
+

src/stories/Grid.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Grid from './Grid';
+
+export default {
+  title: 'Layout/Grid',
+  component: Grid,
+  argTypes: {
+    gap: { control: 'text' },
+    columns: {
+      control: 'object',
+      defaultValue: { initial: 1, sm: 2, md: 3, lg: 4 },
+    },
+    children: { control: 'text' },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => <Grid {...args} />;
+
+export const NumberColumns = Template.bind({});
+NumberColumns.args = {
+  columns: 3,
+  gap: '10px',
+  children: (
+    <>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </>
+  ),
+};
+
+export const ResponsiveColumns = Template.bind({});
+ResponsiveColumns.args = {
+  columns: { initial: 1, sm: 2, md: 3, lg: 4 },
+  gap: '10px',
+  children: (
+    <>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+      <div>7</div>
+      <div>8</div>
+      <div>9</div>
+      <div>10</div>
+      <div>11</div>
+      <div>12</div>
+      <div>13</div>
+      <div>14</div>
+      <div>15</div>
+      <div>16</div>
+    </>
+  ),
+};

src/stories/Grid.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import './Grid.css';
+
+interface GridProps {
+  columns: number | { initial: number; sm?: number; md?: number; lg?: number };
+  gap?: string;
+  children: React.ReactNode;
+}
+
+const Grid: React.FC<GridProps> = ({ columns, gap = '0', children }) => {
+  const getGridTemplateColumns = () => {
+    if (typeof columns === 'number') {
+      return `repeat(${columns}, 1fr)`;
+    } else {
+      return `
+        repeat(${columns.initial}, 1fr);
+        @media (min-width: 600px) { grid-template-columns: repeat(${columns.sm || columns.initial}, 1fr); }
+        @media (min-width: 768px) { grid-template-columns: repeat(${columns.md || columns.initial}, 1fr); }
+        @media (min-width: 1024px) { grid-template-columns: repeat(${columns.lg || columns.initial}, 1fr); }
+      `;
+    }
+  };
+
+  const style = {
+    display: 'grid',
+    gap,
+    gridTemplateColumns: getGridTemplateColumns(),
+  };
+
+  return <div style={style}>{children}</div>;
+};
+
+export default Grid;