#10 review errer(The given id must not be null!)

src/main/java/com/memoryboost/controller/estimate/EstimateController.java

@@ -15,27 +15,12 @@ public String estimatePage() {
     @GetMapping("/templates")
     public String templatePage() { return "basic"; }
 
-    @GetMapping("/paytest")
-    public String payPage() { return "payment"; }
-
-    @GetMapping("/mypage/myinfo")
-    public String myinfoPage() { return "mypage/myinfo"; }
-
-    @GetMapping("/mypage/cartlist")
-    public String cartlistPage() { return "mypage/cartlist"; }
-
     @GetMapping("/mypage/inquiry")
     public String inquiryPage() { return "mypage/inquiry"; }
 
-    @GetMapping("/mypage/orderlist")
-    public String orderlistPage() { return "mypage/orderlist"; }
-
-    @GetMapping("/kakaopay")
-    public String kakaoPage() { return "kakaopay"; }
-
-    @GetMapping("/payment-complete")
-    public String kakaoSuccessPage() { return "payment/kakao-success"; }
-
     @GetMapping("/popup")
     public String popupTestPage() { return "popup"; }
+
+    @GetMapping("/writereview")
+    public String writeReviewPage() { return "mypage/writereview"; }
 }

src/main/resources/static/css/mypage/orderdetail-style.css

@@ -7,6 +7,7 @@ div.frame > h1 {
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 }
 
+/* 주문 상품 리스트 */
 table {
     width: 100%;
     border-collapse: collapse;
@@ -40,10 +41,53 @@ td.product-name > button:hover {
     text-decoration: underline;
 }
 
+
+/* 배송 정보 */
 #addr-form {
     width: 100%;
 }
 
 #addr-form > * {
     width: 100%;
+    margin-top: 10px;
+}
+
+
+#addr-form > input {
+    height: 40px;
+}
+
+#addr-form  input[type=text] {
+    outline: none;
+    border: 0;
+    border-radius: 5px;
+    box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.6);
+    padding: 0 10px;
+}
+
+#addr-form > input[type=text]:focus {
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1.0);
+}
+
+/* 주소입력 */
+#zipcode , #address, .searchZipCode, #detailAddress {
+    height: 40px;
+}
+
+input.searchZipCode {
+    cursor: pointer;
+    outline: none;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    padding: 0 5px;
+    margin-left: 10px;
+}
+
+#address {
+    margin-top: 10px;
+    width: 100%;
+}
+
+#detailAddress {
+    width: 100%;
 }

src/main/resources/static/css/mypage/writereview.css

@@ -0,0 +1,67 @@
+body, html {
+    padding: 0;
+    width: 400px; height: 400px;
+}
+
+div#review {
+    width: 400px; height: 400px;
+}
+
+table {
+    width: 400px; height: 400px;
+    border-collapse: collapse;
+}
+
+tr {
+    display: flex;
+}
+
+th {
+    width: 100%;
+    text-align: left;
+    padding: 5px;
+}
+
+td {
+    width: 100%;
+    padding: 5px;
+}
+
+div.bg {
+    display: flex;
+    background-image: url("/img/grade_big.png");
+    background-size: 150px 30px;
+    background-repeat: no-repeat;
+    width: 150px; height: 30px;
+    overflow: hidden;
+}
+
+div.star {
+    cursor: pointer;
+    opacity: 0;
+    background-image: url("/img/star_one.png");
+    background-repeat: no-repeat;
+    width: 30px; height: 30px;
+    overflow: hidden;
+}
+
+div.star.hover {
+    opacity: 1.0;
+}
+
+div.star.fixed {
+    opacity: 1.0;
+}
+
+input[type=text] {
+    outline: 0;
+    width: 100%;
+    padding: 5px;
+}
+
+textarea {
+    outline: 0;
+    width: 100%;
+    padding: 5px;
+    resize: none;
+}

src/main/resources/static/js/mypage/orderdetail.js

@@ -0,0 +1,12 @@
+$(document).ready(function() {
+    var popX = window.outerWidth/2 - 225;
+    var popY = window.outerHeight/2 - 225;
+    //리뷰작성 버튼
+    $(document).on("click", ".btn.review", function(e) {
+        let productNo = e.target.dataset.productnum;
+        let productName = e.target.dataset.productname;
+        let property = "width=450, height=450";
+        let a ='status=no, height=' + 450  + ', width=' + 450  + ', left='+ popX + ', top='+ popY
+        window.open("/writereview?productNo="+productNo+"&productName="+productName, 'review', a);
+    })
+});

src/main/resources/static/js/mypage/writereview.js

