쇼핑몰 상품 리스트 출력_part1

프로젝트를 진행하면서 내가 맡은 페이지를 제대로 정리한 적이 없는 것 같아 여기에 정리해보려고 한다.

우리 팀은 프로젝트를 진행하기 전에 가장 처음 정했던 것이 기술을 맡아서 업무분담을 할지 페이지로 나눠서 분담할지 결정했다. 우리 조는 후자를 선택했고 내가 맡은 페이지는 상품 리스트가 출력되는 부분이었다. 

 

화면이 크기 때문에 브라우저 창을 축소해서 캡처했다.

내가 구현할 때 신경 썼던 요소 중 가장 큰 점은 각 상품에 맞는 해당 컬러가 배열로 나오게 되는 것이었다.

이클립스 + JSP를 사용했을 때는 객체를 들고 오고 다시 그것 중에서 해당 상품에 맞는 id값으로 color 배열을 재 조회할 수 있었겠지만 react는 비동기 특성상 그렇게 되지 않았다. 

그럼 나는 어떻게 구현했을까?

 

처음 DB에서 들고 올 때 완벽하게 들고 오는 방법을 선택했다.

 

DB에서 들고 온 상품 리스트를 콘솔 창에 찍었을 때 모습이다.

총 조회된 상품의 개수는 5개이고, 각 상품마다 내가 필요로 하는 데이터가 담겨있는 것을 볼 수 있다.

DB에서 조회할 때 해당 상품의 옵션(색상, 사이즈)의 선택 값이 여러 개였기 때문에 group by로 묶어서 들고 오면서 컬러와 사이즈는 wm_concat으로 묶어서 사용했고, 그것을 인텔리제이에서 split을 한 뒤 중복 값을 제거하기 위해서 hashset에 다시 집어넣는 방법을 택했다.

즉, product_color는 WM_CONCAT의 결과물인 하나의 String이 담겨있는 모습이고, colors는 String 배열로 만약 상품의 색상이 WHITE_XL, BLACK_XL, WHITE_XS일 경우 WHITE, BLACK, WHITE가 적용되게 된다. 

마지막으로 colorSet에서야 hashset이 적용되어 중복 값이 제거되고 WHITE, BLACK을 추출할 수 있게 되었다. 

이것을 react에서 axios로 받아내고, map을 통해 반복 출력을 할 수 있게 됐다. 

 

map을 통해서 상품 리스트를 출력했고, 왼쪽 상단에는 원하는 상품을 빠르게 찾을 수 있도록 옵션 값을 선택할 수 있도록 제작했다. 

 

style, color, size, sort를 직접 정할 수 있게 해 뒀고 선택사항을 모두 없애고 싶을 때는 reset버튼을 누르게 되면 초기화하는 방법을 선택했다. 

오른쪽 상단에는 페이지를 이동할 수 있도록 제작했으며 여기서는 1, 2, 3, 4 페이지 네이션을 사용하지 않고 단순히 next페이지와 prev페이지 버튼을 만들어서 제작했다. 

 

오늘은 대략적으로 내가 프로젝트에서 무엇을 맡았는지 나열하기 위해서 글을 쓰고 있고 그 안에 세세한 부분들은 다음 포스팅에서 설명할 예정이다. 

 

다음으로 볼 페이지는 다양한 페이지로 넘어갈 수 있는 페이지를 제작했다. 

페이지가 길어서 축소를 했음에도 불구하고 잘려나가는 부분이 많다.

해당 사진의 설명은 각 사진 하단에 WOMAN NEW ARRIVALS 등 적어놨고 해당 사진을 누르게 되면 여성의 아이템 중 최신순으로 정렬되고, 액세서리, 남성, 등에 따라 정렬된 상품이 나오도록 제작했다. 

아래 잘려있지만 왼쪽에서 세 번째 사진을 누르게 되면 상품 모두 보기로 남성, 여성, 아동의 모든 상품이 출력되도록 했다.

 

 페이지의 왼쪽 상단에 있는 검색 버튼을 누르게 되면 2번째 사진처럼 검색할 수 있는 창이 나오고 검색어를 입력한 뒤 엔터를 치게 되면 상품의 제목, 내용, 색상, 성별, 카테고리를 비교해서 해당 상품 리스트를 출력하도록 했고, 햄버거 모양의 버튼을 누르게 되면 좌측에서 사이드 메뉴바가 나오면서 그곳에도 검색창을 두어 사용자가 검색을 하고 싶을 때 언제든지 할 수 있도록 설정했다.

 또한 사이드바에 있는 4가지 버튼(검색을 포함하면 총 5개)을 모두 맡아서 구현할 수 있는 기회가 생겨 메인 페이지에서 넘어가는 부분은 모두 제작했다. 

 

 

 다음 내가 제작한 페이지는 MYCOS페이지다. 앞선 상품 리스트를 출력하는 페이지에서 백 단에서 활용할 수 있는 쿼리문은 사실상 select에 한정되어있었다. 개발자로 프로젝트를 진행하는데 적어도 CRUD을 한 번씩 다 경험해보는 것이 중요하다고 생각했기 때문에 MYCOS페이지를 맡아서 진행했다.

 

메인 페이지의 오른쪽 상단에 있는 MY COS버튼을 제작했고 그것을 누르게 되면 아래 사진처럼 로그인되어 있는 아이디의 비밀번호를 입력해야 다음 화면을 보여주도록 구현했다. 

비밀번호를 제대로 맞춰서 들어오게 되면 해당 회원의 이메일 주소, 이름 등 정보를 볼 수 있고 휴대폰 번호와 비밀번호는 변경할 수 있다.

 

마이페이지를 맡아서 제작하기를 잘했다고 생각했던 점이 하나를 누르면 또다시 나오는 버튼들 덕분에 백 단을 제대로 활용할 수 있었다는 것이다.

 

• 회원 비밀번호, 휴대폰 번호를 변경할 수 있는 update.
• 회원의 환불 계좌, 소득공제용 정보를 신규 등록할 수 있는 insert
• 등록한 환불 계좌, 소득공제용 정보를 수정할 수 있는 update
• 회원이 원하면 회원 탈퇴 버튼을 통한 delete.

만약 마이페이지를 다루지 않았더라면 기업 면접을 갔을 때 프로젝트에서 뭘 해봤냐는 질문에 제대로 답하기 어려웠을지도 모르겠다는 생각이 문득 들었다.

 

아래는 내가 제작한 화면들이다.

이 슬라이드에 포함된 것은 위에서 보여줬던 회원 정보에 한정되어 있다.

0123

 

다시 밑에는 주문 내역 관리 및 배송지 목록 설정하는 것을 보여주고 있다.

01234567

 

마이 페이지에서 나의 주문 내역을 확인할 수 있는 부분에서는 해당 페이지에서 보고 싶은 주문 내역의 개수를 설정할 수 있도록 했고, 그 개수에 맞춰서 해당 상품이 출력되도록 했다.

 

 

 

거의 3주 동안 열심히 코딩했던 것을 이렇게 보니 페이지가 생각보다 적었다는 기분이 든다. 

이제 슬슬 이력서를 넣고 있는데 좋은 소식으로 돌아올 수 있으면 좋겠다.