Bider 파이널 기능구현

[haruyam15]

🎯 Final Feature Update PR

이 PR은 1차 E2E 개발 이후, 2차 파이널 단계에서 추가로 개발한 기능과 개선 사항을 정리한 최종 반영입니다.
1차 PR은 이미 병합된 상태이며, 본 PR은 그 이후 추가된 작업만 포함하고 있습니다.

---

🗺️ 지도 기반 탐색 UI

• 상품을 Google Maps 위에 마커로 표시하여 시각적 탐색 가능
• 마커 클릭 시 요약 정보 하단 카드 노출
• 사용자 현재 위치 기준 5km 이내 상품만 지도에 표시
• 지도/리스트 전환 방식에 스와이프 제스처 추가

📡 입찰 현황판 (실시간)

• Supabase Realtime 기능을 활용해 입찰 현황을 실시간 반영
• 사용자의 ID만 저장된 테이블에서 닉네임 정보를 조인하여 UI에 출력
• 새로고침 없이도 입찰 정보가 갱신되어 사용자의 혼란 최소화

🎯 포인트 시스템

• profiles 테이블에 point 컬럼 추가하여 실시간 잔액 관리
• 포인트 획득/사용 사유는 enum 상수화하여 일관성 유지
• RPC 함수로 DB 레벨에서 포인트 차감 로직 처리 → 무결성 보장
• 모든 포인트 처리는 POST 핸들러 하나로 통합 (확장성 고려)

💬 제안하기 기능

• 즉시 거래 유도를 위한 제안 시스템 구현
• 제안 수락 시 낙찰 처리 + 동일 상품의 다른 제안 자동 거절
• 100P 차감 로직 적용, 최고 입찰가 미만 제안은 클라이언트에서 차단
• 상태 기반 캐시 invalidateQueries로 실시간 데이터 갱신

🕵️ 시크릿 경매

• 입찰 정보 비공개 + 포인트로 제한 시간(10분) 동안만 확인 가능
• 최고 입찰가는 API 응답과 UI에서 모두 마스킹 처리
• 서버 액션을 통해 포인트 사용 이력 검증 및 기록 → 권한 없는 접근 차단

💬 실시간 채팅

• 낙찰자/출품자 간 1:1 채팅 시스템 구현
• Supabase Realtime으로 메시지 실시간 반영
• 채팅방 중복 방지 로직 적용 (상품 + 유저 쌍 기준)
• 읽음 여부 및 미리보기 UI 구성, 네비게이션 채팅 알림 배지 추가

🔔 알림 시스템

• 브라우저 Push API + Service Worker를 활용해 주요 이벤트 푸시 알림 전송
• 알림 클릭 시 관련 화면으로 바로 이동
• 재방문 유도 및 거래 흐름 유지 목적

---

🛠 개선 사항

🔑 이메일 인증 UX 개선

• 기존 이메일 링크 방식 → OTP 코드 방식으로 전환
• signInWithOtp, verifyOtp 활용하여 앱 내 인증 흐름 유지
• PWA 환경에서 외부 브라우저 이동 없이 인증 가능

📦 입찰 후 상세페이지 최신화 문제 해결

• 입찰 후 상세페이지 방문 시 최신 입찰 정보가 반영되지 않던 문제 해결
• invalidateQueries로 캐시 수동 제거 및 리패치 트리거

📱 지도 & 상품 리스트 가시성 개선

• 스와이프 제스처로 지도/리스트 전환 가능
• 마커 클릭 시 더 많은 정보 포함한 하단 카드 노출 (이미지, 제목, 마감시간 등)

🛠 기타 개선

• [상품 목록]
  인기순 필터 적용 시, 리스트에는 반영되지만 드롭다운에는 '최신순'으로 표기되던 버그 수정

• [내 출품 내역]
  입찰 대기 중인 상품은 상세페이지 진입이 불가능하도록 처리

• [출품하기]
  경매 종료일 선택 시, 과거 날짜는 선택 불가하도록 disabled 처리

• [위치 등록/수정]
  위치 권한 거부 시 사용자에게 정확한 재시도 안내 문구 및 위치 저장 실패 UX 개선

• [상세페이지]
  로그인한 사용자가 해당 상품의 출품자인 경우, 입찰 버튼 영역은 표시되지 않도록 처리