Skip to content
/ SCBJ-FE Public

무료 예약 취소 불가한 숙소의 양도/거래 플랫폼 "숙취방지"

Notifications You must be signed in to change notification settings

SCBJ-7/SCBJ-FE

Repository files navigation

transparent

숙취방지


📝 프로젝트 소개

무료 예약 취소 불가한 숙소의 양도/거래 플랫폼 "퍼센트 호텔"

가격 걱정 없이 합리적인 가격으로 득텔 하세요!

사기매물과 과도한 리셀 프리미엄으로 인해 신뢰도가 낮았던 숙소 양도거래를 혁신합니다. 국내 최대 숙박 플랫폼 야놀자에서 인증이 된 상품만을 취급합니다. 또한 과도한 프리미엄 매기기나 흥정이 불가능하도록 구매가보다 가격을 높이지 못하도록 설정하였습니다. 퍼센트호텔은 프리미엄 리셀 시장을 타겟으로 하지 않습니다. 판매자는 이용하지 못할 숙박상품을 빠르게 처리할 수 있고 구매자는 야놀자에서 검증된 상품을 저렴하게 구매할 수 있는 플랫폼입니다.

배포 링크

배포 사이트 배포 레포

관련 링크

wiki API figma

🎯 개발 기간

2023.1.2 - 1.27

🧑🏻‍💻 팀 소개 및 역할

팀원 | 박나영 팀원 | 윤석민 팀원 | 이영욱 팀장 | 정범환 팀원 | 채민석
@im-na0 @dbstjrals @wowba @Bumang-Cyber @chaeminseok
  • 결제 페이지
  • 카카오 페이 API 결제 진행
  • 상품 상세 페이지
  • 야놀자 연동 페이지
  • Errorboundary, router 계층 설계
  • 마이페이지
  • 계좌 등록 페이지
  • 글로벌 스타일 설정
  • 초기 프로젝트 설정
  • 로그인페이지
  • 회원가입페이지
  • 메인페이지
  • 판매글 작성 페이지
  • 알림페이지 보조
  • 헤더, 바텀 네비게이션 공통 컴포넌트
  • 전역상태관리 세팅
  • 인터랙션
  • 검색페이지
  • 검색필터페이지
  • 구매내역페이지
  • 구매상세페이지
  • 판매상세페이지

📃 테스트 아이디 / 비밀번호

테스트 아이디: [email protected] 비밀번호: wjdqjaghks0729!

🛠️ 기술 스택

언어 & 개발환경

React Vite TypeScript

비동기통신 및 캐싱

Axios React query

전역상태 관리

zustand

CSS 및 인터랙션 라이브러리

Styled Components Framer

버전관리 및 CI/CD

Git GitHub

알림 및 모바일 대응

FCM PWA

SEO 최적화

ReactHelmet ReactSnap

협업

Discord Notion

✔️ 야놀자 RFP 구현 사항

  • 회원은 회원가입을 할 수 있습니다.

  • 기본 정보는 ID 역할로 이메일 주소를 사용하고, 그 외에 비밀번호와 이름입니다.

  • 데이터베이스에는 암호화된 비밀번호가 들어가야합니다.

  • 이메일과 비밀번호로 로그인할 수 있습니다.

  • 회원 정보를 저장해둔 데이터베이스를 검색하여 해당 사용자가 유효한 사용자인지 판단합니다.

  • 로그인을 하지 않아도 상품을 확인할 수 있습니다.

  • 회원은 판매자와 구매자 모두 가능합니다.

  • 지역/날짜별 양도 상품을 확인할 수 있습니다.

  • 원래 구매금액과 양도 상품의 금액을 모두 확인할 수 있습니다.

  • 구매한 상품의 가격 정보를 확인할 수 있습니다.

  • 예약 상품을 상세하게 확인하고 이를 기반으로 체크인을 안전하게 완료할 수 있어야 합니다.

  • 내가 구매했으나 양도할 상품을 확인하고 선택할 수 있어야 합니다.

  • 양도 완료 이후 판매금액, 수수료금액 등 관련 정산 정보를 확인할 수 있어야 합니다.

  • 양도 상품의 희망 거래가격을 설정할 수 있어야 합니다.

  • 안전한 C2C 거래 결제 시스템을 제공해야 합니다.

🎨 페이지 별 디자인 및 기능

메인페이지

2024-01-298 47 41-ezgif com-video-to-gif-converter

지역별 특가 상품과 주말 호캉스 특가상품을 볼 수 있습니다. 자체적으로 만든 캐로셀의 props에 연동하여 wrapper에 있는 텍스트 애니메이션이 재생되며 2초마다 자동으로 섹션 전환을 진행합니다.

