dddstudy · dkkim0122 · Apr 8, 2025 · Sep 29, 2024 · Sep 29, 2024 · Sep 29, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript",
+    "plugin:storybook/recommended"
+  ]
 }
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,4 +2,4 @@
 
 ### 참고사항
 
-### 이미지 혹은 동영상
+### 이미지 혹은 동영상
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,36 @@
+name: "Storybook Chromatic Publish"
+
+on:
+  push:
+    branches: [develop, main]
+    paths:
+      - "**.stories.tsx"
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Run chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.github/workflows/github-actions.yml b/.github/workflows/github-actions.yml
@@ -4,9 +4,9 @@ on:
   workflow_dispatch:
     inputs:
       environment:
-        description: '배포 환경을 선택해주세요.'
+        description: "배포 환경을 선택해주세요."
         required: true
-        default: 'development'
+        default: "development"
         type: choice
         options:
           - development
@@ -57,5 +57,5 @@ jobs:
         uses: tsickert/discord-webhook@v5.3.0
         with:
           webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: '상용 배포가 완료되었습니다!'
-          avatar-url: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
+          content: "상용 배포가 완료되었습니다!"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
diff --git a/.github/workflows/github-pull-request.yml b/.github/workflows/github-pull-request.yml
@@ -11,7 +11,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: PR Open/Reopen Discord Notification 
+      - name: PR Open/Reopen Discord Notification
         if: github.event.action == 'opened' || github.event.action == 'reopened'
         uses: Ilshidur/action-discord@master
         env:
@@ -24,7 +24,7 @@ jobs:
             **Author:** ${{ github.event.pull_request.user.login }}
             **Link:** ${{ github.event.pull_request.html_url }}
 
-      - name: PR Merged Discord Notification 
+      - name: PR Merged Discord Notification
         if: github.event.pull_request.merged == true
         uses: Ilshidur/action-discord@master
         env:
@@ -36,4 +36,4 @@ jobs:
             **Description:** ${{ github.event.pull_request.body }}
             **Author:** ${{ github.event.pull_request.user.login }}
             **Merged by:** ${{ github.event.actor.login }}
-            **Link:** ${{ github.event.pull_request.html_url }}
+            **Link:** ${{ github.event.pull_request.html_url }}
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# vscode
+.vscode
+
 # dependencies
 /node_modules
 /.pnp
@@ -27,10 +30,13 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "arrowParens": "always"
+}
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <div id="portal-root"></div>
+  </body>
+</html>
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,20 @@
+import type { Preview } from "@storybook/react";
+import { initialize, mswLoader } from "msw-storybook-addon";
+
+import "../src/app/globals.css";
+
+initialize();
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  loaders: [mswLoader],
+};
+
+export default preview;
diff --git a/README.md b/README.md
@@ -1 +1,42 @@
-## DDD 웹사이트 
+# DDD 웹사이트
+
+## 규칙
+
+### 스토리북 사용
+
+- 프로젝트의 컴포넌트 디자인이 먼저 진행되어, 디자이너 및 기획 파트와의 협업을 원활히 하기 위해 스토리북을 세팅합니다.
+- Chromatic을 사용하여 배포합니다([배포 링크](https://www.chromatic.com/library?appId=66fb93d4f124a3b3c23717f6)).
+- `.stories.*` 파일은 components 디렉토리 하위 각 컴포넌트 폴더 내에 생성합니다.
+
+```bash
+- components
+  - ExampleComponent
+    - index.tsx
+    - index.stories.tsx
+```
+
+### SVG 파일 추가
+
+SVG 파일을 관리 및 사용의 용이성을 위해 `@svgr/cli`를 사용하여 리액트 컴포넌트화합니다.
+
+- `src/assets/icons/` 하위에 svg 파일 추가 후 다음의 스크립트 실행
+- `src/components/svgs` 디렉토리 하위에 추가되도록 합니다.
+
+```bash
+npm run svgr
+```
+
+### MSW
+
+API Mocking을 위해 msw를 사용합니다
+
+#### 사용 방법
+
+1. api 사용 위치에서 handler를 생성
+2. src/mocks/handlers 에 handler 추가
+3. storybook에서는 story 파일 내부의 파라미터로 핸들러 추가
+
+### 환경 변수
+
+1. NEXT_PUBLIC_DDD_API_URL : DDD 서버 api url
+2. NEXT_PUBLIC_API_MOCKING : msw 사용여부로 값이 `enabled` 이면 msw 활성화
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ["storage.googleapis.com"],
+  },
+};
 
 export default nextConfig;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		### 참고사항

		### 이미지 혹은 동영상
		### 이미지 혹은 동영상