diff --git a/src/main/resources/static/sass/pages/_inquiry.scss b/src/main/resources/static/sass/pages/_inquiry.scss index 75dc722..9d77b6b 100644 --- a/src/main/resources/static/sass/pages/_inquiry.scss +++ b/src/main/resources/static/sass/pages/_inquiry.scss @@ -303,7 +303,6 @@ } .inquiry-detail-container { - max-width: 960px; margin: 0 auto; } @@ -578,7 +577,6 @@ } .inquiry-form-container { - max-width: 960px; margin: 0 auto; } diff --git a/src/main/resources/static/sass/pages/_notice.scss b/src/main/resources/static/sass/pages/_notice.scss index 939133f..613f82f 100644 --- a/src/main/resources/static/sass/pages/_notice.scss +++ b/src/main/resources/static/sass/pages/_notice.scss @@ -576,3 +576,463 @@ } } } + +// ----------------------------------------------------------------------------- +// Inquiry Detail Page - Based on Notice Detail Design +// ----------------------------------------------------------------------------- +.inquiry-detail-container { + max-width: 1228px; + margin: 0 auto; + padding: $spacing-3xl $spacing-lg; + + @media (max-width: $breakpoint-md) { + padding: $spacing-2xl $spacing-md; + } +} + +// Inquiry Detail Header +.inquiry-detail-header { + padding-bottom: $spacing-md; + border-bottom: 1px solid #212529; + margin-bottom: $spacing-xl; +} + +.inquiry-header-top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: $spacing-md; + + @media (max-width: $breakpoint-md) { + flex-direction: column; + align-items: flex-start; + gap: $spacing-sm; + } +} + +.inquiry-detail-title { + font-size: 24px; + font-weight: $font-weight-bold; + color: #212529; + line-height: 1.4; + margin: 0; + + @media (max-width: $breakpoint-md) { + font-size: 20px; + } +} + +.inquiry-detail-date { + font-size: 18px; + font-weight: $font-weight-regular; + color: #515151; + + @media (max-width: $breakpoint-md) { + font-size: 16px; + } +} + +// Inquiry Attachment Section +.inquiry-detail-attachment { + margin-bottom: $spacing-lg; + + .attachment-list { + display: flex; + flex-direction: column; + gap: $spacing-sm; + } + + .attachment-item { + display: flex; + align-items: center; + } +} + +.inquiry-attachment-link { + display: inline-flex; + align-items: center; + gap: $spacing-xs; + color: #515151; + font-size: 18px; + text-decoration: none; + transition: $transition-base; + + @media (max-width: $breakpoint-md) { + font-size: 14px; + } + + &:hover { + color: $primary-blue; + } + + svg { + flex-shrink: 0; + color: #515151; + } + + &:hover svg { + color: $primary-blue; + } + + .attachment-label { + margin-right: $spacing-md; + } + + .attachment-filename { + color: #515151; + } +} + +// Inquiry Content Section +.inquiry-detail-content { + margin-bottom: $spacing-2xl; +} + +.inquiry-content-body { + background: #F6F9FB; + border-radius: 20px; + padding: $spacing-2xl; + min-height: 200px; + font-size: $font-size-base; + color: $text-dark; + line-height: $line-height-loose; + white-space: pre-line; + + @media (max-width: $breakpoint-md) { + padding: $spacing-lg; + min-height: 150px; + border-radius: 12px; + } + + p { + margin-bottom: $spacing-md; + + &:last-child { + margin-bottom: 0; + } + } + + img { + max-width: 100%; + height: auto; + border-radius: $border-radius-md; + margin: $spacing-lg 0; + } + + a { + color: $primary-blue; + text-decoration: underline; + + &:hover { + color: $secondary-blue; + } + } +} + +// Admin Response Section +.inquiry-response-section { + margin-bottom: $spacing-2xl; +} + +.inquiry-response-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: $spacing-md; + border-bottom: 1px solid #DADADA; + margin-bottom: $spacing-lg; + + @media (max-width: $breakpoint-md) { + flex-direction: column; + align-items: flex-start; + gap: $spacing-sm; + } +} + +.response-label { + font-size: 20px; + font-weight: $font-weight-bold; + color: #0049b4; + + @media (max-width: $breakpoint-md) { + font-size: 18px; + } +} + +.response-date { + font-size: 18px; + font-weight: $font-weight-regular; + color: #515151; + + @media (max-width: $breakpoint-md) { + font-size: 16px; + } +} + +.inquiry-response-body { + background: #ffffff; + border: 1px solid #E5E7EB; + border-radius: 20px; + padding: $spacing-2xl; + min-height: 150px; + font-size: $font-size-base; + color: $text-dark; + line-height: $line-height-loose; + white-space: pre-line; + + @media (max-width: $breakpoint-md) { + padding: $spacing-lg; + min-height: 100px; + border-radius: 12px; + } +} + +// Inquiry Detail Actions +.inquiry-detail-actions { + display: flex; + justify-content: space-between; + align-items: center; + gap: $spacing-md; + + @media (max-width: $breakpoint-md) { + flex-direction: column-reverse; + gap: $spacing-lg; + } + + .actions-left { + display: flex; + gap: $spacing-md; + } + + .actions-right { + display: flex; + gap: $spacing-md; + } +} + +// Inquiry Action Buttons +.btn-inquiry-list { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 60px; + background: #E5E7EB; + border: none; + border-radius: 12px; + font-family: $font-family-primary; + font-size: 18px; + font-weight: $font-weight-bold; + color: #5F666C; + cursor: pointer; + transition: $transition-base; + + @media (max-width: $breakpoint-md) { + width: 160px; + height: 50px; + font-size: 16px; + } + + &:hover { + background: darken(#E5E7EB, 5%); + } + + &:active { + transform: scale(0.98); + } +} + +.btn-inquiry-edit { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 60px; + background: #0049b4; + border: none; + border-radius: 12px; + font-family: $font-family-primary; + font-size: 18px; + font-weight: $font-weight-bold; + color: $white; + cursor: pointer; + transition: $transition-base; + + @media (max-width: $breakpoint-md) { + width: 100px; + height: 50px; + font-size: 16px; + } + + &:hover { + background: darken(#0049b4, 5%); + } + + &:active { + transform: scale(0.98); + } +} + +.btn-inquiry-delete { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 60px; + background: #DC3545; + border: none; + border-radius: 12px; + font-family: $font-family-primary; + font-size: 18px; + font-weight: $font-weight-bold; + color: $white; + cursor: pointer; + transition: $transition-base; + + @media (max-width: $breakpoint-md) { + width: 100px; + height: 50px; + font-size: 16px; + } + + &:hover { + background: darken(#DC3545, 5%); + } + + &:active { + transform: scale(0.98); + } +} + +// ----------------------------------------------------------------------------- +// Inquiry Form Page - Based on apiKeyRegisterStep1 and mypage designs +// ----------------------------------------------------------------------------- +.inquiry-form-container { + max-width: 1228px; + margin: 0 auto; + padding: $spacing-3xl $spacing-lg; + + @media (max-width: $breakpoint-md) { + padding: $spacing-2xl $spacing-md; + } +} + +// File Upload Inline - Figma Design (node 1029-1507) +// Layout: [텍스트필드] [파일첨부 버튼] +.file-upload-inline { + display: flex; + align-items: center; + gap: 20px; + + @media (max-width: $breakpoint-md) { + flex-direction: column; + align-items: stretch; + gap: $spacing-md; + } + + // 텍스트필드 영역 - 파일명 표시 + .file-input-display { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + height: 60px; + padding: 0 20px; + background: $white; + border: 1px solid #DADADA; + border-radius: 12px; + min-width: 0; + + &.has-file { + border-color: #3ba4ed; + } + } + + .file-display-text { + flex: 1; + font-family: $font-family-primary; + font-size: $font-size-base; + color: #94A3B8; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.has-file { + color: $text-dark; + } + } + + // 파일 삭제 버튼 (인라인) + .btn-remove-file-inline { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + background: #DC3545; + border: none; + border-radius: 50%; + color: $white; + cursor: pointer; + transition: $transition-base; + flex-shrink: 0; + margin-left: $spacing-sm; + + &:hover { + background: darken(#DC3545, 10%); + } + + svg { + width: 12px; + height: 12px; + } + } + + // 파일첨부 버튼 - Figma 디자인 (#3ba4ed) + .btn-file-attach { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + width: 172px; + height: 60px; + padding: 10px; + background: #3ba4ed; + border: none; + border-radius: 12px; + font-family: $font-family-primary; + font-size: 18px; + font-weight: $font-weight-bold; + color: $white; + cursor: pointer; + transition: $transition-base; + white-space: nowrap; + flex-shrink: 0; + + @media (max-width: $breakpoint-md) { + width: 100%; + } + + &:hover { + background: darken(#3ba4ed, 8%); + } + + svg { + width: 22px; + height: 22px; + flex-shrink: 0; + } + } +} + +// 파일 업로드 힌트 텍스트 +.file-upload-hint { + margin-top: $spacing-sm; + font-size: $font-size-sm; + color: #94A3B8; + line-height: $line-height-normal; + + strong { + color: $text-dark; + } +} diff --git a/src/main/resources/static/sass/pages/_user-management.scss b/src/main/resources/static/sass/pages/_user-management.scss index 38b461a..7d159c1 100644 --- a/src/main/resources/static/sass/pages/_user-management.scss +++ b/src/main/resources/static/sass/pages/_user-management.scss @@ -344,3 +344,36 @@ flex-direction: column; } } + +// ----------------------------------------------------------------------------- +// Inquiry Status Badge - Figma Design (node 998-2056, 998-2006) +// ----------------------------------------------------------------------------- +.inquiry-status-badge { + display: inline-flex; + align-items: center; + justify-content: center; + height: 30px; + padding: 0 14px; + border-radius: 50px; + font-size: 15px; + font-weight: $font-weight-bold; + color: $white; + white-space: nowrap; + + // 답변완료 - 파란색 배경 + &--completed { + background-color: #0049b4; + } + + // 답변대기 - 회색 배경 + &--pending { + background-color: #8c959f; + } +} + +// Inquiry Actions +.inquiry-actions { + display: flex; + justify-content: center; + margin-top: $spacing-2xl; +} diff --git a/src/main/resources/templates/views/apps/community/mainInquiryDetail.html b/src/main/resources/templates/views/apps/community/mainInquiryDetail.html index be10835..80554e8 100644 --- a/src/main/resources/templates/views/apps/community/mainInquiryDetail.html +++ b/src/main/resources/templates/views/apps/community/mainInquiryDetail.html @@ -1,111 +1,81 @@ - + + xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}"> - - - - -
-
- - -
-

