woowacourse · hozzijeong · Oct 4, 2023 · Sep 12, 2023 · Sep 25, 2023 · Sep 25, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,7 +1,12 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
@@ -10,5 +15,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    '@typescript-eslint/no-explicit-any': 'off',
   },
-}
+};
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,19 +1,23 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    '../src/Intro.stories.mdx',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;
diff --git a/README.md b/README.md
@@ -1,15 +1,41 @@
-# Wus-Layout-Component
+## Wus Layout Component
 
-## Introduce
+## Docs
 
-<p align="center">
-It's a package made to use layout components comfortably
-</p>
+### <a href="https://gilpop8663.github.io/layout-component">문서 보러가기</a>
 
-## Documentation
+## Get started
 
-For full documentation, visit [wus-layout-component.com](https://gilpop8663.github.io/layout-component/).
+레이아웃 컴포넌트를 편하게 사용할 수 있도록 제작된 패키지입니다
 
-## Contributing
+### Install
 
-If you're interested in contributing to Wus-Layout-Component
+`npm i wus-layout-component -D`
+
+### how to use?
+
+```tsx
+import { Flex } from 'wus-layout-component';
+
+<Flex
+  css={css}
+  justifyContent={justifyContent}
+  direction={direction}
+  alignItems={alignItems}
+  flexWrap={flexWrap}
+>
+  <div
+    style={{
+      width: '100px',
+      height: '100px',
+      backgroundColor: 'gray',
+    }}
+  ></div>
+</Flex>;
+```
+
+### Supporting
+
+해당 패키지는 CommonJs와 ES Modules를 지원합니다.
+
+### @2023
diff --git a/docs/MasonryLayout.md b/docs/MasonryLayout.md
@@ -0,0 +1,18 @@
+목적 : 여러 크기의 아이템을 격자 형태로 정렬하되, 각 행과 열의 높이가 동일하지 않아 빈 공간이 최소화되는 레이아웃 컴포넌트를 만든다. 사용자: 무한 스크롤을 통해 정렬되어 있는 디자인을 보여줘야하는 개발자요구사항:
+
+- 열의 수를 설정할 수 있어야 함.
+- 빈 공간 없이 아이템을 정렬해야 함.
+- 가로 폭을 제한해서 보여줄지, 세로 폭을 제한해서 보여줄 지 정할 수 있다.
+- 반응형(모바일, 작은 화면, 큰화면)에 따라 다르게 보이도록 한다.
+-
+
+- 가로: 가로로 사용할 행의 개수
+- 세로: 세로로 사용할 열의 개수
+- 가로 갭: 가로에서 공백을 보여줄 단위
+- 세로 갭: 세로에서 공백을 보여줄 단위
+
+- 모바일에서 어떻게 할지 설정한다
+
+1. 크로스 브라우징/반응형
+2. 가독성 있는 컴포넌트와 문서
+3. CSS 관점에서 의미론적 네이밍과 재사용성
diff --git a/docs/참고자료.md b/docs/참고자료.md
@@ -23,3 +23,18 @@ https://toss.tech/article/commonjs-esm-exports-field
   - [x] Container
   - [ ] Flex
   - [ ] Grid
+
+### step2
+
+https://wit.nts-corp.com/2022/10/26/6595
+
+https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb https://ellen92.tistory.com/64 https://w3bits.com/css-grid-masonry/ https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver https://github.com/woowacourse/layout-component/pull/58/files#diff-914ac3af5acb7507102327d7a0965b7fd543635b8addd127329ef953577f70d3 (참새 PR)
+
+https://github.com/devrelm/resize-observer/issues/23 (디바운스)
+
+- 방향을 정한다. row, column - 현재 미구현
+- 최소로 보여질 사이즈를 정한다. 개수는 부모의 너비 / 최소 사이즈로 계산되며 빈 공간 없이 최소 길이 이상으로 넓어진다. itemSize
+- div로 해당 개수만큼 생성하고, flex 방향으로 채운다. 아래쪽이 울퉁불퉁한것은 무한 스크롤을 한다는 가정하에 고려하지 않는다.
+- 이미지 사이즈는 itemSize에 맞추고, 이미지는 비율에 맞게 직사각형으로 조정한다.
+
+https://devpluto.tistory.com/entry/React-vite%EC%99%80-%ED%95%A8%EA%BB%98-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-npm%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 (vite 배포)
diff --git a/docs/타입 관련 에러 해결.md b/docs/타입 관련 에러 해결.md
@@ -0,0 +1,90 @@
+## ReactNode, ReactElement 관련 에러 발생
+
+### ReactElement로 하였을 때
+
+const Grid << 이 부분에서 타입 에러가 납니다. 에러는 ForwardRefExoticComponent의 반환 값이 ReactNode에 해당하지 않아서 에러가 나는 것이였습니다.
+
+```tsx
+type GridComponent = <T extends ElementType>(
+  props: GridProps<T>
+) => ReactElement | null;
+
+const Grid : GridComponent = forwardRef(function Grid<
+```
+
+```
+Type 'ForwardRefExoticComponent<Omit<GridProps<ElementType>, "ref"> & RefAttributes<unknown>>' is not assignable to type 'GridComponent'.
+  Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.ts(2322)
+```
+
+### 해결 방법
+
+@types/react의 파일에서 forwardRef의 반환 값의 타입을 수정하여 타입 에러를 해결했습니다. ExoticComponent의 타입 코드 중 (props: P): ReactNode; 을 (props: P): ReactElement | null; 으로 수정하였습니다.
+
+이 방법의 단점으로는 node_modules를 다른 컴퓨터에서 설치 후 작업할 때 동일한 과정을 해줘야 한다는 단점이 있습니다.
+
+```tsx
+function forwardRef<T, P = {}>(
+  render: ForwardRefRenderFunction<T, P>
+): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+
+// ForwardRefExoticComponent을 타고 들어갑니다.
+interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
+  defaultProps?: Partial<P> | undefined;
+  propTypes?: WeakValidationMap<P> | undefined;
+}
+
+// NamedExoticComponent을 타고 들어갑니다.
+interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
+  displayName?: string | undefined;
+}
+
+// ExoticComponent을 타고 들어갑니다.
+interface ExoticComponent<P = {}> {
+  /**
+   * **NOTE**: Exotic components are not callable.
+   */
+
+  (props: P): ReactNode; //  => (props: P): ReactElement | null;
+
+  readonly $$typeof: symbol;
+}
+```
+
+### ReactNode로 하였을 때
+
+컴파일러 과정에서는 오류가 나지 않습니다. forwardRef의 반환 값과 일치하기 때문입니다.
+
+```tsx
+type ContainerComponent = <T extends ElementType>(
+  props: ContainerProps<T>
+) => ReactNode | null;
+
+const Container: ContainerComponent = forwardRef(
+```
+
+하지만 npm 배포 후 설치를 한다면 타입 에러가 사용자에게 납니다. 따라서 사용자가 타입 에러로 인해 잘못된 패키지를 설치했다고 생각이 들고, 직접 패키지의 타입을 수정하지 않는 이상 사용을 할 수 없는 일이 발생합니다.
+
+```
+JSX 문법에서는 컴포넌트의 반환 값이 유효한 JSX 엘리먼트 타입이어야 하기 때문에, 'Container' 컴포넌트의 반환 타입이 'ReactNode'라고 하더라도 JSX 엘리먼트로 사용할 수 없는 경우에 이러한 에러가 발생합니다.
+
+또한, 'undefined' 타입은 JSX 엘리먼트로 사용될 수 없고, 'Element' 또는 'null' 타입에만 할당할 수 있기 때문에, 'Container' 컴포넌트의 반환 값이 'undefined'인 경우에도 에러가 발생합니다.
+```
+
+```tsx
+import { Container } from 'wus-layout-component';
+
+export default function Example() {
+  return <Container as="animate">asds</Container>;
+}
+```
+
+```
+'Container' cannot be used as a JSX component.
+  Its return type 'ReactNode' is not a valid JSX element.
+    Type 'undefined' is not assignable to type 'Element | null'.ts(2786)
+```
+
+### 결론
+
+@types/react의 타입의 반환 값 타입을 직접 변경하여 사용하기로 했습니다. 패키지를 설치했는데 타입 에러가 난다면 사용자의 신뢰가 떨어져서 사용을 하지 않을 것이기 때문입니다.
diff --git a/fixup.sh b/fixup.sh