🌌 Whispers of the Stars | Next.js 15 + Supabase로 웹사이트 구현 2주차(4/28~5/2) 회고

📚 목차

1. 🌟 이번 주 개요
2. 🛠️ 작업 흐름
3. 🔍 문제 발생 및 해결 과정
4. 📦 현재까지 완성된 기능
5. 🌟 회고
6. 🧩 요약
7. ✅ 최종 마무리

---

🌟 이번 주 개요

지난주에는 전체 구조 설계와 인증 기반 구축(Google OAuth 포함) 에 집중했다면, 이번 주에는 기록 CRUD 기능 구현과 Supabase 인증 세션 오류 해결을 중심으로 실제 사용자 흐름을 연결하는 기능 개발에 본격적으로 돌입한 한 주였습니다.

---

🛠️ 작업 흐름 (일자별 순서 기반)

1. 기록 등록 폼 구현

• /record/create 페이지에 입력 폼 구성
• 이미지 업로드(최대 5장) 및 미리보기 기능 추가
• 메인/서브 카드 선택 및 입력 검증 로직 작성

2. Supabase 테이블 구조 설계

• records, record_cards, cards 테이블 관계형 구조 설계
• 메인/서브 카드 구분을 위한 type 필드 도입
• 외래키(FK) 설정 검토 및 쿼리 최적화 시도

3. 데이터 등록 및 연결 로직 구현

• 기록 등록 후 record_cards에 카드 연결 로직 구성
• 이미지 업로드 및 삭제 기능 적용
• 저장 성공 시 토스트 및 라우팅 처리

4. 기록 조회 페이지 구현

• /record/[id] 상세 페이지 생성
• 제목/내용/이미지/카드 정보 출력 구현
• 관계형 카드 정보 record_id 기준 불러오기 처리

5. 수정/삭제 기능 추가

• edit/page.tsx 생성 후 기존 폼 재활용
• 수정 시 기존 값 불러오기 및 초기 상태 처리
• 삭제 시 확인 모달 추가 및 후속 라우팅

5. Supabase 인증 오류 디버깅

• createBrowserSupabaseClient() → createPagesBrowserClient() 전면 교체
• 로그인 후 새로고침 시 세션 유실 문제 지속 발생
• 세션 상태 직접 로깅, 리디렉션 및 Supabase URL 설정 재점검

---

🔍 문제 발생 및 해결 과정

🛠️ 문제 1. Supabase 세션 유지 실패

오류 메시지:

Failed to parse cookie string: [SyntaxError: Unexpected token b in JSON at position 0]

원인:
Supabase 세션 쿠키 파싱 실패로 인증이 반복적으로 끊기는 문제 발생.

해결 방법:

• 기존 createBrowserSupabaseClient() → 공식 권장 방식인 createPagesBrowserClient()로 변경
• supabase.auth.getSession()으로 수동 상태 확인
• Supabase 대시보드의 Site URL, Redirect URL 설정 점검 후 정상 복구

---

🛠️ 문제 2. 관계형 카드 데이터 조회 실패

오류 메시지:

Could not find a relationship between 'record_cards' and 'cards' in the schema cache

원인:
관계형 쿼리 시 필요한 FK 설정이 누락되었거나 캐시에 반영되지 않아 조회 불가 오류 발생.

해결 방법:

• Supabase 대시보드에서 관계형 키 직접 재설정
• PostgREST 쿼리로 테스트 후, select=... 방식이 아닌 in() 기반 조회 방식으로 변경하여 문제 해결

---

📦 현재까지 완성된 기능

• 기록 등록/조회/수정/삭제(CRUD) 기능
• 메인/서브 카드 선택 및 연결 기능
• 상세 페이지에 등록된 카드/이미지/내용 출력
• 이미지 업로드 및 미리보기, 삭제 가능
• Supabase 인증 세션 오류 해결 및 세션 유지 성공

---

🌟 회고

이번 주는 기능 구현과 디버깅이 동시에 요구되는 고비가 있었던 주였습니다.

특히 Supabase 인증 세션 관련 이슈는 단순히 에러 메시지를 보고 해결할 수 있는 문제가 아니라, 라이브러리 변경, 쿠키 구조, 인증 흐름, 리디렉션 설정 등 복합적인 원인을 하나하나 파악하며 직접 해결해야 했습니다.

또한 CRUD 기능을 구현하며 관계형 데이터의 연결 구조와 실제 사용자 플로우를 연계하는 과정에서 단순한 입력 → 저장을 넘어서, 전체 흐름을 설계하는 시야를 확장할 수 있었습니다.

이번 주에는 Corser AI와 ChatGPT를 병행 사용했습니다. Corser AI는 UI 흐름 점검과 접근성 개선 방향 정리 등에 활용했고, 실제 기능 구현과 오류 해결은 ChatGPT와 함께 디버깅하며 진행했습니다. 각 도구의 강점을 나눠 사용하면서, 계획과 개발의 균형을 잡는 감각도 함께 익혀갔습니다.

---

🧩 요약

항목	결과
기록 등록/수정/삭제 기능	완료
카드 선택 및 연결 기능	구현 완료
인증 오류 해결	직접 디버깅 완료
Supabase 테이블 설계	관계형 구조로 구축
실제 사용 흐름	등록 → 조회 → 수정/삭제 연동

---

✅ 최종 마무리

이번 주는 단순한 화면 구현을 넘어서, 기능 흐름과 인증 시스템을 직접 연결해 본 시간이었습니다. 크고 작은 오류가 반복되었지만, 그 과정에서 원인을 스스로 파악하고 해결하는 디버깅 역량이 크게 성장했습니다.

다음 주에는 미션을 중심으로 작업을 이어가야 하지만, 스타일 통일, 반응형, 접근성, SEO 같은 제품 완성도 작업도 병행하며 개선해나갈 예정입니다.