prgrms-web-devcourse-final-project · eunjju2 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
diff --git a/.env.default b/.env.default
@@ -0,0 +1,4 @@
+VITE_KAKAOMAP_APP_KEY
+VITE_APP_SERVER_URL
+VITE_APP_TOSS_CLIENT_KEY
+VITE_APP_TOSS_SECRET_KEY
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -30,16 +30,23 @@ module.exports = {
     'no-undef': 'off', // 'module' 관련 에러 방지
     'react/jsx-no-useless-fragment': 'off', // React Fragment (<></>)가 단일 자식을 감쌀 때도 허용
     'import/no-extraneous-dependencies': 'off',
+    'react/no-array-index-key': 'off', // index key 이용
     'react/function-component-definition': [
       'off',
       {
         namedComponents: 'arrow-function',
       },
     ], // 화살표 함수 이용
-
+    'react/require-default-props': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
-
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        some: ['nesting', 'id'],
+      },
+    ],
+    'no-param-reassign': 'off',
     '@typescript-eslint/naming-convention': [
       'error',
       // 인터페이스 이름은 PascalCase를 사용하되, 'I'로 시작하지 않아야 함

diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
@@ -0,0 +1,58 @@
+name: Front Deployment
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+
+      - name: Create .env file
+        run: |
+          touch .env
+          echo VITE_KAKAOMAP_APP_KEY=${{ secrets.VITE_KAKAOMAP_APP_KEY }} >> .env
+          echo VITE_APP_SERVER_URL=${{ secrets.VITE_APP_SERVER_URL }} >> .env
+          echo VITE_APP_TOSS_CLIENT_KEY=${{ secrets.VITE_APP_TOSS_CLIENT_KEY }} >> .env
+          cat .env
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Deploy to S3
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          SOURCE_DIR: './dist'
+          AWS_REGION: 'ap-northeast-2'
+          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/README.md b/README.md
@@ -1,26 +1,284 @@
-# ROOM:IT
+# 📚 스터디룸 예약 플랫폼[ROOM:IT] 📚
+![BUMBLEBEE_ROOMIT](https://github.com/user-attachments/assets/1e5ef171-c9d0-48e9-9960-7945c5be25dc)
 
-### 스터디룸 예약 플랫폼 - 🐝범블비팀 FE🐝
+## ✨ 프로젝트 소개
+Room:it은 기존 예약 시스템에 문제점을 파악하여 사용자에게 보다 효율적이고 
+직관적인 서비스를 제공하는 **스터디룸 예약 및 관리 플랫폼**입니다.
+
+[🙋🏻‍♀ ROOM:IT 이용하기](https://d2tci4aoquuc80.cloudfront.net/) 
 
 <br>
 
-## 프로젝트 실행
+## ✨ 기획 배경
+> 최근 스터디룸에 대한 수요는 지속적으로 증가하고 있습니다. <br>
+그러나 기존 예약 시스템은 사용자에게 최적의 공간을 추천하거나, 예약 과정에서의 편의성을 충분히 제공하지 못하는 경우가 많습니다.
 
-### Repository Clone
+이 프로젝트는 **사용자 경험 향상**과 **운영 효율성 극대화**를 목표로 기획되었습니다.
 
-```
-$ git clone https://github.com/prgrms-web-devcourse-final-project/WEB1_2_BUMBLEBEE_FE.git
-$ cd WEB1_2_BUMBLEBEE_FE
-```
+- **개인화 추천 시스템**을 통해 사용자가 선호하는 시간, 장소, 그리고 환경에 맞춘 스터디룸을 제공하여 선택의 편의성을 높이고,
+- **위치 기반 시스템**으로 사용자의 접근성을 강화하며,
+- **결제 프로세스 최적화**를 통해 빠르고 안정적인 예약 경험을 제공합니다.
 
-### Package Installation
+이를 통해 사용자에게는 최적화된 학습 공간을, 스터디룸 제공자에게는 효율적인 운영 도구를 제공하는 **윈-윈 플랫폼**을 구축하고자 합니다.
 
-```
-npm install
-```
 
-### Run
+<br>
+
+## ✨ 프로젝트 기간
+- **기획 및 설계 :** 2024.11.06 ~ 2024.11.17
+- **개발 :** 2024.11.18 ~ 2024.12.09
+
+
+<br>
+
+
+## ✨ 주요 기능
+
+<table style="min-width: 100% !important; max-width: 830px !important; border-collapse: collapse;">
+  <!-- 위치 기반 시스템 -->
+  <tr>
+    <td align="center" valign="middle" width="50%">
+      <img src="https://github.com/user-attachments/assets/12b46936-ef51-47f6-be97-bf83f4082ebf" alt="BUMBLEBEE_ROOMIT (1)" width="250" />
+    </td>
+    <td align="center" valign="middle" width="50%">
+      <p>
+        <strong>✅ 위치 기반 시스템</strong><br><br>
+        사용자의 현재 위치를 기반으로 근처에 있는 스터디룸을 지도에 표시하여, 위치를 시각적으로 확인할 수 있습니다. <br><br>
+        사용자가 지도를 이동시키면, 해당 위치를 기준으로 근처 스터디룸을 리스트로 확인할 수 있습니다.
+      </p>
+    </td>
+  </tr>
+
+  <!-- 맞춤형 추천 시스템 -->
+  <tr>
+    <td align="center" valign="middle" width="50%">
+      <img src="https://github.com/user-attachments/assets/c41cc024-ce06-4c2d-ae2a-1a0edb7a6d10" alt="BUMBLEBEE_ROOMIT (1)" width="250">
+    </td>
+    <td align="center" valign="middle" width="50%">
+      <p>
+        <strong>✅ 맞춤형 추천 시스템</strong><br><br>
+        사용자의 이용 내역을 기반으로 새로운 스터디룸을 추천받을 수 있습니다. <br>
+      </p>
+    </td>
+  </tr>
+
+  <!-- 검색 필터링 -->
+  <tr>
+    <td align="center" valign="middle" width="50%">
+      <img src="https://github.com/user-attachments/assets/83fdfe74-8389-4ddb-9d89-9ec64b1b4756" alt="BUMBLEBEE_ROOMIT (1)" width="250">
+    </td>
+    <td align="center" valign="middle" width="50%">
+      <p>
+        <strong>✅ 검색 필터링</strong><br><br>
+        원하는 장소 / 날짜 / 시간 / 인원수를 선택하여 예약 가능한 스터디룸을 찾을 수 있습니다. <br><br>
+        스터디룸 상세 페이지에서도 예약 가능한 날짜와 시간, 인원수를 선택 및 수정할 수 있습니다.
+      </p>
+    </td>
+  </tr>
+
+  <!-- 1:1 채팅 -->
+  <tr>
+    <td align="center" valign="middle" width="50%">
+        <img src="https://github.com/user-attachments/assets/ac22fbd7-241a-4970-b452-2b89420fdbf5" alt="BUMBLEBEE_ROOMIT (1)" width="600">
+    </td>
+    <td align="center" valign="middle" width="50%">
+      <p>
+        <strong>✅ 1:1 채팅</strong><br><br>
+        사용자는 실시간으로 호스트와 소통할 수 있으며, <br> 예약 관련 문의나 이용 시 요청 사항을 즉시 답변받을 수 있습니다. 
+      </p>
+    </td>
+  </tr>
+</table>
+
+
+
+<br>
+
+## ✨ 기술 스택
+
+<table>
+<tr>
+ <td align="center">언어</td>
+ <td>
+  <img src="https://img.shields.io/badge/Typescript-3178c6?style=for-the-badge&logo=TypeScript&logoColor=ffffff"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">라이브러리</td>
+ <td>
+  <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=ffffff"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">빌드</td>
+ <td>
+    <img src="https://img.shields.io/badge/Vite-646cff?style=for-the-badge&logo=Vite&logoColor=white"/>&nbsp
+</tr>
+<tr>
+ <td align="center">라우터</td>
+ <td>
+  <img src="https://img.shields.io/badge/React%20Router%20Dom-CA4245?style=for-the-badge&logo=ReactRouter&logoColor=white">
+ </td>
+</tr>
+<tr>
+ <td align="center">상태관리</td>
+ <td>
+  <img src="https://img.shields.io/badge/TanStack%20Query-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Zustand-EA5A47?style=for-the-badge&logo=Zustand&logoColor=white">&nbsp
+</tr>
+<tr>
+ <td align="center">API</td>
+ <td>
+  <img src="https://img.shields.io/badge/axios-5a29e4?style=for-the-badge&logo=axios&logoColor=white"/>&nbsp
+</tr>
+<tr>
+ <td align="center">실시간 통신</td>
+ <td>
+  <img src="https://img.shields.io/badge/SockJS-000000?style=for-the-badge&logo=SockJS&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/STOMP-FF8000?style=for-the-badge&logo=apachekafka&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/WebSocket-0078D7?style=for-the-badge&logo=websocket&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/SSE-FFAA00?style=for-the-badge&logo=serverless&logoColor=white"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">스타일링</td>
+ <td>
+  <img src="https://img.shields.io/badge/Tailwind CSS-06b6d4?style=for-the-badge&logo=TailwindCSS&logoColor=white"/>&nbsp
+</tr>
+<tr>
+ <td align="center">포매터</td>
+ <td>
+  <img src="https://img.shields.io/badge/Prettier-f7b93e?style=for-the-badge&logo=Prettier&logoColor=white"/>&nbsp 
+ </td>
+</tr>
+<tr>
+ <td align="center">린터</td>
+ <td>
+ <img src="https://img.shields.io/badge/ESLint-4b32c3?style=for-the-badge&logo=ESLint&logoColor=white"/>
+ </td>
+</tr>
+<tr>
+ <td align="center">패키지 매니저</td>
+ <td>
+  <img src="https://img.shields.io/badge/npm-cb3837.svg?style=for-the-badge&logo=npm&logoColor=white"/>&nbsp 
+ </td>
+</tr>
+<tr>
+ <td align="center">배포</td>
+ <td>
+    <img src="https://img.shields.io/badge/GitHub%20Actions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/AWS%20S3-569A31?style=for-the-badge&logo=amazonaws&logoColor=white"/>&nbsp
+</tr>
+<tr>
+ <td align="center">협업 도구</td>
+ <td>
+  <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white"/>&nbsp
+ </td>
+</tr>
+</table>
 
+<br>
+
+## ✨ 아키텍처
+![BUMBLEBEE_ROOMIT (1)](https://github.com/user-attachments/assets/bfbc0e85-5a70-42e0-abc5-e5861048ea00)
+
+<br>
+
+## ✨ 프로젝트 구조
 ```
-npm run dev
+📦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
 ```
+
+<br>
+
+## ✨ 개발 문서
+
+<details><summary>ERD</summary>
+
+![BUMBLEBEE_ROOMIT (1)](https://cdn.discordapp.com/attachments/1305460123199733782/1319622097110040637/PNG.png?ex=6766a159&is=67654fd9&hm=b7f6f4ea5989f57f5b77fac96e03c9eb9b2c469635707ac33bd30a5bf696c0f2&)
+</details>
+
+<details><summary>API 명세서
+</summary>
+
+- [API 명세서](https://woolly-gibbon-9ce.notion.site/API-169829f77c368146856bca2c7056fb49?pvs=4)
+</details>
+
+
+<details><summary>요구사항 명세서
+</summary>
+
+- [요구사항 명세서](https://docs.google.com/spreadsheets/d/1okDecrOy3IyNDzQJUQo8r5FMesHM5_8YqJADU3KgN8g/edit?gid=0#gid=0)
+</details>
+
+
+<details><summary>컨벤션
+</summary>
+
+- [팀 규칙](https://woolly-gibbon-9ce.notion.site/169829f77c36810cbaa6e5b2e0851a2d?pvs=4)
+- [공통 커밋 컨벤션](https://woolly-gibbon-9ce.notion.site/Git-Commit-Message-Convention-169829f77c3681edb626c2eedf8ec703?pvs=4)
+- [프론트엔드 코드 컨벤션](https://woolly-gibbon-9ce.notion.site/Code-Convention-169829f77c3681059b28d4a71977b5fc?pvs=4)
+- [벡엔드 코드 컨벤션](https://woolly-gibbon-9ce.notion.site/169829f77c36814d82adc37af5825b45?pvs=4)
+</details>
+
+<br>
+
+## ✨ 팀 소개
+
+|                           FE                             |                           FE                           |                            FE                  |
+|:----------------------------------------------------------:|:----------------------------------------------------------:|:----------------------------------------------------------:|
+| ![](https://avatars.githubusercontent.com/u/101979788?v=4) | ![](https://avatars.githubusercontent.com/u/108066931?v=4) | ![](https://avatars.githubusercontent.com/u/175666834?v=4) |
+|                           Team Leader                            |                           Git Admin                           |                            Developer & Clerk                            |
+|         [이은수](https://github.com/eunjju2)          |          [조현진](https://github.com/JOEIH)           |           [최성령](https://github.com/ryeong9)            |
+| 메인 페이지 (지도)<br>스터디룸 검색 및 조회 페이지<br>예약 및 결제 페이지<br>1:1 실시간 채팅 | 사용자 / 사업자 마이페이지<br>리뷰 작성 및 관리 페이지<br>알림 페이지<br>실시간 알림 | 사용자 / 사업자 회원가입<br>사용자 (소셜) / 사업자 로그인<br>사업장 등록 및 수정 페이지<br>사업장 상세 페이지 |
+
+
+|                          BE                           |                            BE                          |               BE                |                             BE                             |
+|:---------------------------------------------------------:|:----------------------------------------------------------:|:--------------------------------:|:-----------------------------------------------------------:|
+| ![](https://avatars.githubusercontent.com/u/176664628?v=4) | ![](https://avatars.githubusercontent.com/u/178239395?v=4) | ![](https://avatars.githubusercontent.com/u/134962465?v=4) |  ![](https://avatars.githubusercontent.com/u/97494494?v=4)  |
+|                          Team Leader                           |                            PM                           |               AWS Admin                |                             Developer & Clerk                             |
+|             [강시영](https://github.com/Si-rauis)              |         [이중호](https://github.com/bung-dev)          | [이시현](https://github.com/CryingPerson) |           [이용준](https://github.com/usingjun)           |
+| 사업자 관리<br>스터디룸 작성 및 관리 페이지<br>(검색 필터링)<br>Docker 컨테이너화<br>테스트 툴 연결 (K6, Grafana)<br>SSL 인증 | SpringSecurity / OAuth2 <br>Refresh Token<br>Rotation 레디스 저장<br>분산락을 통한 동시성 제어<br>결제 시스템 | 사용자 마이페이지<br>리뷰 작성 및 관리 페이지<br>실시간 알림 (SSE)<br>CI/CD<br>머신 러닝 추천 시스템<br>(Hybrid filtering) | 사업장 등록 및 상세 페이지<br>(카카오 지도 api)<br>레디스 pub/sub, 임시 저장소<br>활용한 실시간 1대 1 채팅<br>(WebSocket, STOMP) |