Merge pull request #31 from FE9-2/feature/new-structure

refactor: 라이브러리 재설정, 폴더 구조 변경 및 관련 파일 수정

Author: cccwon2

.github/workflows/chromatic.yml

@@ -0,0 +1,68 @@
+name: Preview # 워크플로우 이름
+
+on:
+  pull_request: # 특정 이벤트 발생 시 실행
+    branches: ["main", "dev"] # main과 dev 브랜치에서 PR 생성 시 실행
+
+permissions: # GitHub Actions의 권한 설정
+  contents: write # 콘텐츠를 읽고 쓰는 권한
+  pages: write # GitHub Pages 배포 권한
+  deployments: write # 배포 권한
+  id-token: write # OIDC 토큰 생성 권한
+  issues: write # 이슈 생성 및 편집 권한
+  pull-requests: write # PR 생성 및 편집 권한
+
+jobs:
+  storybook-preview:
+    runs-on: ubuntu-20.04 # 워크플로우 실행 환경 (Ubuntu 20.04)
+    env:
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    steps:
+      - name: 저장소 체크아웃
+        uses: actions/checkout@v3 # GitHub Actions의 공식 체크아웃 액션
+        with:
+          fetch-depth: 0 # 전체 Git 기록을 가져옴 (CI 최적화를 위해 기본값은 1)
+
+      - name: 캐시 종속성
+        id: cache
+        uses: actions/cache@v3 # 캐시를 사용하여 빌드 속도 개선
+        with:
+          path: "**/node_modules" # 캐시 대상 경로
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-storybook # 캐시 키 설정
+
+      - name: 종속성 설치
+        if: steps.cache.outputs.cache-hit != 'true' # 캐시가 없을 때만 실행
+        run: yarn install # Yarn으로 프로젝트 의존성 설치
+
+      - name: Chromatic에 게시
+        id: chromatic
+        uses: chromaui/action@v1 # Chromatic의 GitHub Action
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # 환경 변수 참조
+          token: ${{ secrets.GITHUB_TOKEN }} # GitHub 인증 토큰
+          onlyChanged: true # 변경된 스토리만 업로드
+          autoAcceptChanges: true # Chromatic에서 변경 사항 자동 승인
+
+      - name: 현재 시간 가져오기
+        uses: josStorer/get-current-time@v2 # 현재 시간 가져오는 액션
+        id: current-time
+        with:
+          format: "YYYY년 MM월 DD일 HH시 mm분 ss초" # 시간 형식
+          utcOffset: "+09:00" # 한국 시간대로 설정 (UTC+9)
+
+    outputs: # 다음 Job에서 사용할 출력값 설정
+      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }} # Chromatic URL
+      currnent_time: ${{ steps.current-time.outputs.formattedTime }} # 포맷된 현재 시간
+
+  github-bot-storybook:
+    runs-on: ubuntu-latest # 최신 Ubuntu 환경
+    needs: [storybook-preview] # `storybook-preview` Job이 완료된 후 실행
+
+    steps:
+      - name: PR 코멘트 남기기
+        uses: thollander/actions-comment-pull-request@v2 # PR에 댓글 남기는 액션
+        with:
+          comment_tag: ${{github.event.number}}-storybook # 댓글 태그로 중복 방지
+          message: |
+            💄 Storybook: ${{ needs.storybook-preview.outputs.storybook_url }} # Chromatic에서 생성된 Storybook URL
+            🕖 Update: ${{ needs.storybook-preview.outputs.currnent_time }} # 현재 시간

.gitignore

@@ -41,3 +41,8 @@ next-env.d.ts
 # vscode
 .vscode/
 .vscode/*
+
+# storybook
+storybook-static/
+storybook-static/*
+build-storybook.log

.husky/commit-msg

@@ -10,8 +10,5 @@
   "arrowParens": "always",
   "proseWrap": "preserve",
   "endOfLine": "lf",
-  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
-  "importOrder": ["^@/lib/(.*)$", "^@/app/(.*)$", "^@/components/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.husky/pre-commit

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

.prettierrc

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;