diff --git a/.claude/common b/.claude/common index 2def6f7..baaa4ff 160000 --- a/.claude/common +++ b/.claude/common @@ -1 +1 @@ -Subproject commit 2def6f705dff3c9bd71795a7c3bd4d2c0a8cb529 +Subproject commit baaa4ff96ba928b74c7d3db9cc777ddbbf083059 diff --git a/.claude/project/architecture.md b/.claude/project/architecture.md index 6eeae49..42272bd 100644 --- a/.claude/project/architecture.md +++ b/.claude/project/architecture.md @@ -1,39 +1,46 @@ -# 아키텍처 (Sample) +# 아키텍처 + +> 이 파일은 `fe-common-rules/templates/project/architecture.md` 에서 복사된 양식입니다. +> 프로젝트의 레이어 구조와 데이터 흐름을 간단히 설명해주세요. ## 레이어 구조 +<프로젝트의 레이어 구조를 그림 또는 텍스트로 그려주세요> + ``` -┌───────────────────────────────────┐ -│ pages (Nuxt) │ ← 라우팅, 데이터 페칭 진입점 -├───────────────────────────────────┤ -│ components │ ← 재사용 UI (도메인/공용 분리) -├───────────────────────────────────┤ -│ composables (use*) │ ← 상태 + 로직 (뷰 독립) -├───────────────────────────────────┤ -│ composables/api (wrapper) │ ← 서버 통신 단일 창구 -├───────────────────────────────────┤ -│ server/api │ ← Nuxt 서버 라우트 -└───────────────────────────────────┘ +┌───────────────────────────────┐ +│ presentation │ ← pages / components +├───────────────────────────────┤ +│ logic │ ← composables / hooks / stores +├───────────────────────────────┤ +│ data access │ ← api wrapper / queries +├───────────────────────────────┤ +│ server │ ← 서버 라우트 / BFF +└───────────────────────────────┘ ``` -## 규칙 +## 의존 규칙 -- 하위 레이어는 상위 레이어를 import 할 수 없습니다. (단방향 의존) -- `components` 는 비즈니스 로직을 직접 수행하지 않고, composable 에 위임합니다. -- 전역 상태는 필요한 경우에만 Pinia store 로 승격합니다. +- 상위 → 하위 **단방향 의존**만 허용 +- 같은 레이어 간 순환 import 금지 +- <프로젝트 고유 규칙 추가> ## 데이터 흐름 -1. 사용자 이벤트 → `components` 에서 `composable` 호출 -2. `composable` → `composables/api` 래퍼 호출 -3. 래퍼 → `$fetch` 로 Nuxt `server/api` 또는 외부 API 요청 -4. 응답은 타입이 보장된 상태로 composable → component 로 전달 +1. <이벤트 발생부터 응답까지의 흐름을 간단히> +2. ... +3. ... ## 상태 관리 가이드 | 상태 종류 | 권장 위치 | | -------------------- | ------------------------ | -| 컴포넌트 로컬 상태 | `ref` / `reactive` | -| 페이지 단위 공유 상태| `provide/inject` 또는 composable | -| 앱 전역 상태 | Pinia store | -| 서버 데이터 | `useAsyncData`/`useFetch`| +| 컴포넌트 로컬 상태 | <예: ref / useState> | +| 페이지 단위 공유 상태| <예: provide/inject> | +| 앱 전역 상태 | <예: Pinia / Zustand> | +| 서버 데이터 | <예: useFetch / TanStack Query> | + +## 외부 의존성 + +- 반드시 알아야 할 외부 서비스나 내부 API 를 나열 +- 장애 발생 시 fallback 정책이 있다면 함께 기술 diff --git a/.claude/project/conventions.md b/.claude/project/conventions.md index 32f73f3..04cdf07 100644 --- a/.claude/project/conventions.md +++ b/.claude/project/conventions.md @@ -1,34 +1,44 @@ -# 프로젝트 전용 컨벤션 (Sample) +# 프로젝트 전용 컨벤션 -공통 지침(`.claude/common/`) 외에 **이 프로젝트에서만** 적용되는 규칙을 정의합니다. -공통 지침과 충돌할 경우 이 문서가 우선합니다. +> 이 파일은 `fe-common-rules/templates/project/conventions.md` 에서 복사된 양식입니다. +> 공통 지침(`.claude/common/`) 외에 **이 프로젝트에서만** 적용되는 규칙을 작성하세요. +> 공통 지침과 충돌할 경우 이 문서가 우선합니다. ## 디렉토리 규칙 -- `components/` — 재사용 컴포넌트. 도메인별 하위 폴더(`user/`, `order/`)로 분리 -- `composables/` — `useXxx` 형태의 재사용 로직 -- `pages/` — Nuxt 파일 기반 라우팅 -- `server/api/` — 서버 라우트 핸들러 -- `types/` — 전역/공통 타입 정의 +- `components/` — <설명> +- `composables/` 또는 `hooks/` — <설명> +- `pages/` 또는 `app/` — <설명> +- `server/` 또는 `api/` — <설명> +- `types/` — <설명> -## 컴포넌트 규칙 (오버라이드) +## 컴포넌트 규칙 (공통 규칙 오버라이드) -- 이 프로젝트에서는 컴포넌트 파일 길이를 **150줄**로 제한합니다. (공통 200줄보다 엄격) -- 컴포넌트 당 `defineProps` 의 항목은 **최대 7개**. 초과 시 객체 props 로 묶습니다. +<공통 규칙과 달리 이 프로젝트에서만 적용할 제약을 적어주세요> -## Tailwind +- 예) 컴포넌트 파일 길이 제한: 150줄 (공통 200줄보다 엄격) +- 예) Props 개수 최대 7개, 초과 시 객체 props 로 묶기 -- 색상은 `tailwind.config.ts` 의 `theme.extend.colors` 에 등록된 토큰만 사용합니다. - (임의 색상 사용 금지) -- 다크모드 클래스 prefix 는 `dark:` 를 사용합니다. +## 스타일 -## 네트워크 +- 색상/간격/타이포는 디자인 토큰만 사용하고 임의값 금지 +- 다크모드 prefix: `dark:` +- 기타 프로젝트 고유 규칙: <작성> -- API 호출은 반드시 `composables/api/` 의 래퍼를 통해 수행합니다. -- 직접 `$fetch` / `fetch` 사용은 금지 (테스트 목적 제외). +## 네트워크 / 데이터 + +- API 호출 창구: <예: composables/api 의 wrapper 만 사용> +- 인증 토큰 저장 위치: <예: httpOnly 쿠키> +- 에러 핸들링 규칙: <작성> + +## 금지 사항 + +- <예: 직접 $fetch 사용 금지> +- <예: 전역 이벤트 버스 사용 금지> +- <예: any 타입 사용 금지> ## 테스트 -- Vitest 를 기본 테스트 러너로 사용합니다. -- 테스트 파일은 소스 옆에 `*.spec.ts` 로 배치합니다. -- 공통 유틸과 composable 은 테스트 커버리지 80% 이상을 유지합니다. +- 테스트 러너: +- 테스트 파일 위치: <소스 옆 / __tests__ 폴더> +- 최소 커버리지: <숫자> diff --git a/.claude/project/overview.md b/.claude/project/overview.md index 553677b..ec9cdfc 100644 --- a/.claude/project/overview.md +++ b/.claude/project/overview.md @@ -1,27 +1,39 @@ -# 프로젝트 개요 (Sample) +# 프로젝트 개요 + +> 이 파일은 `fe-common-rules/templates/project/overview.md` 에서 복사된 양식입니다. +> 프로젝트 세팅 후 실제 내용으로 채워주세요. ## 서비스 -- **이름**: Sample Nuxt App -- **설명**: fe-common-rules 도입 예시용 샘플 프로젝트 -- **배포 환경**: 로컬 전용 (샘플) +- **이름**: <프로젝트 이름> +- **설명**: <한 줄 설명> +- **배포 환경**: +- **저장소**: ## 기술 스택 -- **Framework**: Nuxt 4 -- **UI**: Vue 3 (`