القائمة
apps/client, apps/market-owner, apps/design-system-web, 선택적 apps/admin 내부의 앱 전용 shared 컴포넌트를 생성, 스펙 작성, export, 검증할 때 사용합니다.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
endpoint 문서를 기준으로 API helper, TanStack Query hook, 타입, 에러/cache 동작을 구현할 때 사용합니다.
GitHub 브라우저 PR 리뷰에서 visible diff, review comment, check status, local verification 여부를 분리해 기록할 때 사용합니다.
packages/design-system 공통 컴포넌트를 Figma/이미지/상태 요구사항 기반으로 생성, 구현, story/spec/export 검증할 때 사용합니다.
필드 검증, submit, mutation, error, disabled/loading/success 상태가 있는 프론트엔드 폼 흐름을 구현할 때 사용합니다.
프론트엔드 구현 또는 리뷰 중 Toss Frontend Fundamentals의 응집도 기준으로 함께 수정되는 component, hook, type, fixture, spec, form 흐름 배치를 점검할 때 사용합니다.
프론트엔드 구현 또는 리뷰 중 Toss Frontend Fundamentals의 결합도 기준으로 hook 책임, props drilling, shared/design-system 승격, context, 중복 제거를 점검할 때 사용합니다.
| name | app-shared-component-workflow |
| description | apps/client, apps/market-owner, apps/design-system-web, 선택적 apps/admin 내부의 앱 전용 shared 컴포넌트를 생성, 스펙 작성, export, 검증할 때 사용합니다. |
한 앱 안에서 여러 페이지가 재사용하지만, 아직 packages/design-system으로 올릴 만큼 cross-app reuse가 확정되지 않은 컴포넌트를 일관되게 배치합니다.
client, market-owner, design-system-web, 필요 시 adminui 또는 layout| 위치 | 사용 기준 |
|---|---|
apps/{app}/src/domains/{domain}/{page}/components | 한 페이지 또는 라우트에서만 쓰는 컴포넌트 |
| `apps/{app}/src/shared/components/{ui | layout}` |
packages/design-system | 앱/도메인과 무관하고 여러 앱에서 재사용할 공통 primitive |
앱 shared 컴포넌트는 특정 앱의 제품 copy, route, API data에 직접 묶이지 않아야 합니다. 그런 책임이 필요하면 page-local 컴포넌트로 둡니다.
recipes/add-app-shared-component.mddocs/code-quality/frontend-fundamentals.mddocs/code-quality/frontend-readability.md, docs/code-quality/frontend-predictability.md, docs/code-quality/frontend-cohesion.md, docs/code-quality/frontend-coupling.mddocs/code-quality/frontend-logic-composition.mddocs/workflows/spec-writing.md: 새 spec 작성 또는 갱신이 필요할 때docs/architecture/app-structure.md: app shared 위치나 승격 경계가 애매할 때gen:app-component scaffold를 사용합니다.ComponentName.spec.md를 먼저 채워 purpose, usage, props, states, accessibility, styling constraints를 정리합니다.ComponentName.tsx를 구현합니다.ComponentName과 ComponentNameProps만 export합니다.frontend-fundamentals-review를 추가로 적용했습니다.design-system-component-workflow를 사용합니다.