Laravel 간단 출석 체크 시스템 - 바이브코딩 레시피
입문 PHP Laravel AI: Claude

Laravel 간단 출석 체크 시스템

리포지토리명 attendance-check-laravel
조회수 96 0건 제출

문제 설명

📋 프로젝트 개요

스터디 그룹, 동아리, 소규모 강의 등에서 사용할 수 있는 간단한 출석 체크 시스템을 Laravel 13.x + Blade 템플릿으로 만듭니다. 관리자가 참가자 명단을 등록하고, 매일 출석 여부를 체크하며, 출석률을 한눈에 확인할 수 있습니다.

✨ 필수 기능

  • 참가자 관리: 이름, 이메일, 소속 정보 등록 및 수정/삭제 (CRUD)
  • 출석 체크: 날짜별로 참가자의 출석/결석/지각 상태 기록
  • 출석부 보기: 특정 날짜의 전체 참가자 출석 현황 조회
  • 출석률 통계: 각 참가자의 출석률(%) 자동 계산 및 표시
  • 반응형 디자인: Tailwind CSS로 모바일/데스크톱 모두 지원

🎁 보너스 기능 (선택)

  • 날짜 범위별 출석 필터링 (이번 주, 이번 달 등)
  • 출석률 순위 표시 (상위 5명)
  • 엑셀 내보내기 기능
  • 참가자별 출석 히스토리 상세 페이지
  • 출석 시 간단한 메모 추가 (예: "지각 사유: 교통 체증")

🛠 기술 스택

  • 백엔드: Laravel 13.x
  • 프론트엔드: Blade 템플릿 + Tailwind CSS
  • 데이터베이스: SQLite (간단한 설정)
  • 아이콘: Heroicons (선택)

📚 학습 포인트

  • Laravel 라우팅과 컨트롤러 기본 구조
  • Blade 컴포넌트와 레이아웃 활용
  • Eloquent ORM을 활용한 관계형 데이터 모델링 (참가자 ↔ 출석 기록)
  • 폼 검증과 CSRF 보호
  • Tailwind CSS로 빠른 UI 구성

제약 조건

  • • Laravel 13.x 사용 (최신 버전)
  • • Blade 템플릿 엔진만 사용 (React/Vue 등 SPA 프레임워크 금지)
  • • Tailwind CSS로 스타일링
  • • SQLite 데이터베이스 사용 (간단한 설정)
  • • 참가자(Member)와 출석기록(Attendance)은 1:N 관계로 설계
  • • 출석 상태는 'present'(출석), 'absent'(결석), 'late'(지각) 3가지
  • • 모든 폼에 CSRF 토큰 포함
  • • 반응형 디자인 적용 (모바일 우선)

프롬프트 레시피

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

1
Step 1
mkdir attendance-check-laravel && cd attendance-check-laravel

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

**요구사항:**

1. Laravel 13.x 프로젝트를 생성하세요 (composer create-project laravel/laravel . 명령 사용).
2. .env 파일에서 데이터베이스를 SQLite로 설정하세요:
   - DB_CONNECTION=sqlite
   - DB_DATABASE=/absolute/path/to/database.sqlite (또는 상대 경로로 database/database.sqlite)
   - database/database.sqlite 파일을 생성하세요 (touch database/database.sqlite)
3. Tailwind CSS를 설치하고 설정하세요:
   - npm install -D tailwindcss postcss autoprefixer
   - npx tailwindcss init -p
   - tailwind.config.js에서 content 경로를 ['./resources/**/*.blade.php', './resources/**/*.js'] 로 설정
   - resources/css/app.css에 Tailwind 디렉티브 추가 (@tailwind base; @tailwind components; @tailwind utilities;)
   - vite.config.js에서 input에 resources/css/app.css 포함 확인
4. npm run build를 실행하여 CSS 컴파일
5. resources/views/layouts/app.blade.php 레이아웃 파일을 생성하세요:
   - <!DOCTYPE html> 기본 구조
   - <head>에 @vite(['resources/css/app.css']) 포함
   - <body>에 네비게이션 바 (홈, 참가자 목록, 출석 체크 메뉴)
   - @yield('content') 섹션
   - 깔끔한 Tailwind 스타일 적용 (예: 네비게이션은 bg-blue-600 text-white)
6. routes/web.php에 기본 홈 라우트 추가 (Route::get('/', ...))하고 welcome 뷰 대신 간단한 홈페이지 뷰(resources/views/home.blade.php) 생성:
   - 레이아웃 상속 (@extends('layouts.app'))
   - "출석 체크 시스템에 오신 것을 환영합니다" 메시지와 간단한 설명
   - 참가자 관리, 출석 체크 페이지로 이동하는 버튼 링크

