[Fix/service/#56] QA 1차 반영

apps/admin/src/components/GNB.tsx

@@ -6,7 +6,7 @@ const GNB = () => {
   return (
     <div className='bg-darkgray100 fixed top-0 z-40 min-h-[100dvh] w-[24rem] px-[1.5rem] pt-[3.2rem]'>
       <div className='mb-[3.2rem]'>
-        <img src='/images/logo.jpeg' alt='로고이미지' className='h-[4.4rem]' />
+        <img src='/images/logo.png' alt='로고이미지' className='h-[4rem]' />
       </div>
       <nav>
         <ul>

apps/service/src/app/(home)/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Button } from '@components';
-import { IcSearch } from '@svg';
+import { IcCalendar } from '@svg';
 import { getHomeFeed } from '@apis';
 import dayjs from 'dayjs';
 import { DailyProgress } from '@types';
@@ -52,8 +52,8 @@ const Page = () => {
       </div>
       <footer className='bg-background mt-[2.4rem] px-[2rem] pb-[3.3rem]'>
         <Button variant='light' onClick={handleClickAllProblem}>
-          <IcSearch width={24} height={24} />
-          전체 문제 보기
+          <IcCalendar width={24} height={24} />
+          날짜별로 보기
         </Button>
       </footer>
     </>

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

@@ -0,0 +1,24 @@
+'use client';
+import { BaseModalTemplate, RouteModal } from '@components';
+import { useRouter } from 'next/navigation';
+
+const page = () => {
+  const router = useRouter();
+
+  return (
+    <RouteModal>
+      <BaseModalTemplate>
+        <BaseModalTemplate.Content>
+          <BaseModalTemplate.Text text={`현재 준비중인 기능입니다!`} />
+        </BaseModalTemplate.Content>
+        <BaseModalTemplate.ButtonSection>
+          <BaseModalTemplate.Button variant='blue' onClick={() => router.back()}>
+            닫기
+          </BaseModalTemplate.Button>
+        </BaseModalTemplate.ButtonSection>
+      </BaseModalTemplate>
+    </RouteModal>
+  );
+};
+
+export default page;

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

@@ -8,11 +8,9 @@ const page = () => {
 
   return (
     <RouteModal>
-      <img
-        src={imageUrl ?? ''}
-        alt='full image'
-        className='max-h-[calc(100dvh-8rem)] w-[calc(100dvw-8rem)] max-w-[100rem] object-contain'
-      />
+      <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>
     </RouteModal>
   );
 };

apps/service/src/app/@modal/comming-soon-modal/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/');
+};
+
+export default page;

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

@@ -2,7 +2,7 @@
 import { SolveButton } from '@components';
 import { getChildData, postChildProblemSubmit, postProblemSubmit } from '@apis';
 import { useRouter } from 'next/navigation';
-import { useTrackEvent } from '@hooks';
+import { useInvalidate, useTrackEvent } from '@hooks';
 
 interface SolveButtonsClientProps {
   publishId: string;
@@ -11,26 +11,29 @@ interface SolveButtonsClientProps {
 
 const SolveButtonsClient = ({ publishId, problemId }: SolveButtonsClientProps) => {
   const router = useRouter();
+  const { invalidateAll } = useInvalidate();
   const { trackEvent } = useTrackEvent();
   const { data } = getChildData(publishId, problemId);
-  const childProblemId = data?.data?.childProblemIds[0].toString();
+  const childProblemId = data?.data?.childProblemIds[0];
 
   const handleClickDirect = async () => {
     trackEvent('problem_solve_direct_button_click');
     await postProblemSubmit(publishId, problemId);
+    invalidateAll();
     router.push(`/problem/solve/${publishId}/${problemId}/main-problem`);
   };
 
   const handleClickStep = async () => {
     trackEvent('problem_solve_step_button_click');
     await postChildProblemSubmit(publishId, problemId);
+    invalidateAll();
     router.push(`/problem/solve/${publishId}/${problemId}/child-problem/${childProblemId}`);
   };
 
   return (
     <div className='mt-[2rem] flex flex-col gap-[1.6rem] sm:flex-row'>
       <SolveButton variant='direct' onClick={handleClickDirect} />
-      <SolveButton variant='step' onClick={handleClickStep} />
+      {childProblemId && <SolveButton variant='step' onClick={handleClickStep} />}
     </div>
   );
 };

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

@@ -14,6 +14,7 @@ import {
   ChildAnswerCheckModalTemplate,
   TwoButtonModalTemplate,
   AnswerModalTemplate,
+  Tag,
 } from '@components';
 import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { components } from '@schema';
@@ -142,9 +143,21 @@ const Page = () => {
       <ProgressHeader progress={(childProblemNumber / (childProblemLength + 1)) * 100} />
       <main className='flex flex-col px-[2rem] py-[8rem] md:flex-row md:gap-[4rem]'>
         <div className='w-full'>
-          <h1 className='font-bold-18 text-main'>
-            새끼 문제 {problemNumber}-{childProblemNumber}번
-          </h1>
+          <div className='flex items-center justify-between'>
+            <h1 className='font-bold-18 text-main'>
+              새끼 문제 {problemNumber}-{childProblemNumber}번
+            </h1>
+            {isSolved && (
+              <Tag variant='green' sizeType='small'>
+                정답
+              </Tag>
+            )}
+            {status === 'INCORRECT' && (
+              <Tag variant='red' sizeType='small'>
+                오답
+              </Tag>
+            )}
+          </div>
           <img
             src={imageUrl}
             alt={`새끼 문제 ${problemNumber}-${childProblemNumber}번`}
@@ -191,7 +204,7 @@ const Page = () => {
       </PortalModal>
       <PortalModal isOpen={isAnswerModalOpen} onClose={closeAnswerModal}>
         <AnswerModalTemplate
-          answer={`${result?.answer}${answerType === 'MULTIPLE_CHOICE' && '번'}`}
+          answer={`${result?.answer}${answerType === 'MULTIPLE_CHOICE' ? '번' : ''}`}
           handleClickButton={closeAnswerModal}
         />
       </PortalModal>

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

@@ -9,10 +9,10 @@ import {
   MainAnswerCheckModalTemplate,
   PortalModal,
   Tag,
-  TimeTag,
   ProgressHeader,
   SmallButton,
   NavigationFooter,
+  TimeTag,
 } from '@components';
 import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { ProblemStatus } from '@types';
@@ -62,7 +62,7 @@ const Page = () => {
   const isSolved = status === 'CORRECT' || status === 'RETRY_CORRECT';
   const isSubmitted = status === 'CORRECT' || status === 'RETRY_CORRECT' || status === 'INCORRECT';
   const isDirect =
-    childProblemStatuses.length === 0 ||
+    childProblemStatuses.length > 0 &&
     childProblemStatuses[childProblemStatuses.length - 1] === 'NOT_STARTED';
 
   const prevButtonLabel = isDirect
@@ -114,8 +114,20 @@ const Page = () => {
       <main className='flex flex-col px-[2rem] py-[8rem] md:flex-row md:gap-[4rem]'>
         <div className='w-full'>
           <div className='flex items-center justify-between'>
-            <h1 className='font-bold-18 text-main'>메인 문제 {number}번</h1>
-            <TimeTag minutes={recommendedMinute} seconds={recommendedSecond} />
+            <div className='flex items-center gap-[1.2rem]'>
+              <h1 className='font-bold-18 text-main'>메인 문제 {number}번</h1>
+              <TimeTag minutes={recommendedMinute} seconds={recommendedSecond} />
+            </div>
+            {isSolved && (
+              <Tag variant='green' sizeType='small'>
+                정답
+              </Tag>
+            )}
+            {status === 'INCORRECT' && (
+              <Tag variant='red' sizeType='small'>
+                오답
+              </Tag>
+            )}
           </div>
           <img
             src={imageUrl}
@@ -130,25 +142,25 @@ const Page = () => {
               </SmallButton>
             </div>
           )}
-        </div>
 
-        {!isDirect && childProblemStatuses.length > 0 && (
-          <div className='mt-[2.4rem] w-full'>
-            <h3 className='font-bold-16 text-black'>새끼 문제 정답</h3>
-            <div className='mt-[1.2rem] flex gap-[1.6rem]'>
-              {childProblemStatuses.map((childProblemStatus, index) => (
-                <div key={index} className='flex items-center gap-[0.6rem]'>
-                  <span className='font-medium-16 text-black'>
-                    {number}-{index + 1}번
-                  </span>
-                  <Tag variant={statusColor[childProblemStatus]}>
-                    {statusLabel[childProblemStatus]}
-                  </Tag>
-                </div>
-              ))}
+          {!isDirect && childProblemStatuses.length > 0 && (
+            <div className='mt-[2.4rem] w-full'>
+              <h3 className='font-bold-16 text-black'>새끼 문제 정답</h3>
+              <div className='mt-[1.2rem] flex gap-[1.6rem]'>
+                {childProblemStatuses.map((childProblemStatus, index) => (
+                  <div key={index} className='flex items-center gap-[0.6rem]'>
+                    <span className='font-medium-16 text-black'>
+                      {number}-{index + 1}번
+                    </span>
+                    <Tag variant={statusColor[childProblemStatus]}>
+                      {statusLabel[childProblemStatus]}
+                    </Tag>
+                  </div>
+                ))}
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
 
         <div className='mt-[2.8rem] w-full'>
           <form onSubmit={handleSubmit(handleSubmitAnswer)}>

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

@@ -12,8 +12,13 @@ const Page = () => {
   const router = useRouter();
   const { publishId, problemId } = useParams();
   const { trackEvent } = useTrackEvent();
-  const { problemNumber, answer, mainAnalysisImageUrl, mainHandwritingExplanationImageUrl } =
-    useReportContext();
+  const {
+    problemNumber,
+    answerType,
+    answer,
+    mainAnalysisImageUrl,
+    mainHandwritingExplanationImageUrl,
+  } = useReportContext();
   const [selectedTab, setSelectedTab] = useState<'분석' | '손해설'>('분석');
 
   const handleClickTab = (tab: '분석' | '손해설') => {
@@ -43,7 +48,10 @@ const Page = () => {
           <h1 className='font-bold-18 text-main my-[0.8rem]'>메인 문제 {problemNumber}번</h1>
           <div className='flex items-center gap-[0.8rem]'>
             <span className='font-medium-16 text-black'>정답</span>
-            <span className='font-medium-16 text-main'>{answer}번</span>
+            <span className='font-medium-16 text-main'>
+              {answer}
+              {answerType === 'MULTIPLE_CHOICE' && '번'}
+            </span>
           </div>
         </header>
         <div className='mt-[2.4rem] flex flex-col gap-[1.6rem]'>

apps/service/src/assets/svg/IcCalendar.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react';
+import { memo } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const SvgIcCalendar = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g clipPath='url(#clip0_3675_6218)'>
+      <path
+        d='M19 2H18V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0C16.7348 0 16.4804 0.105357 16.2929 0.292893C16.1054 0.48043 16 0.734784 16 1V2H8V1C8 0.734784 7.89464 0.48043 7.70711 0.292893C7.51957 0.105357 7.26522 0 7 0C6.73478 0 6.48043 0.105357 6.29289 0.292893C6.10536 0.48043 6 0.734784 6 1V2H5C3.67441 2.00159 2.40356 2.52888 1.46622 3.46622C0.528882 4.40356 0.00158786 5.67441 0 7L0 19C0.00158786 20.3256 0.528882 21.5964 1.46622 22.5338C2.40356 23.4711 3.67441 23.9984 5 24H19C20.3256 23.9984 21.5964 23.4711 22.5338 22.5338C23.4711 21.5964 23.9984 20.3256 24 19V7C23.9984 5.67441 23.4711 4.40356 22.5338 3.46622C21.5964 2.52888 20.3256 2.00159 19 2ZM2 7C2 6.20435 2.31607 5.44129 2.87868 4.87868C3.44129 4.31607 4.20435 4 5 4H19C19.7956 4 20.5587 4.31607 21.1213 4.87868C21.6839 5.44129 22 6.20435 22 7V8H2V7ZM19 22H5C4.20435 22 3.44129 21.6839 2.87868 21.1213C2.31607 20.5587 2 19.7956 2 19V10H22V19C22 19.7956 21.6839 20.5587 21.1213 21.1213C20.5587 21.6839 19.7956 22 19 22Z'
+        fill='#617AF9'
+      />
+      <path
+        d='M12 16.5C12.8284 16.5 13.5 15.8284 13.5 15C13.5 14.1716 12.8284 13.5 12 13.5C11.1716 13.5 10.5 14.1716 10.5 15C10.5 15.8284 11.1716 16.5 12 16.5Z'
+        fill='#617AF9'
+      />
+      <path
+        d='M7 16.5C7.82843 16.5 8.5 15.8284 8.5 15C8.5 14.1716 7.82843 13.5 7 13.5C6.17157 13.5 5.5 14.1716 5.5 15C5.5 15.8284 6.17157 16.5 7 16.5Z'
+        fill='#617AF9'
+      />
+      <path
+        d='M17 16.5C17.8284 16.5 18.5 15.8284 18.5 15C18.5 14.1716 17.8284 13.5 17 13.5C16.1716 13.5 15.5 14.1716 15.5 15C15.5 15.8284 16.1716 16.5 17 16.5Z'
+        fill='#617AF9'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_3675_6218'>
+        <rect width={24} height={24} fill='white' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+const Memo = memo(SvgIcCalendar);
+export default Memo;

apps/service/src/assets/svg/index.ts

@@ -1,3 +1,4 @@
+export { default as IcCalendar } from './IcCalendar';
 export { default as IcCopy } from './IcCopy';
 export { default as IcCorrect } from './IcCorrect';
 export { default as IcDirect } from './IcDirect';

apps/service/src/components/home/GuideButton.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 const GuideButton = () => {
   return (
-    <Link href='https://naver.com' target='_blank' className='min-w-[12rem] flex-1'>
+    <Link href='/comming-soon-modal' className='min-w-[12rem] flex-1'>
       <div className='flex w-full flex-col items-start gap-[0.8rem] rounded-[16px] bg-white px-[2.4rem] py-[2rem]'>
         <IcGuide width={24} height={24} />
         <div className='flex flex-col items-start'>

apps/service/src/components/home/ProblemSwiper/ProblemSwiper.tsx

@@ -42,13 +42,9 @@ const renderProblemCard = (problem: ProblemSetHomeFeedResponse, dateString: stri
 };
 
 const ProblemSwiper = ({ problemSets }: ProblemSwiperProps) => {
-  const initialSlide = problemSets.findIndex(
-    (problem) => problem.date === dayjs().format('YYYY-MM-DD')
-  );
+  const dayOfWeek = dayjs().day();
 
-  if (initialSlide === -1) {
-    return null;
-  }
+  const initialSlide = dayOfWeek === 0 || dayOfWeek === 6 ? 4 : dayOfWeek - 1;
 
   return (
     <Swiper