스프링 팀 프로젝트 후기

첫 팀프로젝트가 끝나고 몇일 뒤에 바로 두번째 프로젝트가 시작되었다. 이제는 스프링을 배워서 sts에서 작업하였다.

첫 프로젝트때는 어떻게 해야할지 우왕좌왕 하고 갈피를 잡기가 힘들었는데, 한번이 어렵지 두번째부터는 자신감을 갖고 시작할 수 있었다.

 

주제선정

 이번 주제는 '스터디 카페' 페이지 제작이었다. 시중의 스터디 카페 홈페이지는 단순 홍보용 or 예약기능이 있는 사이트들이다. 다만 스터디 카페에 가면 키오스크를 통해 회원가입, 자리예약, 좌석 배정 등을 할 수 있고 심지어 음식주문도 할 수 있는 스터디카페도 있다. 그래서 우리는 이러한 모든 기능들을 웹 사이트에서 구현해보고자 이 주제를 선정하였다.

내가 맡은 기능

 쉬운기능이 걸리길 바라는 사람들도 있지만, 나는 어렵더라도 남들이 기피하는 것을 해내는걸 좋아한다. 그래서 모두가 하기 싫어하는 음식 주문 기능을 맡게되었다.

개발환경

OS : WINDOW

IDE : STS 3.9.13

Middleware : Apache Tomcat

Language : Java, Javascript, HTML

DB : Oracle 11gExpress edition

FrameWork : Spring 3.9.13

VCS : Git, Github

 

이번 프로젝트부터는 스프링 프레임워크를 사용하여 개발하였다. 

ERD 설계 및 구상

이런식으로 구상하였다. 먹거리 상품들의 정보를 담을 테이블, 먹거리를 클릭했을 때 상품을 담아 줄 장바구니, 결제를 하여 주문하면 생성되는 주문, 주문상세 테이블로 설계했다.

흡사 쇼핑몰과 비슷한 구조이다. 실제로 장바구니 - 주문 관계가 어려워서 쇼핑몰 제작을 많이 참고하였다.

1. 먹거리 주문 사이트에 들어가면 상품을 카테고리 별로 보여줌

2. 상품을 클릭 시 화면 오른쪽 사이드의 장바구니에 바로 품목이 들어감

3. 장바구니에서 수량 변경 가능

4. 결제 시 실제로 결제가능

 

이정도로 구상하였고, 실제로 결제가 되게 하고싶어서 api를 찾아보았다

사용한 기술

- spring 프레임워크를 사용하여 mvc 패턴으로 개발하였다.

- 주로 ajax를 사용하여 화면이 새로고침없이 비동기식으로 작동되게 하였다.

- tiles를 사용하여 공통으로 사용되는 부분의 유지보수를 쉽게 할 수 있게 하였다.

- interceptor에서 로그인 세션을 검사하여 세션이 비어있다면 로그인 페이지로 유도하였다.

상단

하단

- 음식주문 메인 화면에서는 전체 상품 목록이 출력된다. JSTL을 사용하여 반복 출력하였다.

- 화면 오른쪽의 주문목록(장바구니) 는 tiles aside에 작성했다. style에서 position : sticky를 설정해 화면이 내려가도 포지션을 유지하도록 해놓았다.

- 상품 종류 버튼을 누르면 화면 전환 없이 필터셀렉션을 이용해서 해당 상품만 보여준다

 

참고 :  https://www.w3schools.com/howto/howto_js_filter_elements.asp

- 이런식으로 버튼에 active 속성이 있는 종류만 보여지게 했다.

- 모든 상품들을 div로 한번 감싸고 class에 filterDiv 상품 타입(meals, ramens, candrinks, cafedrinks)를 부여하였다. 그래서 위의 버튼을 눌렀을 때 javascript함수로 해당 클래스의 상품만 보여지도록 하였다.

- 상품을 장바구니에 추가하기 위해 모든 상품들은 addcart클래스가 붙은 div로 감쌌다. data-food-no속성에 상품 번호를 지정하였고, 상품을 클릭 시 ajax호출이 되게끔 하였다.

- 지금보니 컨트롤러에 중복검사가 없다. 그런데도 중복된 상품을 클릭하면 ajax호출이 실패하여 alert를 띄웠는데, 그 이유는 

sql에서 장바구니 테이블에 회원번호, 상품번호를 묶어서 unique조건을 걸었다. 회원 - 상품번호의 열이 중복될수 없다. 그래서 addCart메소드를 실행시켰을 때 sql에러가 나고 그 결과 ajax에서 호출 실패하여 alert가 떴다. 보여지는건 문제 없어보이지만 에러가 떠서 발생하는 거니 좋은 그림은 아닌것같다. DAO에서 중복검사를 하나 만들었어야 했다.

