🚒 성수동 엘리스

1. 기획의도 & 목적

"엘리스 수강생들이 더 편리하게 사용할 수 있는 서비스가 없을까?"

엘리스 수강생들을 위한 커뮤니티 최종본!
레이서들을 위한 커뮤니티 및 엘리스랩 좌석예약을 더욱 편리하게 이용하기 위한 모바일 기반 웹서비스입니다.

🔍 배너 클릭해서 사이트 구경하기!

2. 웹 서비스의 최종적인 메인 기능과 서브 기능 설명

✨ 메인기능

- 실시간 채팅 기능

- 엘리스 좌석 예약

- 게시판

✨ 서브기능

- 구글로그인

- 다크모드/라이트모드

- 메인페이지

- 마이페이지

- 관리자페이지

- 찾아오시는길 페이지

3. 프로젝트만의 차별점, 기대 효과

🔥 기존에 있는 엘리스랩 페이지에서 수강생과 매니저님이 더 편하게 페이지를 이용할 수 있도록 웹서비스를 만들었습니다.

- 디스코드 DM 대신 플랫폼에서 바로 소통가능

- 기존의 엘리스랩 예약 방식과 차별화된 편리한 예약 시스템(잔여좌석 확인이 가능한 레이아웃)

- 동시에 가능한 플랫폼 이용과 채팅

- 게시판을 통해 유저들끼리 자유롭게 소통 및 공지사항에서도 댓글을 통해 질문 가능

- 약도로만 엘리스랩의 위치를 보여주는 것이 아닌 카카오맵을 통한 길찾기 기능

4. 스토리보드 및 유저 시나리오

⭐️ 사용자

- 사용자는 로그인하면 메인페이지로 이동한다.

- 사용자는 메인페이지에서 자유게시판을 조회수 순으로 게시물을 볼 수 있으며 클릭 시 자유게시판으로 이동한다.

- 사용자는 메인페이지에서 예약하러가기 버튼을 클릭하여 바로 예약페이지로 이동할 수 있다.

- 사용자는 메인페이지에서 공지게시판을 최신순으로 게시물을 볼 수 있으며 클릭 시 공지게시판으로 이동한다.

- 사용자는 메뉴 슬라이드를 통해 예약페이지로 이동하여 원하는 날짜, 이용할 좌석종류, 시간을 선택한 후 좌석을 직접 레이아웃에서 선택하여 예약할 수 있다.

- 사용자는 마이페이지에서 예약조회를 할 수 있으며 입실시간 전에 취소또한 가능하다.

- 사용자는 메뉴 슬라이드를 통해 게시판 페이지로 이동하여 자유게시판에서 게시물을 작성할 수 있다.

- 사용자는 원하는 게시물에 들어가서 댓글을 남길 수 있다.

- 사용자는 마이페이지에서 내가 쓴 게시물을 확인 및 수정, 삭제가 가능하다.

- 사용자는 마이페이지에서 회원탈퇴가 가능하다.

- 사용자는 메뉴 슬라이드를 통해 찾아오시는 길 페이지로 이동하여 길찾기 버튼을 클릭하면 카카오맵을 통해 성수엘리스랩까지의 경로를 확인할 수 있다.

🌙 관리자

- 관리자는 메뉴 슬라이드를 통해 관리자페이지로 이동할 수 있다.

- 관리자는 공지사항을 작성 및 수정, 삭제가 가능하다.

- 관리자는 사용자들이 작성한 게시물,댓글들을 삭제 할 수 있다.

- 관리자는 관리자페이지에서 공지사항을 관리할 수 있다.

- 관리자는 관리자페이지에서 좌석/예약을 관리할 수 있다.

- 관리자는 원하는 경우 특정 좌석에 이용제한을 적용할 수 있다.

5. 프로젝트 구성

🔧 기술 스택

Front-end

Back-end

🎨  협업 도구

구경하고 싶다면 아이콘 클릭!!

- 초반 기획시 빠른 레이아웃을 잡기 위해 사용

- API 명세서, API DOCS등 활용

- 팀원간 커뮤니케이션 및 매일 아침 스크럼 진행

- Code Repository, Trouble Shooting 내역 기제

- API 테스트 진행

🪄 기술 명세서

기술명세서 자세히 보고 싶다면 사진 클릭 😀

🧬 ERD(Entity Relationship Diagram)

📌  스크럼

- 매일 오전 10시 스크럼 진행

- 프론트, 백의 개발 진행상황 및 이슈 공유

- 필요시 프론트/백 전체 오프라인 미팅 진행

📎 커밋 컨벤션

