스터디카페 자리를 예약할 수 있는 웹 서비스
스터디카페에 갔는데 자리가 없어 급하게 주변에 있는 다른 스터디카페를 찾아보신 경험이 있으신가요? 헛걸음하는 것을 방지하기 위해 스터디카페 좌석을 예약할 수 있는 서비스를 기획하게 되었습니다.
- 이용자는 스터디카페 좌석 현황을 미리 파악하여 시간을 절약할 수 있습니다.
- 관리자는 이용자들과의 1:1 채팅을 통해 매장을 효율적으로 관리할 수 있습니다.
전체 개발 기간: 2024-06-25 ~ 2024-08-09 (7주)
| FE 팀원: 조현정 @HyunJungJo98 | FE 팀원: 유의진 @ejinn1 | BE 팀원: 이다은 @llynn97 | BE 팀원: 김태훈 @TaeHoon0 |
- UI
- 메뉴 모달창
- 관리자 입력/수정/조회 페이지
- 기능
- 관리자 1:1 문의
- 채팅
- 관리자 업장 정보 입력/수정/조회
- UI
- 메인 페이지
- 스터디카페 상세보기
- 예약 관리 페이지
- 마이 페이지
- 채팅 페이지
- 예약페이지
- 결제 페이지
- 기능
- 스터디카페 목록 표시, 스터디카페 상세 정보 표시
- 카카오 로그인, 구글 로그인
- 로그아웃, 회원 탈퇴
- 좌석과 스터디룸 예약
- 카카오페이 결제
- 현재 예약 내역 확인
- 마이페이지 회원 정보 조회, 예약 내역 조회
git clone https://github.com/fourix4/Front-End.git
cd catch-study
yarn install
yarn dev
| 분류 | 기술 스택 |
|---|---|
| Web | React, TypeScript, jotai, tailwind, stomp |
| CI/CD | Github Actions |
| Cloud Service | AWS EC2, AWS S3, AWS CodeDeploy, Nginx |
| Common | ESLint, Prettier |
| Design | Figma |
| 분류 | 기술 스택 |
|---|---|
| frameworks | Spring Boot, Spring Data JPA, Spring Security, Spring Quartz, STOMP, OAuth 2.0 |
| CI / CD | Git Actions |
| DataBase | MySQL, Redis |
| Cloud Service | AWS EB, AWS EC2, AWS Route53, AWS RDS, AWS S3 |
- 상단 바, 모달 등 자주 사용되는 컴포넌트를 재사용하여 유지보수를 원활하게 하기 위해 사용했습니다.
- 컴포넌트를 동적으로 import하여 성능을 개선했습니다.
- 하나의 스터디카페에도 영업 시간, 좌석 수, 주소 등 많은 정보가 포함되어 있습니다. 요청과 응답 과정에서 발생할 수 있는 오류를 줄이고, 협업 과정에서 혼선을 방지하고자 사용했습니다.
- 타입스크립트의 장점을 살리고자 any 사용을 최소화했습니다.
- Catch Study는 반응형으로 제작되었습니다. 반응형을 간편하고 빠르게 적용하기 위해 사용했습니다.
- 채팅 상대방의 이름과, 채팅방의 id값을 전역으로 관리하기 위해 사용했습니다.
- 프로젝트에서 전역으로 관리해야 하는 상태가 많지 않았기 때문에, 가장 경량화된 상태 관리 라이브러리인 Jotai를 선택했습니다.
- 주기적 배포를 위해 Github Actions를 사용하여 CI/CD를 구현했습니다.
- 빠른 배포로 테스트와 웹 성능을 개선할 때 시간을 절약할 수 있었습니다.
- SockJS는 WebSocket을 사용하여 실시간 통신을 가능하게 하며, WebSocket을 지원하지 않는 브라우저에서도 안정적인 연결을 보장하기 위해 활용했습니다.
- Stomp는 메시지 프로토콜을 통해 클라이언트와 서버 간의 통신을 간편하고 일관되게 관리하기 위해 사용했습니다.
- 정적 파일을 안전하게 제공하기 위해 사용했습니다.
- gzip을 사용하여 데이터를 압축하여 LCP 성능을 높였습니다.
- HTTPS를 적용하고 리버스 프록시를 사용하여 API 서버와 통신했습니다.
스터디카페 목록 표시: 시, 군/구, 동을 선택하면 해당 주소에 위치한 스터디카페 목록이 표시됩니다.
스터디카페 상세 정보 표시: 선택한 스터디카페의 상세 정보가 표시됩니다.
로그인: 카카오 계정과 구글 계정으로 회원가입을 할 수 있습니다.
좌석 예약: 사용 가능한 좌석과 시간을 선택하여 예약할 수 있습니다.
스터디룸 예약: 예약 가능한 시간을 선택하여 예약할 수 있습니다.
결제: 카카오 페이를 사용하여 간편 결제를 할 수 있습니다.
현재 예약 내역 확인: 현재 예약한 내용을 확인하고 인증번호를 통해 출입할 수 있습니다.
관리자 1:1 문의: ‘관리자 1:1 문의’ 버튼을 누르면 해당 스터디카페 관리자와의 채팅방이 개설됩니다.
채팅: 해당 스터디카페의 관리자에게 실시간으로 문의를 남길 수 있습니다.
예약 내역 조회: 처음에 최근 30개 예약 내역을 표시하고 이후 날짜를 선택하면 해당 기간 안의 예약 내역을 표시합니다.
스터디카페 정보 조회: 현재 자신이 운영 중인 스터디카페의 상태를 확인할 수 있습니다.
스터디카페 정보 입력: 새로운 스터디카페를 등록할 수 있습니다.
스터디카페 정보 상세보기: 상세보기 버튼을 누르면 해당 스터디카페의 상세 정보를 확인할 수 있습니다.
스터디카페 정보 수정: 상세보기 페이지에서 수정하기 버튼을 누르면 해당 스터디카페의 정보를 수정할 수 있습니다.
채팅: 스터디카페를 이용 중인 고객에게 실시간으로 문의를 답변할 수 있습니다.
