Menú
apps/client, apps/market-owner, apps/design-system-web, 선택적 apps/admin 내부의 앱 전용 shared 컴포넌트를 생성, 스펙 작성, export, 검증할 때 사용합니다.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional 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를 사용합니다.