merge: merge m4-tan

src/components/common/CardBlog/CardBlog.module.scss

@@ -1,29 +1,29 @@
 @import "../../../styles/utilities";
 
-.cardBlogWarpper{
+.cardBlogWarpper {
+    @apply inline-flex flex-col justify-start;
     max-width: 39.2rem;
     min-height: 34.4rem;
-    @apply inline-flex flex-col justify-start;
-    .image{
+    .image {
         width: 100%;
         max-height: 22rem;
         border-radius: 2.4rem;
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
-    .title{
+    .title {
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
         @apply font-bold;
         font-size: 2rem;
         line-height: 2.8rem;
         letter-spacing: -0.01em;
         color: var(--text-active);
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
-    .description{
+    .description {
         padding: 0 0.8rem;
         @apply overflow-hidden overflow-ellipsis ;
         color: var(--text-label);

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

@@ -1,18 +1,19 @@
-@import "../../../styles/utilities";
+@import "../../../../styles/utilities";
 
-.collapseWrapper{
+.collapseWrapper {
     @apply border-t border-b;
     border-color: var(--border-line);
     max-width: 80.4rem;
     min-height: 4rem;
-    &.isActive{
-        .title{
+    &.isActive {
+        .title {
             @apply pb-0;
         }
-        .contentContainer{
+        .contentContainer {
             @apply block;
+            animation: ContentAnimationIn 0.5s ease-out;
         }
-        .toggle{
+        .toggle {
             &:before {
                 transform: rotate(180deg);
             }
@@ -21,21 +22,21 @@
             }
         }
     }
-    svg:hover{
+    &:hover {
         cursor: pointer;
     }
 }
-.title{
+.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{
+    .toggle {
         height: 2.2rem;
         width: 2.2rem;
         position: relative;
         &:before,
-        &:after{
+        &:after {
             @apply absolute h-2;
             content: "";
             border-radius: 0.8rem;
@@ -44,12 +45,22 @@
             width: 2.2rem;
             transition: transform 500ms ease;
         }
-        &:before{
+        &:before {
             transform-origin: center;
             transform: rotate(90deg);
         }
     }
 }
-.contentContainer{
+.contentContainer {
     @apply hidden pb-16;
 }
+@keyframes ContentAnimationIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}

src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx

@@ -0,0 +1,41 @@
+import s from './CollapseChild.module.scss'
+import { useState } from 'react'
+import classNames from 'classnames'
+import CollapseContent from './CollapseContent/CollapseContent'
+import Link from 'next/link'
+
+interface CollapseProps{
+    title?: string,
+    content: Array<string>,
+    isToggle?: boolean,
+    link?: string,
+}
+const CollapseChild = ({title, content, isToggle=false, link="/"}: 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}>
+                <Link href={link}>
+                    <a>{title}</a>
+                </Link>
+                <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/CollapseChild/CollapseContent/CollapseContent.module.scss

@@ -1,3 +1,3 @@
-.content{
+.content {
     margin-top: 1.6rem;
 }

src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import s from './CollapseContent.module.scss'
 
 interface CollapseContentProps{

src/components/common/CollapseCommon/CollapseCommon.tsx

@@ -1,37 +1,19 @@
-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>, link: 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} link={item.link} />
+                )
+            }
+        </section>
     )
 }
 
-export default CollapseCommon
+export default CollapseCommon

src/components/common/index.ts

@@ -36,6 +36,9 @@ export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPos
 export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
+<<<<<<< HEAD
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
 export { default as CartDrawer} from './CartDrawer/CartDrawer'
-export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
+export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
+=======
+>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe

src/components/icons/index.ts

@@ -23,7 +23,10 @@ export { default as IconCheck } from './IconCheck'
 export { default as IconTime } from './IconTime'
 export { default as IconPeople } from './IconPeople'
 export { default as IconLocation } from './IconLocation'
+<<<<<<< HEAD
 export { default as IconClose } from './IconClose'
 export { default as IconDelete } from './IconDelete'
 export { default as IconPlus } from './IconPlus'
 export { default as IconMinus } from './IconMinus'
+=======
+>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe

src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx

@@ -31,11 +31,7 @@ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyC
                         content.map(item => <CollapseContent content={item} />)
                     }
                 </div>
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
+                <CollapseCommon data={CONTENT} />\
             </div>
 
         </section>