@@ -0,0 +1,51 @@
+$(document).ready(function() {
+    var productNo = Number(getParam("productNo"));
+    var productName = decodeURI(getParam("productName"));
+
+    $("a")[0].href = "/product-detail/"+productNo;
+    $("#productNo")[0].value = productNo;
+    $("#productName")[0].innerHTML = productName;
+
+    //평가
+    $(document).on("click", "div.star", function(e){
+        $("div.star").removeClass("fixed");
+        $(this).prevAll().addClass("fixed");
+        $(this).addClass("fixed");
+        $("#grade")[0].value = e.target.dataset.value;
+    });
+
+    //보내기(ajax로 true false 체크 후)
+    $(document).on("click", "#submit", function(e) {
+        e.preventDefault();
+        var token = $("meta[name='_csrf']").attr("content");
+        var header = $("meta[name='_csrf_header']").attr("content");
+        let form = $("#review-form")[0];
+        let params = new FormData(form);
+
+        $.ajax({
+            type : "POST",
+            url : "/review",
+            data : params,
+            processData : false,
+            async : true,
+            cache : false,
+            beforeSend : function(xhr) {
+                xhr.setRequestHeader(header, token);
+            }
+        })
+        .done(function(response) {
+            if(response.result) {
+                alert("리뷰 작성 완료!");
+                opener.href.replace("/");
+                window.close();
+            } else {
+                alert("리뷰 작성에 실패.. 다시 시도해주세요.");
+            }
+        })
+        .fail(function(response) {
+            console.dir("통신 실패");
+        })
+    });
+});
+
+opener.popup = this;

src/main/resources/templates/mypage/orderdetail.html

@@ -66,14 +66,14 @@ <h1 th:text="|주문 상품|"></h1>
                     <td th:text="${#numbers.formatInteger(product.productPrice, 0, 'COMMA')}"></td>
                     <td th:text="${product.productCnt}"></td>
                     <td>
-                        <button th:text="|리뷰작성|"></button>
+                        <button th:data-productname="${product.productName}" th:data-productnum="${product.productNo}" th:if="${order.orderSt > 4 && product.reviewFlag}" th:classappend="|btn review|" th:text="|리뷰작성|"></button>
                     </td>
                 </tr>
             </table>
         </div>
         <h1 th:text="배송정보"></h1>
-        <form th:id="|addr-form|" th:classappend="|align-left vertical|">
-            <input th:type="text" th:id="diRecipient" th:placeholder="|받는사람|" th:name="diRecipient" th:value="${delivery.diRecipient}" />
+        <form th:id="|addr-form|" action="/order/info" th:classappend="|align-mid vertical|" method="POST">
+            <input th:type="text" th:id="diRecipient" th:placeholder="|받는사람|" th:name="diRecipients" th:value="${delivery.diRecipient}" />
             <input th:type="text" th:id="diTel" th:placeholder="|전화번호|" th:name="diTel" th:value="${delivery.diTel}" />
             <div th:classappend="addr">
                 <input th:value="${delivery.diZipCode}" th:type="text" th:id="zipcode" th:classappend="memberZipcode" th:name="diZipCode" th:placeholder="|우편번호|" readonly>
@@ -83,18 +83,22 @@ <h1 th:text="배송정보"></h1>
             <div th:classappend="|div-detailaddr|">
                 <input th:value="${delivery.diDetailAddress}" th:type="text" th:id="detailAddress" th:classappend="|memberDetailAddress add|" th:name="diDetailAddress" th:placeholder="|상세주소|">
             </div>
-            <input th:type="text" th:id="comment" th:placeholder="|요청 사항|" th:name="diComment" />
-            <button th:text="|배송정보 수정|"></button>
+            <input th:type="text" th:id="comment" th:placeholder="|요청 사항|" th:name="diComment" th:value="${delivery.diComment}"/>
+            <button th:if="${order.orderSt < 4}" th:text="|배송정보 수정|"></button>
+            <input th:type="hidden" th:name="orderNo" th:value="${order.orderNo}" />
+            <input th:type="hidden" th:name="_method" th:value="PUT" />
         </form>
         <h1 th:text="결제"></h1>
         <div th:classappend="payment" th:if="${payment == null}">
             <div th:text="|카카오페이|"></div>
         </div>
         <div th:classappend="payment" th:if="${payment != null}">
-            <div th:text="${payment.orderTotalAmount}"></div>
-            <div th:text="${payment.orderPaymentGb}"></div>
-            <div th:text="${payment.bankName}"></div>
-            <div th:text="${payment.bankAccountNumber}"></div>
+            <div th:text="|금액 : ${#numbers.formatInteger(payment.orderTotalAmount, 0, 'COMMA')}원|"></div>
+            <div>
+                <span th:text="${payment.bankName}"></span>
+                <span th:text="${payment.bankAccountNumber}"></span>
+                <span th:text="이건희"></span>
+            </div>
         </div>
     </div>
 </div>

