ㅇㅅㅇ

🌌 Whispers of the Stars - 감성 타로 기록 웹앱 본문

챌린지 모음/Whispers of the Stars

🌌 Whispers of the Stars - 감성 타로 기록 웹앱

소 아 2025. 5. 20. 15:57

별빛이 속삭이듯 하루의 흐름을 해석하고, 기록으로 남기는 타로 웹서비스.
Next.js + Supabase 기반으로, 감성과 구조 모두를 갖춘 퍼스널 타로 저널입니다.

포트폴리오 제출용 프로젝트이며, Vercel에 배포되어 있습니다.

📅 개발 기간

2025년 4월 15일 ~ 5월 16일 (4주)
총 20일간, 1일 1기능 단위로 작업 및 기록

🚀 주차별 핵심 작업 요약

✅ 1주차: 프로젝트 기획 및 메인 기능 구현

  • 사이트 기획 및 구조 설계 (/tarot, /record, /login 흐름 구성)
  • 타로 리딩 기능 초기 프로토타입 완성 (카드 뽑기 → AI 해석)
  • 감성 기반 UI 구성 시작 (/style-guide 가이드라인 작성)
  • Supabase 연동 및 Google 소셜 로그인 구현

✅ 2주차: 인증 및 기록 기능 정비

  • 이메일/비밀번호 회원가입 및 로그인 완성
  • /record/create 기능 구현 (카드 선택, 텍스트 입력, 이미지 업로드)
  • 기록 데이터 records, record_cards 테이블 구성
  • Supabase 인증 세션 유지 및 라우팅 처리 안정화
  • 기록 수정/상세/목록 흐름 전반 구축

✅ 3주차: 감성 UX 고도화 및 AI 기능 연동

  • OpenAI API 연동: 카드에 맞는 감성 해석 생성
  • 날씨 API 연동: 위치 기반 감성 메시지 출력 기능 구현
  • 리딩 → 저장 → 분석까지 흐름 확립
  • /analysis 페이지에서 카드 사용 통계 시각화 구현
  • metadata, 이미지 최적화, 동적 라우팅 SEO 대응

✅ 4주차: 스타일 통일 및 보완, 배포 마무리

  • /style-guide 기준 전체 페이지 UI 스타일 통일
  • og-default.png SNS 공유용 이미지 제작 및 메타 태그 삽입
  • 비로그인 접근 처리, 로딩 피드백, 접근성(aria) 개선
  • 카드 등록 기능 확장, 대표 이미지 출력 처리
  • /not-found, /error 예외 페이지 구성 및 빌드 에러 해결
  • Vercel 배포 및 최종 회고 작성
  • → 우수 프로젝트 선정

🧩 주요 기능

구분 상세 내용
운세 리딩 카드 1장 뽑기 → AI 해석 제공 (OpenAI API 기반)
기록 기능 카드, 감정, 이미지, 조언 저장 / 최대 5장 이미지 업로드 지원
기록 분석 기간별/카테고리별 카드 분석 및 키워드 시각화 (/analysis)
사용자 인증 소셜(Google) + 일반 로그인 / 세션 유지 처리
감성 UI 별빛 무드 기반 일관된 디자인 및 애니메이션 적용
접근성/SEO aria-label, metadata, OpenGraph 등 대응 완료

🛠️ 기술 스택

항목 기술
Frontend Next.js 14 (App Router), Tailwind CSS, shadcn/ui, TypeScript
Backend Supabase (Auth, DB, Storage), OpenAI API
배포 Vercel
기타 Framer Motion (애니메이션), dayjs/date-fns, HTML to Image

📌 향후 계획

우선순위 계획
1순위 커뮤니티 기능 (글 등록, 댓글, 게시판 구조)
2순위 카드 등록·편집 기능 → 일반 사용자 확장
3순위 기록 검색/필터/정렬 기능 고도화
4순위 사용자 설정 페이지 (닉네임, 테마, 비밀번호, 탈퇴 등)
5순위 PWA 기능 or 모바일 최적화 보완

🔗 링크

📄 라이선스

본 프로젝트는 MIT 라이선스를 따릅니다.
LICENSE 파일을 확인해주세요.

저작자표시 비영리 동일조건 (새창열림)

'챌린지 모음 > Whispers of the Stars' 카테고리의 다른 글

🌌 Whispers of the Stars | Next.js 15 + Supabase로 웹사이트 구현 4주차(5/12~5/16) 회고  (0) 2025.05.19
🌌 Whispers of the Stars | Next.js 15 + Supabase로 웹사이트 구현 3주차(5/5~5/9) 회고  (1) 2025.05.11
🌌 Whispers of the Stars | Next.js 15 + Supabase로 웹사이트 구현 2주차(4/28~5/2) 회고  (1) 2025.05.06
🌌 Whispers of the Stars | Next.js 15 + Supabase로 웹사이트 구현 1주차(4/21~25) 회고  (0) 2025.04.26
'챌린지 모음/Whispers of the Stars' Related Articles more
Comments