diff --git a/src/components/common/CollapseCommon/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseCommon.module.scss index a82cb2f6e..4686a886a 100644 --- a/src/components/common/CollapseCommon/CollapseCommon.module.scss +++ b/src/components/common/CollapseCommon/CollapseCommon.module.scss @@ -12,6 +12,14 @@ .contentContainer{ @apply block; } + .toggle{ + &:before { + transform: rotate(180deg); + } + &:after { + transform: rotate(180deg); + } + } } svg:hover{ cursor: pointer; @@ -22,7 +30,26 @@ font-size: 3.2rem; line-height: 4rem; letter-spacing: -0.01em; + .toggle{ + height: 2.2rem; + width: 2.2rem; + position: relative; + &:before, + &:after{ + @apply absolute h-2; + content: ""; + border-radius: 0.8rem; + background: var(--text-active); + top: 40%; + width: 2.2rem; + transition: transform 500ms ease; + } + &:before{ + transform-origin: center; + transform: rotate(90deg); + } + } } .contentContainer{ @apply hidden pb-16; -} \ No newline at end of file +} diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx index de7ae156b..1fdce09da 100644 --- a/src/components/common/CollapseCommon/CollapseCommon.tsx +++ b/src/components/common/CollapseCommon/CollapseCommon.tsx @@ -1,7 +1,6 @@ import s from './CollapseCommon.module.scss' import { useState } from 'react' import classNames from 'classnames' -import { IconPlus, IconMinus } from 'src/components/icons' import CollapseContent from './CollapseContent/CollapseContent' interface CollapseProps{ @@ -23,7 +22,8 @@ const CollapseCommon = ({title, content, isToggle}: CollapseProps) => { onClick = { handleToggle } >
- {title}{isActive ? : } + {title} +
{