콘텐츠로 이동

프론트엔드 컨벤션 (FSD)

Next.js 15 / React 19 / App Router. Feature-Sliced Design 기반 도메인 분리(리팩토링 진행 중).

1. 레이어 구조

app/         조립자(Assembler) — 라우팅(page/layout)만. 비즈니스 로직 X
features/    도메인 + UI + 상태 + API 한 덩어리
entities/    도메인 핵심 규칙 (외부 시스템 비종속)

app/

  • page.tsx는 feature의 훅·컴포넌트를 조립만: 
    import { StudyRoomsPageView, useGetStudyRooms } from "@/features/study-rooms";
export default function Page() {
  const { data } = useGetStudyRooms();
  return <StudyRoomsPageView rooms={data} />;
}
  • ❌ app에서 entities/core·infrastructure 직접 import 금지
  • ❌ feature 내부 깊은 경로 상대 import(../../hooks/...) 금지 → public entry(index.ts)만

features/[domain]/

api/, hooks/, components/, constants/, index.ts(public entry).

entities/[domain]/

폴더 역할 의존성
core/ Domain Schema/Factory (Zod) types만
infrastructure/ DTO Schema, Adapter, Mapper, Repository core, types
types/ 공용 타입 모든 계층 참조 가능

2. 의존성 방향 (핵심)

infrastructure → core (역방향 금지). core의 domain.ts가 infra의 dto를 import하면 방향 역전 → 금지. 변환은 repository/adapter 책임.

  • 변환 없음: domain.ts 생략, types/index.ts에서 dto 타입 export
  • 변환 있음: domain.ts에 순수 스키마(파생 필드 포함), 변환은 repository(toDomain)
  • XxxDTO 타입은 외부 export 안 함, 네이밍은 FrontendXxx prefix 제거

3. 스택 (참고)

  • 상태관리: Zustand
  • 스키마/검증: Zod
  • 에디터: Tiptap
  • 스타일: Tailwind v4
  • 환경변수: 빌드 시점 번들 → teams/engineering/guides/cicd §3 참조

4. 관련