diff --git a/pages/privacy-policy.tsx b/pages/privacy-policy.tsx new file mode 100644 index 000000000..daf1b5fd0 --- /dev/null +++ b/pages/privacy-policy.tsx @@ -0,0 +1,12 @@ +import { Layout } from "src/components/common" +import { DeliveryAndPolicyContent, DeliveryAndPolicyBreadCrumb } from "src/components/modules/delivery-policy" + +export default function DeliveryAndPolicyPage () { + return ( + <> + + + + ) +} +DeliveryAndPolicyPage.Layout = Layout \ No newline at end of file diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx index 13f980ea9..24f58a066 100644 --- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -15,4 +15,4 @@ const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => { ) } -export default BreadcrumbItem +export default BreadcrumbItem \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss index e6a71e44e..839f4de65 100644 --- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss +++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss @@ -52,7 +52,8 @@ } } .contentContainer { - @apply hidden pb-16; + @apply hidden pb-16 whitespace-pre-line; + padding-top: 1.6rem; } @keyframes ContentAnimationIn { 0% { diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx index 53cd70cf3..408b0c397 100644 --- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx +++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx @@ -1,11 +1,10 @@ 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, + content: string, isToggle?: boolean, } const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => { @@ -26,9 +25,7 @@ const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
- { - content.map(item => ) - } + {content}
) diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss deleted file mode 100644 index 9e5cfba30..000000000 --- a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.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 deleted file mode 100644 index e18e19c0a..000000000 --- a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import s from './CollapseContent.module.scss' - -interface CollapseContentProps{ - content: string -} - -const CollapseContent = ({content}: CollapseContentProps) => { - return ( -
- {content} -
- ) -} - -export default CollapseContent \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx index e695a6576..2e378abf9 100644 --- a/src/components/common/CollapseCommon/CollapseCommon.tsx +++ b/src/components/common/CollapseCommon/CollapseCommon.tsx @@ -1,15 +1,15 @@ import CollapseChild from './CollapseChild/CollapseChild' interface CollapseCommonProps{ - data: {title: string, content: Array}[], + data: {title: string, content: string}[], } const CollapseCommon = ({data}: CollapseCommonProps) => { return (
{ - data.map(item => - + data.map((item,index) => + ) }
diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx index faf496200..bf16bd3d7 100644 --- a/src/components/common/Footer/Footer.tsx +++ b/src/components/common/Footer/Footer.tsx @@ -48,7 +48,7 @@ const FOOTER_COLUMNS = [ }, { name: 'Privacy Policy', - link: ROUTE.TERM_CONDITION, + link: ROUTE.PRIVACY_POLICY, }, { name: 'Blog', diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 5b821317f..690f5df39 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -38,6 +38,7 @@ export { default as CollapseCommon} from './CollapseCommon/CollapseCommon' export { default as BreadcrumbCommon } from './BreadcrumbCommon/BreadcrumbCommon' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' +export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon' export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' export { default as CartDrawer} from './CartDrawer/CartDrawer' export { default as StaticImage} from './StaticImage/StaticImage' diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 36c2f5c64..477d8863c 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -28,4 +28,4 @@ export { default as IconLocation } from './IconLocation' export { default as IconClose } from './IconClose' export { default as IconDelete } from './IconDelete' export { default as IconPlus } from './IconPlus' -export { default as IconMinus } from './IconMinus' +export { default as IconMinus } from './IconMinus' \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss new file mode 100644 index 000000000..abf7ef84f --- /dev/null +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss @@ -0,0 +1,8 @@ +@import "../../../../styles/utilities"; + +.breadCrumb { + @apply absolute z-10 pt-12 spacing-horizontal; + @screen lg{ + padding-left: 3.2rem; + } +} \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx new file mode 100644 index 000000000..992370ce5 --- /dev/null +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx @@ -0,0 +1,17 @@ +import { BreadcrumbCommon } from 'src/components/common' +import s from './DeliveryAndPolicyBreadCrumb.module.scss' + +const CRUMB_DATA = [ + { + link: "/delivery-policy", + name: "Delivery And Policy" + } +] +const DeliveryAndPolicyBreadCrumb = () => { + return ( +
+ +
+ ) +} +export default DeliveryAndPolicyBreadCrumb \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss index e69de29bb..be88621b5 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss @@ -0,0 +1,26 @@ +@import "../../../../styles/utilities"; + +.wrapper { + @apply flex justify-center pt-20 pb-28 spacing-horizontal; + .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; + } + } + } + .content { + @apply pb-16 whitespace-pre-line; + padding-top: 1.6rem; + } + } +} diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx index 317dab328..6045288f6 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx @@ -1,22 +1,77 @@ -import { DateTime } from 'src/components/common' +import { CollapseCommon, DateTime, HeadingCommon } from 'src/components/common' import s from './DeliveryAndPolicyContent.module.scss' interface DeliveryAndPolicyContentProps{ title?: string, - date: string, - content: string[], + date?: string, + content?: string, } +const HEADER_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. -const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => { +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 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.`, + }, + { + 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.`, + }, +] + +const DeliveryAndPolicyContent = ( { title="Delivery & Policy", date="APRIL 30, 2021", content = HEADER_CONTENT } : DeliveryAndPolicyContentProps) => { return ( -
-
-
LASTEST UPDATED: - +
+ +
+
+
+
LASTEST UPDATED: 
+ +
+ {title}
-
- {title} +
+ {content}
+
diff --git a/src/components/modules/delivery-policy/index.tsx b/src/components/modules/delivery-policy/index.tsx index 7062c369f..bb23bd6c8 100644 --- a/src/components/modules/delivery-policy/index.tsx +++ b/src/components/modules/delivery-policy/index.tsx @@ -1 +1,2 @@ -export { default as DeliveryAndPolicyContent} from './DeliveryAndPolicyContent/DeliveryAndPolicyContent' \ No newline at end of file +export { default as DeliveryAndPolicyContent } from './DeliveryAndPolicyContent/DeliveryAndPolicyContent' +export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb' \ No newline at end of file