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:47:59 +09:00
parent b5670aab62
commit ee4404003a
7 changed files with 246 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+108 -15
View File
@@ -12864,9 +12864,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-notice-list {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-notice-list:hover {
@@ -13282,6 +13285,14 @@ input[type=checkbox]:checked + .custom-checkbox {
border-radius: 12px;
}
}
@media (max-width: 768px) {
.inquiry-content-body {
background: transparent;
border-radius: 0;
padding: 0;
min-height: auto;
}
}
.inquiry-content-body p {
margin-bottom: 16px;
}
@@ -13371,18 +13382,29 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.inquiry-detail-actions {
flex-direction: column-reverse;
gap: 24px;
flex-direction: row;
justify-content: center;
gap: 8px;
}
}
.inquiry-detail-actions .actions-left {
display: flex;
gap: 16px;
}
@media (max-width: 1024px) {
.inquiry-detail-actions .actions-left {
gap: 8px;
}
}
.inquiry-detail-actions .actions-right {
display: flex;
gap: 16px;
}
@media (max-width: 1024px) {
.inquiry-detail-actions .actions-right {
gap: 8px;
}
}
.btn-inquiry-list {
display: flex;
@@ -13402,9 +13424,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-inquiry-list {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-inquiry-list:hover {
@@ -13432,9 +13457,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-inquiry-edit {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-inquiry-edit:hover {
@@ -13462,9 +13490,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-inquiry-delete {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-inquiry-delete:hover {
@@ -13590,6 +13621,68 @@ input[type=checkbox]:checked + .custom-checkbox {
color: #1A1A2E;
}
@media (max-width: 768px) {
.inquiry-form-container {
padding: 24px 16px;
}
.inquiry-form-container .register-title-bar {
background: transparent;
padding: 16px 0;
margin-bottom: 0;
}
.inquiry-form-container .register-form-container {
box-shadow: none !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
.inquiry-form-container .form-row {
padding: 16px 0;
}
.inquiry-form-container .form-actions, .inquiry-form-container .form-actions-center {
display: flex;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
padding: 32px 0 0;
margin-top: 16px;
}
.inquiry-form-container .form-actions .btn, .inquiry-form-container .form-actions-center .btn {
width: auto !important;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
flex: 0 0 auto;
}
.inquiry-form-container .form-actions .btn-secondary, .inquiry-form-container .form-actions-center .btn-secondary {
background: #E5E7EB;
color: #5F666C;
border: none;
}
.inquiry-form-container .form-actions .btn-secondary:hover, .inquiry-form-container .form-actions-center .btn-secondary:hover {
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
}
.inquiry-form-container .form-actions .btn-primary, .inquiry-form-container .form-actions-center .btn-primary {
background: #0049b4;
color: #FFFFFF;
border: none;
}
.inquiry-form-container .form-actions .btn-primary:hover, .inquiry-form-container .form-actions-center .btn-primary:hover {
background: rgb(0, 62.6583333333, 154.5);
}
.inquiry-form-container .file-upload-inline .file-input-display {
min-height: 50px;
padding: 0 16px;
}
.inquiry-form-container .file-upload-inline .btn-file-attach {
height: 50px;
font-size: 15px;
}
}
.inquiry-page {
min-height: calc(100vh - 140px);
background: #F8FAFC;
@@ -14049,7 +14142,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.inquiry-detail-actions {
flex-direction: column;
flex-direction: row;
align-items: stretch;
}
}
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/pages/_inquiry.scss
+1 -1
View File
@@ -504,7 +504,7 @@
flex-wrap: wrap;
@media (max-width: $breakpoint-sm) {
flex-direction: column;
flex-direction: row;
align-items: stretch;
}
src/main/resources/static/sass/pages/_notice.scss
+126 -14
View File
@@ -246,9 +246,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -709,6 +712,14 @@
border-radius: 12px;
}
// 모바일에서 flat 스타일
@media (max-width: $breakpoint-sm) {
background: transparent;
border-radius: 0;
padding: 0;
min-height: auto;
}
p {
margin-bottom: $spacing-md;
@@ -800,18 +811,27 @@
gap: $spacing-md;
@media (max-width: $breakpoint-md) {
flex-direction: column-reverse;
gap: $spacing-lg;
flex-direction: row;
justify-content: center;
gap: $spacing-sm;
}
.actions-left {
display: flex;
gap: $spacing-md;
@media (max-width: $breakpoint-md) {
gap: $spacing-sm;
}
}
.actions-right {
display: flex;
gap: $spacing-md;
@media (max-width: $breakpoint-md) {
gap: $spacing-sm;
}
}
}
@@ -833,9 +853,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -864,9 +887,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -895,9 +921,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -1041,3 +1070,86 @@
color: $text-dark;
}
}
// -----------------------------------------------------------------------------
// Inquiry Form Page - Mobile Flat Design
// -----------------------------------------------------------------------------
.inquiry-form-container {
@media (max-width: $breakpoint-sm) {
padding: $spacing-lg $spacing-md;
// Title Bar - Flat 디자인
.register-title-bar {
background: transparent;
padding: $spacing-md 0;
margin-bottom: 0;
}
// Form container - Flat 디자인 (그림자, 테두리 제거)
.register-form-container {
box-shadow: none !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
// Form Row - 모바일 레이아웃
.form-row {
padding: $spacing-md 0;
}
// Form actions - mainInquiryDetail.html 버튼 스타일 참고
.form-actions {
display: flex;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: $spacing-sm !important;
padding: $spacing-xl 0 0;
margin-top: $spacing-md;
.btn {
width: auto !important;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
flex: 0 0 auto;
}
.btn-secondary {
background: #E5E7EB;
color: #5F666C;
border: none;
&:hover {
background: darken(#E5E7EB, 5%);
}
}
.btn-primary {
background: #0049b4;
color: $white;
border: none;
&:hover {
background: darken(#0049b4, 5%);
}
}
}
// File upload - 모바일 조정 (form-input과 동일한 높이 유지)
.file-upload-inline {
.file-input-display {
min-height: 50px;
padding: 0 $spacing-md;
}
.btn-file-attach {
height: 50px;
font-size: 15px;
}
}
}
}
src/main/resources/templates/views/apps/community/mainInquiryForm.html
+8 -2
View File
@@ -79,8 +79,14 @@
</button>
</div>
<button type="button" class="btn-file-attach" onclick="document.getElementById('file').click()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z" fill="currentColor"/>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="20" height="20" fill="url(#pattern0_1161_9889)"/>
<defs>
<pattern id="pattern0_1161_9889" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1161_9889" transform="scale(0.0217391)"/>
</pattern>
<image id="image0_1161_9889" width="46" height="46" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAACXBIWXMAABcSAAAXEgFnn9JSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeRJREFUeNrsme1tgzAQhiHqAGxQRiATlGxAJ6i7QTpByQTtBrBBRiCdADYInaB0AvcsnaUTNR82GPzDr2Q5ODh6cO7LJgwWiHMeQZfgZReGYRO4LAEMreD/dYeWuQodQ/vh4ypcBK8JYC4eBMczXHGpzCXojICdB0xIwtcugX9IWx65h8kns8nyMAOWQRfjZUbG84Epj+QeYevfA/eJKPRpK3LU3K4KG+AV30ZG8OEAtEgq1Llu0L5m/qYwFYafS4WpvBDTkyrBbF7XWG1GVqTWnJuSuanGP6m18oeBcboi3UZBi+nAH3aOsCKqNCbwe4P/QjuZwB8MQiTDqnANPUE7o/Mbmw0FzInTVGT8OuVIC5xTJbaWqUQK59WVjrPHxinfgi69RegrGfluP3DcJT2PZWzoUtejirE8uAe3BN5ORIR+CGtcAZelbaJKDphR3yU0RJDOCXAAKckqFphhI5kxoavIil/22BQrU77cZNg8V+mVBPlqzokJ5KgojGQ6f1tlN2MjcwKYcNITHgbJ1sL4bSurWJTy8QFaH8c9uAf34B7cg3twD74xOK0/4hWP3OYonlUnDdTEYvK9V642G0FT8KP222ryhm0vVUt2QnvBX6fMM5wBHwfLDjl11WKdP6o/AQYA6KS7NOFJR28AAAAASUVORK5CYII="/>
</defs>
</svg>
파일첨부
</button>