feat: 스토리북 추가 (#33)

* refactor: 100vh height 설정 개선 * feat: 스토리북 설치 * refactor: 스토리북 더미 파일 삭제 * feat: BaseButton 스토리북 추가 * feat: 크로마틱 추가 * env: 크로마틱 CI 추가 * env: 깃허브 시크릿에 토큰 추가 * fix: 크로마틱 CI 명령어 오류 해결 * feat: BaseButton 스토리북 추가 * feat: InputBox, SignButton 스토리북 추가 * feat: Typography, EmptyItem 스토리북 추가 * refactor: Timeline, Report 컴포넌트 분리 및 스토리북 추가 * feat: Modal 스토리북 추가 및 스토리북 폴더 구조 변경 * docs: README 기술 스택 추가 * refactor: Calendar 컴포넌트 분리 및 스토리북 추가 * refactor: 스토리북 globalStyle 적용 * feat: 스토리북 args 추가 * docs: README 스토리북 내용 추가 * refactor: 변수명 수정 * refactor: Report 스토리북 변수명 변경 * fix: CI 변수명 이슈 해결 * docs: README 스토리북 링크 수정
ShinjungOh · Jan 29, 2024 · 4028e4e · 4028e4e
1 parent f9ce687
commit 4028e4e
Show file tree

Hide file tree

Showing 38 changed files with 12,078 additions and 1,564 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,26 @@
+name: Chromatic Deployment
+
+on:
+  push:
+    paths:
+      - 'src/ui/components/**'
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: v18.14.2
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build and Deploy to Chromatic for Haru-Hannyan
+        run: npx chromatic --project-token=${{secrets.CHROMATIC_TOKEN}} --exit-zero-on-changes
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/react';
+import { Global } from '@emotion/react';
+import { globalStyle } from '../src/ui/styles';
+
+const withGlobalStyle = (Story: any) => (
+  <>
+    <Global styles={globalStyle} />
+    <Story />
+  </>
+);
+
+const preview: Preview = {
+  decorators: [withGlobalStyle],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 
 <br/><br />
 
-## 배포 링크 
+## 배포 링크
 
 ### [http://haru-hannyan.com](http://haru-hannyan.com)
 
@@ -36,6 +36,7 @@
 ```bash
 git clone https://github.com/ShinjungOh/Haru-Hannyan
 ```
+
 ```bash
 npm install
 ```
@@ -90,14 +91,12 @@ npm run dev
       <td align="center" valign="middle">
         <div>
           <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
-          <img width="70" src="https://camo.githubusercontent.com/6f1bf9ab38c7c54c1ab470cce4fc9641e5ecc246e8016751b256bfdba615edaa/68747470733a2f2f696d67312e6461756d63646e2e6e65742f7468756d622f523132383078302f3f73636f64653d6d746973746f72793226666e616d653d68747470732533412532462532466b2e6b616b616f63646e2e6e6574253246646e2532467a7443707a253246627472526d547048507837253246374a564b654456337651534e356e666b324c76445530253246696d672e706e67" />
+          <img width="70" src="https://docs.pmnd.rs/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fzustand-icon.8507f6a0.png&w=2048&q=75" />
           <p align="center">
             Zustand
           </p>
         </div>
       </td>
-    </tr>
-    <tr>
       <td align="center" valign="middle">
         <div>
           <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
@@ -107,6 +106,8 @@ npm run dev
           </p>
         </div>
       </td>
+    </tr>
+    <tr>
       <td align="center" valign="middle">
         <div>
           <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
@@ -128,7 +129,7 @@ npm run dev
       <td align="center" valign="middle">
         <div>
           <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
-          <img width="50" src="https://camo.githubusercontent.com/e7eb6839f0d42fffcd7435133609f4fe6a2cad787439321d809c273d66ac4c77/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f65736c696e742d69636f6e2e737667" />
+          <img width="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/ESLint_logo.svg/256px-ESLint_logo.svg.png" />
           <p align="center">
             Eslint
           </p>
@@ -137,12 +138,30 @@ npm run dev
       <td align="center" valign="middle">
         <div>
           <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
-          <img width="50" src="https://camo.githubusercontent.com/82935f72bd8f7a84991ceeb91cba325f0ae3b00f7fb2af42da60a81d3ff631b4/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f70726574746965722d69636f6e2e737667" />
+          <img width="50" src="https://prettier.io/icon.png" />
           <p align="center">
             Prettier
           </p>
         </div>
       </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://avatars.githubusercontent.com/u/22632046?s=200&v=4" />
+          <p align="center">
+            Storybook
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://app.lottiefiles.com/images/lottie-logo.svg" />
+          <p align="center">
+            LottieFiles
+          </p>
+        </div>
+      </td>
     </tr>
   </tbody>
 </table>
@@ -161,6 +180,12 @@ npm run dev
 피그마에 아이디어를 시각적으로 표현하고, 일관된 디자인 가이드를 적용했어요.      
 사용자에게 직관적인 인터페이스를 제공하며, 프로젝트의 전반적인 품질을 향상시켰어요.
 
+### [📚 Storybook 바로가기](https://65ad0ebb79ef0ac5d280a2f7-nszwlwpmyv.chromatic.com/)
+
+**스토리북**에 피그마의 디자인 가이드를 옮겨두었어요.  
+스토리북으로 **UI 개발, 테스트 및 문서화**를 할 수 있고, 링크를 통해 쉽게 공유도 가능해요.      
+실제로 배포하지 않아도 UI를 확인할 수 있어서 팀원과 소통이 원활해져요.
+
 <br/>
 
 ### 2️⃣ 체계적인 개발 프로세스를 거쳤어요.
@@ -203,6 +228,7 @@ npm run dev
 하루한냥의 **탄생**과 **발전**을 볼 수 있어요.   
 사용성을 높이기 위한 **리팩토링**과 어려움을 겪었던 **트러블 슈팅** 과정을 생생하게 담았어요.  
 
+- [[리팩토링] 처음 만난 모바일, 효도폰 어플을 만든 사연](https://shinjungoh.tistory.com/entry/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%9A%A8%EB%8F%84%ED%8F%B0-%EC%96%B4%ED%94%8C%EC%9D%84-%EB%A7%8C%EB%93%A0-%EC%82%AC%EC%97%B0)
 - [[트러블 슈팅] 자바스크립트의 배열은 왜 그럴까?](https://shinjungoh.tistory.com/entry/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B0%B0%EC%97%B4%EC%9D%80-%EC%99%9C-%EA%B7%B8%EB%9F%B4%EA%B9%8C)
 - [[트러블 슈팅] 11월이 되어야 관측되는 오류가 있다?](https://shinjungoh.tistory.com/entry/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-11%EC%9B%94%EC%9D%B4-%EB%90%98%EC%96%B4%EC%95%BC-%EA%B4%80%EC%B8%A1%EB%90%98%EB%8A%94-%EC%98%A4%EB%A5%98%EA%B0%80-%EC%9E%88%EB%8B%A4)
 - [[하루한냥] 심리 테스트 구현 : API 호출 함수 분리하기](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EC%8B%AC%EB%A6%AC-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EA%B5%AC%ED%98%84-API-%ED%98%B8%EC%B6%9C-%ED%95%A8%EC%88%98-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0)