담당 역할
기술 스택
주요 기능
카테고리별 관광지 정보 제공
- 관광지 클릭 시 상세 페이지 이동
- 관광지 북마크 기능 제공
항공권 검색 및 모의 결제
- 제주도 항공권 정보 제공
- 예약 시 토스페이먼츠 모의 결제 연동
제주도 여행 일정 생성
- 제주 관광지를 기반으로 지도에서 일정 생성
- 공개/비공개 설정 (공개 시 커뮤니티 노출)
- '내 여행' 페이지에서 관리
마이페이지
- 프로필 정보 조회 및 수정
- 활동 내역 통합 관리 (북마크/좋아요/댓글/예약)
트러블슈팅
북마크 인터랙션 시 발생한 사용자 경험 저해 문제 해결
문제 상황
북마크 버튼 클릭 시 목록이 즉시 재정렬되는 문제
유저 테스트 진행 중, 게시물 목록 페이지에서 북마크 버튼 클릭 시 인기순 게시물의 순서가 실시간으로 바뀌어 불편하다는 피드백 확인
UI 반영 지연으로 인한 중복 북마크 저장 문제
데이터 무효화 후 재요청하는 구조에서 UI 업데이트가 지연되며 사용자가 북마크 버튼을 반복 클릭해 중복 요청 및 데이터 저장 문제가 발생
해결 및 결과
캐시 관리 전략 변경
- 게시물 목록을 on-demand revalidate 기반 ISR 구조로 변경
- 게시글 작성 및 수정 시에만 게시물 목록 갱신
- React Query로 북마크 목록만 분리하여 관리
- 북마크 클릭 시 낙관적 업데이트 적용
- 요청 진행 중 중복 요청 방지를 위한 인터랙션 제한
- 북마크 데이터 변경 시 북마크 목록만 쿼리 무효화
안정적인 사용자 경험 제공
사용자 인터랙션에 대한 즉각적인 UI 반영
서버 컴포넌트와 클라이언트 컴포넌트의 데이터 동기화 문제 해결
문제 상황
회원정보 수정 시 화면 일부만 갱신되는 동기화 문제
사용자가 닉네임을 변경한 후, 마이페이지에서는 즉시 변경된 닉네임이 보이지만 상단 헤더의 프로필 모달에는 여전히 이전 닉네임이 표시되는 문제 발생
원인
페이지 본문은 서버에서 데이터를 가져오고, 헤더는 Zustand로 관리되는 클라이언트 저장 데이터를 사용하여 두 영역이 서로 다른 데이터를 참조하면서 정보 불일치 발생
해결 및 결과
유저 정보 관리 방식 변경
- 서버 상태 관리 방식으로 전환 (React Query)
- Query Key 기반 자동 캐시 무효화
- 쿼리 무효화로 관련된 모든 컴포넌트 한 번에 갱신
일관된 데이터 동기화 및 코드 간소화
새로운 정보 필드 추가 시에도 별도의 동기화 코드 불필요
Supabase에서 복잡한 데이터 조회
문제 상황
백엔드 없이 복잡한 데이터 조회 구현
Supabase 내장 함수로는 단순 조인을 포함한 조회만 가능하지만, 기능 구현 과정에서 여러 테이블 조인과 조건부 처리가 필요한 복잡한 쿼리 요구 (예: 게시물 정보 + 작성자 정보 + 현재 사용자 정보 + '좋아요' 정보)
클라이언트 데이터 가공의 한계
초기에는 클라이언트단이나 API Route에서 데이터를 가공하려 시도했으나 여러 번의 API 호출과 복잡한 처리 로직 필요
해결 및 결과
Supabase Function 활용
- PostgreSQL 기반 Database Function 작성
- 복잡한 JOIN, EXISTS, 조건부 로직을 DB 레벨에서 처리
담당 범위
- 팀 전체가 사용하는 Database Function 12개 작성
- 게시물 조회, 사용자 활동 통계, 좋아요 여부 판별 등 핵심 로직 구현
API 호출 최적화 및 개발 효율성 향상
팀원들이 간단한 함수 호출만으로 복잡한 데이터 조회 가능