Skip to content

User Management

Jump to bottom
Hyunseok Ryu edited this page May 15, 2025 · 5 revisions

👤 사용자 관리 시스템

Relevant Resource Files

src/api/profile-api.tsx

src/api/types/profile-type.ts

src/assets/icons/dots-menu.svg

src/components/common/drop-down-menu.tsx

src/components/layout/profile-layout.tsx

src/components/login/google-button.tsx

src/components/login/kakao-auth.tsx

src/components/login/kakao-button.tsx

src/components/mypage/mypage-list-profile.tsx

src/hooks/queries/usePostProfile.ts

src/hooks/queries/useSignIn.tsx

src/pages/terms/privacy-policy.tsx

src/pages/terms/user-terms.tsx

목적 및 범위

이 문서는 타임페이 프론트엔드 애플리케이션의 사용자 관리 시스템에 대해 설명합니다. 사용자 관리 시스템은 사용자 인증(소셜 로그인 포함), 프로필 관리, 마이페이지 기능을 담당하며, 애플리케이션 내에서 사용자 정체성의 기반을 제공합니다.

1. 시스템 개요

타임페이 사용자 관리 시스템은 다음 세 가지 주요 하위 시스템으로 구성됩니다:

  • 인증(Authentication): Google, Kakao를 통한 소셜 로그인 처리
  • 프로필 관리(Profile Management): 사용자 프로필 정보 관리 및 수정
  • 마이페이지(MyPage): 사용자 개인 정보 및 계정 관련 기능 제공

마이페이지 구성 요소

  • 프로필 컴포넌트
  • 인증 컴포넌트
  • 공통 컴포넌트

구성

  • GoogleButton
  • KakaoButton
  • useSignIn
  • Local Storage Tokens
  • ProfileApi
  • ProfileEditModal
  • ProfileContext
  • MypageListProfile
  • DropDownMenu
  • 로그아웃 / 탈퇴 기능

관련 소스

2. 인증 시스템

2.1 인증 흐름

Google 및 Kakao 소셜 로그인 제공자를 통한 로그인 지원. 로그인 성공 시 사용자 토큰은 localStorage에 저장됨.

인증 흐름:

  1. 로그인 버튼 클릭
  2. 소셜 제공자 인증 페이지로 리디렉션
  3. 사용자 인증 후 인증 코드/토큰 반환
  4. 백엔드에 토큰 전달 (/auth-service/api/v2/signin)
  5. 백엔드로부터 access/refresh 토큰 수신
  6. localStorage에 저장
  7. 게시글 또는 마이페이지로 리디렉션

관련 소스

2.2 Google 로그인

Firebase Authentication을 사용하며 Google 제공자를 통해 인증을 수행.

핵심 구현:

  • GoogleButton 컴포넌트에서 signInWithRedirect 실행
  • 인증 후 getRedirectResult로 결과 수신
  • 토큰을 useSignIn 훅으로 백엔드에 전달

관련 소스

2.3 Kakao 로그인

Kakao OAuth 2.0 인증 플로우 사용

핵심 구현:

  • KakaoButton에서 Kakao 인증 URL로 리디렉션
  • KakaoAuth 컴포넌트에서 리디렉션 후 인증 코드 처리 및 토큰 수신
  • 토큰을 백엔드로 전송

관련 소스

2.4 토큰 저장

성공적인 로그인 후 다음 정보를 localStorage에 저장함:

키 용도
accessToken API 인증 요청 시 사용
refreshToken accessToken 갱신용
userId 사용자 고유 식별자
role 사용자 역할
nickName 사용자 닉네임

관련 소스

3. 프로필 관리

3.1 프로필 데이터 구조

ProfileData 타입 정의:

userId: number
nickName: string
gender: "male" | "female"
address: string
birth: string
ageRange: number
accountNumber: string
profileImage: string
blocked: boolean
dealCount: number

관련 소스

3.2 프로필 API

ProfileApi 클래스는 다음 메서드를 제공:

메서드 용도 엔드포인트
getProfile 프로필 조회 /haetsal-service/api/v2/profile
postProfile 새 프로필 생성 /auth-service/api/v2/profile
editProfile 프로필 수정 /haetsal-service/api/v2/profile

관련 소스

3.3 프로필 Context

ProfileContext는 전역으로 사용자 정보를 공유. ProfileLayout에서 초기화됨.

관련 소스

4. 마이페이지 시스템

4.1 마이페이지 레이아웃

MypageListProfile 컴포넌트 구성:

  • 프로필 섹션
  • 잔고 섹션
  • 메뉴 섹션

포함 요소:

  • 프로필 이미지
  • 이름, 성별, 나이
  • 타임화폐 잔액
  • 사용자 주소
  • 도움 횟수
  • 드롭다운 메뉴 (로그아웃, 탈퇴, 약관 보기 등)

관련 소스

4.2 프로필 표시

MypageListProfile에서 다음 정보 제공:

  • 프로필 이미지
  • 이름, 성별, 나이
  • 위치 정보
  • 타임화폐 잔액
  • 거래 완료 수

관련 소스

4.3 사용자 액션

드롭다운 메뉴를 통해 다음 액션 가능:

기능 설명
로그아웃 사용자 로그아웃
탈퇴 사용자 계정 삭제
이용약관 보기 약관 페이지 표시
개인정보 처리방침 보기 정책 페이지 표시

관련 소스

4.4 프로필 수정

프로필 이미지를 클릭하면 ProfileEditModal이 열리며 다음 항목 수정 가능:

  • 프로필 이미지
  • 닉네임
  • 생년월일
  • 성별
  • 주소

관련 소스

5. 시스템 통합

사용자 관리 시스템은 다음과 통합됩니다:

  • 인증 및 API 접근: accessToken을 통해 API 호출 인증
  • 게시글 시스템: 사용자 프로필 기반 게시글 접근/지원
  • 채팅 시스템: 채팅방에서 사용자 프로필 노출

관련 소스

6. 이용약관 및 개인정보처리방침

react-notion-x 라이브러리를 사용하여 Notion 페이지의 내용을 렌더링하여 약관과 정책을 제공합니다.

관련 소스

Clone this wiki locally