storybook / chromatic 배포

.github/workflows/chromatic.yml

@@ -0,0 +1,46 @@
+name: 'storybook Chromatic 배포'
+
+on:
+  push:
+    branches:
+      - set/storybook
+      # - main # 메인 브랜치에 푸시될 때 실행
+    # paths:
+    #   - 'apps/storybook/**'
+
+jobs:
+  storybook-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.10.0
+
+      - uses: actions/setup-node@v4
+        with:
+          cache: "pnpm"
+          cache-dependency-path: "pnpm-lock.yaml"
+          node-version-file: ".nvmrc"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build Storybook
+        run: pnpm --filter storybook build-storybook
+
+      - name: publish to chromatic
+        id: chromatic
+        continue-on-error: true
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          onlyChanged: true
+          externals: apps/**
+          workingDir: apps/storybook

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# storybook
+storybook-static

.husky/pre-commit

@@ -0,0 +1,5 @@
+# lockfile check
+(git add **/package.json pnpm-lock.yaml && pnpm install --frozen-lockfile > /dev/null) || (echo "\nMFE - lockfile 이 최신이 아닙니다. 'pnpm install'로 lockfile 을 업데이트 해주세요\n" && exit 1)
+
+# lint check
+npx lint-staged || (echo "\n MFE - lint에 맞게 코드를 수정해주세요.\n" && exit 1)

.nvmrc

@@ -0,0 +1 @@
+20.16.0

README.md

@@ -1,84 +1,72 @@
-# Turborepo starter
+# Date Project (가제)
 
-This Turborepo starter is maintained by the Turborepo core team.
+## 개발 환경 설정
 
-## Using this example
+### Node.js 버전 관리
 
-Run the following command:
+이 프로젝트는 Node.js 버전 관리를 위해 `.nvmrc` 파일을 사용합니다. 현재 프로젝트는 Node.js 20.16.0 버전을 사용합니다.
 
-```sh
-npx create-turbo@latest
-```
-
-## What's inside?
-
-This Turborepo includes the following packages/apps:
-
-### Apps and Packages
+nvm(Node Version Manager)이 설치되어 있다면 다음 명령어로 올바른 Node.js 버전을 설정할 수 있습니다:
 
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
-- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
+```bash
+nvm use
+```
 
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+nvm이 설치되어 있지 않다면 [nvm 설치 가이드](https://github.com/nvm-sh/nvm#installing-and-updating)를 참조하세요.
 
-### Utilities
+### pnpm 패키지 관리
 
-This Turborepo has some additional tools already setup for you:
+이 프로젝트는 패키지 관리를 위해 pnpm을 사용하며, package.json의 `packageManager` 필드를 통해 pnpm 버전(9.10.0)을 관리합니다. Node.js 18 이상에서 제공되는 corepack을 사용하면 별도의 pnpm 설치 없이 프로젝트에 맞는 버전을 자동으로 사용할 수 있습니다.
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+corepack 활성화:
 
-### Build
+```bash
+corepack enable
+```
 
-To build all apps and packages, run the following command:
+corepack을 활성화하면 package.json의 `packageManager` 필드에 지정된 pnpm 버전(9.10.0)이 자동으로 사용됩니다. 수동으로 설정하려면:
 
-```
-cd my-turborepo
-pnpm build
+```bash
+corepack prepare [email protected] --activate
 ```
 
-### Develop
+### Git 훅 설정
 
-To develop all apps and packages, run the following command:
+이 프로젝트는 husky를 사용하여 Git 훅을 관리하고, lint-staged를 통해 커밋 전 코드 품질 검사를 수행합니다.
 
-```
-cd my-turborepo
-pnpm dev
+- **pre-commit**: 커밋 전에 변경된 파일에 대해 린트 및 포맷 검사를 수행합니다.
+
+```bash
+# Git 훅이 설정되지 않은 경우 실행
+pnpm prepare
 ```
 
-### Remote Caching
+lint-staged 설정은 다음과 같습니다:
 
-> [!TIP]
-> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
+- JavaScript/TypeScript 파일: ESLint 및 Prettier 적용
+- JSON/CSS/MD 파일: Prettier 적용
 
-Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+### 프로젝트 설정
 
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
+의존성 설치:
 
+```bash
+pnpm install
 ```
-cd my-turborepo
-npx turbo login
-```
-
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
 
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+개발 서버 실행:
 
+```bash
+pnpm dev
 ```
-npx turbo link
-```
 
-## Useful Links
+## 모노레포 구조
+
+이 프로젝트는 Turborepo를 사용한 모노레포로 구성되어 있으며, pnpm workspace를 통해 패키지를 관리합니다. 주요 디렉토리 구조는 다음과 같습니다:
 
-Learn more about the power of Turborepo:
+- `apps/`: 애플리케이션 코드가 있는 디렉토리
+  - `storybook/`: 컴포넌트 문서화를 위한 스토리북
+  - 기타 애플리케이션
+- `packages/`: 공유 패키지가 있는 디렉토리
 
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+## 기타 정보

apps/storybook/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen",
+    skipCompiler: true,
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

apps/storybook/.storybook/preview.ts

@@ -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;

apps/storybook/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "storybook",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "3.2.5",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/addon-interactions": "8.6.4",
+    "@storybook/addon-links": "8.6.4",
+    "@storybook/blocks": "8.6.4",
+    "@storybook/core-common": "8.6.4",
+    "@storybook/manager-api": "8.6.4",
+    "@storybook/preview-api": "^8.3.3",
+    "@storybook/react": "8.6.4",
+    "@storybook/react-vite": "8.6.4",
+    "@storybook/theming": "8.6.4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "chromatic": "^11.27.0",
+    "postcss": "^8",
+    "storybook": "8.6.4",
+    "typescript": "^5",
+    "vite": "^6.2.1"
+  }
+}

apps/storybook/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

apps/storybook/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package.json

@@ -8,20 +8,35 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "check-types": "turbo run check-types",
     "version": "turbo run changeset version",
-    "changelog": "turbo run changeset changelog"
+    "changelog": "turbo run changeset changelog",
+    "prepare": "husky",
+    "lint-staged": "lint-staged",
+    "storybook": "pnpm --filter storybook dev"
   },
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@storybook/react": "8.6.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^5.2.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
     "prettier": "^3.5.3",
     "turbo": "^2.4.4",
-    "typescript": "5.8.2"
+    "typescript": "4.9.5"
   },
-  "packageManager": "pnpm@9.0.0",
+  "packageManager": "pnpm@9.10.0",
   "engines": {
-    "node": ">=18"
+    "node": ">=20.16.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,css,md}": [
+      "prettier --write"
+    ]
   }
 }

packages/eslint-config/base.js

@@ -17,7 +17,7 @@ export const config = [
     rules: {
       "turbo/no-undeclared-env-vars": "warn",
       "prettier/prettier": "warn",
-      "react/button-has-type": ["error", { allowCustom: false }],
+      "react/button-has-type": "error",
     },
   },
   {

packages/ui/src/button.css

@@ -0,0 +1,35 @@
+.btn-primary {
+  background-color: #3b82f6;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.btn-primary:hover {
+  background-color: #2563eb;
+}
+
+.btn-secondary {
+  background-color: #6b7280;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.btn-secondary:hover {
+  background-color: #4b5563;
+}
+
+.btn-large {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+.btn-small {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}