feature:#102 쿠폰 뷰 개발

nhnacademy-be5-T3Team · May 15, 2024 · e3e1674 · e3e1674
1 parent 55cf3c6
commit e3e1674
Show file tree

Hide file tree

Showing 9 changed files with 320 additions and 8 deletions.
diff --git a/src/main/java/com/t3t/frontserver/admin/controller/CouponController.java b/src/main/java/com/t3t/frontserver/admin/controller/CouponController.java
@@ -0,0 +1,17 @@
+package com.t3t.frontserver.admin.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class CouponController {
+    @GetMapping("/admin/coupons/register")
+    public String getRegisterView(){
+        return "admin/page/couponRegister";
+    }
+
+    @GetMapping("/admin/coupons/usageHistory")
+    public String getUsage(){
+        return "admin/page/couponHistory";
+    }
+}
diff --git a/src/main/resources/static/assets/admin/js/adminCoupon.js b/src/main/resources/static/assets/admin/js/adminCoupon.js
@@ -0,0 +1,124 @@
+/**
+ * 확인 버튼을 클릭했을 때 실행되는 이벤트 핸들러
+ * 회원 선택 버튼과 쿠폰 선택 버튼을 생성하고 테이블에 추가
+ * @author joohyun1996(이주현)
+ */
+document.getElementById('confirmBtn').addEventListener('click', function() {
+
+    var count = document.getElementById('memberCount').value;
+    var tableBody = document.getElementById('memberButtonTable').getElementsByTagName('tbody')[0];
+    tableBody.innerHTML = '';
+
+    for (var i = 1; i <= count; i++) {
+        var row = document.createElement('tr');
+        // 첫 번째 열 : 참여자 선택 버튼
+        var memberCell = document.createElement('td');
+        var memberButton = document.createElement('button');
+        memberButton.type = 'button';
+        memberButton.id = 'participantButton_' + i;
+        memberButton.innerText = i + '번 회원 선택';
+        memberButton.classList.add('btn', 'btn-secondary');
+        memberButton.dataset.bsToggle = 'modal';
+        memberButton.dataset.bsTarget = '#memberModal';
+        memberButton.dataset.index = i;
+        memberButton.addEventListener('click', function() {
+            $('#memberModal').data('index', this.dataset.index);
+            fetchParticipantsAndUpdateModal();
+        });
+        memberCell.appendChild(memberButton);
+        row.appendChild(memberCell);
+
+        // 두 번째 열 : 참여자 역할 선택 버튼
+        var couponCell = document.createElement('td');
+        var couponButton = document.createElement('button');
+        couponButton.type = 'button';
+        couponButton.id = 'couponButton_' + i;
+        couponButton.innerText = i + '번 쿠폰 선택';
+        couponButton.classList.add('btn', 'btn-secondary');
+        couponButton.dataset.bsToggle = 'modal';
+        couponButton.dataset.bsTarget = '#couponModal';
+        couponButton.dataset.index = i;
+        couponButton.addEventListener('click', function() {
+            $('#couponModal').data('index', this.dataset.index);
+            fetchParticipantRolesAndUpdateModal();
+        });
+        couponCell.appendChild(couponButton);
+        row.appendChild(couponCell);
+
+        tableBody.appendChild(row);
+    }
+});
+
+document.getElementById('searchButton').addEventListener('click', function() {
+    var searchInput = document.getElementById('memberSearchInput').value;
+
+    // 여기서 searchInput을 사용하여 회원을 검색합니다.
+    // 이 예제에서는 검색 결과를 담은 배열인 searchResults를 사용하겠습니다.
+    fetch('/at/bookstore/members?name=' + searchInput)
+        .then(response => response.json())
+        .then(searchResults => {
+            var tableBody = document.getElementById('memberTable').getElementsByTagName('tbody')[0];
+            tableBody.innerHTML = '';
+
+            for (var i = 0; i < searchResults.length; i++) {
+                var row = document.createElement('tr');
+
+                var checkBoxCell = document.createElement('td');
+                checkBoxCell.innerText = searchResults[i].checkBox;
+                row.appendChild(checkBoxCell);
+
+                var nameCell = document.createElement('td');
+                nameCell.innerText = searchResults[i].name;
+                row.appendChild(nameCell);
+
+                var emailCell = document.createElement('td');
+                emailCell.innerText = searchResults[i].email;
+                row.appendChild(emailCell);
+
+                tableBody.appendChild(row);
+            }
+        })
+        .catch(error => console.error('Error:', error));
+});
+document.getElementById('searchForm').addEventListener('submit', function(event) {
+    // 기본 form 제출 동작을 막습니다.
+    event.preventDefault();
+
+    // 입력된 회원 이름을 가져옵니다.
+    var memberName = document.getElementById('memberNameInput').value;
+
+    // 회원 이름으로 쿠폰 이력을 검색합니다.
+    fetch('/at/bookstore/member/{memberId}' + encodeURIComponent(memberName))
+        .then(response => response.json())
+        .then(data => {
+            var tableBody = document.getElementById('couponHistoryTable').getElementsByTagName('tbody')[0];
+            tableBody.innerHTML = '';
+
+            data.forEach(item => {
+                var row = document.createElement('tr');
+
+                var couponNumberCell = document.createElement('td');
+                couponNumberCell.textContent = item.couponNumber;
+                row.appendChild(couponNumberCell);
+
+                var memberNameCell = document.createElement('td');
+                memberNameCell.textContent = item.memberName;
+                row.appendChild(memberNameCell);
+
+                var memberEmailCell = document.createElement('td');
+                memberEmailCell.textContent = item.memberEmail;
+                row.appendChild(memberEmailCell);
+
+                var orderNumberCell = document.createElement('td');
+                orderNumberCell.textContent = item.orderNumber;
+                row.appendChild(orderNumberCell);
+
+                var productNameCell = document.createElement('td');
+                productNameCell.textContent = item.productName;
+                row.appendChild(productNameCell);
+
+                tableBody.appendChild(row);
+            });
+        })
+        .catch(error => console.error('Error:', error));
+});
diff --git a/src/main/resources/templates/admin/fragment/couponModal.html b/src/main/resources/templates/admin/fragment/couponModal.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="couponModalFragment">
+    <div class="modal fade" id="couponModal" tabindex="-1" aria-labelledby="couponModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="couponModalLabel">참여자 선택</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div>
+                        <table id="couponTable" class="table">
+                            <thead class="table-light">
+                            <tr>
+                                <th>CheckBox</th>
+                                <th>쿠폰 종류</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            </tbody>
+                        </table>
+                        <div id="coupon_pagination">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</th:block>
+</html>
diff --git a/src/main/resources/templates/admin/fragment/memberModal.html b/src/main/resources/templates/admin/fragment/memberModal.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="memberModalFragment">
+    <div class="modal fade" id="memberModal" tabindex="-1" aria-labelledby="memberModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="memberModalLabel">회원 선택</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <input type="text" id="memberSearchInput" class="form-control" placeholder="회원 검색">
+                        <button class="btn btn-outline-secondary" type="button" id="searchButton">검색</button>
+                    </div>
+                    <div>
+                        <table id="memberTable" class="table">
+                            <thead class="table-light">
+                            <tr>
+                                <th>CheckBox</th>
+                                <th>이름</th>
+                                <th>이메일</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <div id="member_pagination">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</th:block>
+</html>
diff --git a/src/main/resources/templates/admin/fragment/sidebar.html b/src/main/resources/templates/admin/fragment/sidebar.html
@@ -56,17 +56,12 @@
             </a>
             <ul id="coupon-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
                 <li>
