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

FAQ 디자인 적용

Browse Source
This commit is contained in:
현성필
2025-12-04 15:30:21 +09:00
parent 4ad34c9dfc
commit dacae095c5
2 changed files with 115 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/components/_accordion.scss
+47 -99
View File
@@ -1,158 +1,106 @@
// -----------------------------------------------------------------------------
// Accordion Component - FAQ and Collapsible Sections
// Figma Design: node 984-2146
// -----------------------------------------------------------------------------
// FAQ Accordion
// FAQ Accordion - Figma Design
.faq-accordion {
background: $white;
background: #F6F9FB;
border-radius: $border-radius-lg;
box-shadow: $shadow-sm;
overflow: hidden;
margin-bottom: $spacing-2xl;
.faq-item {
border-bottom: 1px solid $border-gray;
border-bottom: 1px solid #DADADA;
transition: $transition-base;
&:last-child {
border-bottom: none;
}
// Active state - when accordion is open
&.active {
background: rgba($primary-blue, 0.02);
.faq-question {
color: $primary-blue;
.faq-icon {
transform: rotate(180deg);
color: $primary-blue;
}
}
.faq-answer {
display: block;
animation: slideDown 0.3s ease;
}
}
}
// Question row - Figma: 18px bold, #212529
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: $spacing-lg $spacing-xl;
font-size: $font-size-base;
font-weight: $font-weight-medium;
color: $text-dark;
padding: $spacing-lg 20px;
font-size: 18px;
font-weight: $font-weight-bold;
color: #212529;
cursor: pointer;
transition: $transition-base;
position: relative;
gap: $spacing-md;
gap: 95px;
min-height: 54px;
@media (max-width: $breakpoint-sm) {
@media (max-width: $breakpoint-md) {
padding: $spacing-md $spacing-lg;
font-size: $font-size-sm;
}
&::before {
content: 'Q';
position: absolute;
left: $spacing-xl;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: $light-bg;
color: $primary-blue;
border-radius: $border-radius-circle;
font-size: $font-size-sm;
font-weight: $font-weight-bold;
transition: $transition-base;
@media (max-width: $breakpoint-sm) {
width: 28px;
height: 28px;
font-size: $font-size-xs;
}
font-size: 16px;
gap: $spacing-lg;
}
&:hover {
background: rgba($primary-blue, 0.03);
color: $primary-blue;
background: rgba($primary-blue, 0.02);
}
.faq-question-text {
flex: 1;
padding-left: 48px;
line-height: $line-height-normal;
@media (max-width: $breakpoint-sm) {
padding-left: 40px;
}
}
// Chevron icon
.faq-icon {
flex-shrink: 0;
font-size: 20px;
color: $text-gray;
transition: $transition-base;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #212529;
transition: transform 0.3s ease;
@media (max-width: $breakpoint-sm) {
font-size: 18px;
svg {
width: 14px;
height: 8px;
}
}
}
// Answer section - white background
.faq-answer {
display: none;
padding: 0 $spacing-xl $spacing-lg;
margin-left: 48px;
margin-right: $spacing-xl;
position: relative;
background: #F6F9FB;
padding: $spacing-lg 20px $spacing-xl;
border-top: none;
@media (max-width: $breakpoint-sm) {
padding: 0 $spacing-lg $spacing-md;
margin-left: 40px;
margin-right: $spacing-lg;
}
&::before {
content: 'A';
position: absolute;
left: -48px;
top: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: $primary-blue;
color: $white;
border-radius: $border-radius-circle;
font-size: $font-size-sm;
font-weight: $font-weight-bold;
@media (max-width: $breakpoint-sm) {
left: -40px;
width: 28px;
height: 28px;
font-size: $font-size-xs;
}
}
&.show {
display: block;
animation: slideDown 0.3s ease;
@media (max-width: $breakpoint-md) {
padding: $spacing-md $spacing-lg $spacing-lg;
}
.faq-answer-content {
padding: $spacing-md 0;
font-size: $font-size-sm;
color: $text-gray;
font-size: 18px;
font-weight: $font-weight-regular;
color: #515151;
background-color: #ffffff;
padding: $spacing-lg;
line-height: $line-height-loose;
@media (max-width: $breakpoint-sm) {
font-size: $font-size-xs;
padding: $spacing-sm 0;
@media (max-width: $breakpoint-md) {
font-size: 14px;
}
// Content formatting
@@ -209,7 +157,7 @@
}
}
// FAQ Page specific styles
// FAQ Page specific styles (legacy - for backward compatibility)
.faq-page {
min-height: calc(100vh - 140px);
background: $gray-bg;