시도하고자 했던 것과 그 이유
사용자의 핵심 목표는 스포츠 하이라이트 공유 및 번개 모임 플랫폼인 "CAPTURE NOW"를 개발하는 것이었습니다. 단순한 MVP(최소 기능 제품)를 넘어, 사용자 경험(UX)과 디자인 완성도가 높은 "Premium Web App"을 구축하고자 했습니다. 특히 이번 세션에서는 사용자 간 소통(DM) 기능, 직관적인 모임 탐색(지도 및 필터), 그리고 간편한 로그인(소셜 연동) 및 기타 UI 기능 개선을 중점적으로 작업하여 플랫폼의 실질적인 활용성을 높이는 것을 목표로 했습니다.
<진행 방법>
사용 도구 및 활용 방법
프레임워크: Next.js 15 (App Router), TypeScript
백엔드/데이터베이스: Supabase (Auth, DB, Realtime)
지도 서비스: Google Maps JavaScript API (@react-google-maps/api)
스타일링: TailwindCSS (Neon Green & Dark Theme)
주요 작업 프롬프트 (예시)
"모임 상세 페이지의 지도도 메인 화면과 동일하게 다크 모드와 형광 녹색 핀을 적용해줘. 또한, 다른 페이지와의 로더 충돌 문제를 해결해줘."
구현 상세 내용
소셜 로그인 연동 (Google & Kakao)
구현 방법: src/app/(auth)/login/page.tsx에서 Supabase Auth의signInWithOAuth 메서드를 활용했습니다.
코드:
typescript const handleSocialLogin = async (provider: 'google' | 'kakao') => { const supabase = createClient(); await supabase.auth.signInWithOAuth({ provider, options: { redirectTo: `${window.location.origin}/auth/callback` }, }); };사용자가 Google 또는 Kakao 버튼을 클릭하면 해당 제공자의 인증 페이지로 이동하며, 인증 후 콜백을 통해 세션을 생성하도록 구현했습니다.
각각의 로그인 서비스를 위한 API는 구글 클라우드 콘솔, 카카오 디벨로퍼스 서비스를 이용해서 키를 발급 받고 저의 서비스와 연동했습니다.
지도 기능 고도화 및 충돌 해결
메인 지도와 상세 페이지 지도가 서로 다른 라이브러리(places VS maps)를 호출하여 빌드 에러가 발생했습니다.
이를 해결하기 위해 모든 지도 컴포넌트(MeetPage, MeetDetailPage)의 설정을 libraries: ["places"]
로 표준화했습니다.
필터 기능 개선 (거리 & 종목)
거리 계산: Haversine 공식을 사용하여 사용자 위치와 모임 장소 간의 실제 거리를 계산하고, 이를 기반으로 필터링(matchesFilterDist) 로직을 추가했습니다.
UI 확장: 하드코딩되어 있던 스포츠 종목 리스트를 전체 카테고리(CATEGORIES) 상수로 교체하여 확장성을 확보했습니다.
<결과와 배운 점>
배운 점과 팁
외부 API의 로더 관리: Google Maps와 같은 외부 스크립트는 앱 전체에서 단일 진입점을 갖거나, 동일한 설정으로 호출해야 중복 로드 에러를 피할 수 있음을 재확인했습니다.
실제 데이터 기반 필터링: 단순히 UI만 만드는 것이 아니라, DB에 저장된 위도/경도 데이터를 활용해 '실제 거리'를 계산하고 필터링에 적용함으로써 UX를 크게 향상시킬 수 있었습니다.
시행착오
Google Maps Loader 충돌: 여러 컴포넌트에서 각기 다른 옵션으로 지도를 불러오다 보니, 페이지 이동 시 "Loader must not be called again with different options" 에러가 발생했습니다. 이를 전역 설정 통일을 통해 해결했습니다.
DB 권한 문제 (RLS): DM 기능을 구현할 때 초기에는 메시지가 전송되지 않았으나, Supabase의 RLS(Row Level Security) 정책을 수정하여 프로필이 생성된 사용자 간의 통신을 허용하도록 조치했습니다.
앞으로의 계획
현재 구현된 기능을 바탕으로 실제 사용자 피드백을 수집할 예정입니다.
메뉴(Menu) 탭에 들어갈 account, support의 하부 항목에 들어가야 하는 내용들, 그리고 추가할 카테고리 들을 더 생각해보고 추가할 예정입니다.
지금 있는 웹서비스의 UI/UX 기능적 완성도를 더 높이고 추가로 확장할 수 있는 기능 및 서비스가 있는지 고민해 볼 예정입니다.
모임주가 참여자를 승인/거절할 수 있는 '관리 기능'과 알림 시스템을 더욱 고도화할 계획입니다.
계정 공개/비공개 전환 가능 여부 및 팔로우 신청/수락 및 거절 시스템을 추가할 예정입니다.
모바일 최적화 및 휴대폰 어플리케이션 연동을 위해서 추가 작업을 해 볼 예정입니다.