판매 상품 선택 페이지

판매글 작성

판매할 상품을 선택할 수 있습니다. 야놀자 인증이 된 상품만을 취급하는 정책이 있기 때문에, 비로그인 시나 야놀자 인증이 안 된 상태에서는 서비스를 이용할 수 없게 예외처리를 하였습니다.

판매 상품 가격설정 페이지 & 성공페이지

2024-01-299 20 59-ezgif com-video-to-gif-converter 판매할 상품의 가격을 설정하고 2차 할인 가격, 정산 계좌까지 설정할 수 있습니다. 입력해야되는 인풋과 정보량이 많아, 단계별로 불필요한 정보는 shrink되는 인터랙션을 통해 자연스러운 입력과정을 제공합니다.

판매 게시물 작성을 정상적으로 마치면 성공화면으로 전환합니다. 판매글 작성페이지에서 성공페이지로 전환할때 처음 보는 계좌번호를 입력한 경우 약관동의를 받고 기본 계좌로 등록할 수 있는 플로우가 있습니다. 이때 useNavigate의 state전달 기능을 통하여 민감한 계좌번호를 안전하게 전달받았습니다.

알림페이지

알림아이콘에 불이 들어오면 새로운 알림이 왔다는 신호입니다. 들어가서 정산 알림을 받을 수 있습니다 판매가 이루어졌을 때 푸시알림이 옵니다. 매일 12:00AM마다 당일 판매한 상품의 정산이 이루어지며 알림이 옵니다. pwa를 통해 알림을 받을 수 있습니다.

상세페이지

🗂️ 파일 구조

📂 src
┣ 📂 api
┣ 📂 assets                   # 폰트, 이미지, 아이콘
┣ 📂 constant                 # 상수
┣ 📂 mock                     # msw 더미 데이터
┣ 📂 components               # 공용 컴포넌트
┃  ┣ 📂 Modal
┃  ┣ 📂 SideBar
┃  ┣ ...
┣ 📂 constant
┣ 📂 contexts                 # 소켓 컨택스트
┃  ┣ ChatSocketContext.tsx
┃  ┣ ...
┣ 📂 hooks                    # 커스텀훅
┣ 📂 pages                    # 페이지 컴포넌트
┃  ┣ 📂 homePage
┃  ┣ 📂 alarmPage
┃  ┣ 📂 payment
┃  ┃  ┣ 📂 paymentButton      # 페이지 내 컴포넌트 폴더
┃  ┃  ┣ Payment.style.ts
┃  ┃  ┣ Payment.tsx
┃  ┣ ...
┣ 📂 routes
┣ 📂 utils
┣ 📂 stores                   # 전역상태
┣ 📂 styles                   # 스타일테마
┣ 📂 types                    # 타입스크립트 공용 인터페이스
┣ 📂 test                     # 테스트 코드
┣ App.tsx
┣ index.tsx

📍 컨벤션

커밋 컨벤션
feat 새로운 기능 추가
fix 버그 수정
style 코드 스타일 수정 (세미 콜론, 인덴트 등의 스타일적인 부분만)
design css 등 디자인 추가 및 수정
refactor 코드 리팩토링
comment 주석 추가/수정
docs 내부 문서 추가/수정
test 테스트 추가/수정
chore 빌드 관련 코드 수정
remove 파일 삭제

💭 느낀점 및 회고

  • 박나영

    • 너무 좋은 경험이였습니당!~
  • 정범환

    • PM/UX/BE 직군 모두와 협업하기 적극적인 의사소통과 질문하는 문화를 만들었습니다. 각자 자신의 업무만 하는 것이 아니라 다른 팀원의 업무도 관심을 갖고 협력하는 팀플레이를 만드려고 하였습니다. 불가피한 팀원 이탈이 많은 프로젝트여서 다들 넓은 범위를 커버하느라 수고가 많았지만 잘 버텨주셔서 감사했습니다!
  • 채민석

    • 기획 디자인 프론트엔드 백엔드 끼리 함께 협업하는 프로젝트를 진행한게 너무 좋은 경험이였습니다. 매일 스크럼을 진행하면서 서로 진행상황, 문제점, 개선점을 공유하고 문제점에 대해 같이 해결해 나아갔습니다. 팀원분들 모두 너무 고맙고 고생많으셨습니다 !

About

무료 예약 취소 불가한 숙소의 양도/거래 플랫폼 "숙취방지"

Resources

Stars

Watchers

Forks

Packages

No packages published