Skip to content

Home

Jump to bottom
Hyunseok Ryu edited this page May 14, 2025 · 16 revisions

📄 EUM Frontend 개요

TimePay는 동네 기반의 도움 교환 서비스를 위한 프로그레시브 웹 애플리케이션입니다.
사용자는 도움 요청 게시글을 작성하고, 다른 사람의 요청에 지원하며, 실시간 채팅을 통해 소통하고, 시간 기반의 가상 화폐를 통해 거래를 완료할 수 있습니다.
핵심 슬로건은 동네 주민들과 도움을 주고 받아요입니다.

이 문서는 EUM-Frontend 저장소의 주요 기능, 아키텍처 및 기술 스택에 대한 개요를 제공합니다.

🧩 주요 기능

  • 게시글 시스템: 도움 요청 게시글의 생성, 열람 및 지원 기능
  • 채팅 시스템: 사용자 간 실시간 메시지 기능
  • 인증 시스템: Google 및 Kakao를 통한 사용자 인증
  • 이체 시스템: 사용자 간 "시간" 화폐 이체 기능
  • 프로필 관리: 사용자 프로필 생성 및 관리
  • PWA 기능: 모바일 및 오프라인 접근성 제공

🏗️ 시스템 아키텍처

  • 컴포넌트 기반 UI 개발
  • 클라이언트 사이드 라우팅: React Router DOM 사용
  • 외부 API 통합: Axios 및 WebSocket (StompJS) 활용
  • 상태 관리: Recoil 및 React Query 사용
  • PWA 기능: Service Worker 및 Web Manifest를 통한 오프라인 접근성 제공

🛠️ 기술 스택

범주 기술 스택
프론트엔드 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

🔄 사용자 흐름

  1. Google 또는 Kakao를 통해 로그인
  2. 신규 사용자 프로필 생성 및 설정
  3. 도움 요청 게시글 열람
  4. 도움 요청 게시글 작성
  5. 다른 사용자의 요청에 지원
  6. 매칭된 사용자 간 실시간 채팅
  7. "시간" 화폐를 통한 거래 완료

📁 디렉토리 구조

src/
├── assets/          // 아이콘 등의 정적 자산
├── components/      // 재사용 가능한 UI 컴포넌트
│   ├── common/      // 공통 컴포넌트
│   ├── input/       // 입력 관련 컴포넌트
│   └── modal/       // 모달 및 바텀 시트 컴포넌트
├── pages/           // 페이지 컴포넌트
├── routes/          // 라우팅 설정
├── services/        // API 통신 및 서비스 로직
├── states/          // 상태 관리 (Recoil 등)
├── utils/           // 유틸리티 함수
└── index.tsx        // 앱 진입점

---

## 🔗 관련 소스 파일

- [.eslintrc.cjs](https://github.com/kookmin-sw/capstone-2025-44/blob/frontEnd/.eslintrc.cjs)
- [craco.config.js](https://github.com/kookmin-sw/capstone-2025-44/blob/frontEnd/craco.config.js)
- [package.json](https://github.com/kookmin-sw/capstone-2025-44/blob/master/frontEnd/package.json)
- [public/manifest.json](https://github.com/kookmin-sw/capstone-2025-44/blob/frontEnd/public/manifest.json)
- [src/pages/login/index.tsx](https://github.com/kookmin-sw/capstone-2025-44/blob/frontEnd/src/pages/login/index.tsx)
- [src/routes/index.tsx](https://github.com/kookmin-sw/capstone-2025-44/blob/frontEnd/src/routes/index.tsx)
Clone this wiki locally