Skip to content

Latest commit

 

History

History
290 lines (215 loc) · 12.9 KB

README.md

File metadata and controls

290 lines (215 loc) · 12.9 KB
Raw

TR1LL1ON 💸 프론트엔드

site

현재 TR1LL1ON 서버의 종료로 배포 사이트 확인이 불가합니다.
추후 mock 데이터 생성을 통해 페이지 확인이 가능하도록 보완할 계획입니다.


📝 프로젝트 소개

야놀자와 에어비앤비를 벤치마킹한 숙박 웹 프로젝트

TEST용 ID: [email protected]
TEST용 PASSWORD: 12345678


노션은 이곳을 클릭해주세요.
피그마는 이곳을 클릭해주세요
백엔드 레포지토리는 이곳을 클릭해주세요.

🛠️ 기술 스택

✅ FrontEnd

Language

Development

React ReactQuery Recoil StyledComponents Axios

CI/CD

Vercel

Design

Figma


✅ BackEnd

Framework

Spring springboot springsecurity

DB

mysql

Infra

Amazon EC2

CI/CD

GitHub Actions


📚 주요 기능

로그인/회원가입 숙소/객실
예약/장바구니 결제
예약내역/리뷰작성 주변숙소 검색
chatting/painting
카테고리
category


🖌️ 프로젝트 아키텍처

아키텍쳐

📖 Git convention

✅ Work Flow

  1. 기능명세를 기반으로 Issue 생성
  2. 생성한 Issue 번호로 로컬에서 브랜치 생성(feature/#이슈번호)
  3. dev의 최신변경사항을 pull 받아서 동기화
  4. 구현완료후 dev로 push후 Pull Request 생성
  5. 14:00에 팀원들과 함께 conflict 해결 후 dev로 merge
  6. 브랜치 삭제후 1번으로

✅ Commit log

Feat : 새로운 기능 추가
Fix : 버그 수정
Style : 코드 스타일 수정 (세미 콜론, 인덴트 등의 스타일적인 부분만)
Refactor : 코드 리팩토링 (더 효율적인 코드로 변경 등)
Design : CSS 등 디자인 추가/수정
Comment : 주석 추가/수정
Docs : 내부 문서 추가/수정
Test : 테스트 추가/수정
Chore : 빌드 관련 코드 수정, 개발 환경 관련 설정
Move : 파일 및 폴더명 수정
Remove : 파일 삭제

✅ Branch Naming

feature/#이슈번호

✅ Branch strategy

main

  • 소비자가 사용하는 제품이 존재하는 (배포될 코드가 있는) 브랜치
    • PR받는 브랜치: dev
    • Pull Request merge 완료후 dev push 받기

dev(develop)

  • 개발 단계의 코드가 있는 (개발의 중심) 브랜치
  • 개발 자체는 feature 브랜치에서 진행
    • PR받는 브랜치: feature/#이슈번호
    • 14:00에 다같이 Pull Request merge

feature/#이슈번호

  • 특정한 기능 (단위 기능) 을 구현하는 브랜치
  • 기능 구현이 완료되면, dev로 pr
    • PR나가는 브랜치: dev
    • 구현완료시 Push후 Pull Request 생성

📂 폴더 구조

📦src
 ┣ 📂api
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂layout
 ┃ ┣ 📂template
 ┃ ┃ ┣ 📂account
 ┃ ┃ ┣ 📂cart
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┣ 📂notFound
 ┃ ┃ ┣ 📂payment
 ┃ ┃ ┗ 📂products
 ┃ ┃ ┃ ┣ 📂GuestModal
 ┣ 📂hooks
 ┣ 📂interfaces
 ┣ 📂pages
 ┃ ┣ 📂cart
 ┃ ┣ 📂main
 ┃ ┣ 📂mypage
 ┃ ┣ 📂payment
 ┃ ┗ 📂products
 ┣ 📂router
 ┣ 📂states
 ┣ 📂style
 ┃ ┣ 📂account
 ┃ ┣ 📂cart
 ┃ ┣ 📂common
 ┃ ┣ 📂header
 ┃ ┣ 📂main
 ┃ ┣ 📂mypage
 ┃ ┣ 📂payment
 ┃ ┣ 📂products
 ┣ 📂util
 ┣ 📜App.tsx
 ┣ 📜constant.ts
 ┣ 📜constants.ts
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┗ 📜vite-env.d.ts

담당 페이지 : 숙소 상세 페이지

추가 리팩토링 작업

  • 숙소/객실 별 리뷰 정렬 기능 추가 (최신순 /오래된순/평점 높은순/ 평점 낮은순)
  • 숙소/객실 별 리뷰 페이지네이션 추가
  • 로딩 스피너 적용

아쉬운 점

  • msw 사용 api 완성 전까지는 퍼블리싱 작업만 계획되어있었는데, 생각보다 api 완성이 늦어져 갑작스레 msw 도입을 결정하게 되었다. 처음부터 msw를 도입하기로 계획했다면 작업 시간의 공백을 더욱 효율적으로 활용할 수 있었을 것 같다. 또한 초반 api 명세서를 보며 msw 사용하여 작업하였는데, 백엔드 작업의 변동사항들이 공유되지 않아 변수명, 인터페이스의 수정사항들이 많이 생기게 되어 msw의 이점을 많이 활용하지 못한 점이 아쉽다.

  • react query 작업 후반부에 use Effect를 사용하여 가져오던 데이터를 모두 react query를 사용한 코드로 바꾸었다. 급하게 변경된 탓에 리액트 쿼리의 다양한 기능들을 충분히 숙지하고 사용하지 못한 것 같아 아쉽다. Suspense, error boundary에 대해 더 공부해 본 뒤 다음프로젝트에 적용할 수 있으면 좋을 것 같다. 또한 컴포넌트 내에서 리액트쿼리를 사용하였는데, 커스텀훅으로 분리했다면 재사용성 측면에서 더욱 좋았을 것 같다는 아쉬움이 남는다.

  • 기능별 커밋 커밋을 더 자주, 작은 기능 단위로 할 수 있도록 신경쓰는 것이 좋겠다.

느낀점

그동안은 기능 구현에만 치우쳐 코드를 작성했는데, useMemo, useCallback와 같은 성능 최적화 훅들을 적절히 사용하고, 코드 가독성, 유지보수, 재사용 측면에 대해서도 깊이 고민해보며 클린코드를 작성할 수 있도록 하는 것이 좋겠다.



## 🧑🏻‍💻 팀 소개 및 역할

✨ 팀 소개

장호진 (FE)
팀장		 심정아 (FE)
팀원		 지홍규 (FE)
팀원		 윤지영 (FE)
팀원		 이재준 (FE)
팀원
leHiHo joanShim JiHongkyu developer-jyyun Gaoridang
leHiHo joanShim JiHongkyu developer-jyyun Gaoridang
  • 초기설정
  • 배포
  • 모킹서버
  • 리뷰 CRUD
  • 객실 상세
  • 예약내역
  • 메인화면
  • 검색(전체,카테고리,지역별)
  • 캘린더(체크인/체크아웃)
  • 지도(숙소위치)
  • 로그인
  • 회원가입
  • 장바구니
  • 숙소상세
  • 리뷰조회
  • 게스트모달
  • 편의시설
  • 결제
  • 카테고리

📆 기간

2023.11.20 ~ 2023.12.01