diff --git a/src/main/resources/static/sass/components/_forms.scss b/src/main/resources/static/sass/components/_forms.scss index 81bd893..9e33df8 100644 --- a/src/main/resources/static/sass/components/_forms.scss +++ b/src/main/resources/static/sass/components/_forms.scss @@ -684,3 +684,70 @@ select.form-control { .form-actions-center { @extend .form-actions; } + +// ----------------------------------------------------------------------------- +// Search Field - Figma Design (node 1041:1670) +// Rounded search input with icon button +// ----------------------------------------------------------------------------- +.search-field { + position: relative; + display: flex; + align-items: center; + width: 340px; + height: 44px; + background: $white; + border: 1px solid #dadada; + border-radius: 12px; + overflow: hidden; + + @include respond-to('sm') { + width: 100%; + } + + input { + flex: 1; + height: 100%; + padding: 0 44px 0 16px; + border: none; + background: transparent; + font-family: $font-family-primary; + font-size: 14px; + font-weight: $font-weight-regular; + color: $text-dark; + outline: none; + + &::placeholder { + color: #8c959f; + } + } + + .search-field-btn { + position: absolute; + right: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 100%; + background: transparent; + border: none; + cursor: pointer; + color: #515961; + transition: $transition-fast; + + &:hover { + color: $primary-blue; + } + + svg { + width: 20px; + height: 20px; + } + } + + &:focus-within { + border-color: $primary-blue; + box-shadow: 0 0 0 2px rgba($primary-blue, 0.1); + } +} diff --git a/src/main/resources/static/sass/components/_tables.scss b/src/main/resources/static/sass/components/_tables.scss index bc8d09f..fe0abb1 100644 --- a/src/main/resources/static/sass/components/_tables.scss +++ b/src/main/resources/static/sass/components/_tables.scss @@ -366,6 +366,61 @@ text-align: left; } } + + // Title cell with inline file icon + &--title { + justify-content: flex-start; + + @media (max-width: $breakpoint-md) { + &::before { + display: none; // Hide data-label for title on mobile + } + } + + .notice-title-link { + display: inline-flex; + align-items: center; + gap: $spacing-sm; + color: inherit; + text-decoration: none; + transition: $transition-base; + + &:hover { + color: $primary-blue; + } + + // Mobile number prefix [1] [2] etc + .notice-number { + display: none; + font-weight: $font-weight-medium; + color: $text-gray; + flex-shrink: 0; + + @media (max-width: $breakpoint-md) { + display: inline; + } + } + } + + .file-icon { + display: inline-flex; + align-items: center; + flex-shrink: 0; + color: #212529; + + svg { + width: 24px; + height: 24px; + } + } + } + + // Number cell for notice list + &--number { + @media (max-width: $breakpoint-md) { + display: none; // Hide separate number cell on mobile + } + } } // Action buttons container diff --git a/src/main/resources/templates/views/apps/community/mainNoticeList.html b/src/main/resources/templates/views/apps/community/mainNoticeList.html index f476e1e..74ad540 100644 --- a/src/main/resources/templates/views/apps/community/mainNoticeList.html +++ b/src/main/resources/templates/views/apps/community/mainNoticeList.html @@ -1,85 +1,87 @@ + xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}"> - - -
-
- - -
-

공지사항

-

광주은행 API Portal의 새로운 소식과 공지사항을 확인하세요.

-
- - -
- - -
-
- 총 0건 -
- -
- - -
-
-
- - -
-
- -
-
NO
-
제목
-
등록일
-
- - -
-
1
-
- - 공지사항 제목 - - 첨부파일 - - -
-
2025.01.01
-
-
-
- - -
-
- 데이터 없음 -
-

조회된 데이터가 없습니다.

-
- - - - -
+
+
+ 타이틀 배경 +

공지사항

+
+ + +
+ + +
+ + +
+

+ 총 0건 +

+ +
+ + +
+
+
+ + +
+ +
+
NO
+
제목
+
등록일
+
+ + +
+
+
1
+
+ + [1] + 공지사항 제목 + + + + + + +
+
2025.01.01
+
+
+
+ + +
+

조회된 공지사항이 없습니다

+
+ + + + +
@@ -105,3 +107,4 @@ }); +