나만의 습관 체크리스트 - 21일 챌린지 트래커 - 바이브코딩 레시피
입문 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
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
Step 2
습관 목록을 보여주고 새 습관을 추가할 수 있는 메인 페이지를 만들어주세요:

**페이지 레이아웃 (resources/views/habits/index.blade.php):**
- 상단에 "나만의 습관 체크리스트 - 21일 챌린지" 제목
- 습관 추가 폼:
  - 습관 이름 입력 필드
  - 색상 선택 (6가지 프리셋 색상 버튼: 파랑, 초록, 보라, 주황, 빨강, 핑크)
  - 추가 버튼
- 습관 목록 표시:
  - 각 습관을 카드 형태로 표시
  - 습관 이름과 선택한 색상 표시
  - 오늘 날짜 체크박스 (큰 사이즈)
  - 연속 달성 일수 표시 ("🔥 5일 연속!")
  - 21일 진행률 바 (퍼센트 표시)
  - 삭제 버튼
- 습관이 없을 때: "첫 습관을 추가해보세요!" 메시지

**컨트롤러 로직 (HabitController):**
- index(): 모든 습관 목록 + 오늘 날짜 체크 상태 조회
- store(): 새 습관 추가
- destroy(): 습관 삭제

**스타일링:**
- Tailwind CSS 사용
- 모바일 친화적 반응형 디자인
- 카드에 호버 효과
- 부드러운 애니메이션

모든 코드를 작성해주시고, 라우트 설정도 함께 제공해주세요.

기대 결과: 습관을 추가하고 목록을 볼 수 있는 메인 페이지가 완성됩니다. 아직 체크 기능은 동작하지 않지만, UI는 완성된 상태입니다.

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일 진행률이 실시간으로 업데이트됩니다. 사용자가 매일 체크하면서 진행 상황을 확인할 수 있습니다.

제출된 작품 (1)

로그인 후 제출

21일 동안 습관을 형성하고 추적할 수 있는 나만의 습관 체크리스트 애플리케이션

조회수 9 댓글수 0 추천수 0

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!