feat/#87 slot 컴포넌트 개발

.eslintrc.json

@@ -71,6 +71,12 @@
       "rules": {
         "import/default": "off"
       }
+    },
+    {
+      "files": ["*.stories.tsx"],
+      "rules": {
+        "react/display-name": "off"
+      }
     }
   ]
 }

.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/workflows/chromatic_auto_deploy.yml

@@ -25,18 +25,25 @@ jobs:
         with:
           node-version: 20
 
-      - name: Corepack 활성화
-        run: corepack enable
-
-      - name: pnpm 설치
-        run: corepack prepare pnpm@latest --activate
+      - name: pnpm 8.15.6 설치
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
 
       - name: 의존성 설치
         run: pnpm install --no-frozen-lockfile
 
+      - name: Check if token exists
+        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,73 @@
+name: VRT 스냅샷 업데이트
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  update-snapshots:
+    if: github.event.label.name == 'VRT'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
+
+      - name: 의존성 설치
+        run: pnpm install
+
+      - name: Playwright 설치
+        run: pnpm exec playwright install --with-deps
+
+      - 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 }}

.github/workflows/pr-vrt.yml

@@ -0,0 +1,84 @@
+name: PR VRT 테스트
+on:
+  pull_request:
+    branches: [develop]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  vrt-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
+
+      - name: 의존성 설치
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Playwright 설치
+        run: pnpm exec playwright install --with-deps
+
+      - name: 스토리북 빌드
+        run: pnpm run build-storybook
+        working-directory: packages/primitive
+
+      - name: 스토리북 실행
+        run: |
+          npx serve -l 6006 packages/primitive/storybook-static &
+          echo $! > .storybook-pid
+
+      - name: VRT 테스트 실행
+        id: vrt-test
+        run: |
+          if pnpm run e2e; then
+            echo "결과=성공" >> $GITHUB_OUTPUT
+          else
+            echo "결과=실패" >> $GITHUB_OUTPUT
+          fi
+
+      - name: 스토리북 프로세스 종료
+        if: always()
+        run: kill $(cat .storybook-pid)
+
+      - name: 테스트 결과 및 diff 이미지 업로드
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: vrt-results
+          path: |
+            playwright-report/
+            .playwright/
+          retention-days: 7
+
+      - name: PR 코멘트 작성 (성공)
+        uses: actions/github-script@v6
+        if: success()
+        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\nVRT 테스트가 성공적으로 완료되었습니다.'
+            })
+
+      - name: PR 코멘트 작성 (실패)
+        uses: actions/github-script@v6
+        if: failure()
+        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\nVRT 테스트가 실패했습니다. 자세한 내용은 첨부된 테스트 결과와 diff 이미지를 확인해주세요.\n\n[테스트 결과 확인](https://github.com/${{github.repository}}/actions/runs/${{github.run_id}})\n\n스냅샷 업데이트가 필요한 경우, PR에 "VRT" 레이블을 추가해주세요.'
+            })

.gitignore

@@ -37,4 +37,10 @@ yarn-error.log*
 .DS_Store
 *.pem
 
-*storybook.log
+*storybook.log
+.eslintcache
+local.secrets
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.husky/pre-commit

@@ -0,0 +1,10 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm lint
+
+pnpm test
+if [ $? -ne 0 ]; then
+  echo "테스트 실패"
+  exit 1
+fi

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm format

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "**.*.{ts,tsx}": ["pnpm lint", "pnpm prettier"]
+}

.npmrc

@@ -0,0 +1 @@
+engine-strict=true