팀 프로젝트 투표 시스템 - 실시간 의견 수렴 플랫폼 - 바이브코딩 레시피
중급 PHP Laravel

팀 프로젝트 투표 시스템 - 실시간 의견 수렴 플랫폼

리포지토리명 team-voting-poll-system
조회수 16 1건 제출 어제

문제 설명

프로젝트 개요

팀 내에서 빠르게 의견을 수렴하고 투표할 수 있는 실시간 투표 시스템을 만듭니다. 회의 시간을 정하거나, 점심 메뉴를 선택하거나, 프로젝트 우선순위를 결정할 때 유용하게 사용할 수 있습니다.

필수 기능

  • 사용자 인증 (회원가입/로그인)
  • 투표 생성 (제목, 설명, 선택지 추가, 마감 시간 설정)
  • 투표 참여 (단일 선택 또는 다중 선택)
  • 실시간 투표 결과 표시 (차트/그래프)
  • 투표 목록 보기 (진행 중/종료됨 필터링)
  • 투표 상세 페이지 (투표 참여자 목록, 결과 통계)
  • 내가 만든 투표 관리 (수정/삭제)
  • 반응형 디자인 (모바일 친화적)

선택 추가 기능 (보너스)

  • 익명 투표 옵션
  • 투표 결과 공유 링크 생성
  • 투표 결과 엑셀 다운로드
  • 투표 알림 (마감 임박 시)
  • 댓글 기능
  • 실시간 업데이트 (WebSocket 또는 폴링)

기술 스택

  • Laravel 12.x
  • MySQL
  • Tailwind CSS
  • Chart.js (결과 시각화)
  • Laravel Breeze (인증)

투표 시스템은 실용적이면서도 데이터베이스 설계, CRUD 작업, 관계 설정, 권한 관리 등 중급 개발자가 익혀야 할 핵심 개념을 모두 포함하고 있습니다.

제약 조건

  • Laravel 12.x 최신 버전 사용 필수
  • MySQL 데이터베이스 사용
  • Laravel Breeze를 활용한 인증 시스템 구현
  • Tailwind CSS로 스타일링 (Bootstrap 금지)
  • RESTful API 설계 원칙 준수
  • 투표 마감 시간 이후 투표 불가 로직 구현
  • 본인이 만든 투표에는 참여 불가 로직 구현
  • 중복 투표 방지 (한 사용자당 한 번만 투표)
  • 반응형 디자인 필수

프롬프트 레시피

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

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

요구사항:
1. 프로젝트명: team-voting-poll-system
2. Laravel Breeze를 설치하고 Blade 스택으로 인증 시스템 구성
3. Tailwind CSS 설정 완료
4. MySQL 데이터베이스 연결 설정 (.env 파일 예시 포함)
5. 다음 마이그레이션 파일 생성:
   - polls 테이블: id, user_id, title, description, is_multiple_choice, closes_at, timestamps
   - poll_options 테이블: id, poll_id, option_text, timestamps
   - votes 테이블: id, poll_id, poll_option_id, user_id, timestamps
6. 모델 간 관계 설정:
   - Poll 모델: User에 belongsTo, PollOption에 hasMany, Vote에 hasMany
   - PollOption 모델: Poll에 belongsTo, Vote에 hasMany
   - Vote 모델: Poll, PollOption, User에 각각 belongsTo
7. 기본 레이아웃 파일 생성 (app.blade.php with Tailwind)

완료 후 마이그레이션 실행까지 해주세요.

기대 결과: Laravel 프로젝트가 생성되고, 인증 시스템이 구성되며, 데이터베이스 테이블이 생성됩니다. 로그인/회원가입 페이지가 정상 작동하고, 기본 레이아웃이 Tailwind CSS로 스타일링되어 있어야 합니다.

2
Step 2
투표 생성 기능을 구현해주세요.

요구사항:
1. PollController 생성 (resource controller)
2. 라우트 설정:
   - GET /polls/create - 투표 생성 폼
   - POST /polls - 투표 저장
   - auth 미들웨어 적용
