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

 

📚 목차

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

---

🌟 이번 주 개요

이번 주는 OpenAI 및 날씨 API 연동을 통한 AI 기능 고도화, 기록 분석 기능 구현, 그리고 기존 기록 등록·목록·상세·수정 흐름의 UI/UX 보완 및 오류 해결에 집중한 한 주였습니다.
사용자 데이터 흐름을 연결하고 실제 리딩 → 저장 → 분석까지 확장할 수 있도록 기능 구조를 정리하고, 다양한 오류 해결 작업도 함께 진행했습니다.

---

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

1. OpenAI API 연동한 타로 리딩 기능 구현

• 질문 유형과 카드에 따라 감성적인 해석을 생성하도록 GPT 프롬프트 구성
• 응답 결과를 sessionStorage에 저장하고 기록 등록 페이지와 연결되는 구조 구현
• 라우터와 로딩 처리 등 사용자 경험 흐름까지 정리함

2. 날씨 API를 연동한 감성 메시지 출력 기능 구현

• 위치 기반 날씨와 시간대 조합에 따라 문장을 출력하는 로직 작성
• 프론트엔드에서 axios를 사용해 외부 API 호출
• 날씨 상태별 메시지를 조건에 맞게 구성하고, 시각적으로 출력되도록 처리함

3. 기록 등록/수정/상세/목록 기능 디벨롭

• 카드 선택 구조를 개선하고 이미지 업로드 처리 안정화
• 기록 등록 시 카드 연결, 해석 입력, 이미지 삭제 기능 보완
• 수정 시 초기값 상태를 정확하게 유지하도록 개선
• 상세 페이지에 카드 목록, 키워드, 후기 등 정보 출력 구조 설계
• 목록 페이지에 카테고리 필터, 검색 기능, 페이지네이션 기능 적용

4. 기록 분석 기능 구현 및 UI 제작

• 기간, 카테고리, 키워드 기준 필터 UI 작성
• 자주 등장한 카드, 키워드, 질문 유형 시각화 출력
• 카드 이미지와 분석 결과 스타일 구성 보완
• 시작일이 종료일보다 뒤에 올 수 없도록 유효성 검증 추가

---

🔍 문제 발생 및 해결 과정

🛠️ 문제 1. Supabase 세션 유지 오류

현상
로그인 후 새로고침 시 인증 세션이 유실되는 현상이 발생함
오류 코드

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

원인
createBrowserSupabaseClient() 사용 시 쿠키 파싱이 올바르게 되지 않아 세션 유지가 불안정했음

해결 방법

• createPagesBrowserClient()로 전면 교체하여 세션 상태를 안정적으로 유지함
• Supabase 대시보드에서 인증 리디렉션 URL 및 도메인 설정을 다시 점검함

---

🛠️ 문제 2. 카드 통계 출력 오류

현상
기록 분석 결과에서 카드와 키워드가 출력되지 않음
오류 코드

TypeError: Cannot read properties of undefined (reading 'name')

원인
record_cards.cards가 배열이 아닌 단일 객체 형태로 내려오는데, 이를 배열처럼 처리하면서 타입 에러가 발생함

해결 방법

const mainCardEntry = r.record_cards?.find((c) => !!c.cards);
const rawCard = mainCardEntry?.cards;

• 위와 같이 타입 가드 및 null 체크를 추가하여 안전하게 가공 처리함

---

🛠️ 문제 3.  관계형 쿼리 실패

현상
카드 데이터가 Supabase 관계형 쿼리에서 조회되지 않음
오류 코드

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

원인
record_cards → cards 관계가 누락되어 있었고, Supabase 스키마 캐시에도 반영되지 않았음

해결 방법

• Supabase 대시보드에서 FK(외래키)를 직접 재설정하고
• 아래 쿼리 형태로 관계형 데이터를 다시 가져오도록 구성함

.select("record_cards(card_id,cards(name,keywords,image_url))")

---

📦 현재까지 완성된 기능

• OpenAI 연동 기반 타로 해석 기능
• 날씨 기반 감성 메시지 출력 기능
• 카드 / 키워드 / 질문 통계 분석 기능
• 기록 등록 / 수정 / 상세 / 목록 흐름 구성 및 기능 디벨롭
• Supabase 인증 세션 유지 오류 해결

---

🌟 회고

이번 주는 단순한 기록 기능을 넘어서, AI 해석 기능과 분석 기능을 구현하며 서비스의 성격이 명확해진 한 주였습니다.
특히 사용자에게 감성적 해석을 제공하는 GPT 연동 기능과, 데이터 기반의 분석 기능을 함께 구축하면서 타로 기록의 확장 가능성을 확인할 수 있었습니다.
또한 예상치 못한 오류를 단순히 수정하는 데 그치지 않고, 타입 가드·쿼리 구조·인증 흐름까지 재설계하며 전반적인 구조 안정화를 경험할 수 있었습니다.
디버깅과 테스트를 반복하며 실제 사용자 경험과 데이터 흐름을 연결하는 프론트엔드 감각도 많이 키울 수 있었습니다.

---

🧩 요약

항목	결과
타로 리딩 AI 기능	구현 완료
감성 메시지 출력 기능	구현 완료
기록 분석 기능	구현 완료
기록 등록/수정/상세/목록 기능	디벨롭 완료
Supabase 세션 오류 해결	완료

---

✅ 최종 마무리

이번 주는 AI 기반 리딩 기능과 기록 분석 기능을 모두 완성하며, 단순 저장소에서 감정과 흐름을 해석하는 타로 저널 서비스로 전환할 수 있는 기반을 만들었습니다.
남은 기간에는 미션을 수행하면서 디자인 통일, 커뮤니티 기능, 검색·필터 기능 고도화 작업도 병행하여 마무리할 계획입니다.