[Feat/service/#70] UI 수정사항 반영

apps/service/package.json

@@ -20,10 +20,12 @@
     "react": "^19",
     "react-dom": "^19",
     "react-hook-form": "^7.54.2",
+    "react-toastify": "^11.0.3",
     "swiper": "^11.2.5"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.0.4",
     "@tanstack/eslint-plugin-query": "^5.66.0",
     "@types/node": "^20",
     "@types/react": "^19",

apps/service/src/apis/controller/submit/postProblemSubmit.ts

@@ -1,10 +1,10 @@
 import { client } from '@apis';
 
-const postProblemSubmit = async (publishId: string, problemId: string) => {
+const postProblemSubmit = async (publishId: number, problemId: number) => {
   return await client.POST('/api/v1/client/problemSubmit', {
     body: {
-      publishId: Number(publishId),
-      problemId: Number(problemId),
+      publishId,
+      problemId,
     },
   });
 };

apps/service/src/app/layout.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
     ? new URL('http://www.dev.math-pointer.com')
     : new URL('https://math-pointer.com'),
   title: '포인터',
-  description: '포인터',
+  description: '진단과 학습은 꼼꼼하게 성적 향상은 빠르게',
   robots: isDevelopment
     ? {
         index: false,

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

@@ -25,7 +25,7 @@ const Page = () => {
               <ProblemStatusCard
                 key={problem.problemId}
                 mainProblemNumber={index + 1}
-                publishId={publishId}
+                publishId={Number(publishId)}
                 problemData={problem}
               />
             );

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

@@ -19,7 +19,7 @@ const SolveButtonsClient = ({ publishId, problemId }: SolveButtonsClientProps) =
 
   const handleClickDirect = async () => {
     trackEvent('problem_solve_direct_button_click');
-    await postProblemSubmit(publishId, problemId);
+    await postProblemSubmit(Number(publishId), Number(problemId));
     invalidateAll();
     router.push(`/problem/solve/${publishId}/${problemId}/main-problem`);
   };

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

@@ -3,7 +3,9 @@ import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import Image from 'next/image';
+import { Slide, ToastContainer } from 'react-toastify';
 
+import { copyImageToClipboard } from '@utils';
 import { useGetChildProblemById } from '@apis';
 import { putChildProblemSubmit, putChildProblemSkip } from '@apis';
 import {
@@ -13,11 +15,13 @@ import {
   NavigationFooter,
   ProgressHeader,
   SmallButton,
-  ChildAnswerCheckModalTemplate,
   TwoButtonModalTemplate,
   AnswerModalTemplate,
   Tag,
   ImageContainer,
+  CopyButton,
+  BottomSheet,
+  ChildAnswerCheckBottomSheetTemplate,
 } from '@components';
 import { useInvalidate, useModal } from '@hooks';
 import { components } from '@schema';
@@ -64,9 +68,7 @@ const Page = () => {
   } = data?.data ?? {};
 
   const prevButtonLabel =
-    childProblemNumber === 1
-      ? `메인 문제 ${problemNumber}번`
-      : `새끼 문제 ${problemNumber}-${childProblemNumber - 1}번`;
+    childProblemNumber === 1 ? '' : `새끼 문제 ${problemNumber}-${childProblemNumber - 1}번`;
 
   const nextButtonLabel =
     childProblemNumber === childProblemLength
@@ -140,12 +142,35 @@ const Page = () => {
     onNext();
   };
 
+  const handleClickCopyImage = async () => {
+    if (!imageUrl) return;
+    await copyImageToClipboard(imageUrl);
+  };
+
   if (isLoading) {
     return <></>;
   }
 
   return (
     <>
+      <ToastContainer
+        position='bottom-center'
+        autoClose={1000}
+        newestOnTop={true}
+        closeOnClick
+        rtl={false}
+        pauseOnHover={false}
+        hideProgressBar
+        transition={Slide}
+        closeButton={false}
+        style={{
+          fontSize: '1.6rem',
+          width: '30rem',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          bottom: '3rem',
+        }}
+      />
       <ProgressHeader progress={(childProblemNumber / (childProblemLength + 1)) * 100} />
       <main className='flex flex-col px-[2rem] py-[8rem]'>
         <div className='w-full'>
@@ -164,14 +189,18 @@ const Page = () => {
               </Tag>
             )}
           </div>
-          <ImageContainer className='mt-[1.2rem]'>
+          <ImageContainer className='relative mt-[1.2rem]'>
             <Image
               src={imageUrl ?? ''}
               alt={`새끼 문제 ${problemNumber}-${childProblemNumber}번`}
               className='w-full object-contain'
               width={700}
               height={200}
+              priority
             />
+            <div className='absolute right-[1.6rem] bottom-[1.6rem]'>
+              <CopyButton onClick={handleClickCopyImage} />
+            </div>
           </ImageContainer>
 
           <div className='mt-[0.6rem] mb-[0.4rem] flex items-center justify-end'>
@@ -204,14 +233,16 @@ const Page = () => {
         onClickNext={isSubmitted ? handleClickNext : handleClickFooterSkipButton}
       />
 
-      <PortalModal isOpen={isOpen} onClose={closeModal}>
-        <ChildAnswerCheckModalTemplate
+      <BottomSheet isOpen={isOpen} onClose={closeModal}>
+        <ChildAnswerCheckBottomSheetTemplate
           result={result}
           onClose={handleClickCloseCheckModal}
-          handleClickButton={handleClickNextProblemButton}
+          handleClickShowPointing={() => {}}
+          handleClickNext={handleClickNextProblemButton}
           handleClickShowAnswer={handleClickShowAnswer}
         />
-      </PortalModal>
+      </BottomSheet>
+
       <PortalModal isOpen={isAnswerModalOpen} onClose={closeAnswerModal}>
         <AnswerModalTemplate
           answer={`${result?.answer}${answerType === 'MULTIPLE_CHOICE' ? '번' : ''}`}

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

@@ -3,24 +3,26 @@ import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import Image from 'next/image';
+import { Slide, ToastContainer } from 'react-toastify';
 
 import { useGetProblemById, putProblemSubmit } from '@apis';
 import {
   AnswerInput,
   Button,
-  MainAnswerCheckModalTemplate,
-  PortalModal,
   Tag,
   ProgressHeader,
   SmallButton,
   NavigationFooter,
   TimeTag,
   ImageContainer,
+  CopyButton,
+  MainAnswerCheckBottomSheetTemplate,
+  BottomSheet,
 } from '@components';
 import { useInvalidate, useModal } from '@hooks';
 import { ProblemStatus } from '@types';
 import { useChildProblemContext } from '@/hooks/problem';
-import { trackEvent } from '@utils';
+import { copyImageToClipboard, trackEvent } from '@utils';
 
 const statusLabel: Record<string, string> = {
   CORRECT: '정답',
@@ -111,12 +113,35 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/analysis`);
   };
 
+  const handleClickCopyImage = async () => {
+    if (!imageUrl) return;
+    await copyImageToClipboard(imageUrl);
+  };
+
   if (isLoading) {
     return <></>;
   }
 
   return (
     <>
+      <ToastContainer
+        position='bottom-center'
+        autoClose={1000}
+        newestOnTop={true}
+        closeOnClick
+        rtl={false}
+        pauseOnHover={false}
+        hideProgressBar
+        transition={Slide}
+        closeButton={false}
+        style={{
+          fontSize: '1.6rem',
+          width: '30rem',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          bottom: '3rem',
+        }}
+      />
       <ProgressHeader progress={100} />
       <main className='flex flex-col px-[2rem] py-[8rem]'>
         <div className='w-full'>
@@ -136,7 +161,7 @@ const Page = () => {
               </Tag>
             )}
           </div>
-          <ImageContainer className='mt-[1.2rem]'>
+          <ImageContainer className='relative mt-[1.2rem]'>
             <Image
               src={imageUrl ?? ''}
               alt={`메인 문제 ${number}번`}
@@ -145,6 +170,9 @@ const Page = () => {
               height={200}
               priority
             />
+            <div className='absolute right-[1.6rem] bottom-[1.6rem]'>
+              <CopyButton onClick={handleClickCopyImage} />
+            </div>
           </ImageContainer>
 
           {isDirect && (
@@ -197,13 +225,14 @@ const Page = () => {
         onClickNext={isSubmitted ? handleClickNext : undefined}
       />
 
-      <PortalModal isOpen={isOpen} onClose={closeModal}>
-        <MainAnswerCheckModalTemplate
+      <BottomSheet isOpen={isOpen} onClose={closeModal}>
+        <MainAnswerCheckBottomSheetTemplate
           result={result}
           onClose={handleClickSolveAgain}
-          handleClickButton={handleClickShowReport}
+          handleClickStepSolve={handleClickStepSolve}
+          handleClickShowReport={handleClickShowReport}
         />
-      </PortalModal>
+      </BottomSheet>
     </>
   );
 };