feat: 프론트에 api 추가하기 (#159)

* refactor: ProductDetailResponse 에 stock 정보 추가 * feat: 상품 상세 페이지에 장바구니 기능 추가 * feat: 상품 상세 페이지에 검색 기능 추가 * refactor: 주문 목록 페이지에 css 적용 * favicon 추가 * title 변경 * css: 메인 컬러 변경 * refactor: 차트 색상 변경
wootecam-gugucon · Aug 30, 2023 · 8f3b9d1 · 8f3b9d1
1 parent 4cd79e2
commit 8f3b9d1
Show file tree

Hide file tree

Showing 20 changed files with 37 additions and 21 deletions.
diff --git a/src/main/java/com/gugucon/shopping/item/dto/response/ProductDetailResponse.java b/src/main/java/com/gugucon/shopping/item/dto/response/ProductDetailResponse.java
@@ -14,6 +14,7 @@ public class ProductDetailResponse {
     private Long id;
     private String name;
     private String imageFileName;
+    private int stock;
     private String description;
     private long price;
 
@@ -22,6 +23,7 @@ public static ProductDetailResponse from(Product product) {
             product.getId(),
             product.getName(),
             product.getImageFileName(),
+            product.getStock().getValue(),
             product.getDescription(),
             product.getPrice().getValue()
         );

diff --git a/src/main/resources/static/css/common/checkbox.css b/src/main/resources/static/css/common/checkbox.css
@@ -5,7 +5,7 @@
 
 .checkbox {
   appearance: none;
-  border: 1px solid #2ac1bc;
+  border: 1px solid #FF1B66;
   border-radius: 2px;
   width: 1.75rem;
   height: 1.75rem;
@@ -17,7 +17,7 @@
 }
 
 .checkbox:checked {
-  background-color: #2ac1bc;
+  background-color: #FF1B66;
 }
 
 .checkbox:after {

diff --git a/src/main/resources/static/css/common/highlight-text.css b/src/main/resources/static/css/common/highlight-text.css
@@ -15,7 +15,7 @@
   bottom: 0;
   width: 100%;
   height: 8px;
-  background-color: #2ac1bc;
+  background-color: #FF1B66;
   opacity: 0.5;
   z-index: -1;
 }
diff --git a/src/main/resources/static/css/common/nav.css b/src/main/resources/static/css/common/nav.css
@@ -2,7 +2,7 @@
   width: 100%;
   height: 80px;
 
-  background: #2ac1bc;
+  background: #FF1B66;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
 
   padding: 0 20px;

diff --git a/src/main/resources/static/css/common/pagination.css b/src/main/resources/static/css/common/pagination.css
@@ -12,7 +12,7 @@
 }
 
 .pagination button.active {
-  background-color: #2ac1bc;
+  background-color: #FF1B66;
   color: white;
 }
 

diff --git a/src/main/resources/static/css/common/primary-button.css b/src/main/resources/static/css/common/primary-button.css
@@ -1,13 +1,13 @@
 .primary-button {
-  background: #2ac1bc;
+  background: #FF1B66;
   font-size: 24px;
   color: white;
   width: 100%;
   padding: 20px;
 }
 
 .primary-button-small {
-  background: #2ac1bc;
+  background: #FF1B66;
   font-size: 20px;
   color: white;
   padding: 14px 28px;

diff --git a/src/main/resources/static/css/common/search.css b/src/main/resources/static/css/common/search.css
@@ -19,7 +19,7 @@
   width: 15%;
   text-align: center;
   border-radius: 3px;
-  background: #2ac1bc;
+  background: #FF1B66;
   font-size: 20px;
   color: white;
 }

diff --git a/src/main/resources/static/favicon.ico b/src/main/resources/static/favicon.ico
diff --git a/src/main/resources/templates/cart.html b/src/main/resources/templates/cart.html
@@ -5,7 +5,7 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <link rel="stylesheet" th:href="@{/css/index.css}">
-    <title>Shopping</title>
+    <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -5,7 +5,7 @@
   <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
   <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
-  <title>Shopping</title>
+  <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
@@ -5,7 +5,7 @@
   <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
   <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
-  <title>Shopping</title>
+  <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/main/resources/templates/order-detail.html b/src/main/resources/templates/order-detail.html
@@ -5,7 +5,7 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <link rel="stylesheet" th:href="@{/css/index.css}">
-    <title>Shopping</title>
+    <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/main/resources/templates/order-history-detail.html b/src/main/resources/templates/order-history-detail.html
@@ -5,7 +5,7 @@
   <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
   <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
-  <title>결제 내역</title>
+  <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/main/resources/templates/order-history.html b/src/main/resources/templates/order-history.html
@@ -5,13 +5,13 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <link rel="stylesheet" th:href="@{/css/index.css}">
-    <title>Shopping</title>
+    <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">
     <div th:replace="~{layouts/header :: header}"></div>
 
-    <section class="order-history-list">
+    <section class="order-history-list order-section">
     </section>
     <div class="pagination"></div>
 </div>

diff --git a/src/main/resources/templates/pay.html b/src/main/resources/templates/pay.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <!-- 결제위젯 SDK 추가 -->
     <script src="https://js.tosspayments.com/v1/payment-widget"></script>
-    <title>결제하기</title>
+    <title>ZI구ZA구</title>
 </head>
 <body>
 <div>

diff --git a/src/main/resources/templates/point-charge.html b/src/main/resources/templates/point-charge.html
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
-  <title>Shopping</title>
+  <title>ZI구ZA구</title>
 </head>
 <body>
   <div class="root">

diff --git a/src/main/resources/templates/product-detail.html b/src/main/resources/templates/product-detail.html
@@ -5,19 +5,23 @@
   <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
   <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
+  <title>ZI구ZA구</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
-  <title>Shopping</title>
 </head>
 <body>
 <div class="root">
   <div th:replace="~{layouts/header :: header}"></div>
+  <div th:replace="~{layouts/searchbar :: searchbar}"></div>
 
   <section class="product-detail-container">
     <hr class="divide-line-thin"/>
     <div class="product-right-section__bottom">
       <div class="flex justify-between p-20 mt-20">
         <h3 class="highlight-text">상품이름</h3>
         <span class="highlight-text product-name"></span>
+        <button type="submit" class="product-btn">
+          <img src="/assets/svgs/cart.svg" alt="장바구니"/>
+        </button>
       </div>
       <div class="flex justify-between p-20 mt-20">
         <img class="product-image"/>
@@ -73,6 +77,13 @@ <h3 class="highlight-text">추천상품 상위 30개</h3>
             response.json().then((data) => alert(data.message));
             window.location.href = "/";
         }).then((data) => {
+            const btn = document.querySelector('.product-btn');
+            btn.onclick = () => addCartItem(productId);
+            if (data.stock <= 0) {
+              btn.setAttribute('disabled', true);
+            } else {
+              btn.removeAttribute('disabled');
+            }
             document.querySelector('.product-name').innerHTML = `${data.name}`;
             document.querySelector('.product-price').innerText = `${data.price} 원`;
             document.querySelector('.product-description').innerText = `${data.description}`;
@@ -135,7 +146,7 @@ <h3 class="highlight-text">추천상품 상위 30개</h3>
                 datasets: [{
                     label: '성별 및 나이대별 별점',
                     data: chartData,
-                    backgroundColor: '#2ac1bc',
+                    backgroundColor: 'black',
                     barThickness: 10,
                 }]
             },
@@ -237,5 +248,7 @@ <h3 class="highlight-text">추천상품 상위 30개</h3>
         document.querySelector(className).innerHTML = pages;
     }
 </script>
+<script th:src="@{/js/cart.js}"></script>
+<script th:src="@{/js/search.js}"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html
@@ -5,7 +5,7 @@
   <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
   <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
-  <title>Shopping</title>
+  <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/main/resources/templates/signup.html b/src/main/resources/templates/signup.html
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link rel="stylesheet" th:href="@{/css/index.css}">
-  <title>Shopping</title>
+  <title>ZI구ZA구</title>
 </head>
 <body>
 <div class="root">

diff --git a/src/test/java/com/gugucon/shopping/integration/ProductIntegrationTest.java b/src/test/java/com/gugucon/shopping/integration/ProductIntegrationTest.java
@@ -594,6 +594,7 @@ void productDetail() {
         final ProductDetailResponse result = response.as(ProductDetailResponse.class);
         assertThat(result.getId()).isEqualTo(productId);
         assertThat(result.getName()).isEqualTo(name);
+        assertThat(result.getStock()).isEqualTo(10);
         assertThat(result.getDescription()).isEqualTo("test_description");
         assertThat(result.getImageFileName()).isEqualTo("image_file_" + name);
         assertThat(result.getPrice()).isEqualTo(price);