Conversation
wuzoo
commented
Apr 14, 2026
wuzoo
commented
- storybook 초기세팅
- storybook deploy 워크플로우 작성
- @ui, @design-tokens 샘플 코드 작성
- component 생성 시 스캐폴딩 스크립트 작성
- tsconfig 패키지 분리
- check ci 워크플로우 생성
| import * as styles from "./${name}.css"; | ||
|
|
||
| /** | ||
| * @ts-expect-error - 플레이스 홀더 |
There was a problem hiding this comment.
아 요거 착오가 있었네요. ts error는 아니고 lint가 본래 의도였어요.
근데 사실 개발자가 이 스크립트를 돌리고 개발에 바로 들어갈테니, 굳이 린트 에러를 무시하는건 필요없을 것 같네요.
ExceptAnyone
left a comment
ExceptAnyone
left a comment
There was a problem hiding this comment.
고생하셨습니다 ㅎㅎ
궁금한점만 몇개 남겨봤어용
| "devDependencies": { | ||
| "@biomejs/biome": "^2.4.6", | ||
| "@changesets/cli": "^2.27.0", | ||
| "@inquirer/prompts": "^7.2.0", |
There was a problem hiding this comment.
오 이거 신기하네요
요건 어떤거 만들기 위해 추가하셨나요?!
There was a problem hiding this comment.
cli 프롬프트에서 컴포넌트명을 입력받기 위해서 사용했어요.
| runs-on: ubuntu-latest | ||
| environment: | ||
| name: github-pages | ||
| url: ${{ steps.deployment.outputs.page_url }} |
There was a problem hiding this comment.
이러면 어디에서 url이 노출되는건가여?? 쉽게 접속가능한 곳에 노출되는건지 궁금합니다 JW!
There was a problem hiding this comment.
저렇게 설정해야 repository 우측 상단에 배포된 page 주소가 표기된다고 하네요 ?
jeonghoon11
left a comment
jeonghoon11
left a comment
There was a problem hiding this comment.
고생하셨어요!! 처음 보는 내용도 있고 많은걸 배워갑니다!!
| * @ts-expect-error - 플레이스 홀더 | ||
| * @description 컴포넌트 구현 후 지워주세요 | ||
| */ | ||
| export interface ${name}Props extends HTMLAttributes<HTMLDivElement> {} |
There was a problem hiding this comment.
scaffold 템플릿이 HTMLDivElement로 고정되어 있어서 button이나 input 같은 컴포넌트는 매번 수정해야 할 것 같아요! 반복 작업을 줄일 수 있게 루트 엘리먼트를 선택 가능하게 할 방법이 있을수도 있겠다는 생각도 들고 음.. 궁금하네용!
There was a problem hiding this comment.
컴포넌트와 인터페이스를 수기로 작성하는 것보다, 파일과 기본 코드 프레임을 빠르게 생성하고 일부분 수정하는 비용이 훨씬 적다고 판단했기 때문인데요,
html element를 입력받기에는 컴파운드 패턴과 같은 엣지 케이스를 모두 대응하는게 불가능하기 때문에 오버엔지니어링이라고 판단했어요.
그 과정에서 그냥 의미없는 태그인 div를 넣기로 판단했고, 상속 또한 div attribute를 해주었어요.
다시 생각해보면 차라리 extends ...를 직접 작성하는게 더 나을거 같아서 인터페이스에서 상속받는 부분은 삭제하겠습니당.
| }, | ||
| viteFinal: (viteConfig) => | ||
| mergeConfig(viteConfig, { | ||
| plugins: [vanillaExtractPlugin()], |
There was a problem hiding this comment.
단순 궁금증으로 이전에 design-system을 만들때 각 제품처에서 다른 css 라이브러리를 쓰다보니 스타일주입이나 interface에서 차이 및 제한이 있던 걸로 기억하는데 vanilla extract css 써도 괜찮은지, 생각하신 부분이 있으신지 궁금합니다!!
There was a problem hiding this comment.
제품처에서는 style prop을 사용하는 걸로 계획하고 있어요. emotion을 대부분 쓸텐데 디자인시스템에서 제공하는 컴포넌트를 커스텀하고 싶을 때는 style로 주입하도록이요.
ds에서 제공하는 컴포넌트들은 바익을 쓰기 때문이 일단 런타임이랑 상관없고 빌드타임에 className이 들어갈테고, 제품처에서 주입하는 style 객체들은 런타임에 할당돼요.
css는 cascading으로 우선순위가 판단되기 때문에 사용처에서 인라인으로 주입한 style 속성의 css가 우선적으로 반영될거에요.
| "devDependencies": { | ||
| "@biomejs/biome": "^2.4.6", | ||
| "@changesets/cli": "^2.27.0", | ||
| "@inquirer/prompts": "^7.2.0", |
There was a problem hiding this comment.
오 이거 신기하네요
요건 어떤거 만들기 위해 추가하셨나요?!
wuzoo
force-pushed
the
feat/storybook
branch
2 times, most recently
from
4eca410 to
2061a42
Compare
📦 Preview 배포 완료 |
📦 Preview 배포 완료 |
5 participants
