Feat/63 프로필 유무에 따라 image optimizer 사용하게 만들기

Api/src/main/resources/static/css/detail.css

@@ -71,19 +71,19 @@
     font-size: 31px;
 }
 
-.details-box .btn {
-    position: absolute;
-    bottom: 40px;
-    right: 900px;
-    width: 110px;
-    height: 50px;
-    font-size: 30px;
-    color: #99F54D;
-    box-shadow: 0px 0px 10px rgba(219, 134, 129, 86);
-
-    background-color: #761766;
-    z-index: 2;
-}
+/*.details-box .btn {*/
+/*    position: absolute;*/
+/*    bottom: 40px;*/
+/*    right: 900px;*/
+/*    width: 110px;*/
+/*    height: 50px;*/
+/*    font-size: 30px;*/
+/*    color: #99F54D;*/
+/*    box-shadow: 0px 0px 10px rgba(219, 134, 129, 86);*/
+
+/*    background-color: #761766;*/
+/*    z-index: 2;*/
+/*}*/
 
 /* Optional: Adjust margin between the box and other elements */
 .details-box + * {

Api/src/main/resources/static/js/bidModal.js

@@ -0,0 +1,9 @@
+const inputP = document.getElementById('inputPrice')
+const priceAmount = document.getElementById('price_amount')
+
+//결제 가격
+function inputPrice(e){
+    const bidNum = (e.value);
+    inputP.value = e.value;
+    priceAmount.textContent = "입찰 금액 : " + bidNum + "원";
+}

Api/src/main/resources/static/js/detailModal.js

@@ -0,0 +1,43 @@
+var amount = document.getElementById('inputPrice');
+
+var userId;
+var bidResult = obj => {
+    $.ajax({
+        type : 'post',
+        url : '/user/session-info',
+        success : function(data, status, xhr) {
+            userId = data.userId
+        },
+        error : function(xhr, status, error) {
+            alert('입찰 불가')
+        },
+    })
+
+    var price = document.getElementById("inputPrice").value;
+    $.ajax({
+        type: 'post',
+        url: 'urlurlurl',
+        dataType: 'json',
+        contentType: 'application/json; charset=utf-8',
+        data: JSON.stringify({
+            "bidPrice" : price
+        })
+    })
+}
+
+// function postPayInfo(tof, response) {
+//     $.ajax({
+//         type : 'post',
+//         url : '넣고싶은 url 넣으시길',
+//         dataType: 'json',
+//         contentType: 'application/json; charset=utf-8',
+//         data : JSON.stringify({
+//             "payResult" : tof,
+//             "userId" : userId,
+//             "merchantUid" : response.merchant_uid,
+//             "productName" : response.name,
+//             "pgProvider" : response.pg_provider,
+//             "paidAmount" : response.paid_amount
+//         })
+//     })
+// }

Api/src/main/resources/static/js/onlyresize.js

@@ -39,6 +39,8 @@
 });
 }
 
+// TODO: 그림의 사이즈는 912 * 600으로 리사이징한다
+
     // 리사이즈된 이미지를 표시하는 함수
     async function displayResizedImage() {
     const originalImageUrl = '../static/asset/한소희.jpeg';

Api/src/main/resources/templates/fragment/header.html

@@ -50,7 +50,9 @@
                                             <path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
                                         </svg>
                                         <img th:if="${session.loginUser.profile != null}"
-                                             th:src="${session.loginUser.profile}" alt="User Profile"/>
+                                        <img th:if="${session.loginUser.profile != null}"
+                                             th:src="'http://xgrnsxldyejc19608959.cdn.ntruss.com' + ${session.loginUser.profile} + '?type=f&w=80&h=80&quality=90&align=4&faceopt=false'"
+                                             alt="User Profile"/>
                                     </div>
                                 </a>
                                 <ul class="dropdown-menu">

Api/src/main/resources/templates/pictures/pictureDetail.html

@@ -8,14 +8,13 @@
 >
 <main layout:fragment="content">
     <link rel="stylesheet" type="text/css" href="/static/css/detail.css"/>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Kranky&display=swap">
-    <link rel="stylesheet" href="https://fonts.google.com/noto/specimen/Noto+Sans+KR">
-
+<!--    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Kranky&display=swap">-->
+<!--    <link rel="stylesheet" href="https://fonts.google.com/noto/specimen/Noto+Sans+KR">-->
 
     <div class="container body">
         <div th:if="${picture}" class="picture-details">
-            <img th:src="'http://xgrnsxldyejc19608959.cdn.ntruss.com/' + ${picture.imgUrl} + '?type=f&w=600&h=800&ttype=jpg
-' " alt="Picture" class="picture-img">
+<!--            <img th:src="'http://xgrnsxldyejc19608959.cdn.ntruss.com/' + ${picture.imgUrl} + '?type=f&w=600&h=800&ttype=jpg-->
+<!--' " alt="Picture" class="picture-img">-->
 <!--          <img class = "frame" src="/static/asset/기린.png">-->
 <!--          <img class = "kuro" src="/static/asset/쿠로미.png">-->
 <!--          <img class = "sina" src="/static/asset/시나모.png">-->
@@ -36,7 +35,27 @@
                     <p class="text" style="font-size: 27px" th:text="${picture.getStartingPrice()}"></p>
                     <p th:text="'Minimum Amount'"></p>
                     <p class="text" style="font-size: 27px" th:text="${picture.getIncrementAmount()}"></p>
-                    <button class="btn">Bid</button>
+                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                        입찰하기
+                    </button>
+
+                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h3 id="price_amount"></h3>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                </div>
+                                <div class="modal-body">
+                                    <input id="inputPrice" onchange="inputPrice(this)" placeholder="입찰 금액 입력"/>
+                                    <button id="bidButton" onclick="bidResult(this)" type="button">입찰하기</button>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div th:unless="${picture}">
@@ -47,5 +66,11 @@
   <br><br><br>
 </main>
 <th:block layout:fragment="script">
+    <script type="application/javascript" th:inline="javascript">
+    </script>
+    <script type="text/javascript">
+    </script>
+    <script src="/static/js/detailModal.js"></script>
+    <script src="/static/js/bidModal.js"></script>
 </th:block>
 </html>