diff --git a/.env.default b/.env.default new file mode 100644 index 00000000..b54e94db --- /dev/null +++ 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 \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 0c993c81..6847345f 100644 --- 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 new file mode 100644 index 00000000..b10b82cb --- /dev/null +++ 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 index 75742605..07afa0da 100644 --- 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/)
-## 프로젝트 실행 +## ✨ 기획 배경 +> 최근 스터디룸에 대한 수요는 지속적으로 증가하고 있습니다.
+그러나 기존 예약 시스템은 사용자에게 최적의 공간을 추천하거나, 예약 과정에서의 편의성을 충분히 제공하지 못하는 경우가 많습니다. -### 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 +
+ +## ✨ 프로젝트 기간 +- **기획 및 설계 :** 2024.11.06 ~ 2024.11.17 +- **개발 :** 2024.11.18 ~ 2024.12.09 + + +
+ + +## ✨ 주요 기능 + + + + + + + + + + + + + + + + + + + + + + + + + +
+ BUMBLEBEE_ROOMIT (1) + +

+ ✅ 위치 기반 시스템

+ 사용자의 현재 위치를 기반으로 근처에 있는 스터디룸을 지도에 표시하여, 위치를 시각적으로 확인할 수 있습니다.

+ 사용자가 지도를 이동시키면, 해당 위치를 기준으로 근처 스터디룸을 리스트로 확인할 수 있습니다. +

+
+ BUMBLEBEE_ROOMIT (1) + +

+ ✅ 맞춤형 추천 시스템

+ 사용자의 이용 내역을 기반으로 새로운 스터디룸을 추천받을 수 있습니다.
+

+
+ BUMBLEBEE_ROOMIT (1) + +

+ ✅ 검색 필터링

+ 원하는 장소 / 날짜 / 시간 / 인원수를 선택하여 예약 가능한 스터디룸을 찾을 수 있습니다.

+ 스터디룸 상세 페이지에서도 예약 가능한 날짜와 시간, 인원수를 선택 및 수정할 수 있습니다. +

+
+ BUMBLEBEE_ROOMIT (1) + +

+ ✅ 1:1 채팅

+ 사용자는 실시간으로 호스트와 소통할 수 있으며,
예약 관련 문의나 이용 시 요청 사항을 즉시 답변받을 수 있습니다. +

+
+ + + +
+ +## ✨ 기술 스택 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
언어 +   +
라이브러리 +   +
빌드 +   +
라우터 + +
상태관리 +   +   +
API +   +
실시간 통신 +   +   +   +   +
스타일링 +   +
포매터 +   +
린터 + +
패키지 매니저 +   +
배포 +   +   +
협업 도구 +   +   +   +   +   +
+
+ +## ✨ 아키텍처 +![BUMBLEBEE_ROOMIT (1)](https://github.com/user-attachments/assets/bfbc0e85-5a70-42e0-abc5-e5861048ea00) + +
+ +## ✨ 프로젝트 구조 ``` -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 ``` + +
+ +## ✨ 개발 문서 + +
ERD + +![BUMBLEBEE_ROOMIT (1)](https://cdn.discordapp.com/attachments/1305460123199733782/1319622097110040637/PNG.png?ex=6766a159&is=67654fd9&hm=b7f6f4ea5989f57f5b77fac96e03c9eb9b2c469635707ac33bd30a5bf696c0f2&) +
+ +
API 명세서 + + +- [API 명세서](https://woolly-gibbon-9ce.notion.site/API-169829f77c368146856bca2c7056fb49?pvs=4) +
+ + +
요구사항 명세서 + + +- [요구사항 명세서](https://docs.google.com/spreadsheets/d/1okDecrOy3IyNDzQJUQo8r5FMesHM5_8YqJADU3KgN8g/edit?gid=0#gid=0) +
+ + +
컨벤션 + + +- [팀 규칙](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) +
+ +
+ +## ✨ 팀 소개 + +| 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) | +| 메인 페이지 (지도)
스터디룸 검색 및 조회 페이지
예약 및 결제 페이지
1:1 실시간 채팅 | 사용자 / 사업자 마이페이지
리뷰 작성 및 관리 페이지
알림 페이지
실시간 알림 | 사용자 / 사업자 회원가입
사용자 (소셜) / 사업자 로그인
사업장 등록 및 수정 페이지
사업장 상세 페이지 | + + +| 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) | +| 사업자 관리
스터디룸 작성 및 관리 페이지
(검색 필터링)
Docker 컨테이너화
테스트 툴 연결 (K6, Grafana)
SSL 인증 | SpringSecurity / OAuth2
Refresh Token
Rotation 레디스 저장
분산락을 통한 동시성 제어
결제 시스템 | 사용자 마이페이지
리뷰 작성 및 관리 페이지
실시간 알림 (SSE)
CI/CD
머신 러닝 추천 시스템
(Hybrid filtering) | 사업장 등록 및 상세 페이지
(카카오 지도 api)
레디스 pub/sub, 임시 저장소
활용한 실시간 1대 1 채팅
(WebSocket, STOMP) | diff --git a/index.html b/index.html index ee29838e..55aeeb1d 100644 --- a/index.html +++ b/index.html @@ -18,13 +18,14 @@ href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css" /> ROOM:IT - - -
+ + + +