Web Project ) 와인 쇼핑몰 - 아임포트 API 활용

0. OS버전과 사용했던  툴 버전 및 사용 api 정리

---

- MAC OS Big Sur 11.3, M1 맥북프로

- Intellij 21.1.1

- 네이버 로그인 API

- 아임포트 API

- 다음 도로명 주소 API

 

 

 

1. 프로젝트 개요

---

- 개발 기간: 2021.04.10 ~ 2021.04.26

- 개발 인원: 총 5명

- 개발 역할: 결제(아임포트API 이용), 관리자페이지(REST API)  구현, 도로명 주소 API 기능 구현

- 개발 기술: HTML5, CSS, Javascript, JSP, Servlet, AJAX, OracleDB

- 형상관리: GitHub, Slack

 

 

 

 

2. 데이터베이스 모델링

---

그림1. 데이터베이스 모델링

- 데이터베이스를 이런식으로 모델링 했지만 결제 쪽을 구현한 결과 결제내역을 굳이 테이블로 안만들어도 된다. 그 이유는 최신의 데이터를 받아올 수 있지만 데이터가 바뀔때마다 데이터베이스에서 Update 가 빈번히 일어나기 때문에 성능상 별로 좋지도 않을 것 같아서 그때마다 api를 호출해서 최신의 데이터를 받아 올 수 있도록 했다.

 

 

 

 

3. 화면 구성

---

그림1. Main 화면

 

그림2. Main 화면에서 Shop 메뉴를 눌렀을 때 보이는 화면

 

그림3. 그림 2에서 눈모양을 클릭하면 보이는 화면

 

그림4. 그림3에서 BuyNow 버튼을 클릭하면 보이는 화면

 

그림5. 찾기버튼을 누르면 다음 도로명주소 API 팝업창이 뜬 화면

 

그림6. 그림5에서 주소를 입력하면 해당하는 input에 데이터가 들어가는 화면

 

그림7. 최종 결제 가격을 보여주는 화면

 

그림8. 결제하기 버튼을 눌렀을 시 아임포트 API 결제모듈을 보여주는 화면

 

그림9. 결제하는 회원의 이름과 이메일을 띄워주며 최종 결제를 하는 화면

 

그림10. 최종결제를 하고 나서 다시 그 상품으로 가서 사용자가 구매한 개수만큼 빠져있는 화면

 

그림11. 관리자페이지에서 방금 구매한 결제정보를 보여주는 화면

- DatePicker를 이용해 기간을 선택해 해당하는 기간의 결제 내역을 보여준다.

 

 

 

그림12. 결제기간 안에서 결제완료된 건만 보여주는 화면

 

 

그림13. 결제취소버튼을 누를 시 모달창이 뜨면서 사용자가 환불사유를 적는 화면

 

그림14. 그림13에서 환불사유를 입력하고 취소버튼을 눌렀을 경우 상태에서 환불영수증 버튼이 생기고 환불 사유및 데이터가 바뀐 화면

 

그림15. 그림14에서 취소한 개수만큼 다시 재고량이 추가된 화면

 

 

 

 

4. 마무리

---

- 쇼핑몰을 우습게 봤었는데, 처음으로 프로젝트 한 것도 있고 결제 api를 연동할 때 많은 어려움을 겪었다.. 조원들과 밤을 새가며 코피도 흘리면서 프로젝트를 겨우 완성할 수 있었다. 화면구성을 결제 화면과 관리자페이지만 보여준 이유는 글쓴이가 그쪽 관련한 것들을 모두 구현했기에 그 화면만 보여주었다. 관리자페이지에서 UI를 구현할 때 정말 애를 많이 먹었다. 자바스크립트는 스크립트 태그도 순서를 신경쓴다..(그래서 더 정떨어지....ㄴ다..) 그렇지만 완성된 결과물을 보고 자바스크립트를 정말 안좋아 할 수 없을 것 같다.. 정말 매력적이고 유연한 언어인 것 같다..

 

- 관리자페이지인 경우 DatePicker를 사용해서  Unix Timestamp를 변환해주어야 한다. 왜냐하면 REST API에서 그런 방식을 제공하기 때문이다.. 이 프로젝트를 진행하면서 정말 스트레스를 많이 받았다.. 내가 나중에 취업했을 때 이런 어려움을 겪으면 압박감을 어쩌지.. 하면서 별의별 생각이 다 들었다. 하지만 프로젝트가 완성되고 난 후 스트레스 따위는 잊어버린 성취감만이 남아 있었다.!!