🎨 styles: change img recipe to img common

:%s

src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss

@@ -2,13 +2,16 @@
 
 .recipeDetailInfo {
     @apply spacing-horizontal;
-    margin: 5.6rem auto;
+    margin: 0 auto 5.6rem;
     @screen md {
         @apply flex;
+        margin: 5.6rem auto;
     }
+    
     .img {
-        width: fit-content;
+        width: 100%;
         margin-top: 0;
+        min-height: 50rem;
 
         @screen sm-only {
             margin-bottom: 2rem;
@@ -16,13 +19,16 @@
         @screen lg {
             max-width: 60rem;
         }
-        img {
+        > div {
-            @apply w-full;
+            min-height: 64rem;
-            object-fit: contain;
+            img {
-            max-height: 64rem;
+                // object-fit: contain;
-            border-radius: 2.4rem;
+            //     @apply w-full;
-            @screen md {
+                min-height: 64rem;
-                max-height: 90rem;
+                border-radius: 2.4rem;
+            //     @screen md {
+            //         max-height: 90rem;
+            //     }
             }
         }
     }

src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { ImgWithLink } from 'src/components/common'
 import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
 import s from './RecipeDetailInfo.module.scss'
 
@@ -12,7 +13,7 @@ const RecipeDetailInfo = ({ }: Props) => {
     return (
         <section className={s.recipeDetailInfo}>
             <div className={s.img}>
-                <img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
+                <ImgWithLink src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
             </div>
             <div className={s.recipeInfo}>
                 <div className={s.top}>