Fix: Imgae -> img 태그 변경

dockerfile

@@ -22,7 +22,7 @@ COPY . .
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 
-RUN yarn build
+# RUN yarn build
 
 # If using npm comment out above and use below instead
 # RUN npm run build

next.config.js

@@ -3,7 +3,14 @@ const nextConfig = {
   reactStrictMode: true,
   output: 'standalone',
   images: {
-    domains: ['13.209.39.139'],
+    remotePatterns: [
+      {
+        protocol: 'http',
+        hostname: '13.209.39.139',
+        port: '31192',
+        pathname: '/api/**',
+      },
+    ],
   },
   compiler: {
     styledComponents: true,

src/app/dashboard/components/Dashboard.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client';
 
 import React from 'react';
@@ -22,27 +23,23 @@ function Dashboard() {
       <div className="grid grid-cols-8 p-12 h-[calc(100vh-150px)]">
         {getResult.data && (
           <>
-            <div className="mt-12 col-span-2">
+            <div className="mt-20 col-span-2">
               <h2 className="text-lg font-semibold text-center">Input Image</h2>
-              <div className="relative w-full h-[calc(50vh-250px)] mt-2 mb-20 ">
-                <Image
+              <div className="relative w-full h-[calc(50vh-250px)] mt-2 mb-12">
+                <img
                   src={getResult.data?.origin.imageUrl}
                   alt="origin image"
-                  fill
-                  sizes="100vw, 100vh"
-                  priority
+                  className="w-full h-full"
                 />
               </div>
               <h2 className="text-lg font-semibold text-center">
                 Inference Result Image
               </h2>
               <div className="relative w-full h-[calc(50vh-250px)] mt-2">
-                <Image
+                <img
                   src={getResult.data?.latest.imageUrl}
                   alt="inference image"
-                  fill
-                  sizes="100vw, 100vh"
-                  priority
+                  className="w-full h-full"
                 />
               </div>
             </div>

src/app/dashboard/types/index.ts

@@ -2,10 +2,10 @@ import { StaticImageData } from 'next/image';
 
 export interface ResultDataType {
   origin: {
-    imageUrl: StaticImageData;
+    imageUrl: string;
   };
   latest: {
-    imageUrl: StaticImageData;
+    imageUrl: string;
     timestamp: number;
     particleSizeRatio: { range: string; count: number }[];
   };