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, 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 } >
- {title} + + {title} +
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}[], + data: {title: string, content: Array, link: string}[], } -const CollapseCommon = ({data}:CollapseCommonProps) => { +const CollapseCommon = ({data}: CollapseCommonProps) => { return (
{ data.map(item => - + ) }
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',