나만의 독서 진행률 트래커 - 바이브코딩 레시피
입문 PHP Laravel

나만의 독서 진행률 트래커

리포지토리명 reading-progress-tracker
조회수 25 1건 제출 3일 전

문제 설명

📚 나만의 독서 진행률 트래커

현재 읽고 있는 책들의 진행 상황을 한눈에 관리할 수 있는 웹 애플리케이션을 만듭니다. 독서 습관을 기록하고, 얼마나 읽었는지 시각적으로 확인할 수 있습니다.

필수 기능

  • 책 정보 추가 (제목, 저자, 총 페이지 수)
  • 현재까지 읽은 페이지 수 업데이트
  • 진행률을 프로그레스 바로 시각적 표시 (퍼센트)
  • 읽고 있는 책 목록 표시
  • 책 삭제 기능
  • 완독한 책과 읽는 중인 책 구분 표시

보너스 기능

  • 책 표지 이미지 URL 추가
  • 읽기 시작한 날짜 기록
  • 완독까지 남은 페이지 수 표시
  • 완독한 책 개수 통계
  • 색상으로 진행 상태 구분 (0-30% 빨강, 31-70% 노랑, 71-99% 파랑, 100% 초록)

이 프로젝트는 Laravel의 기본 CRUD 기능을 활용하며, 데이터베이스 연동 없이 세션을 사용하여 간단하게 구현합니다.

제약 조건

  • Laravel 12.x 사용 (최신 버전)
  • 데이터베이스 대신 세션(session)을 사용하여 데이터 저장
  • Blade 템플릿 엔진 사용
  • Bootstrap 5 또는 Tailwind CSS로 스타일링
  • JavaScript는 최소한으로 사용 (진행률 계산은 서버 사이드에서)
  • 별도의 외부 API 연동 금지

프롬프트 레시피

아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1
Step 1
Laravel 12.x로 '독서 진행률 트래커' 프로젝트를 만들어주세요.

요구사항:
1. 프로젝트명: reading-progress-tracker
2. 메인 페이지(/)에 다음 요소를 포함한 Blade 뷰 생성:
   - 페이지 제목: "📚 나만의 독서 진행률 트래커"
   - 책 추가 폼 (제목, 저자, 총 페이지 수 입력 필드와 추가 버튼)
   - 현재 읽고 있는 책 목록 표시 영역 (아직 비어있음)
3. BookController 생성 및 라우트 설정:
   - GET / : 메인 페이지 표시
   - POST /books : 책 추가
4. Tailwind CSS 또는 Bootstrap 5를 사용하여 깔끔한 UI 디자인
5. 폼 입력 필드에 placeholder 추가 (예: "책 제목을 입력하세요")
6. 반응형 디자인으로 모바일에서도 잘 보이도록 설정

세션을 사용하여 데이터를 저장할 예정이니, 데이터베이스 마이그레이션은 만들지 마세요.

기대 결과: Laravel 프로젝트가 생성되고, 메인 페이지에 책 추가 폼이 표시됩니다. 아직 기능은 동작하지 않지만, UI가 깔끔하게 구성되어 있어야 합니다. BookController와 기본 라우트가 설정되어 있어야 합니다.

2
Step 2
책 추가 및 목록 표시 기능을 구현해주세요.

요구사항:
1. BookController의 store 메서드 구현:
   - 폼에서 받은 데이터(제목, 저자, 총 페이지 수) 유효성 검사
   - 세션에 책 배열로 저장 (각 책은 고유 ID, 제목, 저자, 총_페이지, 현재_페이지(기본값 0) 포함)
   - 책 추가 후 메인 페이지로 리다이렉트 및 성공 메시지 표시

2. 메인 페이지에 책 목록 표시:
   - 세션에서 책 목록 가져와서 카드 형태로 표시
   - 각 카드에 표시할 정보:
     * 책 제목 (굵게)
     * 저자명
     * 진행률 프로그레스 바 (현재_페이지 / 총_페이지 * 100%)
     * "0 / 총페이지 (0%)" 형식으로 텍스트 표시
   - 아직 책이 없으면 "아직 등록된 책이 없습니다" 메시지 표시

3. CSRF 토큰 포함 및 폼 유효성 검사 에러 메시지 표시
4. 성공/에러 메시지를 alert 컴포넌트로 표시

기대 결과: 책 추가 폼이 정상적으로 작동하여, 책을 추가하면 목록에 카드 형태로 표시됩니다. 진행률은 0%로 표시되며, 프로그레스 바가 시각적으로 보입니다. 유효성 검사가 작동하여 빈 값 제출 시 에러 메시지가 표시됩니다.

3
Step 3
진행률 업데이트 및 책 삭제 기능을 추가해주세요.

요구사항:
1. 각 책 카드에 다음 요소 추가:
   - "읽은 페이지 업데이트" 작은 폼 (숫자 입력 필드 + 업데이트 버튼)
   - "삭제" 버튼 (빨간색, 우측 상단 또는 하단)

2. BookController에 메서드 추가:
   - updateProgress 메서드: 
     * POST /books/{id}/progress 라우트
     * 현재 읽은 페이지 수 업데이트 (총 페이지 수를 초과하지 않도록 검증)
     * 세션의 해당 책 정보 업데이트
   - destroy 메서드:
     * DELETE /books/{id} 라우트
     * 세션에서 해당 책 삭제

3. 진행률에 따라 프로그레스 바 색상 변경:
   - 0-30%: 빨간색
   - 31-70%: 노란색
   - 71-99%: 파란색
   - 100%: 초록색 + "완독!" 배지 표시

4. 완독한 책(100%)과 읽는 중인 책 시각적으로 구분:
   - 완독한 책은 연한 배경색 + 체크 아이콘
   - 읽는 중인 책은 기본 배경색

5. 삭제 시 확인 메시지 (JavaScript confirm) 추가

기대 결과: 각 책의 진행률을 업데이트할 수 있으며, 입력한 페이지 수에 따라 프로그레스 바가 업데이트됩니다. 진행률에 따라 색상이 변경되고, 100% 완독 시 완독 표시가 나타납니다. 삭제 버튼을 누르면 확인 후 책이 목록에서 제거됩니다. 모든 기능이 정상적으로 작동하며, 세션에 데이터가 유지됩니다.

제출된 작품 (1)

로그인 후 제출

나만의 독서 진행률 트래커

리자
리자
3일 전 · Claude Code

독서 습관을 체계적으로 관리하고 읽고 있는 책의 진행 상황을 시각적으로 추적할 수 있는 개인 독서 관리 도구

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

댓글 (0)

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