Step1

✅ 구현 핵심 아이디어

1. UI 로직과 도메인 로직 분리 → 책임 범위 명확히 분리 → 유지보수 편의성 + 테스트 편의성

   → Component 폴더(/primitives, /molecules, /organism) vs Features 폴더(/hooks, /containers)

   • component는 UI 테스트 진행(storybook) vs feature는 단위 테스트 진행(jest)
   • 추가적으로, e2e 테스트 진행 → cypress나 storybook

2. UI 로직 계층 분리

   • 우선, 디자이너와 공통된 멘탈 모델을 형성하기 위해 디자인 토큰 정의해 사용

   • 추가적으로, UI 재사용성을 위해 UI 로직 컴포넌트를 primitive와 이들을 조합한 단위로 계층화

     → Atom(primitive), Molecule(단일 목적 UI)/ Organism(독립된 UI 영역)

1️⃣ Primitive UI

☑️ Atomic Design System = UI 재사용성 향상을 위한 디자이너들의 계층적 멘탈 모델

• 목적 = UI 재사용성 향상

• 핵심 아이디어 = 복잡한 UI를 작은 단위로 나누고, 책임 범위에 따라 계층화하기. 하위 계층의 요소를 조합해 상위 계층의 요소를 구성하는 일관된 방식

• 구현 방법 = Atom → Molecule → Organism → Template → Page

  단계	의미	책임
  Atom	버튼, 텍스트, 인풋 등 기본 요소	표현 단위
  Molecule	Input + Label, Button + Icon 등 단일 기능 조합	단일 목적
  Organism	Header, CardList, Form 등 복합 기능 블록	독립된 UI 영역
  Template	페이지 구조만 정의된 틀	레이아웃 책임
  Page	실제 데이터가 들어간 완성된 페이지	콘텐츠 및 라우팅 대응

☑️ 디자이너와 협업이 쉬운 FE 코드 작성법

• 목적 = 디자인 변경 사항을 빠르게 반영 + 유지보수 비용을 최소화

• 핵심 아이디어 = 디자이너의 멘탈 모델과 코드 구조를 align

• 구현 방법 = Design Token → Primitive UI → Component → Page 계층화

  계층	목적	핵심 아이디어	구현 방법	예시
  1. Design Token(스타일 표현 속성)	표현 속성의 재사용성과 일관성 확보	디자인 툴(Figma)과 코드 간 공통 속성값 정의	색상, 폰트, 여백, 그림자 등을 변수로 추상화	--color-primary--font-body--spacing-sm
  2. Primitive UI(Atoms)	스타일과 표현을 구성하는 최소 단위	시각 요소 그 자체+ 상태 없음+ 로직 없음	Design Token을 기반으로HTML 태그와 일치하는 컴포넌트 구성	<Button>, <Text>, <Input>
  3. Component(Molecules & Organisms)	UI 기능 단위 구현	Primitive UI를 조합하여 실질적인 기능 단위 UI 구성	props 처리, 상태/로직 포함
  <LoginForm>, <ProductCard>, <SearchBar>
  4. Page	라우팅 가능한 실제 화면 구성	여러 Component를 조합해 도메인 기능 중심 화면 구성	라우팅 단위로 구성	/login, /product/[id], /dashboard

☑️ 그렇다면 도메인 로직은 어디서 주입해야 할까?

• 목적:

  • UI의 재사용성과 유지보수성 향상
  • 도메인 로직의 테스트 가능성과 응집도 확보

• 핵심 아이디어 = 도메인 로직과 UI(View) 의 관심사 분리

• 구현 방법 = components, features, pages 계층 분리 → 각 계층에서의 책임 명확히 분리

  계층	책임	포함 내용	테스트 대상	추천 도구
  Component (/components)	UI 표현
  = UI Compoonent	HTML 구조, 스타일링, props 기반 렌더링	UI 테스트	Storybook (시각 검증)
  Jest + Testing Library (스냅샷/DOM 테스트)
  Hook (/features/<domain>/hooks/)	도메인 로직	상태, API, 이벤트 등 비즈니스 로직	단위 테스트	jest (단위 테스트)+ @testing-library/react-hooks
  Container (/features/<domain>/containers/)	로직과 UI 연결	Hook으로부터 받은 데이터를 Component에 주입	사용자 흐름 테스트 (비권장)	Jest + RTL 또는 Playwright Component Test
  Page (/pages)	레이아웃 구성	여러 Container를 조합한 화면 단위 구성	통합 테스트	Cypress, Playwright (E2E 테스트)

  1. Component (/components)
  • 역할: UI 표현만 담당하는 presentational 컴포넌트 (dumb component)
  • 특징:
    • 상태 없음
    • 로직 없음
    • 오직 props 기반으로 UI만 렌더링
  • 예시: <LoginForm>, <TextInput>, <Button>
  1. Features (/features/<도메인>/)

  • 도메인 로직과 상태를 책임지는 비즈니스 계층

    2-1. Hook (/hooks)

    • 역할: 상태 관리, API 호출, 유효성 검사 등 도메인 로직 캡슐화
    • 특징:
      • UI에 전혀 의존하지 않음
      • 순수한 비즈니스 로직만 담당
      • 테스트 용이 (단위 테스트 가능)

    2-2. Container (/containers)

    • 역할: Hook에서 받은 로직을 Component에 props로 연결하는 조립 계층
    • 특징:
      • 도메인 상태 → 컴포넌트에 주입
      • UI에 대한 로직 책임은 없음
      • 사용자 행동 흐름 테스트에 적합
  3. Page (/pages)
  • 역할: 전체 화면 구조를 조립하는 라우팅 단위 컴포넌트
  • 특징:
    • 여러 Container를 조합하여 레이아웃 구성
    • 비즈니스 로직 직접 포함 ❌ (지양)
    • 가능하면 Container만 사용해서 구성