refactor: format code and add data test

pages/test.tsx

@@ -1,146 +1,14 @@
 import { useState } from 'react'
 import {
-  ButtonCommon,
+  Layout
-  Layout,
-  ModalCommon,
-  ProductCarousel,
-  RelevantBlogPosts,
-  CollapseCommon,
 } from 'src/components/common'
-import { CollectionCarcousel } from 'src/components/modules/home'
+import { DeliveryAndPolicyPage } from 'src/components/modules/delivery-policy'
-import image5 from '../public/assets/images/image5.png'
+
-import image6 from '../public/assets/images/image6.png'
+
-import image7 from '../public/assets/images/image7.png'
-import image8 from '../public/assets/images/image8.png'
-const dataTest = [
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    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() {
   return (
     <>
-      <CollapseCommon data={COLLAPSE_DATA} />
+      <DeliveryAndPolicyPage />
-      <RelevantBlogPosts />
     </>
   )
 }

src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { ROUTE } from 'src/utils/constanst.utils'
 import s from './BreadcrumbCommon.module.scss'
 import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
 import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
@@ -9,28 +8,55 @@ interface BreadcrumbCommonProps {
     showHomePage?: boolean;
 }
 
-const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
+const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
     return (
         <section className={s.breadcrumbCommon}>
             {
-
+                showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
-                showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
+                    if (i === 0) {
+                        return (
+                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
+                        )
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={crumb.name}>
+                                <span>{crumb.name}</span>
+                            </BreadcrumbSeparator>
+                        )
+                    }
+                    return (
+                        <BreadcrumbSeparator key={crumb.name}>
+                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                        </BreadcrumbSeparator>
+                    )
+                })
             }
             {
-                crumbs.length > 0 && <>
+                !showHomePage && crumbs.map((crumb, i) => {
-
+                    if (i === 0) {
-                    {
+                        return
-                        crumbs.slice(0, crumbs.length - 1).map((crumb) => (
+                    }
-                            < BreadcrumbSeparator key={crumb.name}>
+                    if (i === 1) {
-                                <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                        return (
+                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
+                        )
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={crumb.name}>
+                                <span>{crumb.name}</span>
                             </BreadcrumbSeparator>
-                        ))}
+                        )
-                    < BreadcrumbSeparator>
+                    }
-                        <span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
+                    return (
-                    </BreadcrumbSeparator>
+                        <BreadcrumbSeparator key={crumb.name}>
-                </>
+                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                        </BreadcrumbSeparator>
+                    )
+                })
             }
-        </section >
+        </section>
     )
 }
 

src/components/common/index.ts

@@ -36,9 +36,4 @@ 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 BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
-export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
-export { default as CartDrawer} from './CartDrawer/CartDrawer'
-export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
-=======
->>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe

src/components/icons/index.ts

@@ -23,10 +23,3 @@ 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/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss

@@ -1,5 +1,4 @@
-.breadCrumb{
+.breadCrumb {
-    @apply absolute z-10;
+    @apply absolute z-10 pt-12;
     padding-left: 3.2rem;
-    padding-top: 3rem;
 }

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

@@ -15,7 +15,7 @@ const DeliveryAndPolicyBreadCrumb = () => {
     return (
         <section className={s.breadCrumb}>
             <BreadcrumbCommon crumbs={CRUMB_DATA}/>
-        </section>
+        </section>  
     )
 }
 export default DeliveryAndPolicyBreadCrumb

src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss

@@ -1,28 +1,23 @@
-.wrapper{
+.wrapper {
-    @apply flex justify-center;
+    @apply flex justify-center pt-20 pb-28;
+    .deliveryAndPolicyContentWrapper {
+        max-width: 80.4rem;
+        min-height: 4rem;
+        .titleWrapper {
+            @apply flex flex-col items-start;
+            .date {
+                @apply inline flex flex-row;
+                margin-bottom: 0.4rem;
+                .update {
+                    @apply uppercase leading-8;
+                    color:var(--text-label);
+                    font-size: 1.2rem;
+                    letter-spacing: 0.01em;
+                }
+            }
+        }
+        .contentContainer {
+            @apply pb-16;
+        }
+    }
 }
-
-.deliveryAndPolicyContentWrapper{
-    max-width: 80.4rem;
-    min-height: 4rem;
-}
-
-.titleWrapper{
-    @apply flex flex-col items-start;
-}
-
-.date{
-    @apply inline flex flex-row;
-    margin-bottom: 0.4rem;
-}
-
-.update{
-    @apply uppercase leading-8;
-    color:var(--text-label);
-    font-size: 1.2rem;
-    letter-spacing: 0.01em;
-}
-
-.contentContainer{
-    @apply pb-16;
-}

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

@@ -1,20 +1,58 @@
 import { CollapseCommon, DateTime, HeadingCommon } from 'src/components/common'
-import CollapseContent from 'src/components/common/CollapseCommon/CollapseContent/CollapseContent'
+import CollapseContent from 'src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent'
 import s from './DeliveryAndPolicyContent.module.scss'
 
 interface DeliveryAndPolicyContentProps{
-    title: string,
+    title?: string,
-    date: string,
+    date?: string,
-    content: Array<string>,
+    content?: Array<string>,
 }
-
+const HEADER_CONTENT = [
-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 DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => {
+const DELIVERYANDPOLICY_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"
+    }
+]
+
+const DeliveryAndPolicyContent = ( { title="Delivery & Policy", date="APRIL 30", content = HEADER_CONTENT } : DeliveryAndPolicyContentProps) => {
     return (
         <section className={s.wrapper}>
 
@@ -28,10 +66,10 @@ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyC
                 </div>
                 <div className={s.contentContainer}>
                     {
-                        content.map(item => <CollapseContent content={item} />)
+                        content.map(item => <CollapseContent key={item} content={item} />)
                     }
                 </div>
-                <CollapseCommon data={CONTENT} />\
+                <CollapseCommon data={DELIVERYANDPOLICY_DATA} />
             </div>
 
         </section>

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

@@ -1,7 +1,6 @@
 import DeliveryAndPolicyBreadCrumb from "../DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb"
 import DeliveryAndPolicyContent from "../DeliveryAndPolicyContent/DeliveryAndPolicyContent"
 
-
 const DeliveryAndPolicyPage = () => {
     return (
         <>

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

@@ -1,2 +1,3 @@
 export { default as DeliveryAndPolicyContent } from './DeliveryAndPolicyContent/DeliveryAndPolicyContent'
-export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb'
+export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb'
+export { default as DeliveryAndPolicyPage } from './DeliveryAndPolicyPage/DeliveryAndPolicyPage'