Skip to content

Component Dependency Structure

Hyunseok Ryu edited this page May 18, 2025 · 1 revision

컴포넌트 의존성

이 문서는 전체 애플리케이션 구조와 각 계층/기능별 흐름 및 구성에 대해 시각적으로 표현했습니다.


📦 전체 애플리케이션 구조

타임페이는 클라이언트(프론트엔드), 백엔드, 인증 서버 등 여러 계층으로 구성되어 있으며, 각 계층은 명확한 책임을 갖고 역할을 수행합니다.

image


🧩 컴포넌트 계층 구조

컴포넌트는 원자적 단위에서 페이지 단위까지 위계적으로 구성되며, 재사용성과 유지 보수성을 고려하여 설계되었습니다.

image


🔄 상태 관리 구조

타임페이는 Recoil을 사용하여 상태를 관리합니다. 주요 상태 atom들은 다음과 같습니다:

image


🔐 인증 흐름 구조

사용자의 인증 흐름(로그인, 소셜 로그인, 토큰 처리 등)에 대한 구조를 시각적으로 나타냅니다.

image


✍️ 게시물 생성 흐름 구조

게시물 생성 흐름은 여러 단계로 구성되어 있으며, 각 단계는 별도의 페이지로 구현되어 있습니다:

image


🔗 API 통합 구조

이 애플리케이션은 백엔드 서비스와 통신하기 위한 전용 API 클라이언트 클래스를 사용합니다. 이 구조는 API 모듈화 및 통합 방식에 중점을 둡니다.

image


🧩 레이아웃 컴포넌트

일관된 UI를 유지하기 위해 레이아웃 컴포넌트 시스템을 사용하며 GlobalLayout은 Router Outlet과 BottomNavigationBar(특정 페이지에서만)로 이루어져 있습니다.


Clone this wiki locally