**결과 확인:**
- php artisan serve 실행 후 http://localhost:8000 접속
- Tailwind가 적용된 홈페이지와 네비게이션 바가 보여야 합니다.

기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스가 설정되며, Tailwind CSS가 적용된 기본 레이아웃과 홈페이지가 표시됩니다. 네비게이션 바에 메뉴 항목이 보입니다.

2
Step 2
**참가자(Member) 모델과 CRUD 기능을 구현하세요.**

**요구사항:**

1. Member 모델과 마이그레이션 생성:
   - php artisan make:model Member -m
   - 마이그레이션 파일(database/migrations/xxxx_create_members_table.php)에 다음 컬럼 추가:
     - name (string, 필수)
     - email (string, nullable)
     - group (string, nullable) // 소속 그룹/팀
     - timestamps
   - php artisan migrate 실행

2. MemberController 생성 및 라우트 등록:
   - php artisan make:controller MemberController --resource
   - routes/web.php에 Route::resource('members', MemberController::class); 추가

3. MemberController의 index, create, store, edit, update, destroy 메서드 구현:
   - **index**: 모든 참가자 목록 조회 (Member::all())
   - **create**: 참가자 등록 폼 표시
   - **store**: 폼 데이터 검증 후 DB 저장 (validate: name required|max:255, email nullable|email, group nullable|max:100)
   - **edit**: 특정 참가자 수정 폼 표시
   - **update**: 수정된 데이터 검증 후 DB 업데이트
   - **destroy**: 참가자 삭제

4. 뷰 파일 생성 (resources/views/members/):
   - **index.blade.php**: 참가자 목록 테이블 (이름, 이메일, 그룹, 수정/삭제 버튼)
     - Tailwind로 스타일링 (table, th, td 등)
     - "새 참가자 추가" 버튼 (route('members.create'))
   - **create.blade.php**: 참가자 등록 폼 (name, email, group 입력 필드)
     - @csrf 토큰 포함
     - 폼 제출 시 route('members.store')로 POST
     - Tailwind 폼 스타일 (input, label, button)
   - **edit.blade.php**: 참가자 수정 폼 (create와 유사하지만 기존 데이터 표시)
     - @csrf, @method('PUT') 포함
     - 폼 제출 시 route('members.update', $member)로 PUT
   - 삭제는 index 페이지에서 폼으로 처리 (method DELETE)

5. 검증 오류 메시지 표시:
   - 각 폼 상단에 @if($errors->any()) ... @endif 블록 추가하여 오류 메시지 출력
   - Tailwind로 빨간색 알림 스타일

6. 성공 메시지 표시 (선택):
   - 저장/수정/삭제 후 session()->flash('success', '...') 사용
   - 레이아웃 또는 각 페이지에서 @if(session('success')) ... @endif로 표시

**결과 확인:**
- /members 페이지에서 참가자 목록 조회
- 새 참가자 추가, 수정, 삭제 기능 동작
- 폼 검증 및 오류 메시지 표시 확인

기대 결과: 참가자 CRUD 기능이 완성되어 /members 페이지에서 참가자를 등록, 조회, 수정, 삭제할 수 있습니다. Tailwind로 스타일링된 테이블과 폼이 표시됩니다.

3
Step 3
**출석 기록(Attendance) 모델과 출석 체크 기능을 구현하세요.**

**요구사항:**

1. Attendance 모델과 마이그레이션 생성:
   - php artisan make:model Attendance -m
   - 마이그레이션 파일에 다음 컬럼 추가:
     - member_id (unsignedBigInteger, foreign key to members.id)
     - date (date, 출석 날짜)
     - status (enum: 'present', 'absent', 'late', 기본값 'present')
     - note (text, nullable, 메모)
     - timestamps
   - 외래키 제약조건: $table->foreign('member_id')->references('id')->on('members')->onDelete('cascade');
   - php artisan migrate 실행

2. Member와 Attendance 관계 설정:
   - app/Models/Member.php에 attendances() 메서드 추가:
     ```php
     public function attendances() {
         return $this->hasMany(Attendance::class);
     }
     ```
   - app/Models/Attendance.php에 member() 메서드 추가:
     ```php
     public function member() {
         return $this->belongsTo(Member::class);
     }
     ```

3. AttendanceController 생성:
   - php artisan make:controller AttendanceController
   - routes/web.php에 라우트 추가:
     - Route::get('/attendance', [AttendanceController::class, 'index'])->name('attendance.index');
     - Route::get('/attendance/check', [AttendanceController::class, 'check'])->name('attendance.check');
     - Route::post('/attendance/store', [AttendanceController::class, 'store'])->name('attendance.store');

