나만의 할 일 목록 with 우선순위 색상 태그 - 바이브코딩 레시피
입문 PHP Laravel AI: Claude

나만의 할 일 목록 with 우선순위 색상 태그

리포지토리명 todo-priority-color-tags
조회수 80 1건 제출

문제 설명

프로젝트 개요

색상으로 우선순위를 표시하는 할 일 목록 애플리케이션을 만듭니다. 각 할 일에 빨강(긴급), 노랑(보통), 초록(여유) 색상 태그를 붙여서 한눈에 중요도를 파악할 수 있습니다.

필수 기능

  • 할 일 추가하기 (제목 + 우선순위 색상 선택)
  • 할 일 목록 표시 (색상 태그와 함께)
  • 할 일 완료 체크 (체크박스 또는 버튼)
  • 할 일 삭제하기
  • 데이터베이스에 저장 (MySQL)
  • 우선순위별 필터링 (전체/빨강/노랑/초록)

보너스 기능

  • 완료된 할 일은 줄 긋기 스타일 적용
  • 우선순위별 개수 표시
  • 할 일 수정 기능
  • 간단한 통계 (전체/완료/미완료 개수)

기술 스택

  • Laravel 12.x (PHP 8.3+)
  • Blade 템플릿
  • MySQL 데이터베이스
  • Tailwind CSS (스타일링)

이 프로젝트는 Laravel의 기본 CRUD 작업과 데이터베이스 연동을 배우기에 적합하며, 색상 태그라는 시각적 요소로 재미를 더했습니다.

제약 조건

  • Laravel 12.x 최신 버전 사용 필수
  • PHP 8.3 이상 버전 사용
  • Blade 템플릿 엔진 사용
  • MySQL 데이터베이스 사용
  • Tailwind CSS로 스타일링
  • 단일 페이지 애플리케이션 (SPA 아님, 전통적인 서버 사이드 렌더링)
  • 인증 기능 없음 (모든 사용자가 동일한 할 일 목록 공유)
  • JavaScript는 최소한으로 사용 (폼 제출 등 기본 동작만)

프롬프트 레시피

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

1
Step 1
Laravel 12.x 프로젝트를 새로 생성하고, 할 일 목록 애플리케이션의 기본 구조를 만들어주세요.

요구사항:
1. 프로젝트명: todo-priority-color-tags
2. MySQL 데이터베이스 연결 설정 (.env 파일 예시 포함)
3. 'todos' 테이블을 위한 마이그레이션 파일 생성
   - id (primary key)
   - title (string, 255자, 할 일 제목)
   - priority (enum: 'high', 'medium', 'low', 우선순위)
   - is_completed (boolean, 기본값 false)
   - timestamps (created_at, updated_at)
4. Todo 모델 생성 (app/Models/Todo.php)
   - fillable 속성에 title, priority, is_completed 포함
   - priority 필드에 대한 캐스팅 추가
5. TodoController 생성 (app/Http/Controllers/TodoController.php)
   - index, store, update, destroy 메서드 기본 구조만
6. routes/web.php에 라우트 등록
   - GET / -> TodoController@index (목록 표시)
   - POST /todos -> TodoController@store (할 일 추가)
   - PATCH /todos/{id}/toggle -> TodoController@update (완료 토글)
   - DELETE /todos/{id} -> TodoController@destroy (삭제)

모든 파일의 전체 코드를 작성해주시고, 마이그레이션 실행 명령어도 알려주세요.

기대 결과: Laravel 12.x 프로젝트 기본 구조가 생성되고, 데이터베이스 마이그레이션 파일, Todo 모델, TodoController, 라우트 설정이 완료됩니다. 아직 View는 없는 상태입니다.

2
Step 2
이제 할 일 목록을 표시하고 추가할 수 있는 메인 페이지를 만들어주세요.

요구사항:
1. resources/views/todos/index.blade.php 파일 생성
2. Tailwind CSS CDN 포함
3. 페이지 구조:
   - 상단: 제목 "나의 할 일 목록" (큰 글씨, 중앙 정렬)
   - 할 일 추가 폼:
     * 텍스트 입력 필드 (placeholder: "새로운 할 일을 입력하세요")
     * 우선순위 선택 라디오 버튼 3개
       - 빨강(긴급) - high
       - 노랑(보통) - medium  
       - 초록(여유) - low
     * 각 라디오 버튼 옆에 해당 색상의 작은 원형 표시
     * 추가 버튼
   - 할 일 목록 표시 영역 (아직 비어있음)
4. 스타일링:
   - 전체 페이지 배경: 연한 회색
   - 컨텐츠 영역: 흰색 카드 형태, 그림자 효과
   - 최대 너비 600px, 화면 중앙 정렬
   - 패딩과 마진 적절히 적용
5. TodoController의 index 메서드 구현:
   - 모든 todos를 데이터베이스에서 가져와서 뷰로 전달
   - 생성일 기준 내림차순 정렬

전체 Blade 템플릿 코드와 Controller 메서드 코드를 작성해주세요.

기대 결과: 할 일 입력 폼이 있는 메인 페이지가 생성됩니다. 우선순위를 색상으로 선택할 수 있는 라디오 버튼이 표시되고, 깔끔한 디자인이 적용됩니다. 아직 할 일 목록은 비어있습니다.

3
Step 3
할 일을 추가하고, 목록에 표시하고, 완료 체크 및 삭제 기능을 구현해주세요.

요구사항:
1. TodoController의 store 메서드 구현:
   - title과 priority를 받아서 새 Todo 생성
   - 유효성 검사 (title: required, max:255 / priority: required, in:high,medium,low)
   - 생성 후 index 페이지로 리다이렉트
2. index.blade.php에 할 일 목록 표시:
   - 각 할 일을 카드 형태로 표시
   - 왼쪽: 우선순위 색상 태그 (둥근 원 또는 작은 배지)
     * high: 빨강 (#EF4444)
     * medium: 노랑 (#F59E0B)
     * low: 초록 (#10B981)
   - 중앙: 할 일 제목
   - 오른쪽: 완료 체크박스와 삭제 버튼
   - 완료된 할 일은 회색으로 표시하고 텍스트에 줄 긋기
3. 완료 토글 기능:
   - 체크박스 클릭 시 폼 자동 제출 (JavaScript 사용)
   - TodoController의 update 메서드 구현
   - is_completed 값을 토글 (true ↔ false)
4. 삭제 기능:
   - 삭제 버튼 클릭 시 확인 후 삭제
   - TodoController의 destroy 메서드 구현
5. 할 일이 없을 때 "아직 할 일이 없습니다" 메시지 표시

모든 코드를 완성해주시고, 간단한 JavaScript 코드도 포함해주세요.

기대 결과: 할 일을 추가할 수 있고, 추가된 할 일이 색상 태그와 함께 목록에 표시됩니다. 체크박스로 완료 표시를 할 수 있고, 삭제 버튼으로 제거할 수 있습니다. 완료된 할 일은 시각적으로 구분됩니다.

제출된 작품 (1)

로그인 후 제출

색상 태그로 우선순위를 시각적으로 구분할 수 있는 직관적인 할 일 관리 애플리케이션

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

댓글 (0)

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