Skip to content

implementation-plan.md

Latest commit

 

History

History
232 lines (190 loc) · 4.7 KB

implementation-plan.md

File metadata and controls

232 lines (190 loc) · 4.7 KB
Raw

RESET 프로젝트 구현 계획

프로젝트 개요

RESET은 부정적인 일상 습관(음주, 게임, 과식)을 추적하고 관리하는 게임화된 웹 애플리케이션입니다.

기술 스택 선정

Frontend

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • 상태 관리: Zustand 또는 Context API
  • UI 컴포넌트: Shadcn/ui

Backend

  • API: Next.js API Routes
  • Database: PostgreSQL (Supabase 또는 Vercel Postgres)
  • ORM: Prisma
  • 인증: NextAuth.js (Google, Kakao OAuth)

배포

  • Platform: Vercel
  • CI/CD: GitHub Actions

데이터베이스 스키마

Users 테이블

- id (UUID, PK)
- email (STRING, UNIQUE)
- name (STRING)
- provider (ENUM: google, kakao, email)
- level (INTEGER, DEFAULT: 1)
- total_points (INTEGER, DEFAULT: 0)
- created_at (TIMESTAMP)
- updated_at (TIMESTAMP)

DailyRecords 테이블

- id (UUID, PK)
- user_id (UUID, FK)
- date (DATE)
- no_alcohol (BOOLEAN)
- no_gaming (BOOLEAN)
- no_overeating (BOOLEAN)
- weight (DECIMAL, nullable)
- memo (TEXT, nullable)
- daily_score (INTEGER)
- created_at (TIMESTAMP)

Levels 테이블

- id (INTEGER, PK)
- level_number (INTEGER)
- min_points (INTEGER)
- max_points (INTEGER)
- title (STRING)

점수 계산 로직

calculateDailyScore = () => {
  let score = 0;
  
  // 술 안 마심: +1점, 마심: -2점
  score += no_alcohol ? 1 : -2;
  
  // 게임 안 함: +1점, 함: -1점
  score += no_gaming ? 1 : -1;
  
  // 과식 안 함: +1점, 함: -1점
  score += no_overeating ? 1 : -1;
  
  return score;
}

구현 단계

1단계: 프로젝트 초기 설정

  • Next.js 프로젝트 생성
  • TypeScript, Tailwind CSS 설정
  • 기본 레이아웃 구성
  • 환경 변수 설정

2단계: 데이터베이스 설계

  • Prisma 스키마 정의
  • 마이그레이션 실행
  • 시드 데이터 추가

3단계: 인증 시스템

  • NextAuth.js 설정
  • Google OAuth 구현
  • Kakao OAuth 구현
  • 세션 관리

4단계: 핵심 기능 구현

  1. 온보딩 페이지

    • 서비스 소개
    • 회원가입/로그인
    • 초기 설정

  2. 데일리 트래커 (메인 대시보드)

    • 오늘 날짜 표시
    • 습관 체크박스 UI
    • 체중 입력 필드
    • 메모 입력 필드
    • 실시간 점수 계산
    • 저장 기능

  3. 게임화 시스템

    • 점수 자동 계산
    • 레벨 업데이트
    • 프로그레스 바
    • 시각적 피드백

  4. 기록 보기

    • 캘린더 뷰 (월간 보기)
    • 리스트 뷰 (상세 기록)
    • 통계 요약

5단계: UI/UX 개선

  • 반응형 디자인
  • 애니메이션 효과
  • 피드백 메시지
  • 다크 모드 지원

6단계: 최적화 및 배포

  • 성능 최적화
  • SEO 설정
  • PWA 설정
  • Vercel 배포

폴더 구조

reset/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   └── signup/
│   ├── dashboard/
│   │   └── page.tsx
│   ├── history/
│   │   └── page.tsx
│   ├── api/
│   │   ├── auth/
│   │   └── records/
│   └── layout.tsx
├── components/
│   ├── ui/
│   ├── dashboard/
│   ├── history/
│   └── common/
├── lib/
│   ├── auth/
│   ├── db/
│   └── utils/
├── prisma/
│   └── schema.prisma
└── public/

주요 컴포넌트 설계

DailyTracker 컴포넌트

  • 날짜 선택기
  • 습관 체크박스 그룹
  • 체중 입력
  • 메모 입력
  • 점수 표시
  • 저장 버튼

LevelProgress 컴포넌트

  • 현재 레벨 표시
  • 경험치 바
  • 다음 레벨까지 필요 점수

CalendarView 컴포넌트

  • 월간 캘린더 그리드
  • 날짜별 점수 색상 표시
  • 클릭 시 상세 보기

RecordList 컴포넌트

  • 날짜별 기록 리스트
  • 필터링 옵션
  • 페이지네이션

개발 우선순위

  1. 필수 (MVP)

    • 기본 CRUD 기능
    • 사용자 인증
    • 데일리 트래킹
    • 점수/레벨 시스템

  2. 중요

    • 캘린더 뷰
    • 반응형 디자인
    • 기본 애니메이션

  3. 선택

    • 통계 그래프
    • 소셜 공유
    • 푸시 알림

예상 일정

  • 1주차: 프로젝트 설정, 데이터베이스 설계, 인증 시스템
  • 2주차: 데일리 트래커, 게임화 시스템
  • 3주차: 기록 보기, UI/UX 개선
  • 4주차: 테스트, 최적화, 배포

주의사항

  1. 보안

    • 환경 변수 관리
    • API 엔드포인트 보호
    • 입력 값 검증

  2. 성능

    • 이미지 최적화
    • 코드 스플리팅
    • 캐싱 전략

  3. 사용자 경험

    • 로딩 상태 표시
    • 에러 처리
    • 접근성 고려