From e8f9212a13dc833ad9806d8f88598066c8888b9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= Date: Wed, 26 Nov 2025 15:46:31 +0900 Subject: [PATCH] =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=A6=AC?= =?UTF-8?q?=EC=86=8C=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/static/img/checkbox-checked.svg | 4 + .../static/img/checkbox-unchecked.svg | 3 + .../sass/components/_page-title-banner.scss | 62 ++++ .../static/sass/pages/_partnership.scss | 296 ++++++++++++++++++ 4 files changed, 365 insertions(+) create mode 100644 src/main/resources/static/img/checkbox-checked.svg create mode 100644 src/main/resources/static/img/checkbox-unchecked.svg create mode 100644 src/main/resources/static/sass/components/_page-title-banner.scss create mode 100644 src/main/resources/static/sass/pages/_partnership.scss diff --git a/src/main/resources/static/img/checkbox-checked.svg b/src/main/resources/static/img/checkbox-checked.svg new file mode 100644 index 0000000..47ef9ad --- /dev/null +++ b/src/main/resources/static/img/checkbox-checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/main/resources/static/img/checkbox-unchecked.svg b/src/main/resources/static/img/checkbox-unchecked.svg new file mode 100644 index 0000000..28a2e74 --- /dev/null +++ b/src/main/resources/static/img/checkbox-unchecked.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/main/resources/static/sass/components/_page-title-banner.scss b/src/main/resources/static/sass/components/_page-title-banner.scss new file mode 100644 index 0000000..f4b742d --- /dev/null +++ b/src/main/resources/static/sass/components/_page-title-banner.scss @@ -0,0 +1,62 @@ +// Page Title Banner Component +// Reusable banner for page titles across the portal + +@import '../abstracts/variables'; +@import '../abstracts/mixins'; + +.page-title-banner { + background: #E9F8FF; + position: relative; + width: 100%; + height: 220px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E"); + background-size: 50px 50px; + opacity: 0.5; + } + + .title-image { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 220px; + width: auto; + z-index: 1; + } + + h1 { + position: relative; + font-size: $font-size-3xl; + font-weight: $font-weight-bold; + color: $text-dark; + margin: 0; + z-index: 2; + letter-spacing: -0.5px; + } + + // Responsive + @include respond-to('sm') { + height: 120px; + margin-bottom: $spacing-xl; + + .title-image { + height: 120px; + } + + h1 { + font-size: $font-size-xl; + } + } +} diff --git a/src/main/resources/static/sass/pages/_partnership.scss b/src/main/resources/static/sass/pages/_partnership.scss new file mode 100644 index 0000000..9758125 --- /dev/null +++ b/src/main/resources/static/sass/pages/_partnership.scss @@ -0,0 +1,296 @@ +// ----------------------------------------------------------------------------- +// Partnership Form Page - Modern Design +// ----------------------------------------------------------------------------- + +// Page Header +.page-header { + margin-bottom: $spacing-4xl; + text-align: center; + + @include respond-to('sm') { + margin-bottom: $spacing-3xl; + } + + .page-header-content { + max-width: 800px; + margin: 0 auto; + } + + .page-title { + font-size: $font-size-3xl; + font-weight: $font-weight-bold; + color: $text-dark; + margin-bottom: $spacing-md; + display: flex; + align-items: center; + justify-content: center; + gap: $spacing-md; + + @include respond-to('sm') { + font-size: $font-size-2xl; + flex-direction: column; + gap: $spacing-sm; + } + + i { + color: $primary-blue; + font-size: $font-size-3xl; + + @include respond-to('sm') { + font-size: $font-size-2xl; + } + } + } + + .page-description { + font-size: $font-size-lg; + color: $text-gray; + line-height: $line-height-normal; + + @include respond-to('sm') { + font-size: $font-size-base; + } + + .highlight { + color: $primary-blue; + font-weight: $font-weight-semibold; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + height: 2px; + border-radius: 2px; + } + } + } +} + +// Partnership Form Container +.partnership-form-container { + max-width: 800px; + margin: 0 auto; + + @include respond-to('sm') { + padding: 0 $spacing-md; + } +} + +// Partnership Card +.partnership-card { + padding: $spacing-4xl; + background: $white; + border-radius: $border-radius-xl; + box-shadow: $shadow-lg; + border: 1px solid $border-gray; + + @include respond-to('sm') { + padding: $spacing-2xl $spacing-lg; + border-radius: $border-radius-md; + } + + // Form group styles + .form-group { + margin-bottom: $spacing-2xl; + + @include respond-to('sm') { + margin-bottom: $spacing-xl; + } + + label { + display: flex; + align-items: center; + gap: $spacing-sm; + font-size: $font-size-base; + font-weight: $font-weight-semibold; + color: $text-dark; + margin-bottom: $spacing-md; + + i { + color: $primary-blue; + font-size: $font-size-md; + } + + .required { + color: $accent-orange; + margin-left: 2px; + } + } + + // Textarea specific height + textarea.form-control { + min-height: 200px; + resize: vertical; + line-height: 1.6; + + @include respond-to('sm') { + min-height: 150px; + } + } + } + + // Form hint with icon + .form-hint { + display: flex; + align-items: flex-start; + gap: $spacing-xs; + margin-top: $spacing-sm; + font-size: $font-size-sm; + color: $text-gray; + line-height: $line-height-normal; + + i { + color: $primary-blue; + margin-top: 2px; + flex-shrink: 0; + } + } + + // Form error with icon + .form-error { + display: flex; + align-items: flex-start; + gap: $spacing-xs; + margin-top: $spacing-sm; + font-size: $font-size-sm; + color: $accent-orange; + line-height: $line-height-normal; + + i { + margin-top: 2px; + flex-shrink: 0; + } + } + + // Form help text + .form-help-text { + margin-top: $spacing-md; + + p { + display: flex; + align-items: flex-start; + gap: $spacing-xs; + margin: $spacing-xs 0; + font-size: $font-size-xs; + color: $text-light; + line-height: $line-height-normal; + + i { + color: $accent-green; + margin-top: 2px; + flex-shrink: 0; + } + } + } +} + +// Form Actions +.form-actions { + display: flex; + gap: $spacing-md; + justify-content: center; + margin-top: $spacing-4xl; + padding-top: $spacing-2xl; + border-top: 1px solid $border-gray; + + @include respond-to('sm') { + flex-direction: column-reverse; + gap: $spacing-sm; + margin-top: $spacing-3xl; + padding-top: $spacing-xl; + } + + .action-btn-secondary, + .action-btn-primary { + min-width: 160px; + padding: $spacing-md $spacing-2xl; + + @include respond-to('sm') { + width: 100%; + min-width: auto; + } + } +} + +// File Upload Wrapper Override for Partnership Page +.partnership-card .file-upload-wrapper { + .file-name-display { + &.has-file { + color: $text-dark; + background: rgba($primary-blue, 0.05); + border-color: $primary-blue; + font-weight: $font-weight-medium; + } + } + + @media (max-width: $breakpoint-sm) { + .file-upload-btn { + order: 1; + } + + .file-name-display { + order: 2; + } + + .file-remove-btn { + order: 3; + } + } +} + +// Animation for form elements +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.partnership-card { + animation: fadeInUp 0.6s ease-out; +} + +// Focus states for better accessibility +.partnership-card { + .form-control:focus { + border-color: $primary-blue; + box-shadow: 0 0 0 3px rgba($primary-blue, 0.1); + outline: none; + } + + // Enhanced focus for textarea + textarea.form-control:focus { + box-shadow: 0 0 0 4px rgba($primary-blue, 0.15); + } +} + +// Print styles +@media print { + .page-header { + margin-bottom: $spacing-xl; + } + + .partnership-card { + box-shadow: none; + border: 1px solid $border-gray; + padding: $spacing-xl; + } + + .form-actions { + display: none; + } + + .file-upload-wrapper { + .file-upload-btn, + .file-remove-btn { + display: none; + } + } +}