3. 투표 생성 폼 (polls/create.blade.php):
   - 제목 입력 (필수, 최대 200자)
   - 설명 입력 (선택, textarea)
   - 선택지 입력 (최소 2개, 최대 10개, JavaScript로 동적 추가/삭제)
   - 투표 방식 선택 (단일 선택/다중 선택 라디오 버튼)
   - 마감 시간 설정 (datetime-local input, 현재 시간 이후만 선택 가능)
   - Tailwind CSS로 깔끔한 폼 디자인
4. 유효성 검사:
   - FormRequest 클래스 생성 (StorePollRequest)
   - 제목 필수, 선택지 최소 2개, 마감 시간 미래 시간 검증
5. 저장 로직:
   - Poll 레코드 생성
   - PollOption 레코드 여러 개 한 번에 생성
   - DB 트랜잭션 사용
   - 성공 시 투표 상세 페이지로 리다이렉트

JavaScript는 Alpine.js 또는 바닐라 JS 사용해서 선택지 추가/삭제 기능 구현해주세요.

기대 결과: 로그인한 사용자가 /polls/create 페이지에서 투표를 생성할 수 있습니다. 선택지를 동적으로 추가/삭제할 수 있고, 폼 제출 시 유효성 검사가 작동하며, 데이터베이스에 투표와 선택지가 올바르게 저장됩니다.

3
Step 3
투표 목록 페이지와 상세 페이지를 구현해주세요.

요구사항:
1. 투표 목록 페이지 (polls/index.blade.php):
   - 라우트: GET /polls (홈페이지)
   - 모든 투표 목록 표시 (페이지네이션 적용, 한 페이지에 12개)
   - 각 카드에 표시할 정보:
     * 제목
     * 작성자 이름
     * 참여자 수
     * 마감까지 남은 시간 (또는 '종료됨' 표시)
     * 진행 중/종료됨 배지
   - 필터 탭: 전체/진행 중/종료됨
   - 카드 그리드 레이아웃 (반응형: 모바일 1열, 태블릿 2열, 데스크톱 3열)
   - '새 투표 만들기' 버튼 (우측 상단 고정)

2. 투표 상세 페이지 (polls/show.blade.php):
   - 라우트: GET /polls/{poll}
   - 표시할 정보:
     * 투표 제목, 설명
     * 작성자 정보
     * 마감 시간
     * 총 참여자 수
   - 투표 참여 폼:
     * 단일 선택: 라디오 버튼
     * 다중 선택: 체크박스
     * '투표하기' 버튼
   - 조건부 표시:
     * 이미 투표한 경우: 참여 폼 숨기고 '이미 투표하셨습니다' 메시지
     * 본인이 만든 투표: 참여 폼 숨기고 '수정/삭제' 버튼 표시
     * 마감된 투표: 참여 폼 비활성화

3. 컨트롤러 로직:
   - index(): 필터링 쿼리 (진행 중/종료됨)
   - show(): eager loading으로 N+1 문제 방지

Tailwind CSS로 카드 디자인과 폼 스타일링 해주세요.

기대 결과: 투표 목록 페이지에서 모든 투표를 카드 형태로 볼 수 있고, 필터링과 페이지네이션이 작동합니다. 투표 상세 페이지에서 투표 정보를 확인할 수 있고, 조건에 따라 적절한 UI가 표시됩니다.

4
Step 4
투표 참여 기능과 결과 표시 기능을 구현해주세요.

요구사항:
1. 투표 참여 라우트:
   - POST /polls/{poll}/vote
   - auth 미들웨어 적용

2. VoteController 생성 및 store 메서드 구현:
   - 유효성 검사:
     * 마감 시간 확인
     * 중복 투표 확인
     * 본인 투표 참여 불가 확인
     * 단일 선택 시 1개만, 다중 선택 시 1개 이상 선택 확인
   - Vote 레코드 생성 (다중 선택 시 여러 개)
   - 성공/실패 메시지와 함께 리다이렉트

3. 투표 결과 표시 (polls/show.blade.php 수정):
   - 각 선택지별 득표 수와 득표율 표시
   - 프로그레스 바로 시각화 (Tailwind CSS)
   - 가장 많은 득표를 받은 선택지 강조 표시
   - 투표 참여자 목록 표시 (아바타/이름, 최근 10명)

4. 조건부 결과 표시:
   - 투표 전: 결과 숨김 (또는 흐릿하게)
   - 투표 후: 결과 표시
   - 본인이 만든 투표: 항상 결과 표시

