🎉

15:10-15:40 (30분)

이벤트 신청 앱 만들기

참가자 관리부터 확인 메시지까지 - 완전한 이벤트 시스템

📋 세션 개요

학교 행사, 부서 워크숍, 교육 프로그램 등 다양한 이벤트의 참가 신청을 받고 관리하는 시스템을 만들어봅니다. 참가자 정보 수집, 인원 제한, 신청 현황 대시보드, 참가 확인 메시지 발송까지 실무에서 바로 활용할 수 있는 완성도 높은 앱을 구현합니다.

💡 실무 활용 팁

이 시스템을 기반으로 교직원 연수, 특강 신청, 행사 참가 접수 등 다양한 용도로 확장할 수 있습니다.

🎯 학습 목표

•

완전한 이벤트 관리 시스템: 신청부터 관리까지 전체 프로세스를 구현합니다

•

실시간 현황 대시보드: 신청자 수, 인원 현황, 부서별 통계를 한눈에 봅니다

•

인원 제한 기능: 정원이 차면 자동으로 신청 마감 처리합니다

•

확인 메시지: 신청 완료 시 확인 메시지를 자동으로 표시합니다

🛠️ 주요 기능

📝 참가 신청 폼

• 이름, 부서, 연락처 입력
• 참가 동기 (선택)
• 유효성 검사

📊 관리자 대시보드

• 실시간 신청자 목록
• 부서별 통계
• 참가자 검색/필터

⚡ 실시간 현황

• 현재 신청자 수 / 정원
• 남은 자리 표시
• 마감 임박 알림

✅ 확인 메시지

• 신청 완료 확인
• 이벤트 정보 안내
• 취소 방법 안내

👨‍💻 실습: 단계별 진행

1신청 페이지 만들기 (10분)

📝 Cursor에게 요청:

이벤트 신청 웹 앱을 만들어주세요.

이벤트 정보:
- 제목: "2025 직원 워크숍"
- 일시: 2025년 11월 15일 (금) 14:00-17:00
- 장소: 다니엘관 502호
- 정원: 50명

신청 폼 항목:
1. 이름 (필수)
2. 부서 (필수)
3. 연락처 (필수)
4. 참가 동기 (선택, 텍스트영역)

기능:
- 현재 신청자 수와 남은 자리 표시
- 정원이 차면 "마감되었습니다" 표시
- 신청 완료 시 확인 메시지

HTML + vanilla JS로 만들어주세요.
깔끔한 카드 레이아웃으로.

2백엔드 API 구현 (10분)

📝 Cursor에게 요청:

Node.js + Express 백엔드를 추가해주세요.

API:
- POST /api/register - 참가 신청
- GET /api/participants - 참가자 목록 조회
- GET /api/stats - 통계 정보 (총 신청자, 부서별 통계)
- DELETE /api/participants/:id - 참가 취소

기능:
- 정원(50명) 체크 후 초과 시 거부
- 중복 신청 방지 (이름 + 부서 조합)
- SQLite 데이터베이스 사용

프로젝트 구조:
/event-app
  /public
    index.html (신청 페이지)
    admin.html (관리자 페이지)
  server.js
  package.json

💡 핵심 포인트:

✅ 정원 체크: 등록 전 현재 참가자 수 확인
✅ 중복 방지: 동일 이름+부서 조합 체크
✅ 에러 처리: 적절한 에러 메시지 반환

3관리자 대시보드 (10분)

📝 Cursor에게 요청:

admin.html 페이지를 만들어주세요.

표시 내용:
1. 통계 카드
   - 총 신청자 수
   - 남은 자리
   - 부서별 분포

2. 참가자 목록 테이블
   - 번호, 이름, 부서, 연락처, 신청일시
   - 부서별 필터
   - 이름 검색 기능

3. 관리 기능
   - 참가 취소 버튼
   - 전체 참가자 CSV 다운로드

깔끔한 대시보드 레이아웃으로 만들어주세요.

💡 대시보드 예시:

총 신청자

남은 자리

84%

달성률

✅ 완성 체크리스트

신청이 정상적으로 등록되나요?현재 신청자 수가 실시간으로 업데이트되나요?정원이 차면 신청이 막히나요?관리자 페이지에서 참가자 목록이 보이나요?부서별 필터와 검색이 동작하나요?

💡 핵심 포인트

🎯비즈니스 로직: 정원 체크, 중복 방지 등 실제 서비스의 규칙을 코드로 구현합니다

📊실시간 대시보드: 관리자가 현황을 한눈에 파악할 수 있어야 합니다

✅사용자 피드백: 신청 완료, 에러 발생 시 명확한 메시지를 보여줍니다

🔄데이터 일관성: 여러 사용자가 동시에 접속해도 데이터가 정확해야 합니다

💼 업무 활용

🎓 교직원 연수 신청

학기별 교직원 연수 프로그램 참가 신청 관리

🎉 대학 행사 참가

입학식, 졸업식 등 주요 행사 참석 의사 확인

💡 특강/세미나 신청

외부 강사 초청 특강 및 세미나 참가 신청

🏃 체육대회 참가

교직원 체육대회 종목별 참가 신청 및 관리

❗ 자주 발생하는 문제와 해결법

🔸 동시 접속 시 정원을 초과하여 등록됩니다

해결: "트랜잭션을 사용하여 정원 체크와 등록을 원자적으로 처리해줘"

🔸 중복 신청 방지가 제대로 동작하지 않습니다

해결: "데이터베이스에 UNIQUE 제약조건을 추가해줘 (name + department)"

🔸 관리자 페이지에서 통계가 업데이트되지 않습니다

해결: "페이지 로드 시와 삭제 후에 통계를 다시 가져오는 함수를 호출해줘"

🚀 도전 과제

⭐ Level 1: 참가자에게 확인번호 발급 및 조회 기능

⭐⭐ Level 2: 이메일 자동 발송 기능 (신청 확인 메일)

⭐⭐⭐ Level 3: QR 코드 생성 및 현장 체크인 시스템

⭐⭐⭐⭐ Level 4: 여러 이벤트를 관리할 수 있는 멀티 이벤트 시스템

📢 다음 실습 예고

Session 9: 부서별 업무효율화 토의 & 개발

오늘 배운 기술을 활용하여 각자의 부서에 실제로 필요한 업무 도구를 기획하고 개발합니다. 강사가 1:1로 코칭하며, 완성된 앱을 발표하고 공유하는 시간을 가집니다.

💡 미리 준비: 우리 부서에서 효율화하고 싶은 업무를 생각해보세요!

👨‍🏫 강사 노트

⏰ 시간 배분: 신청 페이지 10분, 백엔드 10분, 관리자 페이지 10분

🎯 핵심 개념: 비즈니스 로직, 실시간 대시보드, 데이터 일관성

💬 참여 유도: "이런 시스템을 어디에 사용하고 싶으세요?" 질문

⚠️ 주의사항: 정원 체크 로직 설명, 중복 방지 처리 강조

🎨 선택적 개선: 시간이 남으면 확인번호 발급, CSV 다운로드 추가

🔮 다음 세션 준비: 참가자들이 만들고 싶은 앱 아이디어를 미리 수집