[기본 레이아웃 컴포넌트] 윤생(이윤성) 미션 제출합니다. (#11)

* chore: 프로젝트 세팅

* feat: Container 요구사항 구현

* feat: Flex 요구사항 구현

* feat: Grid 요구사항 구현

* feat: 진입점 생성

* chore: 빌드 파일 업로드

* chore: 빌드 파일 업로드

* chore: 배포설정 변경

* fix: Flex 타입 에러 수정

* fix: import/export 방식 변경

* 1.0.1

* chore: 불필요한 파일 삭제

* chore: styled-components 설치

* refactor: css를 styled-components로 마이그레이션

* chore: 1.0.2버전

* 1.0.2

* docs: README 수정

* feat: grid item 속성 추가

* 1.1.0

* test: 스토리북 추가

* chore: storybook 배포를 위한 chromatic 설치

* feat: background color 속성 추가

* 1.1.1

* feat: 새로운 빌드 버전

* 1.1.2

* fix: 에러가 나는 컴포넌트 props 네이밍 수정

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -1,6 +1,132 @@
-<p align="middle" >
-  <img width="100px;" src="https://em-content.zobj.net/source/skype/289/straight-ruler_1f4cf.png"/>
-</p>
-<h2 align="middle">누구나 사용할 수 있는 레이아웃 컴포넌트</h2>
-<p align="middle">재사용 가능한 레이아웃 컴포넌트 제작과 배포</p>
-<br/>
+# yunseong-layout-component
+
+## 개요
+
+react 프레임워크에서 사용할 수 있는 여러가지 layout 컴포넌트 라이브러리입니다.
+
+## 설치
+
+```
+npm i yunseong-layout-component
+```
+
+## Container
+
+### 설명
+
+중앙에 배치하는 레이아웃입니다. 속성을 이용해 최대 너비와 최소 너비를 설정할 수 있습니다.
+
+### 속성
+
+기본적으로 너비는 `maxWidth`값을 따릅니다. 지정하지 않을 시, 뷰포트의 너비값을 가집니다.
+
+`maxWidth?:number` : 픽셀단위의 최대 너비를 지정합니다. 지정하지 않을 시, 뷰포트의
+너비로 지정됩니다.
+
+`minWidth?` : 픽셀 단위의 최소 너비를 지정합니다. 지정하지 않으면, 최대 너비값으로 지정합니다.
+
+### 사용 예시
+
+```tsx
+<Container minWidth={500} maxWidth={1440}>
+  <div>...</div>
+</Container>
+```
+
+## Flex
+
+### 설명
+
+요소를 선형적으로 배치하기 위한 Flex 레이아웃 입니다. 너비와 높이는 부모 요소의 값을 상속합니다.
+
+### 속성
+
+`direction?:'row' | 'row-reverse' | 'column' | 'column-reverse'` : flex layout의 메인 축의 정렬 방향을 지정합니다. 기본 값은 row 입니다.
+
+`justify: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly'` : flex에 속하는 아이템의 메인 축에 따른 정렬 방식을 지정합니다. 기본값은 start 입니다.
+
+`align: 'center' | 'start' | 'end'`: 메인 축과 교차하는 축의 정렬 방식을 지정합니다. 기본 값은 start입니다.
+
+`gap:number`: 픽셀 단위의 간격을 지정합니다. 기본값은 0 입니다.
+
+### 사용 예시
+
+```tsx
+<Flex direction='column' justify='center' align='center' gap={4}>
+  <FlexItem>1</FlexItem>
+  <FlexItem>2</FlexItem>
+  <FlexItem>3</FlexItem>
+</Flex>
+```
+
+## FlexItem
+
+### 설명
+
+Flex 레이아웃의 개별 요소를 배치시킬 수 있는 레이아웃 입니다.
+
+### 속성
+
+`align: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'`: 개별 요소에 지정되는 정렬 기준입니다. 기본 값은 auto이며, 부모의 정렬 기준(align-items)을 상속합니다.
+
+### 사용 예시
+
+```tsx
+<Flex direction='column' justify='center' align='center' gap={4}>
+  <FlexItem align='end'>1</FlexItem>
+  <FlexItem>2</FlexItem>
+  <FlexItem>3</FlexItem>
+</Flex>
+```
+
+## Grid
+
+### 설명
+
+격자형 레이아웃입니다. 행과 열을 지정할 수 있습니다. 기본 행과 열 값은 10행 10열입니다. 너비는 부모값을 상속 받습니다.
+
+### 속성
+
+`columns: number` : 열의 갯수를 지정합니다. 크기는 기준 너비를 동일한 비율로 가져갑니다. 기본 값은 10입니다.
+
+`rows: number` : 행의 갯수를 지정합니다. 기본값은 10입니다.
+
+`gap: number` : 픽셀 단위의 간격을 지정합니다. 기본값은 0입니다.
+
+### 사용 예시
+
+```tsx
+<Grid columns={3}>
+  <GridItem>A</GridItem>
+  <GridItem>B</GridItem>
+  <GridItem>C</GridItem>
+  <GridItem>D</GridItem>
+  <GridItem>E</GridItem>
+</Grid>
+```
+
+## GridItem
+
+### 설명
+
+Grid 컴포넌트에 속하는 아이템입니다. 각 요소가 그리드에서 얼마나 차지할 지 비율을 조절할 수 있습니다.
+
+### 속성
+
+기본 grid-row, grid column 속성을 따릅니다. grid-direction-start, end 의 단축 속성만 사용합니다.
+
+`gridRow: ${number}/${number} | 'auto'` : 단축 속성을 사용합니다. 숫자는 정수만 유효합니다. 기본값은 auto 입니다.
+
+`gridCol: ${number}/${number} | 'auto'` : 단축 속성을 사용합니다. 숫자는 정수만 유효합니다. 기본값은 auto 입니다.
+
+### 사용 예시
+
+```tsx
+<Grid columns={3}>
+  <GridItem gridRow='1/3'>A</GridItem>
+  <GridItem>B</GridItem>
+  <GridItem>C</GridItem>
+  <GridItem>D</GridItem>
+  <GridItem>E</GridItem>
+</Grid>
+```

dist/cjs/components/Container/index.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+interface ContainerProps extends PropsWithChildren {
+    maxWidth?: number;
+    minWidth?: number;
+}
+declare const Container: ({ minWidth, maxWidth, children, }: Partial<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
+export default Container;

dist/cjs/components/Flex/index.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface FlexProps extends PropsWithChildren {
+    direction: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    justify: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    align: 'center' | 'start' | 'end';
+    gap: number;
+}
+declare const Flex: ({ direction, justify, align, gap, children, }: Partial<FlexProps>) => import("react/jsx-runtime").JSX.Element;
+export default Flex;

dist/cjs/components/FlexItem/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+interface FlexItemProps extends PropsWithChildren {
+    align: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+}
+declare const FlexItem: ({ align, children }: Partial<FlexItemProps>) => import("react/jsx-runtime").JSX.Element;
+export default FlexItem;

dist/cjs/components/Grid/index.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface GridProps extends PropsWithChildren {
+    rows: number;
+    columns: number;
+    gap: number;
+}
+declare const Grid: ({ children, rows, columns, gap, }: Partial<GridProps>) => import("react/jsx-runtime").JSX.Element;
+export default Grid;

dist/cjs/components/GridItem/index.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+interface GridItemProps extends PropsWithChildren {
+}
+declare const GridItem: ({ children }: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+export default GridItem;

dist/cjs/index.d.ts

@@ -0,0 +1,10 @@
+import Container from './components/Container';
+import Grid from './components/Grid';
+import GridItem from './components/GridItem';
+import Flex from './components/Flex';
+import FlexItem from './components/FlexItem';
+export { Container };
+export { Grid };
+export { GridItem };
+export { Flex };
+export { FlexItem };