타임캡슐 · capsule-me-jang

편지와 사진을 캡슐로 저장하고, 지정한 열람일을 카운트다운으로 보여 주는 개인 웹 프로젝트입니다.

배포 데모 · 개발자 프로필

구현한 기능

• Firebase Auth 로그인과 로그인 상태에 따른 화면 전환
• 받는 사람·편지·열람일 입력, 사진 선택·미리보기·업로드
• Supabase PostgreSQL에 캡슐과 사진 메타데이터 저장
• 전체 캡슐 대시보드, 내가 만든 캡슐 목록, 캡슐 상세 화면
• 열람일 카운트다운과 시간이 지난 캡슐의 화면 전환
• Tailwind CSS를 활용한 반응형 화면과 Firebase Analytics 연동

기술 스택

분야	기술
웹	Next.js App Router, React, TypeScript
스타일	Tailwind CSS
로그인	Firebase Auth
데이터·사진	Supabase PostgreSQL, Storage
분석·배포	Firebase Analytics, Vercel

로컬 실행

Node.js와 npm을 준비하고 프로젝트 루트에서 실행합니다.

npm ci

.env.example을 .env.local로 복사한 뒤 Firebase와 Supabase의 프로젝트 값을 입력합니다. 실제 값은 커밋하지 않습니다.

npm run dev

브라우저에서 http://localhost:3000을 엽니다. 데이터베이스 초기 스키마는 supabase/schema.sql에 있습니다. 아래 구현 범위를 확인한 뒤 개발 환경에서 사용하세요.

현재 구현 범위

열람일에 따른 내용 숨김은 현재 화면에서 처리합니다. 저장소의 초기 SQL은 캡슐과 사진 메타데이터에 익명 조회·삽입을 허용하며, 사진 URL도 공개 URL을 사용합니다. 비밀 편지나 개인정보를 안전하게 봉인하는 서비스로 사용하기 전에는 서버의 접근 권한, 사용자 신원 검증, 비공개 사진 저장을 보완해야 합니다.

구조

src/app/            페이지: 대시보드, 새 캡슐, 내 캡슐, 상세
src/components/     캡슐 화면, 헤더, 카운트다운
src/hooks/          로그인 상태
src/lib/            Firebase·Supabase 연결, 시간·데이터 처리
supabase/           초기 DB 스키마

확인 명령

명령	용도
npm run dev	개발 서버
npm run build	프로덕션 빌드
npm run start	빌드된 서버 실행
npm run lint	코드 검사

공개 저장소에는 소스와 빈 환경 변수 예시를 보관합니다. 커밋·PR에서는 비밀값 검사를 실행합니다.