feat/#39 changeset 세팅 및 npm 배포 CI/CD 설정

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/big-eggs-crash.md

@@ -0,0 +1,6 @@
+---
+"warrr": patch
+"primitive": patch
+---
+
+changeset 생성 실습

.changeset/config.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
+  "changelog": [
+    "@changesets/cli/changelog",
+    {
+      "repo": "team-warrr/warrr-ui"
+    }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["primitive-docs", "themed-docs"]
+}

.github/ISSUE_TEMPLATE/component-template.md

@@ -0,0 +1,46 @@
+---
+name: Component Template
+about: Describe this issue template's purpose here.
+title: "컴포넌트 이슈 작성 템플릿"
+labels: "🎯 기능 구현"
+assignees: ""
+---
+
+### **용도 (Usage)**
+
+<!-- 컴포넌트의 사용 용도에 대해 명시합니다.
+피그마에 작성해둔 내용을 위주로 사용하고, 덧붙일 내용이 있다면 붙이면 됩니다.
+
+> 콘텐츠 섹션을 시각적으로 구분할 때 사용합니다. 레이아웃의 구조를 명확히 하며, 사용자의 정보 탐색을 돕습니다.
+
+-->
+
+### **기능 (Props)**
+
+<!-- 컴포넌트의 props 별 기능에 대해 명시합니다.
+
+> - orientation: horizontal, vertical -> Divider의 방향을 작성합니다. 이에 따라 aria 태그 및 HTML 태그가 변경됩니다.
+
+-->
+
+### **참고 (Reference)**
+
+<!-- 컴포넌트 개발 시 참고한 자료들을 적습니다.
+
+- [NextUI](https://nextui.org/docs/components/divider)
+
+-->
+
+### **마일스톤 (Milestones)**
+
+<!-- 프로젝트를 제 시간에 맞추기 위해 테크 스펙의 내용을 바탕으로 추정한 마일스톤을 공유합니다. 실험 계획, 배포 날짜를 포함해 최대한 자세히 적습니다.
+
+> ~ 9/25: BPL 컴포넌트 개발
+9/28 ~ 9/29: 실험 변수 추가, 로컬 변수 추가
+9/30 ~ 10/4: 추석 연휴!
+10/5: 하단 탭 확장 가능한 구조로 리팩토링
+10/6 ~ 10/8: 비즈니스 로직 구현
+10/12 ~ 10/20: 사용자 이벤트 부착 및 미진한 내용 보충
+10/20: 2.45.0 코드 프리즈 (이때까지 내부 기능 테스트, 이벤트 로깅 테스트)
+10/21 ~ 10/23: 2.45.0 릴리즈 QA
+11/4: 2.45.0 Rollout -->

.github/PULL_REQUEST_TEMPLATE/component_template.md

@@ -0,0 +1,26 @@
+<!-- PR 제목 한 번 확인해주세요!
+브랜치 이름 + 주된 작업 요약
+ex. feat/#1 프로젝트 세팅 -->
+
+### 예상 동작 (Expected Behavior)
+
+<!-- 컴포넌트를 사용했을 때의 예상 동작에 대해 작성합니다.
+
+> 콘텐츠 섹션이 시각적으로 구분이 됩니다.
+> 레이아웃의 구조를 명확히 하며, 사용자의 정보 탐색을 돕습니다.
+
+-->
+
+### 고민했던 내용 (Considerations)
+
+<!-- 컴포넌트를 개발하며 어떤 것을 고민했는지, 작성한 로직 이외에 다른 대안이나 방법이 있었는지를 기술합니다.
+
+> [radix ui의 Separator](https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/separator/src/Separator.tsx#L10)의 경우 ORIENTATIONS 변수를 생성 후 Orientaion이라는 type을 만들었습니다.
+
+warrr-ui에서는 Orientation의 type은 2개만 사용될 예정이고, `type Orientation = "horizontal" | "vertical";`로 작성하는 것이 가독성면에서 더 좋다고 판단하여 이와같이 작성하였습니다.
+
+-->
+
+### 관련 이슈
+
+- resolved #(issue_num)

.github/environments/versions.env

@@ -0,0 +1,2 @@
+PNPM_VERSION=8.15.6
+NODE_VERSION=20

.github/workflows/chromatic_auto_deploy.yml

@@ -16,27 +16,53 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 레포지토리 체크아웃
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Node.js 설정
+      - name: 환경 변수 설정
+        id: set-env
+        run: |
+          chmod +x ./scripts/set-env.sh
+          ./scripts/set-env.sh
+
+      - name: node.js 설정
         uses: actions/setup-node@v4
         with:
-          node-version: 20
-
-      - name: Corepack 활성화
-        run: corepack enable
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: pnpm 설치
-        run: corepack prepare pnpm@latest --activate
+        uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: pnpm 의존성 캐시
+        id: cache-pnpm
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            node_modules
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
 
       - name: 의존성 설치
-        run: pnpm install --no-frozen-lockfile
+        run: |
+          chmod +x ./scripts/install-dependencies.sh
+          ./scripts/install-dependencies.sh
+
+      - name: 토큰 존재 여부 체크
+        run: |
+          if [ -n "${{ secrets.PRIMITIVE_UI_CHROMATIC_TOKEN }}" ]; then
+            echo "PRIMITIVE_UI_CHROMATIC_TOKEN is set"
+          else
+            echo "PRIMITIVE_UI_CHROMATIC_TOKEN is not set"
+          fi
 
       - name: chromatic에 배포
         id: publish_chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.PRIMITIVE_UI_CHROMATIC_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/label-vrt-update.yml

@@ -0,0 +1,107 @@
+name: VRT 스냅샷 업데이트
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  update-snapshots:
+    if: github.event.label.name == 'VRT'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 레포지토리 체크아웃
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 환경 변수 설정
+        id: set-env
+        run: |
+          chmod +x ./scripts/set-env.sh
+          ./scripts/set-env.sh
+
+      - name: node.js 설정
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: pnpm 설치
+        uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: pnpm 의존성 캐시
+        id: cache-pnpm
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            node_modules
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: playwright 브라우저 캐시
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: 의존성 설치
+        run: |
+          chmod +x ./scripts/install-dependencies.sh
+          ./scripts/install-dependencies.sh
+
+      - name: playwright 설치
+        run: |
+          chmod +x ./scripts/install-playwright.sh
+          ./scripts/install-playwright.sh
+
+      - name: 스토리북 빌드
+        run: pnpm run build-storybook
+
+        working-directory: packages/primitive
+      - name: 스토리북 실행
+        run: |
+          npx serve -l 6006 packages/primitive/storybook-static &
+          echo $! > .storybook-pid
+
+      - name: 스냅샷 업데이트
+        run: pnpm run e2e:update
+
+      - name: 스토리북 프로세스 종료
+        if: always()
+        run: kill $(cat .storybook-pid)
+
+      - name: 변경된 스냅샷 커밋 및 푸시
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .playwright
+          git diff --staged --quiet || git commit -m "Update VRT snapshots in .playwright folder"
+          git push origin HEAD:${{ github.head_ref }}
+
+      - name: PR 코멘트 작성
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## VRT 스냅샷 업데이트 완료\n\n스냅샷이 성공적으로 업데이트되었습니다. 변경된 스냅샷이 이 PR에 포함되었습니다. 리뷰해주세요.'
+            })
+
+      - name: VRT 레이블 제거
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.rest.issues.removeLabel({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              name: 'VRT'
+            })

.github/workflows/pr-dday-labeler.yml

@@ -0,0 +1,22 @@
+name: PR D-day Labeler
+
+on:
+  schedule:
+    - cron: "0 15 * * *"
+  pull_request:
+    types: [opened, reopened]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  label-prs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: PR D-day Labeler
+        uses: team-warrr/pr-dday-labeler@1.0.3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          slack-webhook-url: ${{ secrets.SLACK_WEBHOOK_URL }}