styles: format code

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() {

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);

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{
+    &.isActive {
-        .title{
+        .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;
 }

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

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,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>

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',