5. Chart.js 통합:
   - CDN으로 Chart.js 추가
   - 바 차트 또는 도넛 차트로 결과 시각화
   - 차트는 결과 섹션 상단에 배치

에러 처리와 사용자 피드백 메시지도 잘 구현해주세요.

기대 결과: 사용자가 투표에 참여할 수 있고, 모든 유효성 검사가 작동합니다. 투표 후 실시간으로 결과가 프로그레스 바와 차트로 표시되며, 조건에 따라 결과 표시 여부가 제어됩니다.

5
Step 5
투표 수정/삭제 기능과 마이 페이지를 구현해주세요.

요구사항:
1. 투표 수정 기능:
   - 라우트: GET /polls/{poll}/edit, PUT /polls/{poll}
   - 권한 확인: 본인이 만든 투표만 수정 가능 (Policy 사용)
   - 수정 가능 항목: 제목, 설명, 마감 시간
   - 수정 불가 항목: 선택지 (투표가 시작된 후에는 선택지 변경 불가)
   - 이미 투표가 있는 경우 안내 메시지 표시

2. 투표 삭제 기능:
   - 라우트: DELETE /polls/{poll}
   - 권한 확인: 본인이 만든 투표만 삭제 가능
   - 삭제 확인 모달 (JavaScript)
   - 연관된 선택지와 투표 레코드도 함께 삭제 (Cascade)

3. PollPolicy 생성:
   - update(): 본인 투표만 수정 가능
   - delete(): 본인 투표만 삭제 가능
   - AuthServiceProvider에 등록

4. 마이 페이지 (/my-polls):
   - 내가 만든 투표 목록
   - 내가 참여한 투표 목록
   - 각각 탭으로 구분
   - 통계 카드: 총 생성한 투표 수, 총 참여한 투표 수, 받은 총 투표 수

5. 네비게이션 바 업데이트:
   - 로그인 시 '마이 페이지' 링크 추가
   - '새 투표 만들기' 버튼 추가

Tailwind CSS로 모달과 통계 카드 디자인해주세요.

기대 결과: 투표 작성자가 본인의 투표를 수정하거나 삭제할 수 있습니다. 권한 검사가 정상 작동하고, 마이 페이지에서 본인이 만든 투표와 참여한 투표를 확인할 수 있습니다.

6
Step 6
최종 마무리 및 사용자 경험 개선을 해주세요.

요구사항:
1. 실시간 업데이트 (간단한 폴링 방식):
   - 투표 상세 페이지에서 10초마다 결과 자동 갱신
   - Fetch API 사용
   - 로딩 인디케이터 표시

2. 마감 시간 카운트다운:
   - JavaScript로 실시간 카운트다운 타이머 구현
   - '3일 5시간 23분 남음' 형식으로 표시
   - 마감되면 '종료됨' 표시로 자동 변경

3. 반응형 디자인 개선:
   - 모바일에서 투표 카드 레이아웃 최적화
   - 터치 친화적인 버튼 크기
   - 햄버거 메뉴 (모바일)

4. 접근성 개선:
   - 폼 필드에 적절한 label과 aria-label
   - 키보드 네비게이션 지원
   - 색상 대비 개선

5. 에러 페이지:
   - 404 페이지 커스터마이징
   - 403 페이지 (권한 없음)

6. Seeder 생성:
   - 테스트용 사용자 10명
   - 테스트용 투표 20개
   - 테스트용 투표 데이터 100개
   - php artisan db:seed 명령어로 실행 가능

7. README.md 작성:
   - 프로젝트 설명
   - 설치 방법
   - 주요 기능 스크린샷
   - 기술 스택

모든 기능이 잘 작동하는지 테스트하고, 코드 정리 및 주석 추가도 해주세요.

기대 결과: 투표 시스템이 완성되어 모든 기능이 정상 작동합니다. 실시간 업데이트와 카운트다운이 작동하고, 반응형 디자인이 모든 디바이스에서 잘 보입니다. Seeder로 테스트 데이터를 생성할 수 있고, README가 잘 작성되어 있습니다.

제출된 작품 (1)

로그인 후 제출

팀 프로젝트 투표 시스템

리자
리자
어제 · Claude Code

팀원들의 의견을 실시간으로 수렴하고 투표를 진행할 수 있는 협업 플랫폼

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

댓글 (0)

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