동기 : 점심 메뉴 정할 때마다 카톡이 폭발한다

• 매일 반복되는 점심 메뉴 정하기
  • 두 테이블 이상 되는 단체가 되면 "ㅇㅇ님은 뭐 드세요?"로 시작해서 카톡이 수십 개씩 쌓인다.
  • 누가 뭘 골랐는지 정리하려면 스크롤을 한참 올려야 하고, 중간에 딴 얘기 끼면 더 혼란스럽다.
  • 결국 한 사람이 "정리해줄게"하고 엑셀이나 메모장에 수동으로 옮기는 상황이 반복된다.
  • 주문하러 갔다가 "ㅇㅇ 메뉴는 오늘 안된대요." 하면 후...
• 기존 투표 서비스의 아쉬움
  • 일반적인 투표 사이트는 후보가 미리 정해져있고 그 중에서만 고를 수 있다.
  • 그런데 우리는 후보 자체를 사용자가 자유롭게 추가할 수 있어야 했다.
  • 그리고 실시간으로 "지금 누가 뭘 골랐는지" 바로 보이면 좋겠다고 생각했다.
• 그래서 직접 만들기로
  • React와 Firebase를 사용하면 실시간 웹앱을 빠르게 만들 수 있다고 해서 도전해봤다.
  • Firebase는 써본 적 없었는데, Firestore의 실시간 리스너라는 기능이 딱 내가 원하는 거였다.

큰 흐름

• React랑 Firebase 세팅 등 세부적인 것은 검색하거나 AI에게 물으면 금방 나온다.

1. 실시간 투표

• 사용자가 이름과 메뉴를 입력하면 Firestore에 저장되고, 다른 사용자 화면에도 즉시 반영된다.
• 같은 메뉴를 고른 사람이 있으면 카운트가 올라가고, 새 메뉴면 목록에 추가된다.
• 검색 키워드 : React, Firebase Firestore, onSnapshot, increment, arrayUnion

2. 메뉴 사진 & 가격

• 메뉴판 사진을 올려서 다같이 보면서 고를 수 있다. 캐러셀로 넘겨보기 가능.
• 각 메뉴에 가격을 입력하면 가격 × 인원수로 총 예상 금액을 자동 계산해준다.
• 검색 키워드 : Firebase Storage, CSS scroll-snap, getDownloadURL

3. 그룹 기능

• 여러 팀이 동시에 독립적으로 사용할 수 있도록 그룹(방) 분리.
• 그룹이 1개면 기존처럼 바로 투표 화면, 2개 이상이면 선택 화면이 뜬다.
• 검색 키워드 : react-router-dom, useParams, Firestore subcollection

4. 배포

• Firebase Hosting으로 무료 배포. 빌드하고 firebase deploy 한 줄이면 끝.
• 검색 키워드 : Firebase Hosting, firebase-tools CLI

조금 헤맸던 부분들

1. Firebase 초기 설정

• Firebase 라이브러리를 설치하고 config 파일을 만들었는데, 투표를 눌러도 아무 반응이 없었다.
• 알고 보니 Firebase 콘솔에서 Firestore Database를 아직 생성을 안 했던 것이다.
• 생성 후에도 Missing or insufficient permissions 에러가 났는데, 보안 규칙을 테스트 모드(allow read, write: if true)로 바꾸니 해결됐다.
• Firebase는 콘솔에서 해줘야 할 설정이 꽤 있으니, 코드만 짜고 끝이 아니라는 걸 배웠다.

2. 이미지 삭제가 안 됨

• 사진 삭제 버튼을 눌렀는데 Storage에 파일이 안 지워지고 404 에러가 났다.
• 원인은 업로드할 때 파일명에 타임스탬프를 붙여서 저장했는데(1707801234_photo.png), 삭제할 때는 원본 파일명(photo.png)으로 찾고 있었기 때문.
• Firestore에 storagePath 필드를 추가해서 정확한 경로를 저장하도록 수정해서 해결했다.

3. 그룹 기능 전환

• 처음에는 단일 컬렉션(votes, menuImages)으로 만들었다가, 그룹 기능을 위해 서브컬렉션(groups/{groupId}/votes) 구조로 전환했다.
• Firestore 경로만 바뀌는 거라 로직 자체는 거의 그대로인데, 경로를 하나하나 바꾸는 작업이 꽤 많았다.
• 처음부터 확장성을 고려해서 설계했으면 좋았을 텐데, 라는 생각이 들었다. 하지만 뭐, 일단 만들고 필요할 때 바꾸는 것도 나쁘지 않다고 본다.

주요 기능 정리

기능	설명
실시간 투표	이름 + 메뉴 입력 → 모든 사용자 화면에 즉시 반영
빠른 참여	기존 메뉴에 "+ 참여" 버튼으로 바로 합류
메뉴 사진	다중 업로드, 캐러셀, 전체화면 모달, 개별 삭제
가격 & 총 금액	메뉴별 가격 입력 → 소계, 총 예상 금액 자동 계산
그룹	여러 팀이 독립 그룹으로 동시 사용 가능
전체 초기화	투표 + 사진 한 번에 리셋

기술 스택

분류	기술
프론트엔드	React 19, CSS (순수)
라우팅	react-router-dom
백엔드/DB	Firebase Firestore (실시간 NoSQL)
파일 저장	Firebase Storage
배포	Firebase Hosting

결과

👉 https://vote-eat.web.app

• 링크 하나로 접속해서, 그룹을 만들거나 기존 그룹에 들어가서 바로 투표할 수 있다.
• 카톡 대화창에서 메뉴 정리하던 시절은 이제 안녕.
• 앞으로 추가하고 싶은 것들 : 여러 그룹 결과 합산 뷰, 투표 마감 기능, 결과 차트 시각화 등.