🗺️ U-Hyu 프론트엔드

주변 멤버십 혜택을 지도로 탐색하고, 다른 사람들과 매장을 공유하는 위치 기반 플랫폼

기능 요약

기능 구분	주요 기능 소개
회원 관리	소셜 로그인, JWT 인증, 등급 및 권한 기반 유저 관리
홈	주변 매장 및 추천 매장 탐색
혜택 조회	멤버십 등급별 혜택 리스트 및 상세 보기
추천 매장	선호 브랜드 기반 맞춤형 매장 추천
지도 서비스	카카오 맵 기반 매장 검색, 필터링, 마커 시각화
마이맵	나만의 폴더형 즐겨찾기 지도 구성 및 공유
마이페이지	내 정보, 관심 브랜드 관리 및 통계
바코드 발급	앱 내 혜택 사용을 위한 멤버십 바코드 제공
추가 정보 입력	가입 이후 선호 브랜드 등 보완 정보 수집
어드민(관리자)	제휴 매장/사용자 통계, 통계 분석 대시보드

U-Hyu 주요 기능

회원 관리

• 소셜 로그인: 카카오 OAuth
• 인증 처리: JWT 기반 액세스/리프레시 토큰
• 최초 가입 설문: 이메일, 멤버십 등급 등 선호/이용 브랜드 입력
• 역할 기반 권한 관리: 사용자 / 관리자
• 멤버십 등급 관리: 우수, VIP, VVIP

지도 서비스 (Map)

지도 기반 매장 탐색

• 현재 위치 기반 제휴 매장 마커 표시
• 줌 레벨별 클러스터링 처리
• 마커 클릭 시 상세 인포윈도우 렌더링 제공
• 혜택 별 카테고리 및 사용 조건 정보 제공
• 지역 드롭다운 메뉴를 통한 지역 이동

카테고리 / 브랜드 필터

• 브랜드별 키워드 검색
• 카테고리 / 브랜드별 필터링 기능
• 거리 기반 매장 검색

키워드 검색

• 카카오 Place API 연동
• 검색 결과 마커 시각화 및 간단 정보 노출
• 카테고리별 마커 아이콘 및 색상 매핑

마이맵 (MyMap)

MyMap 폴더 관리

• 폴더 생성/삭제
• 폴더 테마 선택
• 폴더명 최대 10자 제한

MyMap 매장 관리 및 시각화

• 지도에서 매장 선택 후 폴더에 추가/삭제
• 폴더별 매장 마커 시각화
• 카드 클릭 시 지도 위치 이동

즐겨찾기 매장 관리 및 토글

• 지도에서 매장 선택 후 폴더에 추가/삭제
• 즐겨찾기 토글로 지도화면에서 즐겨찾기 마커

공유 시스템

• UUID 기반 링크 생성
• 짧은 URL (u-hyu.app/map/:uuid) 제공
• 카카오톡 공유하기

혜택 조회 (Benefit)

• 멤버십 등급별 혜택 리스트 및 상세 제공
• 혜택 조건, 사용 방법 등 안내
• 제휴처 검색 기능
• 카테고리 필터 + 다중 조건 필터링 지원

추천 매장 (Recommendation)

• 로그인 후 근처 추천 매장 없는 경우
• 로그인시 추천 매장(사용자 선호 기반 맞춤 추천)
• 카드 클릭시 지도 시각화
• 비로그인시 브랜드 없을 때
• 비로그인 브랜드 자동 스크롤

마이페이지 (MyPage)

• 사용자 정보 조회 및 관리
• 멤버십 등급 및 관심 브랜드 선택/해제

• 개인별 활동내역 확인 (총 멤버십 사용 혜택 금액, 사용자 클릭 패턴 관심사 결과, 최근 방문 기록)
• 즐겨찾기 목록 조회 및 관리 (즐겨찾기 내역이 없을 시, 지도 페이지로 이동 유도 UI)
• UX/UI 기반 반응형 토글 탭 화면 전환 기능

바코드 (Barcode)

• 멤버십 혜택 사용 바코드 표시
• 앱 내 플로팅 버튼으로 접근
• 혜택 이용 시 자동 매장 기록

관리자(Admin)

관리자(LG U+) 통계 시스템

• U-HYU 전체 통계 조회 기능
• 전체 사용자의 저장된 매장 수 합계 조회 (즐겨찾기 + MyMap)
• 전체 사용자의 필터링 합계 조회
• 전체 사용자의 멤버십 사용 합계 조회
• 저장된 매장 통계 상세 조회 기능 (저장된 매장, 필터링, 추천, 멤버십)
• 카테고리별 브랜드 상세 조회
• 차트 시각화와 데이터 크기순 정렬로 인한 직관적 분석 (tooltip 적용)
• 카테고리 및 해당 브랜드별 정확한 수치 나열

관리자(LG U+) 기능

• 제휴처 관리 시스템
• 검색 및 필터링으로 인한 실시간 조회
• 제휴처 추가,조회,수정,삭제 기능
• UX/UI 기반 반응형 토글 탭 화면 전환 기능

Progressive Web App (PWA)

• 앱 설치 가능: 별도 앱 마켓 없이도 홈 화면에 추가하여 빠르게 접근
• 지도 앱에 최적화된 경험: 위치 기반 기능을 자주 사용하는 사용자에게 앱 수준의 빠른 진입과 사용성을 제공
• 재방문율 향상: 설치된 앱은 사용자 유입을 꾸준히 유도

기술 스택

프레임워크 & 스타일

상태관리 & 통신

개발 도구

협업 과정

• 프론트엔드 컨벤션
• Git 컨벤션

QA

• MyMap 기능 리팩토링

프로젝트 구조

• Domain‐Driven 구조
• 개발 구조 및 전략

src/
├── features/                     # 도메인(기능)별 핵심 비즈니스 로직
│   ├── user/                         # 사용자 관련 기능
│   │   ├── apis/
│   │   │   ├── userApi.ts
│   │   │   ├── types.ts
│   │   │   └── endpoints.ts      # API 경로 상수 정의
│   │   ├── hooks/
│   │   │   ├── useUserQuery.ts
│   │   ├── components/
│   │   └── index.ts
│   │
│   ├── feature_name/
│   │   ├── apis/          # 관련 API 함수 모음
│   │   ├── components/    # UI 컴포넌트
│   │   ├── hooks/         # 전용 커스텀 훅
│   │   ├── types/         # 관련 타입 정의
│   │   ├── constants/     # 상수
│   │   ├── index.ts       # 이 feature를 묶는 배럴스피너?
│   │   └── etc/           # 각자 필요하다고 생각되는 기타 폴더
│   │ 
├── shared/                       # 프로젝트 전역 공유 리소스
│   ├── components/                   # 버튼, 카드 등 공통 UI 컴포넌트
│   ├── hooks/                        # 전역 커스텀 훅
│   ├── store/                        # 전역 상태관리
│   ├── client                        # axios, query client, intercept 유틸 함수 등
│   ├── constants/                    # API_BASE_URL 등
│   └── types/                        # 여러 도메인에서 공유되는 전역 타입
│
├── pages/                        # 페이지 관련 (React Router 기준)
├── routes/                       # path 라우트 관련
└── index.tsx

로컬 실행 방법

# 1. 의존성 설치
yarn install

# 2. 개발 서버 실행
yarn dev

프론트엔드 팀원 정보

박희준	이혜은	이다예	한동찬