Laravel 간단 이벤트 캘린더 - 월별 일정 관리

mkdir simple-event-calendar-laravel && cd simple-event-calendar-laravel

이 폴더에서 Laravel 13.x 프로젝트를 시작합니다.

Laravel 13.x 프로젝트를 생성하고 기본 설정을 해주세요:

1. Laravel 13.x 프로젝트 생성 (composer create-project 또는 laravel new)
2. .env 파일에서 데이터베이스를 SQLite로 설정
   - DB_CONNECTION=sqlite
   - DB_DATABASE 경로를 database/database.sqlite로 설정
3. database/database.sqlite 파일 생성 (touch 또는 빈 파일 생성)
4. Tailwind CSS 설치 및 설정 (npm install, Vite 설정)
5. 기본 레이아웃 Blade 파일 생성 (resources/views/layouts/app.blade.php)
   - Tailwind CSS 포함
   - 심플하고 깔끔한 헤더 (제목: "📅 나의 이벤트 캘린더")
   - @yield('content') 영역

모든 설정이 완료되면 php artisan serve로 서버를 실행하여 기본 페이지가 정상적으로 로드되는지 확인해주세요.

이벤트(일정) 데이터를 저장할 데이터베이스 구조를 만들어주세요:

1. Event 모델과 마이그레이션 생성 (php artisan make:model Event -m)
2. 마이그레이션 파일에 다음 컬럼 추가:
   - title (string, 255): 일정 제목
   - event_date (date): 일정 날짜
   - event_time (time, nullable): 일정 시간 (선택사항)
   - description (text, nullable): 일정 메모
   - color (string, nullable, default: 'blue'): 일정 색상 카테고리 (보너스 기능용)
   - timestamps (created_at, updated_at)
3. php artisan migrate 실행하여 테이블 생성
4. Event 모델에 $fillable 속성 설정 (mass assignment 허용)

마이그레이션이 성공적으로 실행되었는지 확인해주세요.

캘린더 메인 페이지와 컨트롤러를 만들어주세요:

1. CalendarController 생성 (php artisan make:controller CalendarController)
2. CalendarController에 index 메서드 구현:
   - 현재 월(year, month)을 쿼리 파라미터로 받거나 기본값은 오늘 날짜
   - Carbon을 사용하여 해당 월의 시작일, 종료일, 총 일수 계산
   - 달력 그리드를 그리기 위한 빈 칸 계산 (월의 첫 날이 무슨 요일인지)
   - 해당 월의 모든 이벤트를 데이터베이스에서 조회 (Event::whereYear(), whereMonth())
   - Blade 뷰로 데이터 전달 (year, month, daysInMonth, startDayOfWeek, events 등)
3. routes/web.php에 라우트 등록:
   - GET / -> CalendarController@index (이름: calendar.index)
4. resources/views/calendar/index.blade.php 생성:
   - layouts/app.blade.php 확장
   - 월 네비게이션 (이전 달, 다음 달 버튼, 현재 년월 표시)
   - 요일 헤더 (일~토)
   - 7x5 또는 7x6 그리드로 날짜 표시
   - 각 날짜 칸에 날짜 숫자 표시, 오늘 날짜는 배경색으로 강조
   - Tailwind CSS로 깔끔한 그리드 레이아웃 (grid grid-cols-7)

캘린더가 정상적으로 표시되는지 확인해주세요. 아직 일정 데이터는 없지만 빈 달력이 보여야 합니다.

일정 추가 기능을 구현해주세요:

1. CalendarController에 create, store 메서드 추가:
   - create: 일정 추가 폼을 보여주는 페이지 (날짜를 쿼리 파라미터로 받아 기본값 설정 가능)
   - store: 폼에서 전송된 데이터를 검증하고 Event 모델로 저장
     * 검증 규칙: title(required, max:255), event_date(required, date), event_time(nullable), description(nullable)
     * 저장 후 calendar.index로 리다이렉트하며 성공 메시지 표시
2. routes/web.php에 라우트 추가:
   - GET /events/create -> CalendarController@create (이름: events.create)
   - POST /events -> CalendarController@store (이름: events.store)
3. resources/views/events/create.blade.php 생성:
   - layouts/app.blade.php 확장
   - 일정 추가 폼 (제목, 날짜, 시간, 메모 입력 필드)
   - CSRF 토큰 포함
   - Tailwind CSS로 깔끔한 폼 디자인
   - 제출 버튼과 취소(뒤로가기) 버튼
4. calendar/index.blade.php에 "+ 일정 추가" 버튼 추가 (페이지 상단 또는 각 날짜 칸에)

일정을 추가하고 캘린더 페이지로 돌아왔을 때 성공 메시지가 표시되는지 확인해주세요.

캘린더에 일정을 표시하고, 날짜 클릭 시 해당 날짜의 일정 목록을 보여주는 기능을 추가해주세요:

1. calendar/index.blade.php 수정:
   - 각 날짜 칸에 해당 날짜의 이벤트가 있는지 확인
   - 이벤트가 있는 날짜는 작은 점(dot) 또는 배지로 표시 (예: 이벤트 개수 숫자)
   - 각 날짜 칸을 클릭 가능하게 만들고, 클릭 시 해당 날짜의 일정 목록 모달 또는 사이드바 표시
2. 일정 목록 표시 방법 (간단한 방법):
   - 각 날짜 칸 아래에 해당 날짜의 일정 제목을 작게 표시 (최대 2~3개)
   - 또는 Alpine.js나 간단한 JavaScript로 모달 구현
3. 일정 클릭 시 상세 정보 표시 (제목, 시간, 메모)
4. Tailwind CSS로 일정 표시 스타일링 (색상, 폰트 크기 등)

캘린더에서 일정이 시각적으로 확인되고, 클릭 시 상세 정보를 볼 수 있는지 테스트해주세요.

일정 수정 및 삭제 기능을 구현해주세요:

1. CalendarController에 edit, update, destroy 메서드 추가:
   - edit: 특정 일정의 수정 폼 표시
   - update: 수정된 데이터 검증 및 업데이트
   - destroy: 일정 삭제 처리
2. routes/web.php에 라우트 추가:
   - GET /events/{event}/edit -> CalendarController@edit (이름: events.edit)
   - PUT/PATCH /events/{event} -> CalendarController@update (이름: events.update)
   - DELETE /events/{event} -> CalendarController@destroy (이름: events.destroy)
3. resources/views/events/edit.blade.php 생성:
   - create.blade.php와 유사하지만 기존 데이터를 폼에 채워넣기
   - @method('PUT') 디렉티브 사용
4. 일정 상세 정보 표시 영역에 "수정" 및 "삭제" 버튼 추가:
   - 수정 버튼: events.edit 라우트로 이동
   - 삭제 버튼: 폼으로 DELETE 요청 전송 (확인 알림 포함)
5. 삭제 시 JavaScript confirm() 또는 Alpine.js로 확인 대화상자 표시

일정을 수정하고 삭제하는 기능이 정상적으로 작동하는지 확인해주세요. 삭제 후 캘린더에서 해당 일정이 사라지는지 테스트하세요.