From 2584e6c5d7bb235461fa4a179e1dbbd9ce8e6d9f Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 12:09:17 +0700
Subject: [PATCH 1/7] refactor: CollapseCommon

---
 pages/index.tsx                               | 44 +++++++++++----
 .../CollapseChild/CollapseChild.module.scss   | 55 +++++++++++++++++++
 .../CollapseChild/CollapseChild.tsx           | 37 +++++++++++++
 .../CollapseContent.module.scss               |  0
 .../CollapseContent/CollapseContent.tsx       |  0
 .../CollapseCommon/CollapseCommon.module.scss | 55 -------------------
 .../common/CollapseCommon/CollapseCommon.tsx  | 43 +++++----------
 7 files changed, 139 insertions(+), 95 deletions(-)
 create mode 100644 src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
 create mode 100644 src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
 rename src/components/common/CollapseCommon/{ => CollapseChild}/CollapseContent/CollapseContent.module.scss (100%)
 rename src/components/common/CollapseCommon/{ => CollapseChild}/CollapseContent/CollapseContent.tsx (100%)

diff --git a/pages/index.tsx b/pages/index.tsx
index c193554a9..594c95110 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,10 +4,39 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
 import {SelectCommon} from 'src/components/common'
 import card from "../public/assets/images/card.png"
 
