refactor: CollapseCommon

src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss

@@ -0,0 +1,55 @@
+@import "../../../../styles/utilities";
+
+.collapseWrapper{
+    @apply border-t border-b;
+    border-color: var(--border-line);
+    max-width: 80.4rem;
+    min-height: 4rem;
+    &.isActive{
+        .title{
+            @apply pb-0;
+        }
+        .contentContainer{
+            @apply block;
+        }
+        .toggle{
+            &:before {
+                transform: rotate(180deg);
+            }
+            &:after {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    &:hover{
+        cursor: pointer;
+    }
+}
+.title{
+    @apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
+    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/CollapseChild/CollapseChild.tsx

@@ -0,0 +1,37 @@
+import s from './CollapseChild.module.scss'
+import { useState } from 'react'
+import classNames from 'classnames'
+import CollapseContent from './CollapseContent/CollapseContent'
+
+interface CollapseProps{
+    title?: string,
+    content: Array<string>,
+    isToggle?: boolean,
+}
+const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
+    const [isActive, changeActive] = useState(isToggle)
+
+    const handleToggle = () => {
+        changeActive(!isActive)
+    }
+    return(
+        <div className={classNames({
+            [s.collapseWrapper] : true,
+            [s.isActive] : isActive 
+        })}
+            onClick = { handleToggle }
+        >    
+            <div className={s.title}>
+                <a>{title}</a>
+                <div className={s.toggle}></div>
+            </div>
+            <div className={s.contentContainer}>
+                {
+                    content.map(item => <CollapseContent key={item} content={item} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CollapseChild

src/components/common/CollapseCommon/CollapseCommon.module.scss

@@ -1,55 +0,0 @@
-@import "../../../styles/utilities";
-
-.collapseWrapper{
-    @apply border-t border-b;
-    border-color: var(--border-line);
-    max-width: 80.4rem;
-    min-height: 4rem;
-    &.isActive{
-        .title{
-            @apply pb-0;
-        }
-        .contentContainer{
-            @apply block;
-        }
-        .toggle{
-            &:before {
-                transform: rotate(180deg);
-            }
-            &:after {
-                transform: rotate(180deg);
-            }
-        }
-    }
-    svg:hover{
-        cursor: pointer;
-    }
-}
-.title{
-    @apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
-    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,37 +1,20 @@
 import s from './CollapseCommon.module.scss'
-import { useState } from 'react'
-import classNames from 'classnames'
-import CollapseContent from './CollapseContent/CollapseContent'
+import CollapseChild from './CollapseChild/CollapseChild'
 
-interface CollapseProps{
-    title?: string,
-    content: Array<string>,
-    isToggle?: boolean,
+interface CollapseCommonProps{
+    data: {title: string, content: Array<string>}[],
 }
-const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
-    const [isActive, changeActive] = useState(isToggle)
 
-    const handleToggle = () => {
-        changeActive(!isActive)
-    }
-    return(
-        <div className={classNames({
-            [s.collapseWrapper] : true,
-            [s.isActive] : isActive 
-        })}
-            onClick = { handleToggle }
-        >    
-            <div className={s.title}>
-                <a>{title}</a>
-                <div className={s.toggle}></div>
-            </div>
-            <div className={s.contentContainer}>
-                {
-                    content.map(item => <CollapseContent content={item} />)
-                }
-            </div>
-        </div>
+const CollapseCommon = ({data}:CollapseCommonProps) => {
+    return (
+        <section>
+            {
+                data.map(item =>
+                    <CollapseChild key={item.title} title={item.title} content={item.content} />
+                )
+            }
+        </section>
     )
 }
 
-export default CollapseCommon
+export default CollapseCommon