모바일 - 문의사항 목록 디자인 적용

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

@@ -4192,6 +4192,7 @@ select.form-control {
 @media (max-width: 768px) {
   .search-field {
     width: 100%;
+    margin-top: 10px;
   }
 }
 .search-field input {
@@ -15768,6 +15769,151 @@ input[type=checkbox]:checked + .custom-checkbox {
     font-weight: 700;
     color: #212529;
   }
+  .inquiry-list-container .list-table .list-table-header .header-cell:nth-child(1) {
+    display: none;
+  }
+  .inquiry-list-container .list-table .list-table-header .header-cell:nth-child(2) {
+    flex: 1 !important;
+    min-width: 100px;
+  }
+  .inquiry-list-container .list-table .list-table-header .header-cell:nth-child(3) {
+    width: 50px !important;
+    min-width: 50px;
+    flex: none;
+    justify-content: center;
+  }
+  .inquiry-list-container .list-table .list-table-header .header-cell:nth-child(4) {
+    width: 65px !important;
+    min-width: 65px;
+    flex: none;
+    justify-content: center;
+  }
+  .inquiry-list-container .list-table .list-table-header .header-cell:nth-child(5) {
+    display: none;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(1), .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--number {
+    display: none;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(2), .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--title {
+    flex: 1 !important;
+    min-width: 100px;
+    justify-content: flex-start;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link, .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    overflow: hidden;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link .notice-number, .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link .notice-number {
+    display: none !important;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link > span:not(.notice-number):not(.file-icon), .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link > span:not(.notice-number):not(.file-icon) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link .file-icon, .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link .file-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link .file-icon svg, .inquiry-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link .file-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(3) {
+    width: 50px !important;
+    min-width: 50px;
+    flex: none;
+    justify-content: center;
+    text-align: center;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(4) {
+    width: 65px !important;
+    min-width: 65px;
+    flex: none;
+    justify-content: center;
+    text-align: center;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(4) .inquiry-status-badge {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+  .inquiry-list-container .list-table .list-table-row .row-cell:nth-child(5) {
+    display: none;
+  }
+  .inquiry-list-container .inquiry-actions {
+    order: 4;
+    width: 100%;
+    margin-top: 0;
+  }
+  .inquiry-list-container .inquiry-actions .btn {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .inquiry-list-container .table-controls .search-field {
+    order: 2;
+    width: 100%;
+  }
+  .notice-list-container .list-table .list-table-header .header-cell:nth-child(1) {
+    display: none;
+  }
+  .notice-list-container .list-table .list-table-header .header-cell:nth-child(2) {
+    flex: 1 !important;
+    min-width: 100px;
+  }
+  .notice-list-container .list-table .list-table-header .header-cell:nth-child(3) {
+    width: 70px !important;
+    min-width: 70px;
+    flex: none;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(1), .notice-list-container .list-table .list-table-row .row-cell.row-cell--number {
+    display: none;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(2), .notice-list-container .list-table .list-table-row .row-cell.row-cell--title {
+    flex: 1 !important;
+    min-width: 100px;
+    justify-content: flex-start;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link, .notice-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    overflow: hidden;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link .notice-number, .notice-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link .notice-number {
+    display: none !important;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link > span:not(.notice-number):not(.file-icon), .notice-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link > span:not(.notice-number):not(.file-icon) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link .file-icon, .notice-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link .file-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(2) .notice-title-link .file-icon svg, .notice-list-container .list-table .list-table-row .row-cell.row-cell--title .notice-title-link .file-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .notice-list-container .list-table .list-table-row .row-cell:nth-child(3) {
+    width: 70px !important;
+    min-width: 70px;
+    flex: none;
+    justify-content: center;
+    text-align: center;
+  }
+  .notice-list-container .table-controls .search-field {
+    order: 2;
+    width: 100%;
+  }
   .org-register-container {
     padding: 24px 16px;
   }

src/main/resources/static/sass/components/_forms.scss

@@ -702,6 +702,7 @@ select.form-control {
 
   @include respond-to('sm') {
     width: 100%;
+    margin-top: 10px;
   }
 
   input {

src/main/resources/static/sass/pages/_user-management.scss

@@ -677,6 +677,243 @@
     }
   }
 
+  // -----------------------------------------------------------------------------
+  // Inquiry List Mobile Styles - Q&A 목록 모바일 디자인
+  // 5 columns: NO, 제목, 작성자, 처리상태, 등록일
+  // -----------------------------------------------------------------------------
+  .inquiry-list-container {
+    .list-table {
+      .list-table-header {
+        .header-cell {
+          // NO 컬럼 - 모바일에서 숨김
+          &:nth-child(1) {
+            display: none;
+          }
+
+          // 제목 컬럼 - flex 1
+          &:nth-child(2) {
+            flex: 1 !important;
+            min-width: 100px;
+          }
+
+          // 작성자 컬럼 - 50px, 가운데 정렬
+          &:nth-child(3) {
+            width: 50px !important;
+            min-width: 50px;
+            flex: none;
+            justify-content: center;
+          }
+
+          // 처리상태 컬럼 - 65px, 가운데 정렬
+          &:nth-child(4) {
+            width: 65px !important;
+            min-width: 65px;
+            flex: none;
+            justify-content: center;
+          }
+
+          // 등록일 컬럼 - 모바일에서 숨김
+          &:nth-child(5) {
+            display: none;
+          }
+        }
+      }
+
+      .list-table-row {
+        .row-cell {
+          // NO 컬럼 - 모바일에서 숨김
+          &:nth-child(1),
+          &.row-cell--number {
+            display: none;
+          }
+
+          // 제목 컬럼 - flex 1
+          &:nth-child(2),
+          &.row-cell--title {
+            flex: 1 !important;
+            min-width: 100px;
+            justify-content: flex-start;
+
+            .notice-title-link {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+              overflow: hidden;
+
+              // 모바일에서 번호 프리픽스 숨김 (NO 컬럼 대신 표시되는 것 방지)
+              .notice-number {
+                display: none !important;
+              }
+
+              > span:not(.notice-number):not(.file-icon) {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+
+              .file-icon {
+                flex-shrink: 0;
+                width: 16px;
+                height: 16px;
+
+                svg {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+            }
+          }
+
+          // 작성자 컬럼 - 50px, 가운데 정렬
+          &:nth-child(3) {
+            width: 50px !important;
+            min-width: 50px;
+            flex: none;
+            justify-content: center;
+            text-align: center;
+          }
+
+          // 처리상태 컬럼 - 65px, 가운데 정렬
+          &:nth-child(4) {
+            width: 65px !important;
+            min-width: 65px;
+            flex: none;
+            justify-content: center;
+            text-align: center;
+
+            .inquiry-status-badge {
+              height: 24px;
+              padding: 0 8px;
+              font-size: 12px;
+            }
+          }
+
+          // 등록일 컬럼 - 모바일에서 숨김
+          &:nth-child(5) {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // 질문하기 버튼 영역
+    .inquiry-actions {
+      order: 4;
+      width: 100%;
+      margin-top: 0;
+
+      .btn {
+        width: 100%;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    // 검색 필드 스타일
+    .table-controls {
+      .search-field {
+        order: 2;
+        width: 100%;
+      }
+    }
+  }
+
+  // -----------------------------------------------------------------------------
+  // Notice List Mobile Styles - 공지사항 목록 모바일 디자인
+  // 3 columns: NO, 제목, 등록일
+  // -----------------------------------------------------------------------------
+  .notice-list-container {
+    .list-table {
+      .list-table-header {
+        .header-cell {
+          // NO 컬럼 - 모바일에서 숨김
+          &:nth-child(1) {
+            display: none;
+          }
+
+          // 제목 컬럼 - flex 1, 헤더는 가운데 정렬
+          &:nth-child(2) {
+            flex: 1 !important;
+            min-width: 100px;
+          }
+
+          // 등록일 컬럼 - 70px, 가운데 정렬
+          &:nth-child(3) {
+            width: 70px !important;
+            min-width: 70px;
+            flex: none;
+          }
+        }
+      }
+
+      .list-table-row {
+        .row-cell {
+          // NO 컬럼 - 모바일에서 숨김
+          &:nth-child(1),
+          &.row-cell--number {
+            display: none;
+          }
+
+          // 제목 컬럼 - flex 1, 데이터는 왼쪽 정렬
+          &:nth-child(2),
+          &.row-cell--title {
+            flex: 1 !important;
+            min-width: 100px;
+            justify-content: flex-start;
+
+            .notice-title-link {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+              overflow: hidden;
+
+              // 모바일에서 번호 프리픽스 숨김
+              .notice-number {
+                display: none !important;
+              }
+
+              > span:not(.notice-number):not(.file-icon) {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+
+              .file-icon {
+                flex-shrink: 0;
+                width: 16px;
+                height: 16px;
+
+                svg {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+            }
+          }
+
+          // 등록일 컬럼 - 70px, 가운데 정렬
+          &:nth-child(3) {
+            width: 70px !important;
+            min-width: 70px;
+            flex: none;
+            justify-content: center;
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    // 검색 필드 스타일
+    .table-controls {
+      .search-field {
+        order: 2;
+        width: 100%;
+      }
+    }
+  }
+
   // -----------------------------------------------------------------------------
   // User Detail Page Mobile Styles - Figma Design
   // 이용자 상세 페이지 모바일 디자인

src/main/resources/templates/views/apps/community/mainInquiryList.html

@@ -11,7 +11,7 @@
 </section>
 
 <th:block layout:fragment="contentFragment">
-  <section class="user-management-container">
+  <section class="user-management-container inquiry-list-container">
 
     <!-- Search and Filter Controls -->
     <form name="inquiryForm" th:action="@{/inquiry}" method="get" onsubmit="return false;">
@@ -85,9 +85,6 @@
 
     <!-- Empty State -->
     <div class="user-empty-state" th:if="${inquiries.isEmpty()}">
-      <div class="empty-icon">
-        <img th:src="@{/img/img_nodata.png}" alt="데이터 없음">
-      </div>
       <h3>조회된 Q&A가 없습니다</h3>
       <p>검색 조건을 변경하거나 새로운 질문을 등록해주세요.</p>
     </div>

src/main/resources/templates/views/apps/community/mainNoticeList.html

@@ -11,7 +11,7 @@
 </section>
 
 <th:block layout:fragment="contentFragment">
-  <section class="user-management-container">
+  <section class="user-management-container notice-list-container">
 
     <!-- Search and Filter Controls -->
     <form name="noticeForm" th:action="@{/portalnotice}" method="get" onsubmit="return false;">