Skip to content

Commit 58d2d4f

Browse files
Hys-LeeHys-Lee
authored
디자인 시스템 forked repo에서 설정 완료 (#9)
* 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: 토큰 설정 및 스토리북 배포 설정 수정
1 parent bb1b512 commit 58d2d4f

File tree

20 files changed

+12283
-2453
lines changed

20 files changed

+12283
-2453
lines changed

‎.github/workflows/deploy-storybook.yml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Deploy Shared Storybook to Vercel
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- "components/shared/**" # shared 컴포넌트 폴더 변경 시
9+
- ".storybook/**" # 스토리북 설정 변경 시 (main.ts에 조건이 있으므로)
10+
- "package.json"
11+
- "components/shared/package.json"
12+
13+
jobs:
14+
deploy:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- name: Checkout code
18+
uses: actions/checkout@v4
19+
20+
- name: Setup Node.js
21+
uses: actions/setup-node@v4
22+
with:
23+
node-version: "20"
24+
cache: "npm"
25+
cache-dependency-path: "**/package-lock.json"
26+
27+
- name: Install dependencies
28+
run: npm install
29+
30+
- name: Build Shared Storybook # ⭐ 여기!
31+
# `npm run build-storybook:shared` 스크립트를 실행하여 STORYBOOK_SCOPE=shared를 적용
32+
run: npm run build-storybook:shared
33+
34+
- name: Deploy Storybook to Vercel
35+
uses: amondnet/vercel-action@v25
36+
with:
37+
vercel-token: ${{ secrets.VERCEL_STORYBOOK_TOKEN }}
38+
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID_STORYBOOK }}
39+
scope: "hys-lee"
40+
vercel-org-id: ${{ secrets.VERCEL_USER_ID }}
41+
# Vercel이 빌드된 디렉토리를 찾도록 publish-dir 설정
42+
# publish-dir: "./storybook-static-shared" # ⭐ 빌드 결과물 경로 변경
43+
vercel-args: "--prod ./storybook-static-shared"
44+
45+
# Vercel 프로젝트 설정에서 빌드 명령어를 'npm run build-storybook:shared'로 직접 지정해도 됨.
46+
# 그러나 GitHub Actions에서 빌드하고 결과물을 배포하는 것이 일반적.

‎.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
!.yarn/releases
1111
!.yarn/versions
1212

13+
# workspace dependencies
14+
/components/shared/node_modules
15+
1316
# testing
1417
/coverage
1518

@@ -20,6 +23,9 @@
2023
# production
2124
/build
2225

26+
# design system package
27+
/components/shared/dist/
28+
2329
# misc
2430
.DS_Store
2531
*.pem
@@ -39,3 +45,10 @@ yarn-error.log*
3945
# typescript
4046
*.tsbuildinfo
4147
next-env.d.ts
48+
49+
# storybook
50+
*storybook.log
51+
52+
53+
# local environment - vscode
54+
.vscode

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"trailingComma": "all"
3+
}

‎.storybook/CHANGELOG.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Meta } from "@storybook/blocks";
2+
3+
<Meta title="Changelog" />
4+
5+
# Change Log
6+
7+
## [0.0.1] - 2025-05-20
8+
9+
### Started
10+
11+
- 스토리북 관리 시작

‎.storybook/Introduction.mdx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Meta } from "@storybook/blocks";
2+
3+
<Meta title="Introduction" />
4+
5+
# **MOTIMO Design System**
6+
7+
<br />
8+
## 사용가이드
9+
10+
[스토리북 배포 주소 나중에 설정]
11+
12+
<br />
13+
14+
## 작성법
15+
16+
#### 스토리
17+
18+
- 기본 스토리 사용 방식을 따른다.
19+
20+
- title을 통해 사이드바의 디렉토리를 구성한다.
21+
22+
- 사용법은 다음과 같다.
23+
24+
```typescript
25+
// Test.stories.tsx
26+
import Test from "./Test";
27+
import { StoryObj } from "@storybook/react";
28+
29+
// meta는 공통 옵션.
30+
const meta = {
31+
title: "Example/Test",
32+
component: Test,
33+
args: {
34+
children: "asdf",
35+
},
36+
};
37+
export default meta;
38+
39+
type Story = StoryObj<typeof meta>;
40+
41+
// Primary는 공통. argTypes를 사용해 상호작용 가능하도록 한다.
42+
export const Primary: Story = {
43+
argTypes: {
44+
children: {
45+
control: "text",
46+
description: "보통은 텍스트를 입력하겠지",
47+
table: {
48+
category: "이야호",
49+
},
50+
},
51+
},
52+
args: {
53+
children: "버튼",
54+
},
55+
};
56+
57+
// 기타 스토리들은 args를 기본으로 간단히 처리함
58+
export const Ex1: Story = {
59+
args: {
60+
children: "기본값",
61+
},
62+
};
63+
```
64+
65+
#### 자동화
66+
67+
plop.js를 사용해서 추후 story들 자동 생성 예정.
68+
69+
## 디자인 토큰
70+
71+
디자인 토큰 스토리북 반영 추후 예정
72+
73+
## 버전
74+
75+
[0.0.1] - 2025-05-21

