나만의 습관 체크리스트 - 21일 챌린지 트래커
habit-tracker-21day-challenge
문제 설명
프로젝트 개요
좋은 습관을 만들기 위한 21일 챌린지 습관 트래커를 만듭니다. 사용자가 목표 습관을 등록하고 매일 체크하면서 연속 달성 일수를 확인할 수 있는 간단하면서도 동기부여가 되는 웹 애플리케이션입니다.
필수 기능
- 습관 추가/삭제 기능 (예: 운동하기, 물 2L 마시기, 독서 30분 등)
- 각 습관별로 오늘 날짜에 체크/언체크 기능
- 습관별 연속 달성 일수(Streak) 표시
- 21일 진행률을 시각적으로 표시 (프로그레스 바)
- 체크한 날짜를 달력 형태로 표시 (최근 21일)
- 모든 데이터는 데이터베이스에 저장
- 반응형 디자인 (모바일에서도 사용 가능)
보너스 기능
- 습관별 카테고리 색상 지정 (건강, 학습, 생활 등)
- 21일 완료 시 축하 메시지 애니메이션
- 주간 통계 (이번 주 달성률)
- 습관별 메모 기능 (오늘의 한마디)
기술 스택
- Laravel 12.x
- Blade 템플릿
- Tailwind CSS (선택)
- SQLite 또는 MySQL
- 바닐라 JavaScript (Alpine.js 선택 가능)
제약 조건
- • Laravel 12.x 최신 버전 사용 필수
- • 데이터베이스 연동은 필수이지만 단순한 구조 (habits, habit_logs 테이블)
- • 사용자 인증은 선택사항 (없어도 됨, 있으면 보너스)
- • 외부 API 호출 금지 (모든 기능은 로컬에서 동작)
- • 복잡한 알고리즘 금지 (날짜 계산 정도만 허용)
- • 프론트엔드는 Blade 템플릿 기반, JavaScript는 최소화
프롬프트 레시피
아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
Laravel 12 프로젝트로 습관 트래커를 만들고 싶어요. 다음 요구사항을 충족하는 프로젝트를 생성해주세요: **프로젝트 설정:** - Laravel 12.x 최신 버전 사용 - SQLite 데이터베이스 사용 - Tailwind CSS 포함 **데이터베이스 구조:** 1. habits 테이블: - id (primary key) - name (습관 이름, string) - color (색상 코드, string, 기본값: '#3B82F6') - created_at, updated_at 2. habit_logs 테이블: - id (primary key) - habit_id (foreign key to habits) - checked_date (체크한 날짜, date) - note (메모, text, nullable) - created_at, updated_at - unique 제약조건: habit_id + checked_date (하루에 한 번만 체크) **초기 설정 포함사항:** - Migration 파일 생성 - Habit, HabitLog 모델 생성 (관계 설정 포함) - HabitController 생성 (resourceful controller) - 기본 라우트 설정 (web.php) - Welcome 페이지 대신 습관 목록 페이지를 홈으로 설정 코드와 함께 설치 및 실행 방법도 알려주세요.
기대 결과: Laravel 프로젝트 기본 구조가 생성되고, 데이터베이스 마이그레이션 파일, 모델, 컨트롤러가 준비됩니다. 프로젝트를 로컬에서 실행할 수 있는 상태가 됩니다.
습관 목록을 보여주고 새 습관을 추가할 수 있는 메인 페이지를 만들어주세요:
**페이지 레이아웃 (resources/views/habits/index.blade.php):**
- 상단에 "나만의 습관 체크리스트 - 21일 챌린지" 제목
- 습관 추가 폼:
- 습관 이름 입력 필드
- 색상 선택 (6가지 프리셋 색상 버튼: 파랑, 초록, 보라, 주황, 빨강, 핑크)
- 추가 버튼
- 습관 목록 표시:
- 각 습관을 카드 형태로 표시
- 습관 이름과 선택한 색상 표시
- 오늘 날짜 체크박스 (큰 사이즈)
- 연속 달성 일수 표시 ("🔥 5일 연속!")
- 21일 진행률 바 (퍼센트 표시)
- 삭제 버튼
- 습관이 없을 때: "첫 습관을 추가해보세요!" 메시지
**컨트롤러 로직 (HabitController):**
- index(): 모든 습관 목록 + 오늘 날짜 체크 상태 조회
- store(): 새 습관 추가
- destroy(): 습관 삭제
**스타일링:**
- Tailwind CSS 사용
- 모바일 친화적 반응형 디자인
- 카드에 호버 효과
- 부드러운 애니메이션
모든 코드를 작성해주시고, 라우트 설정도 함께 제공해주세요.
기대 결과: 습관을 추가하고 목록을 볼 수 있는 메인 페이지가 완성됩니다. 아직 체크 기능은 동작하지 않지만, UI는 완성된 상태입니다.
습관 체크 기능과 통계 계산을 구현해주세요:
**체크 기능:**
- 각 습관의 체크박스를 클릭하면:
- 오늘 날짜로 habit_logs에 기록 추가 (체크)
- 이미 체크되어 있으면 기록 삭제 (언체크)
- 페이지 새로고침 없이 AJAX로 처리
- 체크박스 상태는 오늘 날짜 기준으로 표시
**통계 계산 로직 (Habit 모델에 메서드 추가):**
1. getCurrentStreak(): 오늘부터 역순으로 연속 체크한 일수 계산
- 어제가 체크되어 있으면 카운트 시작
- 하루라도 빠지면 중단
- 예: 오늘 체크 안 함 → 0일, 오늘+어제+그제 체크 → 3일
2. getProgressPercentage(): 최근 21일 중 체크한 날짜 비율
- (체크한 날짜 수 / 21) * 100
- 소수점 첫째자리까지 표시
3. getRecentCheckDates(): 최근 21일 체크 기록 (달력 표시용)
**컨트롤러에 추가:**
- toggleCheck(): 체크/언체크 토글 (POST 요청)
- JSON 응답으로 새로운 연속일수와 진행률 반환
**프론트엔드 (JavaScript):**
- 체크박스 클릭 이벤트 리스너
- fetch API로 서버에 요청
- 응답받은 데이터로 UI 업데이트 (연속일수, 진행률 바)
**라우트 추가:**
- POST /habits/{habit}/toggle-check
모든 코드를 작성해주시고, 날짜 계산 로직이 정확한지 확인해주세요.
기대 결과: 습관 체크 기능이 완전히 동작하고, 연속 달성 일수와 21일 진행률이 실시간으로 업데이트됩니다. 사용자가 매일 체크하면서 진행 상황을 확인할 수 있습니다.