chore(homepage): use next/image for images and specify width/height

2 files changed, 24 insertions, 19 deletions

diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss b/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
index 34b1a92..cf2b77f 100644
--- a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
+++ b/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
@@ -1,10 +1,21 @@
 @use "@styles/abstracts/functions" as fun;
 
 .wrapper {
-  width: max-content;
+  width: 100%;
   max-width: 100%;
   margin: var(--spacing-sm) auto;
   position: relative;
+  text-align: center;
+}
+
+.caption {
+  margin: 0;
+  padding: fun.convert-px(4) var(--spacing-2xs);
+  background: var(--color-bg-secondary);
+  border: fun.convert-px(1) solid var(--color-border);
+  box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1)
+    var(--color-shadow-light);
+  font-weight: 500;
 }
 
 .link {
@@ -37,13 +48,3 @@
     }
   }
 }
-
-.caption {
-  margin: 0;
-  padding: fun.convert-px(4) var(--spacing-2xs);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border);
-  box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1)
-    var(--color-shadow-light);
-  font-weight: 500;
-}
diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx b/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
index 062c04b..6c39e7f 100644
--- a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
+++ b/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
@@ -1,12 +1,8 @@
-import Image, { ImageProps } from 'next/image';
+import { ResponsiveImageProps } from '@ts/types/app';
+import Image from 'next/image';
 import Link from 'next/link';
 import styles from './ResponsiveImage.module.scss';
 
-type ResponsiveImageProps = ImageProps & {
-  caption?: string;
-  linkTarget?: string;
-};
-
 const ResponsiveImage = (props: ResponsiveImageProps) => {
   const { caption, linkTarget, ...attributes } = props;
 
@@ -15,7 +11,11 @@ const ResponsiveImage = (props: ResponsiveImageProps) => {
       {linkTarget ? (
         <Link href={linkTarget}>
           <a className={styles.link}>
-            <Image alt={attributes.alt} layout="intrinsic" {...attributes} />
+            <Image
+              alt={attributes.alt}
+              layout={attributes.layout || 'intrinsic'}
+              {...attributes}
+            />
             {caption && (
               <figcaption className={styles.caption}>{caption}</figcaption>
             )}
@@ -23,7 +23,11 @@ const ResponsiveImage = (props: ResponsiveImageProps) => {
         </Link>
       ) : (
         <>
-          <Image alt={attributes.alt} layout="intrinsic" {...attributes} />
+          <Image
+            alt={attributes.alt}
+            layout={attributes.layout || 'intrinsic'}
+            {...attributes}
+          />
           {caption && (
             <figcaption className={styles.caption}>{caption}</figcaption>
           )}