From 83fcfc3d65d8d334d64cfdf11f4dc67870781dc8 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Wed, 8 Sep 2021 10:35:33 +0700
Subject: [PATCH] styles: add bg color option RelevantBlogPosts

---
 .../RelevantBlogPosts.module.scss              |  3 +++
 .../RelevantBlogPosts/RelevantBlogPosts.tsx    | 18 ++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
index d5a13299d..ed232830f 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
@@ -1,6 +1,9 @@
 @import '../../../styles/utilities';
 
 .blogPostWarpper {
+  &.cream{
+    background-color: #F5F4F2;
+  }
   padding-top: 5.6rem;
   padding-bottom: 5.2rem;
   @apply flex flex-col;
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
index 01e19bb25..bd5bdf0f2 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -1,6 +1,7 @@
 import image15 from '../../../../public/assets/images/image15.png'
 import image16 from '../../../../public/assets/images/image16.png'
 import image17 from '../../../../public/assets/images/image17.png'
+import classNames from 'classnames'
 import React from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
 import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
@@ -9,10 +10,11 @@ import s from './RelevantBlogPosts.module.scss'
 import { ROUTE } from 'src/utils/constanst.utils';
 
 interface RelevantProps {
-    data?: BlogCardProps[]
-    itemKey?: string
-    title?: string
-    viewAllLink?: string
+    data?: BlogCardProps[],
+    itemKey?: string,
+    title?: string,
+    viewAllLink?: string,
+    bgcolor: "default" | "cream"
 }
 
 const recipe:BlogCardProps[] = [
@@ -48,9 +50,13 @@ const recipe:BlogCardProps[] = [
     link: `${ROUTE.BLOG_DETAIL}`
 }]
 
-  const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts" }: RelevantProps) => {
+  const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
     return (
-      <div className={s.blogPostWarpper}>
+      <div className={classNames({
+        [s.blogPostWarpper] : true,
+        [s[bgcolor]] : bgcolor,
+      })}
+      >
         <div className={s.top}>
           <div className={s.left}>
             <HeadingCommon>{title}</HeadingCommon>