스택 컴포넌트 (#2)

* feat: 역순으로 쌓이는 스택 구현

* feat: 떨어지는 시간 조절 기능

* refactor: 컴포넌트명 Stack으로 변경

* feat: 내부 요소 정렬 기능

* feat: 방향 설정 기능

* feat: row-gap 조절 기능

* test: 스토리북 고도화

* chore: 스토리북 자동 배포 설정

* fix: 애니메이션 버그

- 리렌더링 시 random값이 바뀌어 계속 애니메이션 출력
- 같은 높이의 컴포넌트가 연속했을 때 random값이 없으면 애니메이션이 바뀌지 않아 출력되지 않음

* chore: npm 배포 관련 설정

* docs: update readme

* refactor: translate3D -> translateY

굳이 3d를 쓰지 않아도 GPU를 사용해서 변경

* test: 스토리북 textbox 예제 추가

* refactor: 무작위 배열 생성 로직 컴포넌트 밖으로 뺌

.eslintrc.cjs

@@ -24,6 +24,7 @@ module.exports = {
       'error',
       { endOfLine: 'auto' },
     ],
+    'import/no-named-as-default': 'off',
   },
   settings: {
     'import/parsers': {

.github/workflows/storybook-deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy Storybook to Github Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+   build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Repository
+        uses: actions/checkout@v3
+
+      - name : Set up Node 18.16.0 
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.16.0
+
+      - name: Cache node_modules
+        id: cache
+        uses: actions/cache@v3
+        with:
+         path: '**/node_modules'
+         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+         restore-keys: |
+          ${{ runner.os }}-node-
+          
+      - name: npm clean install
+        run: npm ci
+        if: steps.cache.outputs.cache-hit != 'true'
+
+      - name: deploy
+        run: npm run deploy

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+storybook-static
 
 # Editor directories and files
 .vscode/*

.npmignore

@@ -0,0 +1,14 @@
+.github/
+.storybook/
+node_modules/
+src/
+storybook-static/
+
+.git*
+vite-env.d.ts
+.eslintrc.cjs
+.prettierrc
+.stylelintrc
+tsconfig.json
+tsconfig.node.json
+vite.config.ts

README.md

@@ -1 +1,65 @@
-# Stack Layout Component
+# Stack Layout Component
+
+리액트와 스타일드 컴포넌트를 이용해서 구현한 스택 형태의 레이아웃 컴포넌트.
+
+- [npm](https://www.npmjs.com/package/@pium/stack-component)
+- [demo: storybook](https://blog.pium.life/stack-component/)
+
+## 사용 전 주의사항
+
+프로젝트에 다음 세 가지가 설치되어 있어야 해요.
+- react
+- react-dom
+- styled-components
+
+## 설치
+
+```bash
+npm install @pium/stack-component
+```
+
+## 컴포넌트 설명
+
+### 기능
+
+Stack은 주어진 자식 요소들을 세로로 정렬한 후, 원하는 만큼의 개수만 보여줍니다.
+
+### 주의사항
+
+- `Stack`은 자식 요소에 애니메이션을 삽입하므로 겹치지 않게 주의해주세요!
+- JSX 상에서 `Stack`의 직속 자녀들만을 대상으로 합니다.
+
+### Props
+
+|이름|설명|가능한 값|기본값|
+|:-:|:-:|:-:|:-:|
+|`showCount`*|보여줄 요소의 개수.|`number`|-|
+|`as`|Stack에 적용할 semantic tag|`"div"`, `"ul"`, `"ol"`, `"main"`, `"section"`, `"article"`|`"div"`|
+|`flow`|`normal`: JSX에 나타난 순서대로 DOM에 표시됩니다. 새로운 요소는 아래에서 위로 올라옵니다.<br /><br />`reverse`: JSX에 나타난 순서의 반대로 DOM에 표시됩니다. 새로운 요소는 위에서 아래로 떨어집니다.|`"normal"`, `"reverse"`|`"reverse"`|
+|`time`|새로운 요소가 생길 때 나타나는 애니메이션 시간(밀리초).|`number`|`400`|
+|`justifyItems`|CSS의 `justify-items`|`React.CSSProperties['justifyItems']`|`"normal"`|
+|`rowGap`|CSS의 `row-gap`|`React.CSSProperties['rowGap']`|`0`|
+
+### 예제
+
+```tsx
+import { Stack } from '@pium/stack-component';
+
+<Stack
+  as="main"
+  showCount={2}
+  flow="normal"
+  rowGap="2rem"
+  time={777}
+  justifyItems="center"
+>
+  <p>새는 자기 길을 안다</p>
+  <p>김종해</p>
+  <p>하늘에 길이 있다는 것을</p>
+  <p>새들이 먼저 안다</p>
+  <p>하늘에 길을 내며 날던 새는</p>
+  <p>길을 또 지운다</p>
+  <p>새들이 하늘 높이 길을 내지 않는 것은</p>
+  <p>그 위에 별들이 가는 길이 있기 때문이다</p>
+</Stack>
+```

index.d.ts

@@ -0,0 +1,43 @@
+declare type StackProps = {
+  /**
+   * 보여줄 요소의 개수. 음이 아닌 정수여야 합니다.
+   *
+   * 음수는 0으로, 실수는 소수 첫째 자리에서 반올림하여 사용합니다.
+   */
+  showCount: number;
+  /**
+   * Stack에 적용할 semantic tag
+   * @defaultValue 'div'
+   */
+  as?: 'div' | 'ul' | 'ol' | 'main' | 'section' | 'article';
+  /**
+   * 쌓이는 방향.
+   *
+   * `normal`: JSX에 나타난 순서대로 DOM에 표시됩니다. 새로운 요소는 아래에서 위로 올라옵니다.
+   *
+   * `reverse`: JSX에 나타난 순서의 반대로 DOM에 표시됩니다. 새로운 요소는 위에서 아래로 떨어집니다.
+   * @defaultValue 'reverse'
+   */
+  flow?: 'normal' | 'reverse';
+  /**
+   * 각 요소를 정렬할 방향.
+   * @defaultValue 'normal'
+   */
+  justifyItems?: React.CSSProperties['justifyItems'];
+  /**
+   * 새로운 요소가 생길 때 애니메이션 시간(밀리초). 음이 아닌 정수여야 합니다.
+   *
+   * 음수는 0으로, 실수는 소수 첫째 자리에서 반올림하여 사용합니다.
+   * @defaultValue 400
+   */
+  time?: number;
+  /**
+   * 내부 요소들 사이의 간격.
+   * @defaultValue 0
+   */
+  rowGap?: React.CSSProperties['rowGap'];
+};
+
+declare const Stack: (props: React.PropsWithChildren<StackProps>) => JSX.Element;
+
+export { Stack };