- 컨트롤러에서 상품번호를 파라미터로 받고, 로그인 세션에서 회원번호를 얻어서 바로 DB에 insert로 장바구니테이블에 상품을 추가한다. 추가 한 이후에는 회원번호의 장바구니 리스트를 받아서 ResponseBody로 넘긴다.

- map에 List를 담아서 넘겼는데 지금보니 그냥 리턴을 List로 해도 됐을 것 같다.

 

- ajax에서 호출 성공하여 cartList로 장바구니 리스트를 받아온다. 그리고 장바구니 리스트를 displayCart() 로 주문 목록 div에 출력시킨다. for문으로 상품명, 삭제버튼, 수량조정버튼, 수량, 가격 을 반복출력 하도록 했다.

- 또한 for문으로 장바구니 안의 상품가격 * 수량 을 총 더한 값으로 합계금액을 계산해 출력했다.

- 수량변경, 상품 삭제도 마찬가지로 누르면 즉시 ajax 호출 - 컨트롤러 - DB update or delete - 카트 목록 select - 출력 의 순서로 된다.

- 실제로 결제를 구현하기 위해 포트원(구 아임포트)api를 넣었다. 포트원은 실제로 결제가 가능한 시스템을 제공한다. 카카오페이, 토스페이, 네이버페이 등등의 서비스를 따로 넣는것도 가능하며, KG이니시스같은 통합 결제모듈을 사용할 수도 있다. 

- 결제하기 버튼을 누르면 포트원 결제 함수가 실행된다. pg 에는 pg사를, merchant_uid에는 결제번호, name에는 상품명, amount에는 가격 나머지는 구매자 정보를 입력하면 된다. 주의해야할게 결제번호는 고유해야한다. 이미 사용한 결제번호를 입력하면 결제창이 뜨지 않는다. 그래서 나는 SC + 년/월/일/시/분/초 + 고객번호 조합으로 결제할 때마다 결제번호가 자동 생성되게 했다. amount에는 위에서 계산한 total을 넣었다.

- 카카오페이 pg는 테스트 모드가 따로 있어서 돈이 빠져나가지 않는데, KG이니시스는 테스트 결제여도 실제로 돈이 빠져나가고 00시에 환불 받는 방식이었다.

- 결제가 완료되면 주문목록 테이블에 결제했던 정보들로 새로운 row가 추가되고, 주문번호를 고객에게 보여준다. 그리고 상세 내역을 누르면 주문 상세내역을 볼 수 있다.

 

잘한 점

- tiles를 사용하여 공통되는 부분인 top, bottom 모듈의 유지보수를 쉽게 할 수 있게 하였다. 그리고 중복되는 코드 작성도 피할 수 있었다.

- 상품 종류도 script에서 display속성 변경을 통해 새로고침 없이, 장바구니에 상품 추가, 수량 변경, 삭제 등등 도 ajax를 이용하여 화면이 새로고침없이 끊김없게 했다. 저번 프로젝트 때는 화면이 끊기는 느낌이 굉장히 거슬렸는데 이번에는 아주 만족스러웠다.

- 포트원 api를 사용하여 실제 결제까지 기능할 수 있게 하였다.

어려웠던 점

- javascript 사용이 미숙해서 ajax를 사용하는데 조금 애를 먹었다. 이클립스에서는 script문법을 정확히 짚어주지 않아서 문법 실수때문에 정상적으로 작동되지 않을때가 많았다. 그래서 주석으로 괄호 끝맺음을 잘 표시하고 콘솔창을 잘 보면서 오류를 해결해 나갔다.

- 처음에 DB설계를 할 때 주문 테이블을 어떻게 짜야하는지가 어려웠다. 장바구니에 여러 상품이 있고 이걸 주문테이블에 데이터를 생성할 때 어떻게 넣어야 하는지가 헷갈렸다. row는 하나인데 물품은 여러개라 어떻게 해야하나...

해결법은 주문 테이블에는 상품정보는 넣지 않고 pk로 주문번호를 넣고, 주문 상세 테이블에서 외래키로 주문번호를 받아와서 상품을 하나씩 추가하는 것이다. 부 - 모 관계로 하니 편했다.

아쉬운 점

- 사실 시간이 없어서 주문 상세 페이지를 못만들었다. 나중에 완성해봐야겠다.

- 위에서 말한 것 처럼 insert시에 중복방지가 sql에러를 통해서 되었다. 좋은 그림은 아니기에 수정해야겠다.

- 관리자로 접속하여 상품을 추가 / 삭제 하는 업로드 기능도 있었으면 좋았을 것 같다.