📝 프로젝트 소개

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

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

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

배포 링크

관련 링크

🎯 개발 기간

2023.1.2 - 1.27

🧑🏻‍💻 팀 소개 및 역할

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

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

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

🛠️ 기술 스택

언어 & 개발환경

비동기통신 및 캐싱

전역상태 관리

CSS 및 인터랙션 라이브러리

버전관리 및 CI/CD

알림 및 모바일 대응

SEO 최적화

협업

✔️ 야놀자 RFP 구현 사항

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🎨 페이지 별 디자인 및 기능

메인페이지

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

판매 상품 선택 페이지

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

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

판매할 상품의 가격을 설정하고 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 직군 모두와 협업하기 적극적인 의사소통과 질문하는 문화를 만들었습니다. 각자 자신의 업무만 하는 것이 아니라 다른 팀원의 업무도 관심을 갖고 협력하는 팀플레이를 만드려고 하였습니다. 불가피한 팀원 이탈이 많은 프로젝트여서 다들 넓은 범위를 커버하느라 수고가 많았지만 잘 버텨주셔서 감사했습니다!

• 채민석

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