[Fix/service/#60] Image 태그 수정

apps/service/next.config.ts

@@ -1,6 +1,10 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  images: {
+    domains: ['s3-moplus.s3.ap-northeast-2.amazonaws.com'],
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

apps/service/src/app/@modal/(.)image-modal/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { RouteModal } from '@components';
+import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 
 const page = () => {
@@ -8,8 +9,14 @@ const page = () => {
 
   return (
     <RouteModal>
-      <div className='max-h-[calc(100dvh-8rem)] w-[calc(100dvw-8rem)] max-w-[100rem] p-[2rem]'>
-        <img src={imageUrl ?? ''} alt='full image' className='object-contain' />
+      <div className='max-h-[calc(100dvh-8rem)] w-[calc(100dvw-8rem)] max-w-[100rem] p-[1.6rem]'>
+        <Image
+          src={imageUrl ?? ''}
+          alt='full image'
+          className='object-contain'
+          width={700}
+          height={200}
+        />
       </div>
     </RouteModal>
   );

apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx

@@ -15,9 +15,11 @@ import {
   TwoButtonModalTemplate,
   AnswerModalTemplate,
   Tag,
+  ImageContainer,
 } from '@components';
 import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { components } from '@schema';
+import Image from 'next/image';
 
 import { useChildProblemContext } from '@/hooks/problem';
 
@@ -51,7 +53,7 @@ const Page = () => {
   const selectedAnswer = watch('answer');
 
   // apis
-  const { data } = getChildProblemById(publishId, problemId, childProblemId);
+  const { data, isLoading } = getChildProblemById(publishId, problemId, childProblemId);
   const {
     problemNumber,
     childProblemNumber = 1,
@@ -138,6 +140,10 @@ const Page = () => {
     onNext();
   };
 
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={(childProblemNumber / (childProblemLength + 1)) * 100} />
@@ -158,11 +164,15 @@ const Page = () => {
               </Tag>
             )}
           </div>
-          <img
-            src={imageUrl}
-            alt={`새끼 문제 ${problemNumber}-${childProblemNumber}번`}
-            className='mt-[1.2rem] w-full object-contain'
-          />
+          <ImageContainer className='mt-[1.2rem]'>
+            <Image
+              src={imageUrl ?? ''}
+              alt={`새끼 문제 ${problemNumber}-${childProblemNumber}번`}
+              className='w-full object-contain'
+              width={700}
+              height={200}
+            />
+          </ImageContainer>
 
           <div className='mt-[0.6rem] mb-[0.4rem] flex items-center justify-end'>
             <SmallButton variant='underline' sizeType='small' onClick={handleClickShowMainProblem}>

apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx

@@ -13,9 +13,11 @@ import {
   SmallButton,
   NavigationFooter,
   TimeTag,
+  ImageContainer,
 } from '@components';
 import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { ProblemStatus } from '@types';
+import Image from 'next/image';
 
 import { useChildProblemContext } from '@/hooks/problem';
 
@@ -46,7 +48,7 @@ const Page = () => {
   const selectedAnswer = watch('answer');
 
   // apis
-  const { data } = getProblemById(publishId, problemId);
+  const { data, isLoading } = getProblemById(publishId, problemId);
 
   const {
     number,
@@ -109,6 +111,10 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/analysis`);
   };
 
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={100} />
@@ -130,11 +136,16 @@ const Page = () => {
               </Tag>
             )}
           </div>
-          <img
-            src={imageUrl}
-            alt={`메인 문제 ${number}번`}
-            className='mt-[1.2rem] w-full object-contain'
-          />
+          <ImageContainer className='mt-[1.2rem]'>
+            <Image
+              src={imageUrl ?? ''}
+              alt={`메인 문제 ${number}번`}
+              className='w-full object-contain'
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
 
           {isDirect && (
             <div className='mt-[0.6rem] flex items-center justify-end'>

apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx

@@ -1,16 +1,22 @@
 'use client';
+
 import { getProblemThumbnail } from '@apis';
-import { ProgressHeader, TimeTag } from '@components';
+import { ImageContainer, ProgressHeader, TimeTag } from '@components';
 import { useParams } from 'next/navigation';
+import Image from 'next/image';
 
 import SolveButtonsClient from './SolveButtonsClient';
 
 const Page = () => {
   const { publishId, problemId } = useParams<{ publishId: string; problemId: string }>();
 
-  const { data } = getProblemThumbnail(publishId, problemId);
+  const { data, isLoading } = getProblemThumbnail(publishId, problemId);
   const { number, imageUrl, recommendedMinute, recommendedSecond } = data?.data ?? {};
 
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={0} />
@@ -19,11 +25,16 @@ const Page = () => {
           <h1 className='font-bold-18 text-main'>메인 문제 {number}번</h1>
           <TimeTag minutes={recommendedMinute} seconds={recommendedSecond} />
         </div>
-        <img
-          src={imageUrl}
-          alt={`메인 문제 ${number}번`}
-          className='mt-[1.2rem] w-full object-contain'
-        />
+        <ImageContainer className='mt-[1.2rem]'>
+          <Image
+            src={imageUrl ?? ''}
+            alt={`메인 문제 ${number}번`}
+            className='w-full object-contain'
+            width={700}
+            height={200}
+            priority
+          />
+        </ImageContainer>
 
         <SolveButtonsClient publishId={publishId} problemId={problemId} />
       </main>

apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx

@@ -1,7 +1,8 @@
 'use client';
-import { NavigationFooter, SmallButton, ProgressHeader } from '@components';
+import { NavigationFooter, SmallButton, ProgressHeader, ImageContainer } from '@components';
 import { useParams, useRouter } from 'next/navigation';
 import { useTrackEvent } from '@hooks';
+import Image from 'next/image';
 
 import { useReportContext } from '@/hooks/report';
 
@@ -33,6 +34,10 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/prescription`);
   };
 
+  if (!seniorTipImageUrl) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={66} />
@@ -44,11 +49,16 @@ const Page = () => {
           </SmallButton>
         </div>
         <div className='mt-[2.4rem] flex flex-col gap-[1.6rem]'>
-          <img
-            src={seniorTipImageUrl}
-            alt='advanced'
-            className={`w-full rounded-[1.6rem] object-contain`}
-          />
+          <ImageContainer>
+            <Image
+              src={seniorTipImageUrl ?? ''}
+              alt='advanced'
+              className={`w-full rounded-[1.6rem] object-contain`}
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
         </div>
         <NavigationFooter
           prevLabel='해설'

apps/service/src/app/report/[publishId]/[problemId]/analysis/page.tsx

@@ -2,8 +2,9 @@
 import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { IcRight, IcThumbtack } from '@svg';
-import { NavigationFooter, ProgressHeader } from '@components';
+import { ImageContainer, NavigationFooter, ProgressHeader } from '@components';
 import { useTrackEvent } from '@hooks';
+import Image from 'next/image';
 
 import { useReportContext } from '@/hooks/report';
 import { TabMenu } from '@/components/report';
@@ -40,6 +41,10 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/advanced`);
   };
 
+  if (!mainAnalysisImageUrl || !mainHandwritingExplanationImageUrl) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={33} />
@@ -61,16 +66,26 @@ const Page = () => {
             selectedTab={selectedTab}
             onTabChange={handleClickTab}
           />
-          <img
-            src={mainAnalysisImageUrl}
-            alt='analysis'
-            className={`w-full rounded-[1.6rem] object-contain ${selectedTab === '분석' ? 'block' : 'hidden'}`}
-          />
-          <img
-            src={mainHandwritingExplanationImageUrl}
-            alt='handWriting'
-            className={`w-full rounded-[1.6rem] object-contain ${selectedTab === '손해설' ? 'block' : 'hidden'}`}
-          />
+          <ImageContainer className={`${selectedTab === '분석' ? 'block' : 'hidden'}`}>
+            <Image
+              src={mainAnalysisImageUrl ?? ''}
+              alt='analysis'
+              className={`w-full object-contain`}
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
+          <ImageContainer className={`${selectedTab === '손해설' ? 'block' : 'hidden'}`}>
+            <Image
+              src={mainHandwritingExplanationImageUrl ?? ''}
+              alt='handWriting'
+              className={`w-full object-contain`}
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
 
           <button
             type='button'

apps/service/src/app/report/[publishId]/[problemId]/prescription/detail/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Header } from '@components';
+import { Header, ImageContainer } from '@components';
 import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
 
 import { useReportContext } from '@/hooks/report';
 
@@ -27,18 +28,38 @@ const Page = () => {
     type === 'child' ? `-${childNumber}` : ''
   }번`;
 
+  if (!problemImageUrl || !solutionImageUrls) {
+    return <></>;
+  }
+
   return (
     <>
       <Header title='진단 및 처방' iconType='back' />
       <main className='px-[2rem] py-[8rem]'>
         <h1 className='font-bold-18 text-main my-[0.8rem]'>{title}</h1>
         <div className='mt-[1.6rem] flex flex-col gap-[1.6rem] md:flex-row'>
-          <div className='w-full'>
-            <img src={problemImageUrl} alt='problem' className='w-full rounded-[1.6rem]' />
-          </div>
+          <ImageContainer className='w-full'>
+            <Image
+              src={problemImageUrl ?? ''}
+              alt='problem'
+              className='w-full'
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
           <div className='flex w-full flex-col gap-[1.6rem]'>
             {(solutionImageUrls ?? []).map((url, index) => (
-              <img key={index} src={url} alt='solution' className='w-full rounded-[1.6rem]' />
+              <ImageContainer key={index}>
+                <Image
+                  src={url ?? ''}
+                  alt='solution'
+                  className='w-full'
+                  width={700}
+                  height={200}
+                  priority
+                />
+              </ImageContainer>
             ))}
           </div>
         </div>