📚 스터디룸 예약 플랫폼[ROOM:IT] 📚

✨ 프로젝트 소개

Room:it은 기존 예약 시스템에 문제점을 파악하여 사용자에게 보다 효율적이고 직관적인 서비스를 제공하는 스터디룸 예약 및 관리 플랫폼입니다.

🙋🏻‍♀ ROOM:IT 이용하기

✨ 기획 배경

최근 스터디룸에 대한 수요는 지속적으로 증가하고 있습니다.
그러나 기존 예약 시스템은 사용자에게 최적의 공간을 추천하거나, 예약 과정에서의 편의성을 충분히 제공하지 못하는 경우가 많습니다.

이 프로젝트는 사용자 경험 향상과 운영 효율성 극대화를 목표로 기획되었습니다.

• 개인화 추천 시스템을 통해 사용자가 선호하는 시간, 장소, 그리고 환경에 맞춘 스터디룸을 제공하여 선택의 편의성을 높이고,
• 위치 기반 시스템으로 사용자의 접근성을 강화하며,
• 결제 프로세스 최적화를 통해 빠르고 안정적인 예약 경험을 제공합니다.

이를 통해 사용자에게는 최적화된 학습 공간을, 스터디룸 제공자에게는 효율적인 운영 도구를 제공하는 윈-윈 플랫폼을 구축하고자 합니다.

✨ 프로젝트 기간

• 기획 및 설계 : 2024.11.06 ~ 2024.11.17
• 개발 : 2024.11.18 ~ 2024.12.09

✨ 주요 기능

	✅ 위치 기반 시스템 사용자의 현재 위치를 기반으로 근처에 있는 스터디룸을 지도에 표시하여, 위치를 시각적으로 확인할 수 있습니다. 사용자가 지도를 이동시키면, 해당 위치를 기준으로 근처 스터디룸을 리스트로 확인할 수 있습니다.
	✅ 맞춤형 추천 시스템 사용자의 이용 내역을 기반으로 새로운 스터디룸을 추천받을 수 있습니다.
	✅ 검색 필터링 원하는 장소 / 날짜 / 시간 / 인원수를 선택하여 예약 가능한 스터디룸을 찾을 수 있습니다. 스터디룸 상세 페이지에서도 예약 가능한 날짜와 시간, 인원수를 선택 및 수정할 수 있습니다.
	✅ 1:1 채팅 사용자는 실시간으로 호스트와 소통할 수 있으며, 예약 관련 문의나 이용 시 요청 사항을 즉시 답변받을 수 있습니다.

✨ 기술 스택

언어
라이브러리
빌드
라우터
상태관리
API
실시간 통신
스타일링
포매터
린터
패키지 매니저
배포
협업 도구

✨ 아키텍처

✨ 프로젝트 구조

📦WEB1_2_BUMBLEBEE_FE
 ┣ 📂.github
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂apis //API 요청 함수와 관련 설정을 관리하는 폴더
 ┃ ┣ 📂assets //프로젝트에서 사용하는 정적 파일 (이미지, 폰트, 아이콘 등)을 관리하는 폴더
 ┃ ┃ ┣ 📂icons
 ┃ ┃ ┣ 📂images
 ┃ ┣ 📂components //공통 UI 컴포넌트를 담은 폴더
 ┃ ┣ 📂constants //공통으로 사용되는 상수들을 정의한 파일을 관리하는 폴더
 ┃ ┣ 📂layouts //전체 페이지 레이아웃을 구성하는 컴포넌트를 담은 폴더
 ┃ ┣ 📂pages //라우팅 단위의 페이지 컴포넌트를 관리하는 폴더
 ┃ ┃ ┣ 📂MainPage 
 ┃ ┃ ┃ ┣ 📂components //해당 페이지 내 사용하는 컴포넌트를 관리하는 폴더
 ┃ ┃ ┃ ┣ 📂hooks //해당 페이지에서 사용되는 custom hooks를 관리하는 폴더
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂routes //라우팅 경로 설정과 관련된 코드를 담은 폴더
 ┃ ┣ 📂store //전역 상태 로직을 관리하는 폴더
 ┃ ┣ 📂styles //전역 스타일이나 스타일 관련 설정 파일을 관리하는 폴더
 ┃ ┣ 📂typings //전역으로 사용되는 타입들을 관리하는 폴더
 ┃ ┣ 📂utils //공통으로 사용되는 유틸리티 함수들을 관리하는 폴더
 ┃ ┣ 📜index.css
 ┃ ┣ 📜main.tsx
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.env
 ┣ 📜.env.default
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜README.md
 ┣ 📜index.html
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜postcss.config.js
 ┣ 📜tailwind.config.ts
 ┣ 📜tsconfig.app.json
 ┣ 📜tsconfig.eslint.json
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts

✨ 개발 문서

ERD

API 명세서

• API 명세서

요구사항 명세서

• 요구사항 명세서

컨벤션

• 팀 규칙
• 공통 커밋 컨벤션
• 프론트엔드 코드 컨벤션
• 벡엔드 코드 컨벤션

✨ 팀 소개

FE	FE	FE
Team Leader	Git Admin	Developer & Clerk
이은수	조현진	최성령
메인 페이지 (지도) 스터디룸 검색 및 조회 페이지 예약 및 결제 페이지 1:1 실시간 채팅	사용자 / 사업자 마이페이지 리뷰 작성 및 관리 페이지 알림 페이지 실시간 알림	사용자 / 사업자 회원가입 사용자 (소셜) / 사업자 로그인 사업장 등록 및 수정 페이지 사업장 상세 페이지

BE	BE	BE	BE
Team Leader	PM	AWS Admin	Developer & Clerk
강시영	이중호	이시현	이용준
사업자 관리 스터디룸 작성 및 관리 페이지 (검색 필터링) Docker 컨테이너화 테스트 툴 연결 (K6, Grafana) SSL 인증	SpringSecurity / OAuth2 Refresh Token Rotation 레디스 저장 분산락을 통한 동시성 제어 결제 시스템	사용자 마이페이지 리뷰 작성 및 관리 페이지 실시간 알림 (SSE) CI/CD 머신 러닝 추천 시스템 (Hybrid filtering)	사업장 등록 및 상세 페이지 (카카오 지도 api) 레디스 pub/sub, 임시 저장소 활용한 실시간 1대 1 채팅 (WebSocket, STOMP)