fix:leftMenu 수정

src/main/resources/static/css/common.css

@@ -52,3 +52,21 @@
 .modal-xxl{
   --bs-modal-width : 1440px;
 }
+
+/*사이드바 카테고리 트리*/
+.btn-toggle:hover, .btn-toggle:focus {
+  color: rgba(0, 0, 0, .85);
+  background-color: #d2f4ea;
+}
+.btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  content: url("/img/bootstrap-icons-1.9.1/caret-right-fill.svg");
+  transition: transform .35s ease;
+  transform-origin: 0.5em 50%;
+}
+.btn-toggle[aria-expanded="true"]::before {
+  content: url("/img/bootstrap-icons-1.9.1/caret-down-fill.svg");
+  /*왜 안돌까?*/
+  /*transform: rotate(90deg);*/
+}

src/main/resources/templates/fragments/leftMenu.html

@@ -4,23 +4,51 @@
     <a href="/" class="d-flex">
       <img id="logo" th:src="@{/img/logo.png}" alt="logo" title="logo">
     </a>
-    <ul class="nav nav-pills flex-column my-3">
+    <div class="flex-shrink-0 pe-3 py-3 bg-transparent">
-      <li th:each="firstMenu:${session.menuList}">
+        <ul class="list-unstyled ps-0">
+        <li class="mb-1" th:each="firstMenu:${session.menuList}">
           <th:block th:each="cat1Code:${session.commonCode.get('CAT1')}">
           <th:block th:if="${cat1Code.itemCd eq firstMenu.cat1Cd}">
-            <a href="#" class="nav-link link-dark firstMenuLink" th:text="${cat1Code.itemValue}"></a>
+             <button class="btn btn-toggle align-items-center rounded collapsed"
-            <div class="menuDiv secondMenu h-100 bg-white" style="display: none">
+                    data-bs-toggle="collapse" aria-expanded="false"
-              <ul class="nav nav-pills flex-column">
+              th:data-categoryseq="${cat1Code.itemValue}"
+              th:data-bs-target="'#collapse'+${cat1Code.itemCd}" th:text="${cat1Code.itemValue}">
+            </button>
+            <div class="collapse ps-3" th:id="|collapse${cat1Code.itemCd}|">
+              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
                   <li th:each="secondMenu:${firstMenu.childList}">
                   <th:block th:each="cat2Code:${session.commonCode.get('CAT2')}">
                     <th:block th:if="${cat2Code.itemCd eq secondMenu.cat2Cd}"> 
-                      <a class="nav-link link-dark secondMenuLink" th:text="${cat2Code.itemValue}" th:href="${#lists.isEmpty(secondMenu.childList)?secondMenu.menuUrl:'#'}"></a>
+                    <ul class="list-unstyled ps-0">
-                      <div class="menuDiv thirdMenu h-100 bg-white" style="display: none" th:if="${#lists.isEmpty(secondMenu.childList) ne true}">
+                      <li class="mb-1">
-                        <ul class="nav nav-pills flex-column">
+                       <th:block th:unless="${#lists.isEmpty(secondMenu.childList)}">
+                        <button class="btn btn-toggle align-items-center rounded collapsed"
+                                data-bs-toggle="collapse" aria-expanded="false" th:onclick="location.href='#'"
+                                th:data-bs-target="'#collapse'+${cat2Code.itemCd}" th:text="${cat2Code.itemValue}">
+                        </button>
+                        </th:block>
+                       <th:block th:if="${#lists.isEmpty(secondMenu.childList)}"> 
+                        <a th:href="@{${secondMenu.menuUrl}}" class="bi bi-dash link-dark rounded ps-3 text-decoration-none"
+                                 th:text="${cat2Code.itemValue}"></a>
+                        </th:block>
+                        <div class="collapse ps-3" th:id="|collapse${cat2Code.itemCd}|">
+                          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
                             <li th:each="thirdMenu:${secondMenu.childList}">
                             <th:block th:each="cat3Code:${session.commonCode.get('CAT3')}">
                               <th:block th:if="${cat3Code.itemCd eq thirdMenu.cat3Cd}">
-                                <a class="nav-link link-dark" th:text="${cat3Code.itemValue}" th:href="${thirdMenu.menuUrl}"></a>
+                              <ul class="list-unstyled ps-0">
+                                <li>
+                                <a th:href="@{${thirdMenu.menuUrl}}" class="bi bi-dash link-dark rounded ps-3 text-decoration-none"
+                                 th:text="${cat3Code.itemValue}"></a>
+                                </li>
+                              </ul>
+                              </th:block>
+                              </th:block>
+                            </li>
+                          </ul>
+                        </div>
+                      </li>
+                    </ul>
                     </th:block>
                     </th:block>
                   </li>
@@ -31,9 +59,5 @@
           </li>
         </ul>
       </div>
-          </th:block>
-        </th:block>
-      </li>
-    </ul>
   </div>
 </html>