feat: add animation toggle icon

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;
-}
+}

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 }
         >    
             <div className={s.title}>
-                {title}{isActive ? <IconMinus /> : <IconPlus />}
+                <a>{title}</a>
+                <div className={s.toggle}></div>
             </div>
             <div className={s.contentContainer}>
                 {