RESET - Gamified Life Tracker

부정적인 일상 습관을 추적하고 관리하는 게임화된 웹 애플리케이션

기술 스택

• Frontend: Next.js 15, TypeScript, Tailwind CSS
• Backend: Next.js API Routes
• Database: PostgreSQL with Prisma ORM
• Authentication: NextAuth.js v5 (Auth.js)
• Deployment: Vercel

시작하기

1. 환경 변수 설정

.env.example 파일을 복사하여 .env 파일을 생성하고 필요한 값을 입력하세요:

cp .env.example .env

필요한 환경 변수:

• DATABASE_URL: PostgreSQL 데이터베이스 URL
• NEXTAUTH_URL: 앱 URL (개발 환경: http://localhost:3000)
• NEXTAUTH_SECRET: NextAuth 시크릿 키 (openssl rand -base64 32로 생성)
• GOOGLE_CLIENT_ID: Google OAuth 클라이언트 ID
• GOOGLE_CLIENT_SECRET: Google OAuth 클라이언트 시크릿

2. Google OAuth 설정

1. Google Cloud Console에 접속
2. 새 프로젝트 생성 또는 기존 프로젝트 선택
3. "APIs & Services" > "Credentials" 메뉴로 이동
4. "Create Credentials" > "OAuth client ID" 선택
5. Application type: "Web application" 선택
6. Authorized redirect URIs에 다음 추가:
   • http://localhost:3000/api/auth/callback/google (개발)
   • https://your-domain.com/api/auth/callback/google (프로덕션)
7. 생성된 Client ID와 Client Secret을 .env 파일에 추가

3. 데이터베이스 설정

# PostgreSQL 설치 후 데이터베이스 생성
createdb reset_db

# Prisma 마이그레이션 실행
npx prisma migrate dev --name init

# Prisma Client 생성
npx prisma generate

4. 개발 서버 실행

npm install
npm run dev

앱이 http://localhost:3000 에서 실행됩니다.

주요 기능

• 🔐 Google 소셜 로그인
• 📝 일일 습관 체크 (술, 게임, 과식)
• 🎮 게임화 시스템 (점수, 레벨)
• 📊 진행 상황 추적
• 📅 기록 히스토리

프로젝트 구조

src/
├── app/
│   ├── api/           # API 라우트
│   ├── auth/          # 인증 페이지
│   ├── dashboard/     # 대시보드
│   └── layout.tsx     # 루트 레이아웃
├── components/        # React 컴포넌트
├── lib/              # 유틸리티 함수
└── types/            # TypeScript 타입 정의

개발 명령어

npm run dev       # 개발 서버 실행
npm run build     # 프로덕션 빌드
npm run start     # 프로덕션 서버 실행
npm run lint      # ESLint 실행
npx prisma studio # Prisma Studio 실행 (DB 관리)