feat: Fix header and navbar position in card-manage

kakao-tech-campus-2nd-step3 · Nov 15, 2024 · da4c06b · da4c06b
1 parent 1fdfe4a
commit da4c06b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/src/main/resources/static/css/card/card-manage.css b/src/main/resources/static/css/card/card-manage.css
@@ -1,3 +1,10 @@
+.container {
+    height: 100dvh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
 .header {
     display: flex;
     justify-content: center;
@@ -34,6 +41,7 @@
 
 /* 명함 리스트 섹션 */
 .card-list-section {
+    overflow-y: auto;
     padding: 1rem;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

diff --git a/src/main/resources/templates/card-manage.html b/src/main/resources/templates/card-manage.html
@@ -19,25 +19,27 @@
 </head>
 <body>
 
-<!-- 상단 헤더 영역 -->
-<div class="header">
-    <span class="material-symbols-outlined" id="backButton" onclick="location.href='/mypage'">arrow_back_ios</span>
-    <h2 class="title">명함 관리</h2>
+<div class="container">
+    <!-- 상단 헤더 영역 -->
+    <div class="header">
+        <span class="material-symbols-outlined" id="backButton" onclick="location.href='/mypage'">arrow_back_ios</span>
+        <h2 class="title">명함 관리</h2>
+    </div>
+
+    <!-- 명함 추가 버튼 -->
+    <div class="add-card-btn-container">
+        <button class="add-card-button" onclick="location.href='/cards/create-view'">명함 추가</button>
+    </div>
+
+    <!-- 명함 리스트 표시 영역 -->
+    <div class="card-list-section" id="card-list-section">
+        <!-- 명함 아이템이 동적으로 추가 -->
+    </div>
+
+    <!-- 하단 네비게이션 바 -->
+    <div th:replace="nav-bar :: navBar"></div>
 </div>
 
-<!-- 명함 추가 버튼 -->
-<div class="add-card-btn-container">
-    <button class="add-card-button" onclick="location.href='/cards/create-view'">명함 추가</button>
-</div>
-
-<!-- 명함 리스트 표시 영역 -->
-<div class="card-list-section" id="card-list-section">
-    <!-- 명함 아이템이 동적으로 추가 -->
-</div>
-
-<!-- 하단 네비게이션 바 -->
-<div th:replace="nav-bar :: navBar"></div>
-
 <!-- Toast 알림 -->
 <div id="toast" class="toast"></div>