-                    <a href="/admin"> <!-- TODO : URL 수정 -->
+                    <a href="/admin/coupons/register"> <!-- TODO : URL 수정 -->
                         <i class="bi bi-circle"></i><span>쿠폰 발급</span>
                     </a>
                 </li>
                 <li>
-                    <a href="/admin"> <!-- TODO : URL 수정 -->
-                        <i class="bi bi-circle"></i><span>쿠폰 조회</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="/admin"> <!-- TODO : URL 수정 -->
+                    <a href="/admin/coupons/usageHistory"> <!-- TODO : URL 수정 -->
                         <i class="bi bi-circle"></i><span>쿠폰 이력 조회</span>
                     </a>
                 </li>

diff --git a/src/main/resources/templates/admin/page/couponHistory.html b/src/main/resources/templates/admin/page/couponHistory.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="admin/layout/layout">
+
+<th:block layout:fragment="content">
+    <form id="searchForm">
+        <input type="text" id="memberNameInput" placeholder="회원 이름 입력">
+        <button type="submit">검색</button>
+    </form>
+    <table id="couponHistoryTable" class="table">
+        <thead>
+        <tr>
+            <th>쿠폰번호</th>
+            <th>회원이름</th>
+            <th>이메일</th>
+            <th>주문번호</th>
+            <th>제품명</th>
+        </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+</th:block>
diff --git a/src/main/resources/templates/admin/page/couponRegister.html b/src/main/resources/templates/admin/page/couponRegister.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="admin/layout/layout">
+
+<th:block layout:fragment="content">
+    <div class="card">
+        <div class="card-body">
+            <h5 class="card-title">쿠폰 등록하기</h5>
+            <!-- 쿠폰 등록 form -->
+            <form name="CouponRegisterForm" method="get" th:action="@{/admin/coupons/register}" th:object="${couponRegisterRequest}">
+                <div class="row mb-3">
+                    <label class="col-sm-2 col-form-label">회원 선택</label>
+                    <div class="col-sm-3">
+                        <div class="row g-3">
+                            <h6>쿠폰을 발급할 회원의 수를 선택해주세요.</h6>
+                            <div class="col-auto">
+                                <input id="memberCount" type="number" class="form-control" min="1" max="10" required>
+                            </div>
+                            <div class="col-auto">
+                                <button id="confirmBtn" type="button" class="btn btn-primary">확인</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-5">
+                        <table id="memberButtonTable" class="table">
+                            <thead class="table-light">
+                            <tr>
+                                <th scope="col">회원 선택</th>
+                                <th scope="col">쿠폰 선택</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <!--회원 정보를 가져오는 Modal-->
+                <!--                <th:block th:replace="admin/fragment/participantModal :: participantModalFragment"></th:block>-->
+                <th:block th:replace="admin/fragment/memberModal :: memberModalFragment"></th:block>
+                <!--쿠폰 정보를 가져오는 Modal-->
+                <th:block th:replace="admin/fragment/couponModal :: couponModalFragment"></th:block>
+            </form>
+        </div>
+    </div>
+
+    <script th:src="@{/assets/admin/js/adminCoupon.js}"></script>
+</th:block>
+</html>
diff --git a/src/main/resources/templates/main/fragment/topbar.html b/src/main/resources/templates/main/fragment/topbar.html
@@ -35,7 +35,12 @@
                         </button>
                     </form>
                 </div>
