🗺️ OTAKU MAP (Front-end)

사용자 취향 기반 서브컬처 탐방 지원 및 커뮤니티 플랫폼

📌 프로젝트 개요

애니메이션 및 이벤트 장소 정보를 제공하고, 구글 맵 API를 활용해 사용자 맞춤형 탐방 루트를 시각화하는 플랫폼입니다. UMC 7기 프로젝트로 진행되었으며, 복합 필터링 시스템과 반응형 레이아웃을 통해 최적의 정보 탐색 경험을 제공하는 데 집중했습니다.

🛠 Tech Stack

• Library: React 18, TypeScript
• Styling: Styled-Components
• Map Engine: Google Maps API
• Collaboration: Git Flow, GitHub Issues/PR

🚀 Key Technical Challenges

1. 실시간 복합 필터링 엔진 구현

• 문제: 장르, 태그 등 다양한 조건이 결합된 대규모 장소 데이터를 효율적으로 분류하고 렌더링해야 하는 과제.
• 해결: 다중 조건 필터링 로직을 설계하여 사용자의 취향에 맞는 콘텐츠를 실시간으로 분류하고, 데이터 변화에 따른 즉각적인 UI 반응성을 확보했습니다.

2. 디자인 시스템 파운데이션 기반 모듈화

• 설계: 반복되는 레이아웃과 인터랙션 요소(찜, 리뷰 등)를 독립적 컴포넌트로 분리했습니다.
• 성과: 파운데이션(Foundation) 값을 활용한 커스텀 플러그인을 개발하여 디자인 일관성을 높였으며, 코드 유지보수성과 개발 생산성을 향상시켰습니다.

3. 반응형 및 인터랙티브 UX 설계

• UX: 사용자의 행동 흐름(탐색 -> 저장 -> 루트 생성)을 분석하여 정보 전달력이 높은 카드형 인터페이스와 상단 캐러셀을 구현했습니다.
• Adaptive UI: PC와 태블릿 환경을 모두 고려한 유연한 그리드 시스템을 적용하여 디바이스에 구애받지 않는 탐색 환경을 제공합니다.

👥 협업 및 컨벤션 (Collaboration)

효율적인 팀 협업을 위해 엄격한 Git Flow와 코드 리뷰 문화를 지향합니다.

1. Git Flow 전략

• main: 배포용 최상위 브랜치
• develop: 개발 통합 브랜치
• feature/{name}: 기능별 단위 개발 진행

2. 코드 리뷰 및 PR 규칙

• PR 분할: 가독성을 위해 PR 코드는 최대 300줄 미만으로 제한
• 필수 승인: 모든 코드는 최소 2명의 리뷰어 승인 후 머지 진행
• 이슈 기반 작업: 모든 작업은 GitHub Issue 생성 및 체크리스트 관리와 연동

3. 커밋 메시지 컨벤션

• ✨ feat: 새로운 기능 추가
• 🐛 fix: 버그 수정
• ♻️ refactor: 코드 리팩토링
• ⚡ perf: 성능 개선

---

© 2025 OTAKU MAP Team