# 제목은 최대 50글자까지 아래에 작성: ex) Feat: Add Key mapping  
# 본문은 아래에 작성  
# 꼬릿말은 아래에 작성: ex) Github issue #23  
# --- COMMIT END ---  
#   <타입> 리스트  
#   feat        : 기능 (새로운 기능)  
#   fix         : 버그 (버그 수정)  
#   refactor    : 리팩토링  
#   design      : CSS 등 사용자 UI 디자인 변경  
#   comment     : 필요한 주석 추가 및 변경  
#   style       : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)  
#   docs        : 문서 수정 (문서 추가, 수정, 삭제, README)  
#   test        : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)  
#   chore       : 기타 변경사항 (빌드 스크립트 수정, assets, 패키지 매니저 등)  
#   init        : 초기 생성  
#   rename      : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 한 경우  
#   remove      : 파일을 삭제하는 작업만 수행한 경우  
# ------------------  
#   제목 첫 글자를 대문자로  
#   제목은 명령문으로  
#   제목 끝에 마침표(.) 금지  
#   제목과 본문을 한 줄 띄워 분리하기  
#   본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다.  
#   본문에 여러줄의 메시지를 작성할 땐 "-"로 구분  
# ------------------  
#   <꼬리말>  
#   필수가 아닌 optioanl  
#   Fixes        :이슈 수정중 (아직 해결되지 않은 경우)  
#   Resolves     : 이슈 해결했을 때 사용  
#   Ref          : 참고할 이슈가 있을 때 사용  
#   Related to   : 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)  
#   ex) Fixes: #47 Related to: #32, #21

6. 파일 및 폴더 구성

Client

src
┣ actions
┣ assets
┣ components
┃ ┣ Board
┃ ┣ BookingState
┃ ┣ BookingTable
┃ ┣ CancelReservationBtn
┃ ┣ ChatList
┃ ┣ ChatListModal
┃ ┣ ChatModal
┃ ┗ common
┃ ┃ ┣ ConfirmModal
┃ ┃ ┣ DateInput
┃ ┃ ┣ FloatingButton
┃ ┃ ┣ Footer
┃ ┃ ┣ FullModal
┃ ┃ ┣ Header
┃ ┃ ┣ HeaderSlideMenu
┃ ┃ ┣ Link
┃ ┃ ┣ Loading
┃ ┃ ┣ Pagination
┃ ┃ ┣ PostList
┃ ┃ ┗ SearchBox
┃ ┣ Direction
┃ ┣ KakaoShareButton
┃ ┣ MainImage
┃ ┣ MyReservationModal
┃ ┣ Reservation
┃ ┣ SeatNumberInput
┃ ┣ SeatOption
┃ ┣ SignUpSelectBtn
┃ ┗ TimeSelect
┣ hooks
┣ pages
┃ ┣ Admin
┃ ┣ Login
┃ ┣ Main
┃ ┣ MyPage
┃ ┣ MyPost
┃ ┣ MyReservation
┃ ┣ SignUp
┃ ┗ Unvalid
┣ reducers
┣ routes
┣ store
┣ styles
┗ types

Server

src
 ┣ config
 ┃ ┗ jwt.ts
 ┣ controllers
 ┃ ┣ access-controllers.ts
 ┃ ┣ admin-controllers.ts
 ┃ ┣ chat-controller.ts
 ┃ ┣ comments-controllers.ts
 ┃ ┣ member2-controller.ts
 ┃ ┣ members-controllers.ts
 ┃ ┣ posts-controller.ts
 ┃ ┗ reservations-controller.ts
 ┣ db
 ┃ ┣ chat_room.sql
 ┃ ┣ chat.sql
 ┃ ┣ comment.sql
 ┃ ┣ connection_status.sql
 ┃ ┣ member.sql
 ┃ ┣ post.sql
 ┃ ┣ reservation.sql
 ┃ ┗ seat.sql
 ┣ middlewares
 ┃ ┣ check-auth.js
 ┃ ┣ isAdmin.ts
 ┃ ┗ upload-files.ts
 ┣ models
 ┃ ┣ chat_room.ts
 ┃ ┣ chats.ts
 ┃ ┣ comment.ts
 ┃ ┣ connection_status.ts
 ┃ ┣ members.ts
 ┃ ┣ posts.ts
 ┃ ┣ reservations.ts
 ┃ ┗ seats.ts
 ┣ routes
 ┃ ┣ access-routes.ts
 ┃ ┣ admin-routes.ts
 ┃ ┣ auth-routes.ts
 ┃ ┣ chat-routes.ts
 ┃ ┣ comment-routes.ts
 ┃ ┣ member-routes.ts
 ┃ ┣ post-routes.ts
 ┃ ┗ reservation-routes.ts
 ┣ types
 ┃ ┗ checkAuth.ts
 ┗ utils
   ┣ chat-utils.ts
   ┗ send-email.ts

7. 구성원 역할

🔥시켜줘, 엘리스 명예소방관🔥

이름	역할
박기영	풀스택, 팀장
성치호	프론트엔드
정명진	프론트엔드
신하영	프론트엔드
조가인	프론트엔드
엄윤주	백엔드
부혜선	백엔드