feature:#57 관리자페이지에서 회원과 쿠폰을 선택해 직접 발급 가능하게 하는 뷰 구현

nhnacademy-be5-T3Team · May 6, 2024 · 8884140 · 8884140
1 parent 76cb3b0
commit 8884140
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 7 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,18 @@
+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,82 @@
+/**
+ * 확인 버튼을 클릭했을 때 실행되는 이벤트 핸들러
+ * 회원 선택 버튼과 쿠폰 선택 버튼을 생성하고 테이블에 추가
+ * @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));
+});
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">
                         <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/layout/layout.html b/src/main/resources/templates/admin/layout/layout.html
@@ -17,6 +17,7 @@
                 <!-- 본문-->
                 <th:block layout:fragment="content"></th:block>
             </div>
+
         </div>
     </div>
 </div>

diff --git a/src/main/resources/templates/admin/page/couponHistory.html b/src/main/resources/templates/admin/page/couponHistory.html
@@ -0,0 +1,7 @@
+<!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">
+</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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ @@
                     <!-- 본문-->
                     <th:block layout:fragment="content"></th:block>
                 </div>
             </div>
         </div>
     </div>
@@ Expand Down @@