1주+4일 (2024-11-06~2024-11-17)

1일차

11/06

호텔 관리자 페이지에 들어갈 기능들을 정리해놓기.
chat gpt의 도움을 받았다.
기존에 관리자 페이지 화면 설계를 위해서 와이어 프레임이 들어간 스토리보드를 작성 했다가 다시 처음부터 해야할 일이 생겨서 다시 작성했다.
아래 표는 이미지로 넣었는데 아이패드 키노트로 작성했다.

예정

기존에 기획한 관리자 페이지에서 몇가지 기능들과 합쳐서 간추려야할 거 같다.

즉, 기능 나열한 것에서 뺄건 빼고 추가할 건 추가하는 식으로 작업.

---

2~3일차

11/07, 11/08

개발 환경 확정, 사용자 페이지/관리자 페이지, 기능 목록 나열, 기능 목록 파트 담당 정하기, 기타 등등 회의를 통해 정하였음.

 

개발 환경

• Front-end: HTML, CSS, JavaScript, React, React-Router, RESTful API : fetch
• Back-end: Java, Spring-Boot-Web, Spring-Security, MyBatis, Lombok, JWT
• DB: MySQL

사용자 페이지 (메뉴 미확정)

• 메인 페이지(Full Screen)
• Header - 공통부분
• Footer - 공통부분
• 회원가입/로그인 페이지
• 미확정
  • About(회사소개)
  • Room View(객실 목록, 상세)
  • Reservation(예약)
  • Community(공지사항, 고객 후기)

관리자 페이지

• 회원 관리 - 카카오톡 로그인 api, 일반 회원가입/로그인, 회원 등급(1~4단계)
• 객실 관리 
• 예약 관리
• 결제 관리 - 결제 api 사용
• 통계 관리 - 자동 통계 업데이트 betch 기능, 회원 통계, 매출 통계, 인기 객실 통계
• 게시글 관리 - 공지사항, 고객 후기/리뷰

기타

• 빠른 개발을 위해 사용자 페이지 ui 구현을 서두르는게 좋을 거 같다는 생각.
• 시간이 부족하니 반응형은 제외하는 것이 좋을 거 같다는 생각.
• react로 구현을 해야하다 보니 폴더 구조를 잘 생각해야할 거 같다.
• 아키텍쳐에 대해서 고민을 해봐야한다. (위에 고민과 비슷한)

---

4일차

11/09

오후 10시에 팀 회의.

 

사용자 페이지

• 메인 개발자 정하기
• 수정 사항들 회의. (예: 펜션과 관련된 문구, 이미지는 호텔로 변경)
• 투어 메뉴 제외, 스페셜 메뉴에서 바베큐, 서비스 서브 메뉴 제외
• 객실명도 호텔스럽게 변경

 

UI 페이지 url

예시)

• 홈페이지: /
• 객실 페이지: /rooms
• 객실 관리 페이지: /admin/rooms

 

각자 담당한 기능 관련 자료 찾아보고 구상하기.

---

5일차

11/10

본인: 결제 관리 시스템 담당.

결제 관리 시스템 관하여 자료 조사하고 정리.

 

사용자 페이지 - (개인담당/결제)

• 예약 확인 페이지 + 결제하기 버튼
• 결제 방식 선택 페이지(신용카드/체크카드 결제, 간편결제, 무통장입금/가상계좌입금)
• 각 결제 방식 화면 페이지
• 결제 완료 페이지
• 결제 실패 페이지

 

관리자 페이지 - (개인담당/결제)

• 결제 내역 목록 페이지
• 결제 내역 상세 페이지 (있어야하나 고민)

헬프센터 관리자콘솔. https://help.portone.io/category/admin-console/payment-service

 

결제 관련 기능 정리

• 결제 방식 설정: 신용카드/체크카드 결제, 간편결제, 무통장입금/가상계좌입금
• 결제 내역 조회: 예약과 연결된 결제 내역을 조회하고 결제 상태 확인 가능.
• -> 결제 상태, 객실명, 고객정보, 결제수단, 결제대행사, 결제금액, 구분, 상태승인 등
• 결제 내역 수정: 음.. 수정할 내용은 없을 거 같다. 무통장 입금시에만 결제 상태 수정할 거 같기는 함.

 

결제 프로세스

예약 정보 확인 > 결제 방법 선택 > 각 결제 API 호출 > 응답 처리 및 결제 완료

 

1. 예약 정보 확인

1) 결제하기 버튼 클릭 > 예약 정보 확인

2) 사용자가 선택한 숙박 날짜, 객실 타입, 가격 등

3) 그외 추가 비용(세금, 서비스 요금 등)을 명확하게 표시

 

2. 결제 방법 선택

1) 예약 정보 확인 후 결제방법 버튼 클릭 > 결제 방법 선택 페이지

2) 신용카드/체크카드, 간편결제 시스템, 은행 송금(무통장입금/가상계좌입금) 방식 중 택 1

 

3. 결제 API 호출

1) 각 결제 방식에 맞는 API를 선택하여 호출.

2) 카드 결제는 카드 정보 수집 후 결제 승인 API 호출.

3) 간편 결제는 간편 시스템 API를 통해 결제 승인.

4) 은행 송금은 가장 계좌 발급 및 송금 확인 후 승인 처리.

 

4. 응답 처리 및 결제 완료

1) 결제 승인이 되면, 고객에게 결제 완료 메시지, 이메일 및 영수증 전달.

2) 결제 실패 시 적절한 오류 메시지 출력.

 