-                <div sec:authorize="isAuthenticated()">
+                <div sec:authorize="isAuthenticated()" style="display: flex; justify-content: space-between;">
+                    <form action="/mypage" method="get">
+                        <button type="submit" class="order_online" style="margin-right: 10px; margin-left: 10px">
+                            My Page
+                        </button>
+                    </form>
                     <form action="/logout" method="post">
                         <button type="submit" class="order_online">
                             Sign Out

diff --git a/src/main/resources/templates/main/page/coupon.html b/src/main/resources/templates/main/page/coupon.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout(categoryList)"
+      layout:decorate="main/layout/layout">
+
+<th:block layout:fragment="content" th:method="get">
+    <div>
+        <h2>사용 가능한 할인권: <span id="available-coupons">0 개</span></h2>
+        <h2>미사용할인권 24시간 이내: <span id="unused-coupons">0 개</span></h2>
+    </div>
+    <div>
+        <label for="coupon-code">할인권 코드 입력:</label>
+        <input type="text" id="coupon-code" name="coupon-code">
+        <button type="button">적용하기</button>
+        <p>* 공백없이 바코드번호만 입력해주세요.</p>
+    </div>
+    <div>
+        <label for="payment">결제하기:</label>
+        <input type="text" id="payment" name="payment">
+        <div>
+            <input type="radio" id="credit-card" name="payment-method">
+            <label for="credit-card">신용카드(일반)</label><br>
+            <input type="radio" id="gift-card" name="payment-method">
+            <label for="gift-card">신용카드 / 기프트카드</label><br>
+        </div>
+    </div>
+</th:block>
+</html>