입문
PHP
Laravel
나만의 습관 체크리스트 - 21일 챌린지 트래커
리포지토리명
habit-tracker-21day-challenge
17
1건 제출
3일 전
문제 설명
프로젝트 개요
좋은 습관을 만들기 위한 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
1
1
Step 1
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 프로젝트 기본 구조가 생성되고, 데이터베이스 마이그레이션 파일, 모델, 컨트롤러가 준비됩니다. 프로젝트를 로컬에서 실행할 수 있는 상태가 됩니다.
2
2
Step 2
습관 목록을 보여주고 새 습관을 추가할 수 있는 메인 페이지를 만들어주세요:
**페이지 레이아웃 (resources/views/habits/index.blade.php):**
- 상단에 "나만의 습관 체크리스트 - 21일 챌린지" 제목
- 습관 추가 폼:
- 습관 이름 입력 필드
- 색상 선택 (6가지 프리셋 색상 버튼: 파랑, 초록, 보라, 주황, 빨강, 핑크)
- 추가 버튼
- 습관 목록 표시:
- 각 습관을 카드 형태로 표시
- 습관 이름과 선택한 색상 표시
- 오늘 날짜 체크박스 (큰 사이즈)
- 연속 달성 일수 표시 ("🔥 5일 연속!")
- 21일 진행률 바 (퍼센트 표시)
- 삭제 버튼
- 습관이 없을 때: "첫 습관을 추가해보세요!" 메시지
**컨트롤러 로직 (HabitController):**
- index(): 모든 습관 목록 + 오늘 날짜 체크 상태 조회
- store(): 새 습관 추가
- destroy(): 습관 삭제
**스타일링:**
- Tailwind CSS 사용
- 모바일 친화적 반응형 디자인
- 카드에 호버 효과
- 부드러운 애니메이션
모든 코드를 작성해주시고, 라우트 설정도 함께 제공해주세요.
기대 결과: 습관을 추가하고 목록을 볼 수 있는 메인 페이지가 완성됩니다. 아직 체크 기능은 동작하지 않지만, UI는 완성된 상태입니다.
3
3
Step 3
습관 체크 기능과 통계 계산을 구현해주세요:
**체크 기능:**
- 각 습관의 체크박스를 클릭하면:
- 오늘 날짜로 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일 진행률이 실시간으로 업데이트됩니다. 사용자가 매일 체크하면서 진행 상황을 확인할 수 있습니다.