보안 및 데이터 보호(중요)

1) 모든 결제 정보는 PCI-DSS 규정을 준숳여 안전하게 처리해야 함.

2) 카드 정보는 직접 저장하지 않고, 결제 시스템에서 제공하는 토큰화 방식 등을 활용하여 보안을 강화.

 

결제 방법 및 종류

1. 카드 결제 시스템 구조

* VAN사 - NHN한국사이버결제, 나이스정보통신 등 있음

* PG사 - KG이니시스, NHN한국사이버결제, 토스페이먼츠, 나이스페이먼츠 등 있음

 

[ 카드 결제 흐름 설명 ]
1) 고객의 <카드번호, 유효기간, CVC, 비밀번호 두 자리>를 입력 받아 PG사가 VAN사에 요청.
2) VAN사는 이 정보를 가지고 카드사에 요청. 
3) 카드사는 카드의 한도를 확인하고 해당 금액만큼 한도를 차감한 다음 승인 결과를 VAN사에 보냄.
4) VAN사는 이 응답의 내용을 PG사에 전달.
5) PG사가 판매자, 고객에게 결과를 전달.

[ 개발에 필요한 부분 ]
1) PG사의 API 사용 (PG사는 KG이니시스, NHN한국사이버결제, 토스페이먼츠, 나이스페이먼츠 등)
2) 고객의 카드번호, 유효기간, CVC, 비밀번호 두자리

 

2. 간편 결제 시스템 종류/구조

종류: 카카오페이, 네이버페이, 토스페이, 페이코(NHN), 스마일페이(이베이), SSG페이, 로켓페이, 삼성페이, 앱카드 등

 

 

3. 무통장입금/가상계좌입금 시스템 구조

[ 무통장입금/가상계좌입금 결제 흐름 설명]
1) 사용자가 '무통장 입금'을 선택
2) 은행 목록이 보이고 사용자는 은행 목록 중 택 1 
(예: 신한은행, 국민은행, 제일은행, 하나은행, 농협은행 등등)
3) 사용자가 은행을 택하면 서버(쇼핑몰)에서 해당 은행에 가상 계좌 생성 요청을 함.
(보통 결제 서비스 제공업체(KCP, LG U+, 카카오페이 등의 결제 대행사)나 은행의 가상 계좌 API를 통해 이루어진다고 함)
4) 결제 대행업체나 은행에서 요청을 받으면 가상 계좌를 생성하여 서버에 반환한다.
5) 반환 받은 가상 계좌 정보(입금 계좌, 입금할 금액, 입금 기한)를 사용자에게 보여준다.
6) 사용자가 입금을 하면 은행이 정기적으로 해당 가상 계좌로 입금된 내역을 결제 대행사 또는 서버(쇼핑몰)에 전송한다.
7) 서버(쇼핑몰)는 이 정보를 바탕으로 입금 확인을 진행하고 사용자의 결제를 승인한다.
8) 결제가 완료되면 결제 완료 메시지를 사용자에게 전달한다.
*** 미입금/입금 기한 초과인 경우
가상 계좌는 일정 시간 후에 만료되기 때문에, 입금 기한이 지나면 해당 계좌는 무효화된다.
입금 기한이 만료되면 결제 취소가 이루어지고, 사용자는 다시 결제를 시도해야한다.

[ 개발에 필요한 부분 ]
1) 결제 대행사(PG사) 또는 은행의 API
-> 보통 가상 계좌 생성은 결제 대행사(PG사) 또는 은행의 API를 통해 가능한데 대행사의 경우 KCP, LG U+, 카카오페이 등에서는 가상 계좌 생성 서비스를 제공하고 있다고 한다.

---

6일차

11/11

1. 사용자 페이지

• 컨텐츠 고정너비 1200px, container 클래스로 관리.
• reset.css와 공통으로 적용되는 style은 팀원Y님이 작업한 뒤 css파일 공유
• header와 footer에 있는 메뉴(nav, gnb 등)는 1700px로 고정너비 작업.
• 사용자페이지 UI 작업 기간은 7일. (11/11~11/17)

2. React 폴더구조 회의

• component, common, util, page 폴더에 대해서 얘기를 나눔.

3. component 정하기

• 각자 담당한 기능 관리에서 필요한 사용자 페이지 UI를 설계하고 브리핑 하면서 component로 만들 수 있는 부분을 정함.
• 객실 목록과 객실 상세에서 slide 기능을 common 폴더에 component로 생성하기로 함.
• 실시간 예약에서 캘린더의 cell을 component로 생성하기로 함.

---

7일차

11/12

아침 회의. 오늘 각자 작업할 내용 공유. 

 

1. 개인 작업

• 각자 맡은 서비스와 관련된 사용자 페이지 작업.
• 자료조사, UI작업 등등

2. React 폴더 구조

 

3. react styled-component 사용 여부

• style은 css로 작성.

---

8일차

11/13

 

1. 개인 작업

• 각자 맡은 서비스의 관련된 사용자 페이지 작업.
• 자료조사, UI 작업 등등

2. Spring Boot 폴더 설계

• 팀원 한분과 작업 후 팀원 전체 공유

3. reset.css

• css 초기화 스타일은 담당 팀원이 만든 reset.css 사용

4. Bootstrap 사용

• react boot strap 사용하기로 확정

5. 내일 Database 속성 정리.

• 담당한 기능의 사용자 페이지, 관리자 페이지에서 필요한 속성 조사해오기.
• 내일(11/14) 회의를 통해 테이블 만들기로 함.