Q&A

-

문의 내용을 확인하세요.

-
- - -
-
-
- - 문의중 - -
-

질문 제목

-
-
- - 등록일 - 2025.01.01 10:00 -
-
- - 작성자 - 홍** -
-
-
- - -
-
- -
-
- - - [[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]] - -
-
- - -
- -
-
- - -
-
-
- - 관리자 답변 -
-
- 관리자 - • - 2025.01.02 14:30 -
-
-
- -
-
- - -
-
- - - 목록 - -
-
-
- - - 수정 - - - - 삭제 - -
-
- -
+
+
+ 타이틀 배경 +

Q&A

+
+ +
+
+ + +
+
+ + 답변대기 + + 2025.11.01 +
+

질문 제목

+
+ + +
+
+
+ + + + + 첨부파일 + [[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]] + +
+
+
+ + +
+
+ 문의 내용이 여기에 표시됩니다. +
+
+ + +
+
+ 관리자 답변 + 2025.11.02 +
+
+ 답변 내용이 여기에 표시됩니다. +
+
+ + +
+
+ +
+
+ + + +
+
+ +
+
- + diff --git a/src/main/resources/templates/views/apps/community/mainInquiryForm.html b/src/main/resources/templates/views/apps/community/mainInquiryForm.html index d80f3ed..5a63727 100644 --- a/src/main/resources/templates/views/apps/community/mainInquiryForm.html +++ b/src/main/resources/templates/views/apps/community/mainInquiryForm.html @@ -1,115 +1,120 @@ - + + xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}"> +
+
+ 타이틀 배경 +

Q&A

+
+
+
- -
-
+ +
+

질문하기

+ 궁금하신 사항을 작성해 주세요. +
- -
-

Q&A 질문하기

-

궁금하신 사항을 작성해 주세요.

-
+ +
+
+ - -
- - - - -
- -
- -
+ +
+
+ 제목 + 필수
- - -
- -
- -
+
+
+
- -
- -
-
- - - - -
-
- - -

- 첨부파일은 8MB 이내로 등록해 주세요. -

-

- - 문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png) -

-
+ + + +
+
+

+ 첨부파일은 8MB 이내로 등록해 주세요. +

+

+ + 문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png) +

+
- -
- - - 취소 - - -
- -
- +
-
+ +
+ + +
+ +
@@ -117,25 +122,57 @@ - + + $(function () { + fn_init(); + }); +