🚗 Backend Toy Project

[Baeg-won Clothing Gallery] 9. PROFILE 페이지 구현

📝 Outline 회원정보 수정을 위한 Profile 페이지 구현을 완료했다. 아마 지금까지 구현한 페이지들 중에서 가장 많은 로직과 코드가 들어간 페이지가 아닐까 싶다. 구현 디자인은 다음과 같다. 해당 페이지에서는 Username을 제외한 계정 정보를 수정할 수 있으며, 배송지를 추가할 수도 있다. Account와 Address 입력 데이터 모두 유효성 검사가 포함되어 있으며, 당연하게도 유효성 검사를 통과하지 못할 경우 데이터가 DB에 반영되지 않는다. 📝 Review 대부분의 로직이 클라이언트 쪽에 집중되어 있고, 주로 사용자의 편의를 위해 작성된 로직이 대부분이라 코드의 양은 많았지만 사실상 핵심적인 부분은 크게 두 가지 정도로 나눌 수 있을 것 같다. 하나는 유효성 검사, 다른 하나는 카카오 ..

[Baeg-won Clothing Gallery] 8. WISH 페이지 구현

📝 Outline Cart 페이지 구현에 이어 Wish 페이지 구현이 완료되었다. 해당 페이지는 사용자가 즐겨찾기와 같은 개념으로 상품을 저장할 수 있도록 해주는 페이지로써 장바구니 페이지와는 다르게 단순히 사용자가 찜한 상품 리스트를 출력해주는 기능을 수행한다. 페이지 디자인은 다음과 같다. 즐겨찾기 기능은 상품 상세보기 페이지 하단에 있는 아래 버튼을 클릭할 시 동작하도록 구현하였다. 해당 버튼은 토클 형식으로 동작한다. 즉, 이미 즐겨찾기가 되어있는 상태에서 해당 버튼을 클릭할 경우에는 즐겨찾기가 해제되는 식이다. 페이지 동작은 다음과 같이 이루어진다. 📝 Review 💬 Wish 우선 Wish 페이지 구현을 위한 Wish 엔티티를 새로 구현해주었다. @Entity @Getter @AllArgsCo..

[Baeg-won Clothing Gallery] 7. CART 페이지 구현

📝 Outline 마침내 Cart 페이지 구현이 완료되었다. 면접 준비로 인해 좀 늦어진 감이 있긴 하지만... (참 좋은 핑계거리야) 이번에 해당 페이지를 구현하면서 삽질한 것도 좀 있고 그 과정에서 나름 배운 것도 있어서 이를 하나씩 정리해보려고 한다. 구현 스타일은 다음과 같다. 그럼 바로 리뷰로 들어가보자. 📝 Review 💬 연관관계 매핑 이번에 Cart 페이지를 구현하면서 연관관계가 더 복잡해졌다. 우선 한 명의 고객은 하나의 장바구니만 가질 수 있기 때문에 Cart와 Customer의 관계는 1:1로 설정해주었다. 또한 하나의 장바구니에는 여러 개의 상품이 담길 수 있고, 하나의 상품은 여러 장바구니에 담길 수 있으므로, Cart와 Product의 관계는 N:M이 되어야 했다. 따라서 이는 ..

[Baeg-won Clothing Gallery] 6. DETAIL 페이지 구현

📝 Outline 이번에는 상품 상세 페이지를 구현하였다. Vue를 제대로 학습하고 사용한 것은 아니지만 확실히 익숙해지니까 작업 속도도 빨라지는 듯 하다. 구현 스타일은 다음과 같다. 페이지를 간단히 설명하자면, 기본적으로 상품의 이름과 이미지, 상품 가격, 상품 설명을 확인할 수 있다. 또한 주문을 위한 Select Box 및 Text Field가 존재하며, 아래의 버튼을 통해 해당 상품을 장바구니에 담거나 찜할 수 있도록 구현하였다. (물론 실제 기능은 아직 미구현 상태) 참고로 Select Box의 경우 상품 사이즈 재고에 따라 선택할 수 있는 품목을 제한하도록 하였으며, 그 결과는 아래와 같다. 즉, 현재 DB에 해당 상품의 L 사이즈 재고는 '0'으로 저장되어 있음을 의미한다. 📝 Review..