Project4 AntDesign Calendar를 이용한 투어 예약 기능 구현 🔹 Calendar는 Ant Design으로 구현.https://ant.design/ 1️⃣ Tour 상세 페이지 초기 렌더링 시, 해당 Tour에 대한 정보를 예약 가능한 날짜 데이터와 함께 가져옴.2️⃣ 달력에서 예약날짜를 선택할 때마다 해당 날짜에 이용가능한 인원수를 서버에서 받아옴.3️⃣ 해당날짜에 예약가능한 인원 수가 표시되도록 구현함. 2024. 12. 17. PortOne(Iamport)포트원 이용한 결제 기능 구현 (2) - React , SpringBoot 🔹 React로 구현한 Tour 주문 결제 페이지와 , Product 주문 결제 페이지 UI . 투어 및 상품 , 주문 결제 페이지 상세 🔹 React 에서 각각 5개의 컴포넌트로 나눠서 구현 🔸 TourTourBookComponent : 투어 예약 및 결제를 처리하는 메인 페이지ReservationList : 카트에 있는 투어 조회 및 표시BookingInformation : 기존 예약 정보 조회 및 변경PaymentMethodCoupons : 결제 방법 및 보유 쿠폰 선택TourPaymentDetails : 결제 금액 표시 🔸 ProductOrderComponent : 상품 주문 및 결제를 처리하는 메인 페이지CartList : 카트에 있는 상품 조회 및 표시Shipping.. 2024. 12. 17. PortOne(Iamport)포트원 이용한 결제 기능 구현 (1) - 초기 설정 🔹 PortOne 테스트 결제 연동 - 결제사 KG 이니시스 1️⃣ 포트원 관리자 콘솔 사이트에 접속하여, 회원가입 후 로그인.https://admin.portone.io/auth/signin 2️⃣ 결제연동 - 연동 정보 - 채널 추가 3️⃣ 결제연동 - 연동 정보 - 식별코드 ・ API Keys 탭에서 REST API Key와 REST API Secret 조회 가능.🔹 PortOne (Iamport)결제 시스템 연동을 위한 초기 설정▪ Backend 설정 ( Spring boot ) 1-1. builde.Gradle 설정JitPack 저장소 추가아임포트 클라이언트 라이브러리 의존성 추가1-2. application.properties 설정아임포트 API 키 및 Screat 키 추가1-3. Co.. 2024. 12. 10. JavaMailSender , 구글 SMTP 사용한 비밀번호 찾기 기능 구현 - 임시 비밀번호 이메일로 전송 🔹 이메일과 핸드폰 번호로 회원 정보를 찾아, 임시 비밀번호를 이메일로 전송 하는 로직을 구현 🔸 JavaMailSender , 구글 SMTP 사용. 1. 회원 정보 검증: ▪ 사용자가 입력한 이메일(아이디)과 핸드폰 번호가 데이터베이스에 등록된 정보와 일치할 경우, 해당 이메일로 임시 비밀번호를 전송. ▪ 일치하지 않을 경우, "check your details." 라는 경고 메시지를 띄움. 2. 임시 비밀번호 생성 및 이메일 전송: ▪ 임시 비밀번호는 랜덤으로 생성되며, 구글 SMTP와 JavaMailSender를 사용해 등록된 이메일 주소로 전송. ▪ 전송된 임시 비밀번호는 데이터베이스에 저장되어, 이후 로그인 시 사용됨. 3. UI 및 사용자 피드백: .. 2024. 12. 10. 이전 1 다음
