엔티티는 도메인 모델과 API 로직을 관리합니다. mapper는 받은데이터를 model에 설계한 방식으로 map을 합니다. query는 params로 보통 get에서 사용합니다.
entities/
└── (엔티티 이름)/
├── api/
│ ├── dto/ # 백엔드 원본 타입 (raw response)
│ │ └── (엔티티 이름)-dto.ts
│ ├── mapper/ # dto → model 변환
│ │ ├── map-(엔티티 이름).ts
│ │ └── map-(엔티티 이름)-detail.ts
│ ├── query/ # GET 쿼리 파라미터 타입
│ │ └── (엔티티 이름)-list-query.ts
│ ├── get-(엔티티 이름)-list.ts
│ ├── get-(엔티티 이름)-detail.ts
│ ├── post-(엔티티 이름).ts
│ ├── (엔티티 이름)-queries.ts
│ └── index.ts
├── model/ # 프론트에서 사용하는 도메인 타입
│ ├── (엔티티 이름).ts
│ └── (엔티티 이름)-detail.ts
└── index.ts
post-, patch-, put-, delete-)entities-model.md 참고entities/inquiry/
├── api/
│ ├── dto/
│ │ └── inquiry-dto.ts
│ ├── mapper/
│ │ ├── map-inquiry.ts
│ │ └── map-inquiry-detail.ts
│ ├── query/
│ │ └── inquiry-list-query.ts
│ ├── get-inquiry-list.ts
│ ├── get-inquiry-detail.ts
│ ├── post-inquiry.ts
│ └── inquiry-queries.ts
├── model/
│ ├── inquiry.ts
│ └── inquiry-detail.ts
서버 상태 관리는 반드시 TanStack Query의 queryOptions 패턴을 사용한다.
getSnapshots() 직접 호출 X)useEffect 사용 금지 (TanStack Query로 대체)*-queries.ts의 queryOptions를 통해 useQuery로 호출// snapshot-queries.ts
export const snapshotQueries = {
all: () => ['snapshots'] as const,
lists: () => [...snapshotQueries.all(), 'list'] as const,
list: (date: string) =>
queryOptions({
queryKey: [...snapshotQueries.lists(), date],
queryFn: () => getSnapshots(date),
enabled: !!date,
}),
};
// 뷰에서 사용
const { data } = useQuery(snapshotQueries.list(date));
상세 패턴은 entities-model.md 참고.
zod 스키마는 (엔티티명)Schema, 추출 타입은 (엔티티명)Type 네이밍 규칙을 따른다.
아직 피드백이 없어요. 첫 번째로 의견을 남겨보세요!