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

📚 목차

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

---

🚀 배포 링크

배포 링크: https://next-tarot-app.vercel.app

---

🌟 이번 주 개요

이번 주는 UI 스타일 통일, 카드 등록/수정 기능 확장, 메타데이터 및 SEO 대응, 오류 해결 및 데이터 구조 정비 등 실사용자 경험을 마감단계로 다듬는 데 집중했습니다.
특히 디자인과 기능의 완성도를 함께 고려하면서 기록 → 저장 → 분석 → 시각화 흐름까지 기능 구조를 견고히 마무리했습니다.

---

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

1. /style-guide 기준 전체 UI 스타일 통일

• 로그인, 회원가입, 운세 리딩 UI 리디자인 및 감성 스타일 유지
• 각 입력 요소 유효성 검사 함수 분리, 접근성 및 aria 속성 강화

2. 기록하기 기능 정비 (/record, /record/create)

• 카드 선택 구조 유지하면서 레이아웃과 무드 정리
• 이미지 업로드 기능 개선 (최대 5장, 미리보기, 제거 기능 유지)
• 버튼 디자인 및 폼 구성 전체적으로 통일 적용

3. 대표 이미지 및 메타데이터 구성

• Open Graph, Twitter 공유용 이미지 제작 (og-default.png)
• 각 페이지에 metadata 삽입, generateMetadata()로 동적 라우팅 대응
• SEO 및 SNS 대응 완료

4. 공통 예외 페이지 제작

• /not-found, /error 페이지에 통일된 무드 적용
• animation 제거 후 빌드 오류 해결
• 접근성과 사용성을 고려한 메시지 구성

5. 카드 등록 및 연결 기능 확장

• 카드 썸네일 이미지 업로드 기능 추가
• 카드 데이터 조회 시 타입 정비 및 예외 처리 추가
• 카드 UI 스타일 통일, 기록 상세·분석에 출력되는 카드 정보 정리

6. Vercel 세팅 및 배포

• 모든 환경변수 세팅 및 도메인 연결 완료
• Open Graph 이미지 경로 정리 및 배포 환경 기준 경로로 통일
• 최종 제출용 버전 Vercel에 정상 배포 완료

---

🔍 문제 발생 및 해결 과정

🛠️ 문제 1. main_card_image_url 수정 후 이미지가 표시되지 않음

현상
카드 정보를 수정한 뒤에도 기록 상세 페이지에서 썸네일 이미지가 갱신되지 않음

원인
수정된 카드 정보가 record_cards에 반영되지 않아 이미지 참조 오류 발생

해결 방법
기존 카드 연결 삭제 후 새롭게 삽입하는 구조로 수정, 이미지 정상 반영됨

---

🛠️ 문제 2. 로그인 후 메인으로 리디렉션되는 문제

현상
로그인 후 항상 메인 페이지로 이동하며, 원래 페이지로 돌아가지 않음

원인
redirect 쿼리 파라미터가 무시되거나 /auth/callback에서 처리되지 않음

해결 방법
/login?redirect=/record 형태로 파라미터 전달 → auth/callback에서 처리하여 정상적으로 리다이렉션

---

🛠️ 문제 3. metadata 설정 시 빌드 오류 발생

현상
metadata를 클라이언트 컴포넌트에서 선언할 경우 빌드 실패

원인
"use client"가 선언된 파일에서는 export const metadata를 사용할 수 없음

해결 방법
메타데이터는 서버 컴포넌트로 분리하고, generateMetadata() 함수로 동적 라우팅 대응

---

🛠️ 문제 4. 카드 데이터 타입 오류

현상
카드 정보를 배열로 접근하려다 undefined 에러 발생

원인
record_cards.cards가 단일 객체로 내려오는데 배열처럼 접근함

해결 방법
옵셔널 체이닝 및 타입 가드(find() 후 존재 여부 체크)로 안전하게 처리

---

🛠️ 문제 5. 로딩 상태 처리 부족

현상
카드 로딩, 저장, 분석 등에서 로딩 상태가 시각적으로 드러나지 않음

해결 방법
LoadingIndicator를 분리해 공통 적용, aria-busy, role="status" 포함하여 접근성 개선

---

📦 현재까지 완성된 기능

• ✅ OpenAI 연동 기반 타로 해석 기능
• ✅ 날씨 기반 감성 메시지 출력 기능
• ✅ 카드/키워드/질문 통계 분석 기능
• ✅ 기록 등록/수정/상세/목록 기능 디벨롭
• ✅ 사용자 경험 기반 UI 통일 및 접근성 개선
• ✅ Supabase 인증 세션 오류 해결
• ✅ SEO 및 SNS 메타데이터 대응
• ✅ 예외 페이지 제작 및 공통 스타일 적용
• ✅ 카드 등록/이미지 업로드 기능 확장

---

🌟 회고

이번 주는 실제 서비스로 보여줄 수 있는 수준으로 완성도를 끌어올리는 데 집중한 시기였습니다.
디자인 통일, 세션 문제 해결, 카드 등록 확장, 로딩 처리까지 점검하며, 실사용자 입장에서 기능을 경험할 수 있도록 신경을 많이 썼습니다.

특히 main_card_image_url 이슈, 로그인 후 리다이렉션 오류 등은 단순 기능 구현이 아니라 구조 설계 차원의 문제 해결 경험이었습니다.
이런 흐름을 거치며 Supabase, Next.js의 구조를 실제 서비스 수준으로 익히는 좋은 기회가 되었습니다.

---

🧩 요약

항목	상태
타로 리딩 기능	구현 완료
감성 메시지 기능	구현 완료
기록 등록·수정·분석 기능	구현 완료
UI 스타일 통일	완료
로그인/세션 문제 해결	완료
SEO 및 SNS 대응	완료
카드 이미지 등록 기능	완료
예외 처리 및 에러 페이지	완료

---

✅ 최종 마무리

4주차를 마치며, 이제 첫 번째 릴리즈 가능한 버전이 완성되었습니다.
디자인, UX, 기능, 데이터 흐름까지 모두 연결된 지금의 상태는 포트폴리오로 제출 가능한 수준이며, 실제 사용자 기반으로 확장하기 위한 기초가 마련되었습니다.
다음 단계에서는 커뮤니티 기능과 검색 필터 고도화를 추가하여 지속 가능한 서비스 구조로 발전시킬 예정입니다.

---

📈 향후 계획 (우선순위 기준)

1. 커뮤니티 기능 구현
   • 게시글 등록/수정/삭제
   • 댓글 작성 및 관리
   • 2~3단계 게시판 구조 적용
2. 카드 등록 및 편집 기능 확장
   • 현재 관리자 전용 기능 → 일반 사용자에게도 개방
   • 카드 태그, 이미지, 설명 직접 편집 가능하도록 개선
3. 기록 검색 · 필터 · 정렬 고도화
   • 키워드/카테고리/날짜 기반 필터링
   • 정렬 조건(최신순, 카드별, 감정별 등) 확장
   • 검색 결과에 따른 분석 기능 연계
4. 사용자 설정 페이지 구성
   • 닉네임/테마 선택
   • 비밀번호 변경, 소셜 계정 연동 상태 확인
   • 개인정보 열람 및 탈퇴 처리 기능 포함
5. 모바일 최적화 및 PWA 대응 보완
   • 반응형 레이아웃 재정비
   • iOS/Android 홈화면 설치 최적화
   • 오프라인 대응은 선택적으로 고려