🎨 styles: recipe detail

:%s

pages/product/[slug].tsx

@@ -1,6 +1,6 @@
 
-import { Layout, RecipeDetail, RelevantBlogPosts } from 'src/components/common'
+import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
-import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
 import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
 
 export default function Slug() {

pages/recipe/[slug].tsx

@@ -0,0 +1,12 @@
+
+import { Layout, RecipeDetail, RecommendedRecipes } from 'src/components/common'
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+
+export default function Slug() {
+  return <div className="page-recipe-detail">
+    <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
+    <RecommendedRecipes data={RECIPE_DATA_TEST} />
+  </div>
+}
+
+Slug.Layout = Layout

src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/utilities";
+@import "../../../styles/utilities";
 
 .recommendedRecipes {
     margin: 6rem auto;

src/components/common/index.ts

@@ -46,3 +46,4 @@ export { default as TabCommon} from './TabCommon/TabCommon'
 export { default as StaticImage} from './StaticImage/StaticImage'
 export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
 export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
+export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'

src/components/modules/product-detail/index.ts

@@ -1,4 +1,3 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
 export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
 export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
-export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'

src/styles/_pages.scss

@@ -0,0 +1,6 @@
+.page-recipe-detail {
+    margin-bottom: 5.4rem;
+    @screen lg {
+        margin-bottom: 12.8rem;
+    }
+}

src/styles/main.scss

@@ -5,3 +5,5 @@
 
 @import "~tailwindcss/utilities";
 @import './utilities';
+
+@import './pages'