프로젝트명: ActiOn(액티온)

프로젝트 소개(기획의도 및 개요)

제주도에서 특별한 경험을 만들고 싶으신 분들에게 다양한 레저 예약 서비스를 제공해드립니다

https://github.com/codestates-seb/seb44_main_005

1. 기술 스택

Front

• TypeScript
• React
• React Router
• Recoil
• TailwindCSS

Back

• JAVA
• SpringBoot
• SpringSecurity
• MySQL
• Redis

Deploy

• S3
• EC2

COMMON

• Git
• Github
• Figma
• Google OAuth
• TossPayments

2. My Role

• Role : 팀장
• Position : Front-end
• Team Composition: Front-end 3명, Back-end 2명
• Stack : TypeScript, React, Recoil, TailwindCSS, Tailwind-Styled-Components
• Works :
  1. 메인 페이지: 캐러셀, 카카오 지도 API(커스텀 오버레이)
     • 모든 업체들을 서버로부터 받아와 지도에 업체 카테고리 별로 마커를 다르게 표시하고 마커 클릭시 오버레이 생성
  2. 업체 상세 페이지: 이미지 슬라이드, 예약, 리뷰
     • 예약: 예약폼 유효성 검사, 필수 사항을 만족하지 않으면 예약 불가
     • 리뷰: 권한에 따른 리뷰 등록 처리(비로그인, 로그인, 예약완료, 이용완료)
  3. 결제 페이지: 토스 페이먼트를 이용한 예약 처리와 결제
     • 예약폼과 총 결제 금액을 받아와 서버로 전송(예약 대기)
     • 결제 완료 후 결제 성공 페이지로 리다이렉트
     • 주문 Id와 예약 Id 서버로 전송(예약 완료)
  4. 업체 등록 페이지: 카카오 우편번호 서비스, 이미지 업로드, 이미지 제거
     • 카카오 우편번호 서비스를 이용해 사용자가 실제 주소를 찾고 등록할 수 있도록 함
     • 업로드한 대표 이미지와 상세 이미지들을 사용자에게 바로 보여줄 이미지와 서버로 보낼 이미지를 나누어 처리
     • 최소 업로드 이미지 개수 제한
  5. 업체 수정 페이지: 업체 등록 페이지 컴포넌트의 재사용
     • URL 파라미터를 받아와 부분적으로 다르게 렌더
     • 처음 렌더시 등록했던 정보들을 Input에 초기값으로 채움
     • 이미지 제거에서 기존의 이미지와 수정 페이지에서 업로드한 이미지를 다르게 처리
     • 최소 업로드 이미지 개수 제한

3. 개발 내용