‎.storybook/main.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { StorybookConfig } from "@storybook/nextjs";
2+
import path from "path";
3+
// 커맨드 내 환경 변수 확인 (STORYBOOK_SCOPE가 'shared'이면 공유 컴포넌트만 로드)
4+
const STORYBOOK_SCOPE = process.env.STORYBOOK_SCOPE;
5+
6+
const config: StorybookConfig = {
7+
stories: [
8+
"./Introduction.mdx",
9+
"./CHANGELOG.mdx",
10+
...(STORYBOOK_SCOPE
11+
? [
12+
"../components/shared/**/*.stories.@(js|jsx|mjs|ts|tsx)",
13+
"../components/shared/**/*.mdx",
14+
]
15+
: ["../components/**/*.stories.@(js|jsx|mjs|ts|tsx)"]),
16+
],
17+
addons: [
18+
{
19+
name: "@storybook/addon-essentials",
20+
options: {
21+
docs: false,
22+
},
23+
},
24+
"@storybook/addon-docs",
25+
"@storybook/addon-designs",
26+
"@storybook/addon-interactions",
27+
],
28+
framework: {
29+
name: "@storybook/nextjs",
30+
options: {},
31+
},
32+
staticDirs: [path.resolve(__dirname, "../public")],
33+
};
34+
export default config;

‎.storybook/preview.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { Preview } from "@storybook/react";
2+
import "../app/globals.css";
3+
import {
4+
Title,
5+
Subtitle,
6+
Description,
7+
Primary,
8+
Controls,
9+
Stories,
10+
} from "@storybook/blocks";
11+
const preview: Preview = {
12+
tags: ["autodocs"],
13+
decorators: [
14+
(Story) => (
15+
<div
16+
style={{
17+
display: "flex",
18+
justifyContent: "center",
19+
alignItems: "center",
20+
}}
21+
>
22+
<Story />
23+
</div>
24+
),
25+
],
26+
parameters: {
27+
controls: {
28+
matchers: {
29+
color: /(background|color)$/i,
30+
date: /Date$/i,
31+
},
32+
},
33+
docs: {
34+
page: () => (
35+
<>
36+
<Title />
37+
<Description /> {/* component description이 여기 표시 */}
38+
<p>----</p>
39+
<Primary />
40+
<Controls />
41+
<p>EX</p>
42+
<Stories />
43+
<Subtitle /> {/* story description이 여기 표시 */}
44+
</>
45+
),
46+
},
47+
},
48+
};
49+
50+
export default preview;

‎README.md‎

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
# Motimo: FE
22

3-
## Getting Started
3+
## 임시 내용.. Token관련
44

5-
First, run the development server:
5+
> 일단 수동으로 tailwind 토큰화한다.
66
7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
15-
```
7+
- upstream의 design 브랜치에 토큰 json이 업데이트 된다.
8+
- `npm run build-tokens`를 통해 app/tokens.css를 업데이트 한다
169

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
10+
## ✨ Motimo 프론트엔드 레포지토리에 오신 것을 환영합니다!
1811

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
12+
## 🚀 Motimo 프론트엔드의 핵심 목표
2013

21-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
14+
## 🛠️ 기술 스택
2215

23-
## Learn More
16+
## 🚧 현재 상태 및 기여
2417

25-
To learn more about Next.js, take a look at the following resources:
18+
### 시작하기
2619

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
20+
### 기여 방법
2921

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
22+
## 🔗 백엔드 레포지토리
3123

32-
## Deploy on Vercel
24+
## 📧 연락처
3325

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
26+
## 📄 라이선스
3527

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
28+
이 프로젝트는 [예: MIT License]에 따라 라이선스됩니다. 자세한 내용은 `LICENSE` 파일을 참조하세요.

‎app/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "./tokens.css";
12
@import "tailwindcss";
23

34
:root {

‎app/tokens.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@theme {
2+
}

0 commit comments

Comments
 (0)