4. AttendanceController 메서드 구현:
   - **index**: 특정 날짜(쿼리 파라미터 ?date=YYYY-MM-DD, 기본값 오늘)의 출석 기록 조회
     - Attendance::whereDate('date', $date)->with('member')->get()으로 출석 기록 가져오기
     - 출석 기록이 없는 참가자도 표시하기 위해 모든 Member와 조인 또는 루프 처리
   - **check**: 오늘 날짜의 출석 체크 폼 표시
     - 모든 참가자(Member::all()) 목록을 가져와서 각 참가자별로 출석/결석/지각 라디오 버튼 표시
     - 이미 오늘 출석 기록이 있으면 해당 상태를 기본 선택으로 표시
   - **store**: 출석 체크 폼 제출 처리
     - 요청 데이터 형식: attendances[member_id] = status (예: attendances[1] = 'present')
     - 각 참가자별로 오늘 날짜의 출석 기록을 updateOrCreate로 저장/업데이트
     - 검증: status는 'present', 'absent', 'late' 중 하나
     - 저장 후 attendance.index로 리다이렉트

5. 뷰 파일 생성 (resources/views/attendance/):
   - **index.blade.php**: 특정 날짜의 출석부 조회
     - 날짜 선택 폼 (input type="date", 제출 시 ?date= 쿼리로 전달)
     - 참가자별 출석 상태 테이블 (이름, 상태 - 출석/결석/지각 배지 색상 구분)
     - Tailwind 배지: 출석(green), 결석(red), 지각(yellow)
   - **check.blade.php**: 출석 체크 폼
     - 날짜 표시 (오늘 날짜)
     - 각 참가자별로 라디오 버튼 (출석/결석/지각) 또는 셀렉트 박스
     - @csrf 포함, route('attendance.store')로 POST
     - Tailwind 폼 스타일

**결과 확인:**
- /attendance/check 페이지에서 오늘 날짜의 출석 체크 가능
- /attendance 페이지에서 특정 날짜의 출석부 조회 가능
- 출석 상태가 색상으로 구분되어 표시됨

기대 결과: 출석 체크 기능이 완성되어 /attendance/check에서 참가자별 출석을 체크하고, /attendance에서 날짜별 출석부를 조회할 수 있습니다. 출석 상태가 Tailwind 배지로 색상 구분되어 표시됩니다.

4
Step 4
**출석률 통계 기능을 추가하세요.**

**요구사항:**

1. Member 모델에 출석률 계산 메서드 추가:
   - app/Models/Member.php에 attendanceRate() 메서드 추가:
     ```php
     public function attendanceRate() {
         $total = $this->attendances()->count();
         if ($total === 0) return 0;
         $present = $this->attendances()->where('status', 'present')->count();
         return round(($present / $total) * 100, 1);
     }
     ```

2. 참가자 목록 페이지(members/index.blade.php)에 출석률 컬럼 추가:
   - 테이블에 "출석률" 컬럼 추가
   - 각 참가자별로 {{ $member->attendanceRate() }}% 표시
   - Tailwind로 출석률에 따라 색상 변경 (예: 80% 이상 green, 50~80% yellow, 50% 미만 red)

3. 출석률 통계 전용 페이지 생성 (선택):
   - routes/web.php에 Route::get('/statistics', [AttendanceController::class, 'statistics'])->name('attendance.statistics'); 추가
   - AttendanceController에 statistics() 메서드 추가:
     - 모든 참가자를 출석률 순으로 정렬하여 표시
     - Member::all()->sortByDesc(fn($m) => $m->attendanceRate());
   - resources/views/attendance/statistics.blade.php 생성:
     - 참가자별 출석률 순위 테이블 (순위, 이름, 출석률, 출석 횟수/전체 횟수)
     - Tailwind로 순위별 배지 또는 프로그레스 바 표시

4. 네비게이션 바에 "통계" 메뉴 추가:
   - layouts/app.blade.php의 네비게이션에 route('attendance.statistics') 링크 추가

5. 홈페이지에 간단한 대시보드 추가 (선택):
   - resources/views/home.blade.php에 전체 통계 요약 표시:
     - 전체 참가자 수: Member::count()
     - 오늘 출석 체크 완료 인원: Attendance::whereDate('date', today())->where('status', 'present')->count()
     - 전체 평균 출석률 계산 및 표시
   - Tailwind 카드 컴포넌트로 통계 박스 디자인

**결과 확인:**
- /members 페이지에서 각 참가자의 출석률이 표시됨
- /statistics 페이지에서 출석률 순위 확인 가능
- 홈페이지에 간단한 대시보드 통계 표시
- 출석률에 따라 색상이 다르게 표시됨

기대 결과: 참가자 목록과 통계 페이지에 출석률이 표시되며, 출석률에 따라 색상이 구분됩니다. 홈페이지에 전체 통계 요약이 표시되고, 출석률 순위 페이지가 추가됩니다.

제출된 작품 (0)

로그인 후 제출

아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!

댓글 (0)

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