feat: create components BlogDetalImg BlogContent BlogDetailPage

pages/test.tsx

@@ -65,6 +65,7 @@ export default function Test() {
 
   return (
     <>
+      {/* <RecipeDetail /> */}
       <BlogDetailPage />
       
       {/* <RecipeListPage/> */}

src/components/common/SelectCommon/SelectCommon.module.scss

@@ -1,69 +1,82 @@
 @import "../../../styles/utilities";
 
-.select{
+.select {
     background-color: var(--white);
-    &.base{
+    &.base {
         width: 20.6rem;
-        .selectTrigger{
+        .selectTrigger {
             width: 20.6rem;
             padding: 1.2rem 1.6rem;
         }
     }
-    &.large{
+    &.large {
         width: 34.25rem;
-        .selectTrigger{
+        .selectTrigger {
             width: 34.25rem;
             padding: 1.6rem 1.6rem;
         }
     }
-    &.default{
+    &.default {
-        .selectTrigger{
+        .selectTrigger {
             @apply border-solid border border-current;
         }   
     }
-    &.custom{
+    &.custom {
-        .selectTrigger{
+        .selectTrigger {
             @apply border-2;
             border-color: var(--border-line);
             color: var(--text-label);
         }
     }
-    &.isActive{
+    &:hover {
-        .selectOptionWrapper{
+        cursor: pointer;
+        .hoverWrapper {
             @apply block;
+            animation: SelectAnimation 0.2s ease-out;
         }
     }
 }
-.selectTrigger{
+.selectTrigger {
     @apply outline-none flex justify-between;
     color: var(--text-active);
     border-radius: 0.8rem;
 
 }
-.selectOptionWrapper{
+.hoverWrapper {
-    @apply outline-none hidden z-10 absolute;
+    @apply hidden outline-none absolute z-10;
+    padding-top: 0.6rem;
+    .selectOptionWrapper {
         border-radius: 0.8rem;
         background-color: var(--white);
         padding: 0.4rem 0rem 0.4rem 0rem;
-    margin-top: 0.6rem;
+        &.base {
-    &.base{
             width: 20.6rem;
         }
-    &.large{
+        &.large {
             width: 34.25rem;
         }
-    &.default{
+        &.default {
             @apply border-solid border border-current; 
         }
-    &.custom{
+        &.custom {
             @apply border-2;
             border-color: var(--border-line);
             color: var(--text-label);
         }
-    &.active{
+    }
-        @apply hidden;
+    &:hover {
+        @apply block;
     }
 }
 
 
-
+@keyframes SelectAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}

src/components/common/SelectCommon/SelectCommon.tsx

@@ -1,43 +1,25 @@
 import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
 import { IconVectorDown } from 'src/components/icons'
 import SelectOption from './SelectOption/SelectOption'
 
 interface Props {
-    children? : React.ReactNode,
+    placeholder? : string,
     size?: 'base' | 'large',
     type?: 'default' | 'custom',
-    option: {name: string}[],
+    option: {name: string, value: string}[],
+    onChange?: (value: string) => void,
 }
 
-const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
+const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
-    const [isActive, setActive] = useState(false)
+    const [selectedName, setSelectedName] = useState(placeholder)
-    const [selectedName, setSelectedName] = useState(children)
+    const [selectedValue, setSelectedValue] = useState('')
-    const ref = useRef<HTMLDivElement>(null)
 
-    useEffect(() => {
+    const changeSelectedName = (item:string, value: string) => {
-        const handleClick = (event: MouseEvent) => {
+        setSelectedValue(value)
-            const { target } = event;
-            if (!ref?.current || ref?.current.contains(target as Node)) {
-                return 
-            }
-            else{
-                setActive(false)
-            }
-        }
-        document.addEventListener('click', handleClick)
-        return () => {
-            document.removeEventListener('click', handleClick)
-        }
-    }, [ref])
-
-    const changeActiveStatus = () => {
-        setActive(!isActive)
-    }
-
-    const changeSelectedName = (item:string) => {
         setSelectedName(item)
+        onChange && onChange(value)
     }
     return(
         <>
@@ -45,10 +27,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 [s.select] : true,
                 [s[size]] : !!size,
                 [s[type]] : !!type,
-                [s.isActive] : isActive,
             })}
-                onClick = { changeActiveStatus }
-                ref = {ref}
             >
                 <div className={classNames({
                     [s.selectTrigger] : true,
@@ -56,6 +35,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 })}
                 >{selectedName}<IconVectorDown /></div>
                 
+                <div className={s.hoverWrapper}>
                     <div className={classNames({
                         [s.selectOptionWrapper] : true,
                         [s[type]] : !!type,
@@ -64,11 +44,13 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                     >   
                         {
                             option.map(item => 
-                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
+                                <SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
                             )
                         }
                     </div>
                 </div>
+
+            </div>
         </>
     )
 }

src/components/common/SelectCommon/SelectOption/SelectOption.module.scss

@@ -14,4 +14,7 @@
     &:hover{
         background-color: var(--gray);
     }
+    &.isChoose{
+        background-color: var(--gray);
+    }
 }

src/components/common/SelectCommon/SelectOption/SelectOption.tsx

@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
 import classNames from 'classnames'
 
 interface Props{
-    onClick: (value: string) => void,
+    onClick: (name: string, value: string) => void,
     itemName: string,
     size: 'base' | 'large',
+    value: string,
+    selected?: boolean,
 }
 
-const SelectOption = ({onClick, itemName, size}: Props) => {
+const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
-
     const changeName  = () => {
-        onClick(itemName)
+        onClick(itemName, value)
     }
     return(
         <div className={classNames({
             [s.selectOption] : true,
             [s[size]] : !!size,
+            [s.isChoose] : selected ,
         })}
             onClick = {changeName}
         >{itemName}</div>

src/components/icons/IconVectorDown.tsx

@@ -1,5 +1,3 @@
-
-
 const IconVectorDown = ({ ...props }) => {
     return (
       <svg

src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss

@@ -0,0 +1,3 @@
+.image{
+    width: 100%;
+}

src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx

@@ -1,17 +1,15 @@
 
 import React from 'react';
-
+import s from './BlogDetailImg.module.scss';
 interface Props{
     image:string,
     alt?:string
 }
 
-
-
 const BlogDetailImg = ({image,alt}:Props) => {
     return (
         <>
-             <img src={image} alt={alt} />
+             <img className={s.image} src={image} alt={alt} />
         </>
     )
 }

src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss

@@ -3,9 +3,14 @@
     padding: 0 0 3.2rem  3.2rem;
 }
 .blogDetailPageWrapper{
+   padding: 0 2rem;
     @screen md {
+        width: 90%;
+        margin:0 auto;
+    }
+    @screen xl{
         width: 60%;
-        margin: 0 auto;
+        margin:0 auto;
     }
     .avt{
         margin-bottom: 4rem;

src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx

@@ -33,7 +33,7 @@ const CRUMBS =[
     }
 ]
 
-const recipe = [
+const BLOGS = [
     {
         title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
         description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
@@ -87,7 +87,7 @@ const BlogDetailPage = () => {
                 nameAuthor={BLOGDETAIL.nameAuthor}/>
         </div>
         <div className={s.relevantBlogPosts}>
-            <RelevantBlogPosts title="You will like also" />
+            <RelevantBlogPosts data={BLOGS} title="You will like also" bgcolor="cream"/>
         </div>
             
         </>

src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx

@@ -67,6 +67,50 @@ const CATEGORY = [
     },
   ];
 
+
+const CATEGORYSELECT = [
+      {
+          name: 'All',
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
+      },
+      {
+          name: 'Malaysian',
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
+      },
+      {
+          name: 'Vietnamese',
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
+      },
+      {
+          name: 'Thailand',
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
+      },
+      {
+          name: 'Indian',
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
+      },
+      {
+          name: 'Lao',
+          value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
+      },
+      {
+        name: 'Chinese',
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
+      },
+      {
+        name: 'Korean',
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
+      },
+      {
+        name: 'Japanese',
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
+      }, 
+      {
+        name: 'Western',
+        value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
+      },
+    ];
+
 const RECIPES = [
     {
         id: '1',
@@ -112,13 +156,16 @@ const RECIPES = [
 
 const OPTIONSLECT=[
     {
-        name:"SORT BY 1"
+        name:"SORT BY 1",
+        value:"1"
     },
     {
-        name:"SORT BY 2"
+        name:"SORT BY 2",
+        value:"2"
     },
     {
-        name:"SORT BY 3"
+        name:"SORT BY 3",
+        value:"3"
     },
 ]
 const BANNER =[
@@ -155,16 +202,16 @@ const RecipesListPage = () => {
                 <div className={s.recipesList}>
                     <div className={s.sortByDesktop}>
                         <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                        <SelectCommon option={OPTIONSLECT} />
+                        <SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
                     </div>
                     <div className={s.selectMobile}>
                         <div>
                             <label htmlFor="">Categories</label>
-                            <SelectCommon option={CATEGORY}/>
+                            <SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
                         </div>
                         <div>
                             <label htmlFor="">Sort By</label>
-                            <SelectCommon option={OPTIONSLECT} />
+                            <SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
                         </div>
                     </div>
                     <RecipesList recipes={RECIPES}/>