나만의 독서 진행률 트래커
reading-progress-tracker
문제 설명
📚 나만의 독서 진행률 트래커
현재 읽고 있는 책들의 진행 상황을 한눈에 관리할 수 있는 웹 애플리케이션을 만듭니다. 독서 습관을 기록하고, 얼마나 읽었는지 시각적으로 확인할 수 있습니다.
필수 기능
- 책 정보 추가 (제목, 저자, 총 페이지 수)
- 현재까지 읽은 페이지 수 업데이트
- 진행률을 프로그레스 바로 시각적 표시 (퍼센트)
- 읽고 있는 책 목록 표시
- 책 삭제 기능
- 완독한 책과 읽는 중인 책 구분 표시
보너스 기능
- 책 표지 이미지 URL 추가
- 읽기 시작한 날짜 기록
- 완독까지 남은 페이지 수 표시
- 완독한 책 개수 통계
- 색상으로 진행 상태 구분 (0-30% 빨강, 31-70% 노랑, 71-99% 파랑, 100% 초록)
이 프로젝트는 Laravel의 기본 CRUD 기능을 활용하며, 데이터베이스 연동 없이 세션을 사용하여 간단하게 구현합니다.
제약 조건
- • Laravel 12.x 사용 (최신 버전)
- • 데이터베이스 대신 세션(session)을 사용하여 데이터 저장
- • Blade 템플릿 엔진 사용
- • Bootstrap 5 또는 Tailwind CSS로 스타일링
- • JavaScript는 최소한으로 사용 (진행률 계산은 서버 사이드에서)
- • 별도의 외부 API 연동 금지
프롬프트 레시피
아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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와 기본 라우트가 설정되어 있어야 합니다.
책 추가 및 목록 표시 기능을 구현해주세요.
요구사항:
1. BookController의 store 메서드 구현:
- 폼에서 받은 데이터(제목, 저자, 총 페이지 수) 유효성 검사
- 세션에 책 배열로 저장 (각 책은 고유 ID, 제목, 저자, 총_페이지, 현재_페이지(기본값 0) 포함)
- 책 추가 후 메인 페이지로 리다이렉트 및 성공 메시지 표시
2. 메인 페이지에 책 목록 표시:
- 세션에서 책 목록 가져와서 카드 형태로 표시
- 각 카드에 표시할 정보:
* 책 제목 (굵게)
* 저자명
* 진행률 프로그레스 바 (현재_페이지 / 총_페이지 * 100%)
* "0 / 총페이지 (0%)" 형식으로 텍스트 표시
- 아직 책이 없으면 "아직 등록된 책이 없습니다" 메시지 표시
3. CSRF 토큰 포함 및 폼 유효성 검사 에러 메시지 표시
4. 성공/에러 메시지를 alert 컴포넌트로 표시
기대 결과: 책 추가 폼이 정상적으로 작동하여, 책을 추가하면 목록에 카드 형태로 표시됩니다. 진행률은 0%로 표시되며, 프로그레스 바가 시각적으로 보입니다. 유효성 검사가 작동하여 빈 값 제출 시 에러 메시지가 표시됩니다.
진행률 업데이트 및 책 삭제 기능을 추가해주세요.
요구사항:
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)
로그인 후 제출나만의 독서 진행률 트래커
독서 습관을 체계적으로 관리하고 읽고 있는 책의 진행 상황을 시각적으로 추적할 수 있는 개인 독서 관리 도구