← Projects
동아리랑
2025.02 — 2025.03 (2개월)Frontend DeveloperTeam project
- Team
- React
- JavaScript
- Framer Motion
60여 개 동아리 정보와 공연일정을 한눈에 보는 서비스입니다. 동국대학교 2025 동아리 박람회의 부스·공연 정보를 모았고, 지도 일러스트 기반 UI로 위치·시간표·상세 정보를 확인할 수 있습니다. React 19·Framer Motion·모바일 최적화·실시간 검색으로 현장 몰입감을 웹에 옮겼습니다.
기술적 의사결정
- 지도 일러스트 중심의 직관적 부스 탐색 UX
- React Router v7로 SPA 페이지 전환·예외 처리
- Styled-components로 감성 UI를 컴포넌트 단위 관리
- Framer Motion으로 메인 몰입 모션 강화
- 검색 디바운스(300ms)로 불필요 API 억제
담당 역할
- MainNavigation·커스텀 라우팅 훅으로 페이지 전환 흐름 일관화
- Floating Bubble 애니메이션으로 메인 시각 효과 연출
- useBoothSearch 훅으로 부스/푸드트럭 통합 검색 구현
- 404·검색 없음 등 예외 UX와 useReloadPage 제공
Challenge & Solution
문제
npm 환경에서 lock/의존성 충돌과 설치 속도 저하로 팀 협업이 흔들렸습니다.
해결
npm ci·strict-version 강화 후 yarn으로 패키지 매니저를 전환해 환경을 통일했습니다.
배운 점
초기 환경 통일만으로도 안정성과 협업 효율이 크게 좋아집니다.
문제
검색 입력마다 API가 호출되어 트래픽·지연·중복 결과가 발생했습니다.
해결
빈 입력 차단·길이 제한과 함께 Debounce를 적용해 요청을 제어했습니다.
배운 점
실시간 입력 UX에는 요청 제어가 필수이며, 사용자 입력 흐름을 고려해야 합니다.