document.addEventListener('DOMContentLoaded', function () {
const storeSelect = document.getElementById('storeSelect');
const breadcrumbStore = document.getElementById('breadcrumbStore');
const cuTable = document.getElementById('cuTable');
const gsTable = document.getElementById('gsTable');
const comboTable = document.getElementById('comboTable');
showOnlyTable('cu'); // 초기 세팅
storeSelect.addEventListener('change', function () {
const selected = this.value;
showOnlyTable(selected);
});
function showOnlyTable(store) {
cuTable.style.display = 'none';
gsTable.style.display = 'none';
comboTable.style.display = 'none';
if (store === 'cu') {
cuTable.style.display = ''; // 빈 문자열로 설정해서 기본 상태로 복귀
breadcrumbStore.textContent = 'CU 상품';
} else if (store === 'gs') {
gsTable.style.display = '';
breadcrumbStore.textContent = 'GS 상품';
} else if (store === 'combo') {
comboTable.style.display = '';
breadcrumbStore.textContent = '콤보 상품';
}
}
});
manageAdiminProduct.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Product Page</title>
<!-- CSS 절대경로 -->
<link href="${pageContext.request.contextPath}/admin/assets/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/assets/css/font-awesome.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/assets/css/custom-styles.css" rel="stylesheet">
<link href="assets/css/dropdown.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!-- 네비게이션바 -->
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<!-- 화면 상단의 메뉴 버튼 요소 -->
<button type="button" class="navbar-toggle waves-effect waves-dark"
data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-dark"
href="/admin/manageMember"> <i class="large material-icons"></i>
<strong>HoneyComboFactory</strong>
</a>
</div>
<!-- 사이드바 드롭다운 -->
<ul class="nav navbar-top-links navbar-right">
<li><a class="dropdown-button waves-effect waves-dark" href="#"
data-activates="dropdown1"><i class="fab fa-user fa-fw"></i><b>${memberVO.memberName}
<!-- 로그인한 회원 이름 출력 -->
</b><i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<!-- 1. 회원관리 -->
<li><a class="active-menu waves-effect waves-dark"
href="/admin/manageMember">회원관리</a></li>
<!-- 2. 상품관리 (드롭다운 포함) -->
<li class="dropdown"><a href="/admin/product/combo" class="dropdown-toggle">상품관리</a>
<!-- 꿀조합 상품을 기본으로 함 -->
<ul class="dropdown-menu">
<li><a href="/admin/product/cu">CU상품</a></li>
<li><a href="/admin/product/gs">GS상품</a></li>
<li><a href="/admin/product/combo">꿀조합</a></li>
</ul></li>
<!-- 3. 게시판 관리 (드롭다운 포함) -->
<li class="dropdown"><a href="/admin/board/boardCombo" class="dropdown-toggle">게시판
관리</a>
<ul class="dropdown-menu">
<li><a href="/admin/board/boardCombo">꿀조합</a></li>
<li><a href="/admin/board/faq">FAQ</a></li>
</ul></li class="logout-menu"> <!-- css 적용 위해 클래스 추가 -->
<!-- 4. 로그아웃 -->
<li><a href="/client/main" class="waves-effect waves-dark"></i>로그아웃</a></li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="header">
<h1 class="page-header">Product Page</h1>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">상품관리</a></li>
<li class="active" id="breadcrumbStore">CU 상품</li>
</ol>
</div>
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-action">
상품관리
</div>
<div class="card-content">
<div class="table-responsive">
<!-- 드롭다운 -->
<div style="margin-bottom: 20px;">
<select id="storeSelect" class="form-control" style="width: 200px;">
<option value="cu" selected>CU 상품</option>
<option value="gs">GS 상품</option>
<option value="combo">콤보 상품</option>
</select>
</div>
<!-- CU 테이블 -->
<table class="table table-striped table-bordered table-hover" id="cuTable">
<thead>
<tr>
<th>상품번호</th><th>상품명</th><th>가격</th><th>할인율</th><th>할인가격</th><th>재고</th>
</tr>
</thead>
<tbody>
<tr><td>1001</td><td>CU 컵밥</td><td>4500원</td><td>10%</td><td>4050원</td><td>30개</td></tr>
<tr><td>1002</td><td>CU 삼각김밥</td><td>1200원</td><td>0%</td><td>1200원</td><td>100개</td></tr>
</tbody>
</table>
<!-- GS 테이블 (초기 숨김) -->
<table class="table table-striped table-bordered table-hover" id="gsTable" style="display:none;">
<thead>
<tr>
<th>상품번호</th><th>상품명</th><th>가격</th><th>할인율</th><th>할인가격</th><th>재고</th>
</tr>
</thead>
<tbody>
<tr><td>2001</td><td>GS 도시락</td><td>5000원</td><td>5%</td><td>4750원</td><td>50개</td></tr>
<tr><td>2002</td><td>GS 핫바</td><td>1500원</td><td>0%</td><td>1500원</td><td>80개</td></tr>
</tbody>
</table>
<!-- 콤보 테이블 (초기 숨김) -->
<table class="table table-striped table-bordered table-hover" id="comboTable" style="display:none;">
<thead>
<tr>
<th>상품번호</th><th>상품명</th><th>가격</th><th>할인율</th><th>할인가격</th><th>재고</th>
</tr>
</thead>
<tbody>
<tr><td>3001</td><td>콤보세트1</td><td>10000원</td><td>20%</td><td>8000원</td><td>20개</td></tr>
<tr><td>3002</td><td>콤보세트2</td><td>15000원</td><td>25%</td><td>11250원</td><td>15개</td></tr>
</tbody>
</table>
</div> <!-- table-responsive -->
</div> <!-- card-content -->
</div> <!-- card -->
</div> <!-- col-md-12 -->
</div> <!-- row -->
</div> <!-- page-inner -->
</div> <!-- page-wrapper -->
</div> <!-- wrapper -->
<!-- JS 절대경로 -->
<script src="${pageContext.request.contextPath}/admin/assets/js/jquery-1.10.2.js"></script>
<script src="${pageContext.request.contextPath}/admin/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/assets/js/jquery.metisMenu.js"></script>
<script src="${pageContext.request.contextPath}/admin/assets/js/custom-scripts.js"></script>
<!-- 관리용 스크립트 -->
<script src="${pageContext.request.contextPath}/admin/assets/js/adminProduct.js"></script>
</body>
</html>