Laravel 간단 출석 체크 시스템
attendance-check-laravel
문제 설명
📋 프로젝트 개요
스터디 그룹, 동아리, 소규모 강의 등에서 사용할 수 있는 간단한 출석 체크 시스템을 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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가 적용된 기본 레이아웃과 홈페이지가 표시됩니다. 네비게이션 바에 메뉴 항목이 보입니다.
**참가자(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로 스타일링된 테이블과 폼이 표시됩니다.
**출석 기록(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 배지로 색상 구분되어 표시됩니다.
**출석률 통계 기능을 추가하세요.**
**요구사항:**
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)
로그인 후 제출아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!