image size가 viewport에 맞게 변경되도록 수정

seoko97 · May 2, 2024 · 13ac081 · 13ac081
2 parents 609d5d9 + 8337339
commit 13ac081
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 4 deletions.
diff --git a/next.config.js b/next.config.js
@@ -11,8 +11,7 @@ const nextConfig = {
   images: {
     domains: ["image.toast.com"],
     minimumCacheTTL: 86400,
-    deviceSizes: [480, 768, 980],
-    imageSizes: [96, 128, 256, 384, 480],
+    deviceSizes: [640, 768, 980, 1080, 1200, 1920],
   },
 };
 

diff --git a/src/components/ui/Markdown/overrides/img.tsx b/src/components/ui/Markdown/overrides/img.tsx
@@ -30,7 +30,7 @@ const img = (props: ImageProps) => {
         {...rest}
         width={1000}
         height={1000}
-        className="mx-auto my-0 h-auto w-auto max-w-full rounded-md shadow-sm"
+        className="mx-auto my-0 h-auto w-auto max-w-full rounded-md shadow-sm sm:w-full"
       />
       {alt && <p className="mt-2 text-center text-sm text-gray-400">{alt}</p>}
     </>

diff --git a/src/components/ui/core/Image/index.tsx b/src/components/ui/core/Image/index.tsx
@@ -8,7 +8,7 @@ const Image = ({ width, height, className = "", ...rest }: ImageProps) => {
       style={{ objectFit: "cover" }}
       className={`relative h-auto max-w-full ${className}`}
       quality={100}
-      sizes="(max-width: 980px) 980px, 768px, 50vw, 33vw"
+      sizes="(max-width: 980px) 100vw, 980px, 50vw"
       width={rest.fill ? undefined : width ?? 1000}
       height={rest.fill ? undefined : height ?? 1000}
       {...rest}