프론트엔드 시스템

프론트엔드 시스템은 App Router가 포함된 Next.js 15를 기반으로 구축되어 서버 사이드 렌더링, 클라이언트 측 인터랙티비티, 강력한 컴포넌트 아키텍처를 제공합니다. 각 데이터 모델은 체계적이고 유지보수 가능한 코드를 위해 자체 프론트엔드 모듈을 가집니다.

🎨 아키텍처 하이라이트

각 프론트엔드 모듈은 Page → Component → Store → Fetch 패턴을 따릅니다. 이것은 UI에서 서버 동기화까지의 명확한 데이터 흐름을 만듭니다.

프론트엔드 모듈 구조

각 프론트엔드 모듈은 관심사를 분리하고 효율적인 개발을 가능하게 하는 계층 구조를 가집니다:

1Page

사용자에게 표시되는 진입점입니다. 페이지는 컴포넌트를 조합하고 데이터와 상호작용을 위해 Store에 연결합니다.

2Component

데이터를 렌더링하고 사용자 상호작용을 처리하는 재사용 가능한 UI 빌딩 블록(Unit, View, Edit, Util, Zone)입니다.

3Store

자동 생성된 훅이 있는 전역 상태 관리. 폼 데이터, 리스트, 서버와의 동기화를 관리합니다.

4Fetch

Store 상태를 백엔드와 동기화하는 자동 생성된 GraphQL API 호출. 쿼리, 뮤테이션, 구독을 처리합니다.

데이터 기반 페이지는 네 가지 주요 페이지 타입으로 표준 CRUD 구조를 따릅니다:

📋 Index Page

데이터 유닛을 리스트업하고 검색합니다. 필터링, 정렬, 페이지네이션 기능과 함께 여러 아이템을 표시합니다.

➕ New Page

새로운 데이터 항목을 생성합니다. 검증이 있는 폼을 렌더링하고 서버에 제출합니다.

👁️ View Page

단일 데이터 아이템을 상세히 표시합니다. 모든 필드와 관련 데이터를 전체 정보와 함께 보여줍니다.

✏️ Edit Page

기존 데이터를 수정합니다. 현재 값으로 폼을 미리 채우고 제출 시 업데이트합니다.

각 데이터 모델은 서버와 클라이언트 렌더링으로 나뉜 다섯 가지 컴포넌트 타입을 가집니다:

ServerUnit

데이터 아이템의 요약 뷰를 렌더링합니다. LightType 데이터를 받아 HTML을 출력합니다. index 페이지의 리스트와 그리드에서 사용됩니다.

ServerView

단일 아이템의 전체 상세 뷰를 렌더링합니다. 모든 필드와 관계가 포함된 FullType 데이터를 받습니다. 상세 페이지에서 사용됩니다.

ClientEdit

데이터 생성 및 편집을 위한 폼을 렌더링합니다. 폼 상태와 검증을 위해 Store에 연결됩니다. new, edit, 관리자 페이지에서 사용됩니다.

ClientUtil

좋아요, 북마크, 커스텀 액션 같은 특수 상호작용을 처리합니다. 상태 관리와 API 호출을 위해 Store에 연결됩니다.

ClientZone

SSR과 클라이언트 측 렌더링을 연결합니다. Unit, View, Util을 로딩 상태와 실시간 업데이트가 있는 컨테이너 영역으로 결합합니다.

Akan.js는 각 모델에 대해 포괄적인 상태 관리 시스템을 자동 생성합니다:

st.use.*: 상태 값을 읽는 React 훅 (예: st.use.icecreamOrderList(), st.use.icecreamOrderForm())

st.do.*: 상태를 업데이트하는 액션 (예: st.do.setNameOnIcecreamOrder(), st.do.createIcecreamOrder())

st.slice.*: 필터링된 데이터 뷰를 위한 슬라이스별 상태와 액션에 접근