src/main/resources/templates/mypage/orderlist.html

@@ -37,7 +37,7 @@ <h3 th:text="|주문/배송|"></h3>
         </div>
         <div>
             <h3 th:text="|계정|"></h3>
-            <a th:href="@{/mypage/myinfo}" th:classappend="myinfo" th:text="|내정보|"></a>
+            <a th:href="@{/members/mypage}" th:classappend="myinfo" th:text="|내정보|"></a>
         </div>
         <div>
             <h3 th:text="|기타|"></h3>
@@ -61,11 +61,19 @@ <h1 th:text="주문정보"></h1>
                         <button th:name="orderNo" th:value="${order.orderNo}" th:text="${order.orderNo}"></button>
                     </td>
                     <td th:classappend="|order-info|">
-                        <button th:name="orderNo" th:value="${order.orderNo}" th:text="|주문정보간략히123123123|"></button>
+                        <button th:if="${#lists.size(order.productNameList) == 1}" th:name="orderNo" th:value="${order.orderNo}" th:text="${order.productNameList[0]}"></button>
+                        <button th:if="${#lists.size(order.productNameList) > 1}" th:name="orderNo" th:value="${order.orderNo}" th:text="|${order.productNameList[0]} 외 ${#lists.size(order.productNameList)-1}개|"></button>
                     </td>
                     <td th:text="${order.orderDate}"></td>
                     <td th:text="${order.orderTrackingNumber}"></td>
-                    <td th:text="${order.orderSt}"></td>
+                    <td th:with="status = ${order.orderSt}">
+                        <th:block th:if="${status == 1}" th:text="|입금 대기중|"></th:block>
+                        <th:block th:if="${status == 2}" th:text="|결제완료|"></th:block>
+                        <th:block th:if="${status == 3}" th:text="|배송준비중|"></th:block>
+                        <th:block th:if="${status == 4}" th:text="|배송중|"></th:block>
+                        <th:block th:if="${status == 5}" th:text="|배송완료|"></th:block>
+                        <th:block th:if="${status == 6}" th:text="|환불처리|"></th:block>
+                    </td>
                     <td th:text="${order.orderAmountTotal}"></td>
                 </tr>
             </form>

src/main/resources/templates/mypage/writereview.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head>
+    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1.0">
+    <meta name="_csrf" th:content="${_csrf.token}"/>
+    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
+    <title>리뷰작성</title>
+    <!-- 폰트 -->
+    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&family=Noto+Sans&family=Noto+Sans+KR&display=swap" rel="stylesheet">
+    <!--
+    한글 폰트
+    font-family: 'Nanum Gothic Coding', monospace;
+    font-family: 'Noto Sans KR', sans-serif;
+    영문 폰트
+    font-family: 'Noto Sans', sans-serif;
+
+    보통은(한/영 둘다) Noto Sans로 하고
+    정보표시는 Nanum Gothic Coding.
+    -->
+    <!-- fontawesome CDN -->
+    <script src="https://kit.fontawesome.com/88eb152a32.js" crossorigin="anonymous"></script>
+    <!-- css -->
+    <link rel="stylesheet" href="/css/reset.css" />
+    <link rel="stylesheet" href="/css/mypage/writereview.css" />
+    <!-- 스크립트 -->
+    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="/js/reset.js"></script>
+    <script src="/js/mypage/writereview.js"></script>
+</head>
+<body>
+<div th:id="review">
+    <form th:id="review-form" th:classappend="|align-mid vertical|">
+        <table>
+            <tr>
+                <th th:text="|상품정보|"></th>
+            </tr>
+            <tr>
+                <td><a th:id="productName" target="_blank"></a></td>
+            </tr>
+            <tr>
+                <td>
+                    <input th:type="text" th:placeholder="|제목|" name="reviewTitle" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <textarea th:cols="40" th:rows="8" th:placeholder="|내용을 입력해주세요|" name="reviewContent"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <th th:text="|평가|"></th>
+            </tr>
+            <tr>
+                <td th:classappend="|align-left horizontal|">
+                    <div th:classappend="bg">
+                        <div th:classappend="star" data-value="1"></div>
+                        <div th:classappend="star" data-value="2"></div>
+                        <div th:classappend="star" data-value="3"></div>
+                        <div th:classappend="star" data-value="4"></div>
+                        <div th:classappend="star" data-value="5"></div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td th:classappend="|align-mid horizontal|">
+                    <button th:id="submit" th:text="|작성|"></button>
+                </td>
+            </tr>
+        </table>
+        <input th:id="productNo" th:type="hidden" name="productNo" />
+        <input th:id="grade" th:type="hidden" th:name="reviewGrade" th:value="0" />
+        <input th:type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
+    </form>
+</div>
+<script th:inline="javascript">
+</script>
+</body>
+</html>