-const CONTENT = [
-  "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
-  "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
-  "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+const CONTENT_DATA = [
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ]
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ]
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ]
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ]
+  },
 ]
 export default function Home() {
   return (
@@ -24,12 +53,7 @@ export default function Home() {
       {/* <HomeRecipe /> */}
       {/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
       <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
-      <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 title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon data={CONTENT_DATA} />
       <RelevantBlogPosts />
       {/* todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
new file mode 100644
index 000000000..001d23c5e
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
new file mode 100644
index 000000000..67c6765ac
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
similarity index 100%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
similarity index 100%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
diff --git a/src/components/common/CollapseCommon/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseCommon.module.scss
index 4686a886a..e69de29bb 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.module.scss
+++ b/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;
-}
diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx
index 1fdce09da..848e83879 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/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
\ No newline at end of file
+export default CollapseCommon

From 510593d5005b7f41df454ce12d8b563e148f1eeb Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 12:20:06 +0700
Subject: [PATCH 2/7] styles: format code

---
 pages/index.tsx                               | 12 ++++++----
 .../common/CardBlog/CardBlog.module.scss      | 10 ++++-----
 .../CollapseChild/CollapseChild.module.scss   | 22 +++++++++----------
 .../CollapseChild/CollapseChild.tsx           |  8 +++++--
 .../CollapseContent.module.scss               |  2 +-
 .../CollapseContent/CollapseContent.tsx       |  1 -
 .../CollapseCommon/CollapseCommon.module.scss |  0
 .../common/CollapseCommon/CollapseCommon.tsx  |  7 +++---
 src/utils/constanst.utils.ts                  |  2 +-
 9 files changed, 35 insertions(+), 29 deletions(-)
 delete mode 100644 src/components/common/CollapseCommon/CollapseCommon.module.scss

diff --git a/pages/index.tsx b/pages/index.tsx
index 594c95110..40d861022 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,7 +11,8 @@ const CONTENT_DATA = [
       "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
       "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
       "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ]
+    ],
+    link: "/title"
   },
   {
     title: "This is a subtitle",
@@ -19,7 +20,8 @@ const CONTENT_DATA = [
       "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
       "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
       "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ]
+    ],
+    link: "/title"
   },
   {
     title: "This is a subtitle",
@@ -27,7 +29,8 @@ const CONTENT_DATA = [
       "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
       "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
       "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ]
+    ],
+    link: "/title"
   },
   {
     title: "This is a subtitle",
@@ -35,7 +38,8 @@ const CONTENT_DATA = [
       "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
       "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
       "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ]
+    ],
+    link: "/title"
   },
 ]
 export default function Home() {
diff --git a/src/components/common/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss
index 8f18e5753..0403aa299 100644
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -1,10 +1,10 @@
 @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;
@@ -12,7 +12,7 @@
             cursor: pointer;
         }
     }
-    .title{
+    .title {
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
         @apply font-bold;
         font-size: 2rem;
@@ -23,7 +23,7 @@
             cursor: pointer;
         }
     }
-    .description{
+    .description {
         padding: 0 0.8rem;
         @apply overflow-hidden overflow-ellipsis ;
         color: var(--text-label);
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
index 001d23c5e..e3944988a 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -1,18 +1,18 @@
 @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;
         }
-        .toggle{
+        .toggle {
             &:before {
                 transform: rotate(180deg);
             }
@@ -21,21 +21,21 @@
             }
         }
     }
-    &: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 +44,12 @@
             width: 2.2rem;
             transition: transform 500ms ease;
         }
-        &:before{
+        &:before {
             transform-origin: center;
             transform: rotate(90deg);
         }
     }
 }
-.contentContainer{
+.contentContainer {
     @apply hidden pb-16;
 }
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
index 67c6765ac..22cbcda10 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
@@ -2,13 +2,15 @@ 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}: CollapseProps) => {
+const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => {
     const [isActive, changeActive] = useState(isToggle)
 
     const handleToggle = () => {
@@ -22,7 +24,9 @@ const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
             onClick = { handleToggle }
         >    
             <div className={s.title}>
-                <a>{title}</a>
+                <Link href={link}>
+                    <a>{title}</a>
+                </Link>
                 <div className={s.toggle}></div>
             </div>
             <div className={s.contentContainer}>
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
index 2d29c4b51..9e5cfba30 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
@@ -1,3 +1,3 @@
-.content{
+.content {
     margin-top: 1.6rem;
 }
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
index 44a5624f3..e18e19c0a 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import s from './CollapseContent.module.scss'
 
 interface CollapseContentProps{
diff --git a/src/components/common/CollapseCommon/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseCommon.module.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx
index 848e83879..98030ffce 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/src/components/common/CollapseCommon/CollapseCommon.tsx
@@ -1,16 +1,15 @@
-import s from './CollapseCommon.module.scss'
 import CollapseChild from './CollapseChild/CollapseChild'
 
 interface CollapseCommonProps{
-    data: {title: string, content: Array<string>}[],
+    data: {title: string, content: Array<string>, link: string}[],
 }
 
-const CollapseCommon = ({data}:CollapseCommonProps) => {
+const CollapseCommon = ({data}: CollapseCommonProps) => {
     return (
         <section>
             {
                 data.map(item =>
-                    <CollapseChild key={item.title} title={item.title} content={item.content} />
+                    <CollapseChild key={item.title} title={item.title} content={item.content} link={item.link} />
                 )
             }
         </section>
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index f299e8e20..05c553d20 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -9,7 +9,7 @@ export const ROUTE = {
     HOME: '/',
     PRODUCTS: '/products',
     ABOUT: '/about',
-    BLOG_DETAIL: '/blogdetail',
+    BLOG_DETAIL: '/blog',
     ACCOUNT: '/account',
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',

From 9fb11a936ee36e9a0c25471f27b4d412f5e30215 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 12:25:05 +0700
Subject: [PATCH 3/7] feat: CollapseChild add animation

---
 .../CollapseChild/CollapseChild.module.scss           | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
index e3944988a..9b7094088 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -11,6 +11,7 @@
         }
         .contentContainer {
             @apply block;
+            animation: ContentAnimation 0.5s ease-out;
         }
         .toggle {
             &:before {
@@ -53,3 +54,13 @@
 .contentContainer {
     @apply hidden pb-16;
 }
+@keyframes ContentAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(-1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
\ No newline at end of file

From 9de5269984bfed48a6931e9aeb78c903df91f75d Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 13:10:55 +0700
Subject: [PATCH 4/7] styles: change name animation

---
 .../CollapseCommon/CollapseChild/CollapseChild.module.scss    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
index 9b7094088..e6a71e44e 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -11,7 +11,7 @@
         }
         .contentContainer {
             @apply block;
-            animation: ContentAnimation 0.5s ease-out;
+            animation: ContentAnimationIn 0.5s ease-out;
         }
         .toggle {
             &:before {
@@ -54,7 +54,7 @@
 .contentContainer {
     @apply hidden pb-16;
 }
-@keyframes ContentAnimation {
+@keyframes ContentAnimationIn {
     0% {
         opacity: 0;
         transform: translateY(-1.6rem);

From 3d0eac6e8fe0608450a8c08112ecc4400c9d498d Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 13:17:31 +0700
Subject: [PATCH 5/7] refactor: CardBlog wrap title, img with Link

---
 src/components/common/CardBlog/CardBlog.module.scss | 4 ++--
 src/components/common/CardBlog/CardBlog.tsx         | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/common/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss
index 0403aa299..f0dc00b3a 100644
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -8,7 +8,7 @@
         width: 100%;
         max-height: 22rem;
         border-radius: 2.4rem;
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
@@ -19,7 +19,7 @@
         line-height: 2.8rem;
         letter-spacing: -0.01em;
         color: var(--text-active);
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx
index 17a796bc4..e253dd6c9 100644
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -13,8 +13,6 @@ const CardBlog = ({ imageSrc, title, description, link }: BlogCardProps) => {
         <div className={s.image}>
           <img src={imageSrc} alt="image cardblog" />
         </div>
-      </Link>
-      <Link href={link}>
         <div className={s.title}>{title}</div>
       </Link>
       <div className={s.description}>{description}</div>

From dea236df09ddba3c2ea755e0c32041794a004bff Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 13:21:39 +0700
Subject: [PATCH 6/7] move to test.tsx

---
 pages/index.tsx | 56 +++++----------------------------
 pages/test.tsx  | 82 +++++++++++++++++++++++++------------------------
 2 files changed, 49 insertions(+), 89 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 40d861022..0ff6f0111 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,68 +1,26 @@
 
-import { CardBlog, CollapseCommon, Layout, RelevantBlogPosts } from 'src/components/common';
+import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 import {SelectCommon} from 'src/components/common'
 import card from "../public/assets/images/card.png"
 
-const CONTENT_DATA = [
-  {
-    title: "This is a subtitle",
-    content: [
-      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
-      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
-      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ],
-    link: "/title"
-  },
-  {
-    title: "This is a subtitle",
-    content: [
-      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
-      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
-      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ],
-    link: "/title"
-  },
-  {
-    title: "This is a subtitle",
-    content: [
-      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
-      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
-      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ],
-    link: "/title"
-  },
-  {
-    title: "This is a subtitle",
-    content: [
-      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
-      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
-      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-    ],
-    link: "/title"
-  },
-]
+
 export default function Home() {
   return (
     <>
-      {/* <HomeBanner />
+      <HomeBanner />
       <HomeBanner/>
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
-      <HomeCTA /> */}
-      {/* <HomeRecipe />
-      <HomeSubscribe /> */}
-      {/* <HomeRecipe /> */}
-      {/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
-      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
-      <CollapseCommon data={CONTENT_DATA} />
-      <RelevantBlogPosts />
+      <HomeCTA />
+      <HomeRecipe />
+      <HomeSubscribe />
       {/* todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
     </>
   )
 }
 
-// Home.Layout = Layout
+Home.Layout = Layout
diff --git a/pages/test.tsx b/pages/test.tsx
index 5ac220819..5afc61235 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -4,6 +4,8 @@ import {
   Layout,
   ModalCommon,
   ProductCarousel,
+  RelevantBlogPosts,
+  CollapseCommon,
 } from 'src/components/common'
 import { CollectionCarcousel } from 'src/components/modules/home'
 import image5 from '../public/assets/images/image5.png'
@@ -96,49 +98,49 @@ const dataTest = [
     imageSrc: image6.src,
   },
 ]
+const COLLAPSE_DATA = [
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+]
 export default function Test() {
-  const [visible, setVisible] = useState(false)
-  const onClose = () => {
-    setVisible(false)
-  }
-  const onOpen = () => {
-    setVisible(true)
-  }
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalCommon visible={visible} onClose={onClose}>
-        <div className="">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
-          officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod
-          itaque, officia magni molestias! Architecto deserunt soluta laborum
-          commodi nesciunt delectus similique temporibus distinctio? Facere
-          eaque minima enim modi magni, laudantium, animi mollitia beatae
-          repudiandae maxime labore error nesciunt, nisi est?
-        </div>
-      </ModalCommon>
-      <ProductCarousel
-        data={dataTest}
-        itemKey="product-2"
-        isDot
-        option={{
-          slidesPerView: 1,
-          breakpoints: {
-            '(min-width: 640px)': {
-              slidesPerView: 3,
-            },
-            '(min-width: 768px)': {
-              slidesPerView: 4,
-            },
-            '(min-width: 1024px)': {
-              slidesPerView: 4.5,
-            },
-            '(min-width: 1280px)': {
-              slidesPerView: 5.5,
-            },
-          },
-        }}
-      />
+      <CollapseCommon data={COLLAPSE_DATA} />
+      <RelevantBlogPosts />
     </>
   )
 }

From 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 7 Sep 2021 13:41:25 +0700
Subject: [PATCH 7/7] split fix multi child in Link

---
 src/components/common/CardBlog/CardBlog.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx
index e253dd6c9..17a796bc4 100644
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -13,6 +13,8 @@ const CardBlog = ({ imageSrc, title, description, link }: BlogCardProps) => {
         <div className={s.image}>
           <img src={imageSrc} alt="image cardblog" />
         </div>
+      </Link>
+      <Link href={link}>
         <div className={s.title}>{title}</div>
       </Link>
       <div className={s.description}>{description}</div>