djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 10 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
현성필
2025-12-12 15:18:26 +09:00
parent f9b9a2ee43
commit b5670aab62
8 changed files with 389 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+146
View File
@@ -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/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/components/_forms.scss
+1
View File
@@ -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
+237
View File
@@ -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
+1 -4
View File
@@ -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
+1 -1
View File
@@ -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;">