뭉치자

서비스 링크 : https://moongchija.vercel.app/

💻 프로젝트 소개

"약속을 잡고, 관리할 수 있도록 해주는 웹 서비스"

• 뭉치자는 약속을 쉽게 만들고 관리할 수 있는 모임 관리 서비스입니다. 퀴즈 기반 입장, 투표로 시간·장소 결정, 정산 기록, 추억 공유 등의 기능을 제공하며, 방장 전용 기능으로 원활한 약속 운영을 지원합니다. 마이페이지에서 약속을 한눈에 조회하고, 검색·달력 기능으로 원하는 모임을 쉽게 찾을 수 있습니다.

📅 개발 기간

• 2025년 01월 ~ 2025년 02월

💁 프로젝트의 구성원

빈운기(T)	황혜인	심동섭	김보영

🌐 개발환경

• 개발 언어: HTML, CSS, JavaScript
• 사용 기술: React, Next.js, TypeScript, moduleSCSS
• 데이터베이스: Supabase
• 배포: Vercel, PWA
• 버전 관리 및 협업: Git, Github, Figma, Discord, Notion, Git

📌 기획 동기

• "뭉치자"는 모임을 효율적으로 관리할 수 있는 웹 서비스를 목표로 기획되었습니다. 여러 사람들과의 약속을 쉽게 잡고, 시간과 장소를 결정하며, 정산까지 한 번에 처리할 수 있는 플랫폼을 제공하고자 했습니다. 퀴즈를 통한 입장, 투표를 통한 시간·장소 결정, 정산 기록 기능 등을 제공하여 모임 약속의 생성과 관리를 더 간편하게 만들었습니다.

📌 웹 사이트 주요 기능 및 목표

• 이메일과 비밀번호를 이용한 회원가입 및 로그인 기능 제공
• 카카오 소셜 로그인 기능 제공
• 방제목, 퀴즈 설정, 시간·장소 투표 기능을 포함한 약속 생성 기능
• 방번호로 약속에 참여하고 퀴즈를 맞추어 멤버로 추가되는 기능
• 방장이 시간·장소 투표 후 약속을 확정할 수 있는 기능
• 확정된 약속의 상세 정보, 정산하기, 사진 공유 기능 제공
• 사용자의 투표 및 약속 리스트와 필터링 기능 제공
• 달력 형태로 약속을 요약하여 제공하고, 개인 프로필 수정 기능 제공
• 사용자들을 관리하기 위한 관리자 페이지

📌 웹 사이트 사용 예시

1. 초기화면

초기화면

2. 회원가입 및 로그인

• 이메일과 비밀번호를 이용한 회원가입
• 카카오 로그인 이용 가능
• 로그인 후 서비스 이용 가능
• 사용자 프로필 관리 기능 제공

카카오 로그인

로그인 - 성공/실패

회원가입 - 성공/실패

3. 약속 생성 (방장 기능)

• 방제목, 퀴즈 및 정답 설정 가능
• 약속 시간 투표 가능 기간 및 시간 범위 설정
• 약속 장소 후보 등록 가능
• 약속 방번호 자동 생성 및 공유 가능

4. 약속 참여 (멤버 기능)

• 방번호를 입력하여 약속 참여 가능
• 방장이 설정한 퀴즈의 정답을 맞추면 멤버로 추가됨
• 멤버들은 방장이 설정한 시간, 장소 후보 중에서 가능한 시간 및 원하는 장소 투표 가능

5. 투표 및 약속 확정

• 방장과 멤버는 투표 페이지에서 시간 및 장소 투표 진행 가능
• 투표를 제출하면 투표 결과 확인 가능
• 모든 멤버가 투표 완료 시, 방장은 약속 확정 가능
• 확정된 약속은 시간과 장소 정보가 결정되고 정보를 공유할 수 있는 약속 상세 페이지가 생성
• 확정 후에 일정과 장소는 수정 가능

6. 약속 상세 페이지

• 확정된 약속의 정보 확인 가능
• 정산 기능 제공 (참여자 간 비용 정산 가능)
• 사진 공유 기능 제공 (약속 사진 업로드 및 공유)

7. 메인 페이지

• 사용자의 약속 리스트 제공
• 투표 중인 약속, 확정된 약속 필터링 가능
• 예정된 약속 및 지난 약속을 쉽게 확인 가능

8. 마이페이지

• 사용자의 약속을 달력 형태로 요약하여 제공
• 개인 프로필 수정 가능
• 약속 상태에 따른 색상 구분 및 약속 상태에 따른 필터링 제공

마이페이지 - 닉네임 변경, 이모지 변경, 약속 상태 필터링, 탈퇴 기능

9. 어드민 페이지

• 전체 사용자 목록 조회/삭제
• 전체 약속 목록 조회/삭제
• 전체 이미지 목록 조회/삭제
• 어드민 아이디로 로그인시 어드민페이지로 자동 리다이렉트
• 일반유저가 url로 어드민 페이지 접근시 열람불가