From e689cdc1c5894dbb369d2bb5ed79ddc0f96ff3bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B0=95=EC=84=9D=20=EC=B5=9C?= <cks0504_p@daum.net>
Date: Wed, 8 Dec 2021 10:52:20 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/css/common.css      | 18 +++-
 .../templates/fragments/leftMenu.html         | 91 +++++++++++--------
 .../resources/templates/layout/layout.html    |  2 +-
 3 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
index 434da4c..ae5afca 100644
--- a/src/main/resources/static/css/common.css
+++ b/src/main/resources/static/css/common.css
@@ -1,4 +1,3 @@
-
 .form-signin{
   width: 100%;
   max-width: 330px;
@@ -9,4 +8,21 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+.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.7.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.7.1/caret-down-fill.svg");
+  /*왜 안돌까?*/
+  /*transform: rotate(90deg);*/
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/leftMenu.html b/src/main/resources/templates/fragments/leftMenu.html
index a0d0521..00fd03e 100644
--- a/src/main/resources/templates/fragments/leftMenu.html
+++ b/src/main/resources/templates/fragments/leftMenu.html
@@ -19,51 +19,68 @@
       <input type="button" class="btn btn-outline-success" value="자료 등록"/>
     </div>
     <div sec:authorize="isAuthenticated()">
-      <div class="flex-shrink-0 p-3 bg-white">
+      <div class="flex-shrink-0 pe-3 py-3 bg-transparent">
         <ul class="list-unstyled ps-0">
+        <th:block th:each="depth1:${session.categoryList}">
           <li class="mb-1">
-            <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
-              Home
+            <button class="btn btn-toggle align-items-center rounded collapsed"
+                   data-bs-toggle="collapse" aria-expanded="false" th:data-bs-target="'#collapse'+${depth1.categorySeq}"
+                   th:text="${depth1.categoryName}">
             </button>
-            <div class="collapse" id="home-collapse" style="">
-              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                <li><a href="#" class="link-dark rounded">Overview</a></li>
-                <li><a href="#" class="link-dark rounded">Updates</a></li>
-                <li><a href="#" class="link-dark rounded">Reports</a></li>
-              </ul>
-            </div>
-          </li>
-          <li class="mb-1">
-            <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
-              Dashboard
-            </button>
-            <div class="collapse" id="dashboard-collapse" style="">
-              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                <li><a href="#" class="link-dark rounded">Overview</a></li>
-                <li><a href="#" class="link-dark rounded">Weekly</a></li>
-                <li><a href="#" class="link-dark rounded">Monthly</a></li>
-                <li><a href="#" class="link-dark rounded">Annually</a></li>
-              </ul>
-            </div>
-          </li>
-          <li class="mb-1">
-            <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
-              Orders
-            </button>
-            <div class="collapse" id="orders-collapse" style="">
-              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                <li><a href="#" class="link-dark rounded">New</a></li>
-                <li><a href="#" class="link-dark rounded">Processed</a></li>
-                <li><a href="#" class="link-dark rounded">Shipped</a></li>
-                <li><a href="#" class="link-dark rounded">Returned</a></li>
+            <div class="collapse ps-3" th:id="|collapse${depth1.categorySeq}|">
+              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
+                <th:block th:each="depth2:${depth1.childCategoryList}">
+                  <li>
+                    <ul class="list-unstyled ps-0">
+                      <li class="mb-1">
+                        <button class="btn btn-toggle align-items-center rounded collapsed"
+                               data-bs-toggle="collapse" aria-expanded="false"
+                               th:data-bs-target="'#collapse'+${depth2.categorySeq}" th:text="${depth2.categoryName}">
+                        </button>
+                        <div class="collapse ps-3" th:id="|collapse${depth2.categorySeq}|">
+                          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
+                            <th:block th:each="depth3:${depth2.childCategoryList}">
+                            <li>
+                              <ul class="list-unstyled ps-0">
+                                <li class="mb-1">
+                                  <button class="btn btn-toggle align-items-center rounded collapsed"
+                                         data-bs-toggle="collapse" aria-expanded="false"
+                                         th:data-bs-target="'#collapse'+${depth3.categorySeq}" th:text="${depth3.categoryName}">
+                                  </button>
+                                  <div class="collapse ps-3" th:id="|collapse${depth3.categorySeq}|">
+                                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
+                                      <th:block th:each="depth4:${depth3.childCategoryList}">
+                                        <li><a href="#" class="bi bi-dash link-dark rounded ps-3 text-decoration-none" th:text="${depth4.categoryName}"></a></li>
+                                      </th:block>
+                                      <th:block th:if="${depth3.childCategoryList.size==0}">
+                                        <li>등록된 소분류가 없습니다.</li>
+                                      </th:block>
+                                    </ul>
+                                  </div>
+                                </li>
+                              </ul>
+                            </li>
+                            </th:block>
+                            <th:block th:if="${depth2.childCategoryList.size==0}">
+                              <li>등록된 중분류가 없습니다.</li>
+                            </th:block>
+                          </ul>
+                        </div>
+                      </li>
+                    </ul>
+                  </li>
+                </th:block>
+                <th:block th:if="${depth1.childCategoryList.size==0}">
+                  <li>등록된 연도가 없습니다.</li>
+                </th:block>
+                <!--<li><a href="#" class="link-dark rounded">Shipped</a></li>
+                <li><a href="#" class="link-dark rounded">Returned</a></li>-->
               </ul>
             </div>
           </li>
+        </th:block>
         </ul>
       </div>
-      <th:block th:each="category:${session.categoryList}">
-
-      </th:block>
     </div>
   </div>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/layout/layout.html b/src/main/resources/templates/layout/layout.html
index 493bf7f..6277d3c 100644
--- a/src/main/resources/templates/layout/layout.html
+++ b/src/main/resources/templates/layout/layout.html
@@ -9,7 +9,7 @@
 
     <!--bootstrap-->
     <link rel="stylesheet" th:href="@{/vendor/bootstrap-5.1.3-dist/css/bootstrap.min.css}">
-    <link rel="stylesheet" th:href="@{/img/bootstrap-icons-1.7.1/bootstrap-icons.scss}">
+    <link rel="stylesheet" th:href="@{/img/bootstrap-icons-1.7.1/bootstrap-icons.css}">
     <!--bootstrap-datepicker-->
     <link rel="stylesheet" th:href="@{/vendor/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css}">