Insights/Troubleshooting3 [swimX] react-hook-form + Supabase 타입 불일치 해결하기 🛠️ Next.js 프로젝트에서 react-hook-form, zod, Supabase를 사용해서 일기 작성 폼을 구현하던 중폼과 데이터베이스 타입 간 불일치 문제가 발생했다. 그중 `string enum`과 `number` 타입 간 충돌을 타입 변환 처리를 통해 해결한 과정을 정리했다. 문제 상황수영 일기 작성 흐름은 아래와 같다 :사용자 입력 ↓React Hook Form (SwimFormData, zod 스키마 검사) ↓변환 함수 (toSwimLog) ↓SwimLog 구조로 전환 (중첩 구조 포함) ↓Supabase 저장 (insertSwimLog), zustand 저장 (setLog) react-hook-form을 통해 수집된 폼 데이터는 SwimFormData 타입으로 들어오며, 이 타입은 .. 2025. 4. 18. [SwimX] Next.js 서버 컴포넌트와 인증 분리로 NextAuth 에러 해결 🛠️ TL;DR Next.js App Router(15+), Supabase로 진행하는 프로젝트에서 서버 컴포넌트로 작성한 헤더 내부에서 NextAuth의 useSession()을 사용하자 런타임 에러가 발생했다. SessionProvider가 필요한 클라이언트 컴포넌트를 서버 트리에서 렌더링했기 때문이었다. 해결을 위해 인증 UI 컴포넌트(로그인 버튼)만 클라이언트로 분리하고, layout.tsx에서는 와 children 모두를 로 감싸는 구조로 수정했다. 문제 상황 기술 스택: Next.js 15 App Router, NextAuth(Credentails), Supabase(DB전용, 인증은 NextAuth 처리)목표: SSR이 가능한 를 서버 컴포넌트로 유지하면서 로그인/로그아웃 버튼은 useSessi.. 2025. 4. 3. [동네zip] React 모달창 버튼 클릭 오류, 알고 보니 이벤트 버블링?! 🫧 이론으로만 접했던 이벤트 버블링 문제를 실제 프로젝트에서 처음 경험했다.처음 CORS 에러를 마주했을 때처럼, '네가 말로만 듣던 걔구나! ㅋㅋㅋ'싶어서 순간 반가운(?) 마음이 들기도 했다.문제 상황 중고 거래 물품 목록 페이지에서 비로그인 사용자가 '찜(하트 아이콘)'을 클릭했을 때, 로그인 모달을 띄우는 기능을 구현했다.그런데 모달 내 `[로그인하기]` `[닫기]` 버튼을 클릭해도 의도와 다르게 [물품 상세 페이지]로 이동하는 현상이 발생함 🚨 상황을 요약하면 다음과 같다.`ProductCard`에는 클릭 시 상세 페이지로 이동하는 이벤트가 등록되어 있음`ModalLogin` 컴포넌트 내 버튼 클릭 시 이벤트가 부모 요소인 `ProductCard`까지 전파되면서 이동 이벤트까지 실행됨따라서 모.. 2025. 3. 5. 이전 1 다음
