상현 레포에서만 storybook배포 되도록 수정 및 zustand 설치 (#11)

* feat: 스토리북 초기 설정

* chore: 로컬 환경 설정 gitignore에 추가

* feat: 디자인 토큰 tailwind 적용 설정

* feat: 스토리북 배포용 공용 컴포넌트 설정

* feat: tailwind설정에 postcss관련 설정 임시 복원 및 storybook 배포 설정

* feat: 스토리북 배포 관련 설정 추가

* feat: 디자인 시스템 스토리북 초기 및 테스트용 설정

* feat: 프리티어 및 린트 설치 및 설정 (임시)

* style: 린트 및 프리티어로 인한 코드 스타일 변경

* feat: 디자인 시스템 스토리북 배포 설정 수정

포크한 레포에 작동 테스틀 위해 연결
스토리북 형태도 세팅함

* feat: token 변환 설정파일 수정

구조 수정 및 tailwind prefix에 맞게 mapping

* docs: 디자인 시스템 관련 리드미 템플릿 수정

* feat: 디자인 시스템 패키지 배포 테스트 성공

* chore: tailwind/postcss 버전 복구

* feat: 스토리북 스타일 autodocs처리

* docs: 디자인 시스템 관련 문서들 정리(임시)

* feat: 토큰 설정 및 스토리북 배포 설정 수정

* feat: 빌드 관련 tailwindcss/postcss 버전 수정 및 gitignore 포함

이전 패키지 버전에선 빌드가 안 됐음.

* feat: ci linux환경에서의 스토리북 빌드 관련 패키지 설정 수정

* Merge branch 'design' into main

* feat: 디자인 시스템 스토리북 예시 수정

* feat: zustand설치

* feat: 상현 개인 레포에서 스토리북 배포 동작하도록 수정

vercel 정책 상 prography계정의 레포는 organization이라 유료 플랜이라.

* feat: deploy-storybook path에 자기자신 포함해, 변경 시 동작하도록 수정

* fix: deploy-storybook path경로 수정

마이너 수정이라 main에서 진행

Author: Hys-Lee

.github/workflows/deploy-storybook.yml

@@ -9,10 +9,18 @@ on:
       - ".storybook/**" # 스토리북 설정 변경 시 (main.ts에 조건이 있으므로)
       - "package.json"
       - "components/shared/package.json"
+      - ".github/workflows/deploy-storybook.yml"
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
+
+    ## hys-lee의 레포에서만 동작하도록 제한. (배포 관련 제한사한으로)
+    if: |
+      github.repository == 'Hys-Lee/10th-Motimo-FE' &&
+      github.event_name == 'push' &&
+      github.ref == 'refs/heads/main'
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

components/shared/Test.stories.tsx

@@ -1,5 +1,8 @@
+// Test.stories.tsx
 import Test from "./Test";
 import { StoryObj } from "@storybook/react";
+
+// meta는 공통 옵션.
 const meta = {
   title: "Example/Test",
   component: Test,
@@ -10,4 +13,26 @@ const meta = {
 export default meta;
 
 type Story = StoryObj<typeof meta>;
-export const Primary: Story = {};
+
+// Primary는 공통. argTypes를 사용해 상호작용 가능하도록 한다.
+export const Primary: Story = {
+  argTypes: {
+    children: {
+      control: "text",
+      description: "보통은 텍스트를 입력하겠지",
+      table: {
+        category: "이야호",
+      },
+    },
+  },
+  args: {
+    children: "버튼",
+  },
+};
+
+// 기타 스토리들은 args를 기본으로 간단히 처리함
+export const Ex1: Story = {
+  args: {
+    children: "기본값",
+  },
+};

components/shared/package.json

@@ -22,5 +22,9 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "optionalDependencies": {
+    "lightningcss-linux-x64-gnu": "1.30.1",
+    "@tailwindcss/oxide-linux-x64-gnu": "4.1.7"
   }
 }

package-lock.json

@@ -20,7 +20,8 @@
     "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@storybook/addon-designs": "^8.2.1",