Skip to content

Architecture

Jump to bottom
Hyunseok Ryu edited this page May 18, 2025 · 8 revisions

🏗️ 타임페이 아키텍처

타임페이는 현대적인 React 기반 아키텍처로 구성되어 있습니다. 또한, Progressive Web App(PWA) 기능을 통해 네이티브 앱에 가까운 사용자 경험을 제공합니다.

Relevant Source Files

⚙️ 기술 스택

범주 기술 스택
프론트엔드 React, TypeScript
라우팅 React Router DOM
스타일링 Styled Components
상태 관리 Recoil, React Query
API 통신 Axios, StompJS (WebSocket)
인증 OAuth (Google, Kakao)
PWA Service Worker, Web Manifest
푸시 알림 Firebase Cloud Messaging
UI 컴포넌트 Swiper, Framer Motion
개발 도구 CRACO, ESLint, Prettier

📁 디렉토리 구조

src/
├── assets/       # 아이콘 등의 정적 에셋
├── components/   # 재사용 가능한 UI 컴포넌트
│   ├── common/   # 공통 UI 요소
│   ├── layout/   # 레이아웃 컴포넌트
│   └── login/    # 인증 관련 컴포넌트
├── lib/          # 유틸리티 라이브러리
├── pages/        # 애플리케이션 페이지
│   ├── chat/     # 채팅 시스템 페이지
│   ├── login/    # 로그인 관련 페이지
│   ├── mypage/   # 마이페이지 및 사용자 정보 페이지
│   ├── post/     # 게시글 시스템 페이지
│   └── posting/  # 게시글 작성 플로우
├── routes/       # 애플리케이션 라우팅 설정
├── style/        # 전역 스타일 정의
└── utils/        # 유틸리티 함수 모음

1. 시스템 개요

Timepay는 다음과 같은 주요 시스템으로 구성되어 있습니다:

  • 라우팅 시스템
  • 레이아웃 시스템
  • API 통합 계층
  • PWA 기능
  • UI 스타일링 시스템

2. 라우팅 시스템

React Router를 사용하여 페이지 간 탐색을 구성하며, 인증 여부에 따라 보호 라우트(AuthLayout)를 사용합니다.

주요 라우트

  • /login, /auth/kakao: 인증
  • /profile, /profile/welcome, /profile/done: 프로필
  • /post, /post/:postId, /posting/*: 게시글
  • /chat, /chat/detail: 채팅
  • /mypage: 마이페이지

3. 레이아웃 시스템

  • GlobalLayout: 전체 레이아웃의 뼈대, 뷰포트 설정, 하단 내비게이션 포함
  • DefaultLayout: 커스텀 앱 바, 스크롤 영역, 내부 콘텐츠 구성
  • BottomNavigationBar: 주요 경로에 따라 조건부 렌더링되는 하단 내비게이션 바

4. API 통합 계층

  • axios-instance.tsx: 공통 설정을 포함한 Axios 인스턴스
  • 도메인별 API 모듈로 구성 (예: bank-api.tsx)

5. UI 스타일링 시스템

Timepay는 Styled Components를 기반으로 한 커스텀 스타일링 시스템을 사용하여 일관된 디자인을 제공합니다.

🎨 주요 구성 요소

  • color-theme.ts: 프로젝트 전체에서 사용하는 색상 테마 정의 (primary, secondary 등), 색상 접근성 및 다크 모드 대응 고려
  • global.tsx: 전역 스타일 정의 (폰트, 기본 여백, 레이아웃 리셋 등), createGlobalStyle을 활용한 글로벌 CSS 설정, 모바일 대응을 위한 viewport 및 box-sizing 설정 포함

💡 특징

  • 모듈화된 스타일 정의: 각 컴포넌트에 개별 스타일 부여
  • 반응형 디자인: 모바일 중심의 뷰포트와 가변적 레이아웃 구성
  • UI 일관성 유지: 색상, 여백, 폰트 스타일 등이 전역적으로 통일됨
  • 디자인 시스템 기반: 재사용 가능한 디자인 토큰을 사용

6. PWA 기능

  • manifest.json: 웹 앱 정보
  • pwabuilder-sw.js: 오프라인 지원
  • firebase-messaging-sw.js: Push 알림 서비스
  • assetlinks.json: Android 통합
  • FCM 연동: fcm-api.tsx, usePostFcmToken.ts, fcm-token-state.ts

7. 요약

Timepay의 아키텍처는 다음과 같은 특징을 가집니다:

  • 컴포넌트 기반 구조로 유지보수 용이
  • 일관된 UI/UX 제공을 위한 레이아웃 및 스타일링 시스템
  • 효율적인 라우팅 및 보안 처리
  • 확장 가능한 API 연동 구조
  • PWA 기능으로 네이티브 앱 유사 경험 제공
Clone this wiki locally