main << develop

.coderabbit.yaml

@@ -0,0 +1,16 @@
+language: 'ko-KR'
+early_access: false
+
+reviews:
+  profile: 'chill'
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: true
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+    enabled: true
+    drafts: false
+
+chat:
+  auto_reply: true

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,15 @@
+name: '📌 Feat'
+description: '새로운 기능 또는 명세가 있나요?'
+title: '[Feat] '
+labels: '📌 feat'
+body:
+  - type: textarea
+    attributes:
+      label: Task Description
+      placeholder: 새로운 기능에 대한 설명을 작성해 주세요.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ETC
+      placeholder: 추가 전달 사항이 있다면 작성해 주세요.

.github/ISSUE_TEMPLATE/fix.yml

@@ -0,0 +1,15 @@
+name: '🛠️ Fix'
+description: '버그 혹은 해결해야할 문제가 생겼나요?'
+title: '[Fix] '
+labels: '🛠️ Fix'
+body:
+  - type: textarea
+    attributes:
+      label: Task Description
+      placeholder: 버그 혹은 해결해야할 문제에 대한 설명을 작성해 주세요.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ETC
+      placeholder: 추가 전달 사항이 있다면 작성해 주세요.

.github/ISSUE_TEMPLATE/refactor.yml

@@ -0,0 +1,15 @@
+name: '🧩 Refactor'
+description: '리팩터링을 해야할 부분이 있나요?'
+title: '[Refactor] '
+labels: '🧩 refactor'
+body:
+  - type: textarea
+    attributes:
+      label: Task Description
+      placeholder: 리팩토링에 대한 설명을 작성해 주세요 (+리팩토링 이유).
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ETC
+      placeholder: 추가 전달 사항이 있다면 작성해 주세요.

.github/pull_request_template.md

@@ -0,0 +1,17 @@
+## 📌 Related Issues
+
+> 관련된 Issue를 태그해주세요. (e.g. - close #25)
+
+- close #
+
+## 📄 Tasks
+
+<!-- 해당 PR에 대한 작업 내용을 요약하여 작성해주세요. (없을 경우 section 삭제) -->
+
+## ⭐ PR Point (To Reviewer)
+
+<!-- 리뷰어에게 추가로 전달할 사항이 있다면 작성해주세요. (없을 경우 section 삭제) -->
+
+## 📷 Screenshot
+
+<!-- 작업한 내용에 대한 자료가 필요하다면 첨부해주세요. (없을 경우 section 삭제)-->

.github/workflows/chromatic.yml

@@ -0,0 +1,76 @@
+name: 'Chromatic Publish'
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+permissions: write-all
+
+jobs:
+  storybook:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install PNPM
+        run: npm i -g pnpm
+
+      - name: Cache node modules
+        id: cache-node
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        if: steps.cache-node.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook for design system(pds)
+        run: pnpm --filter @pinback/design-system run build:storybook
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/design-system
+          buildScriptName: build:storybook
+          onlyChanged: true
+          autoAcceptChanges: true
+          exitOnceUploaded: true
+        env:
+          CHROMATIC_TEMP_DIR: './.chromatic-tmp'
+      - name: Clean storybook cache
+        run: rm -rf packages/design-system/node_modules/.cache/storybook
+
+      - name: Comment PR on Success
+        if: success() && github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: ${{ github.event.number }}-storybook
+          message: |
+            ✅ Storybook chromatic 배포 확인:
+            🐿️ [storybook](${{ steps.chromatic.outputs.storybookUrl }})
+
+      - name: Comment PR on Failure
+        if: failure() && github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: ${{ github.event.number }}-storybook
+          message: |
+            🚨 Storybook 배포 실패
+            : Github Actions 로그를 확인해주세요.

.github/workflows/ci.yml

@@ -0,0 +1,52 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Extract Node.js version from package.json
+        id: get_node_version
+        run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.get_node_version.outputs.version }}
+
+      - name: Setup Pnpm
+        uses: pnpm/action-setup@v4
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Run ESLint
+        run: pnpm run lint
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Extract Node.js version from package.json
+        id: get_node_version
+        run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.get_node_version.outputs.version }}
+
+      - name: Setup Pnpm
+        uses: pnpm/action-setup@v4
+
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run build

.github/workflows/label.yml

@@ -0,0 +1,52 @@
+name: Auto Labeler based on Branch Name
+
+on:
+  pull_request:
+    types: [opened]
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  add-label:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Add label based on branch prefix
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const labelMapping = {
+              'setting': 'setting',
+              'feat': 'feat',
+              'fix': 'fix',
+              'api': 'api',
+              'refactor': 'refactor',
+              'chore': 'chore',
+              'deploy': 'deploy',
+              'comment': 'comment',
+              'test': 'test',
+              'rename': 'rename',
+              'remove': 'remove',
+              'docs': 'docs',
+            };
+
+            const branchName = context.payload.pull_request.head.ref;
+            console.log(`Branch name is: ${branchName}`);
+
+            const branchPrefix = branchName.split('/')[0];
+            console.log(`Branch prefix is: ${branchPrefix}`);
+
+            const labelToAdd = labelMapping[branchPrefix];
+
+            if (labelToAdd) {
+              console.log(`Found matching label: ${labelToAdd}`);
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                labels: [labelToAdd]
+              });
+            } else {
+              console.log('No matching label found for the branch prefix.');
+            }

.github/workflows/review-assign.yml

@@ -0,0 +1,18 @@
+name: auto-Assign Reviewer and Assignee
+
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  assign:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: hkusu/review-assign-action@v1
+        with:
+          assignees: ${{ github.event.pull_request.user.login }}
+          reviewers: ${{ vars.REVIEWERS }}

.gitignore

@@ -36,3 +36,10 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# typescript
+# 증분 빌드 정보 파일
+*.tsbuildinfo
+
+*storybook.log
+storybook-static

.prettierrc.js

@@ -0,0 +1,11 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  printWidth: 80,
+  endOfLine: 'lf',
+  importOrder: ['^react', '^@pinback/(.*)$', '^@/(.*)$', '^[./]'],
+  plugins: ['prettier-plugin-tailwindcss'],
+};

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from "path"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/react-vite'),
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

.vscode/settings.json

@@ -3,5 +3,21 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "cSpell.words": ["pinback", "PinBack", "turbopack", "turborepo", "trivago"],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.classFunctions": ["clsx", "cn", "cva", "tw"],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "always"
+  },
+  "tailwindCSS.suggestions": true,
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "tailwindCSS.experimental.configFile": "./packages/design-system/styles.css"
 }