From ae4285a8f60054313b199229b4c5c377e959e99c Mon Sep 17 00:00:00 2001 From: Yoo TaeSeung Date: Mon, 31 Mar 2025 03:08:26 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat(service):=20next/Image=20config=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/service/next.config.ts | 4 ++++ apps/service/src/components/home/ProblemCard/ProblemCard.tsx | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/service/next.config.ts b/apps/service/next.config.ts index 3686b004..5c3e5b74 100644 --- a/apps/service/next.config.ts +++ b/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, diff --git a/apps/service/src/components/home/ProblemCard/ProblemCard.tsx b/apps/service/src/components/home/ProblemCard/ProblemCard.tsx index 65291b8f..04b11f1e 100644 --- a/apps/service/src/components/home/ProblemCard/ProblemCard.tsx +++ b/apps/service/src/components/home/ProblemCard/ProblemCard.tsx @@ -1,6 +1,7 @@ import { Button } from '@components'; import { useTrackEvent } from '@hooks'; import { IcSolve } from '@svg'; +import Image from 'next/image'; import { useRouter } from 'next/navigation'; interface Props { @@ -30,10 +31,12 @@ const ProblemCard = ({ publishId, dateString, title, image, solvedCount }: Props

{title}

- 문제 이미지
Date: Mon, 31 Mar 2025 03:40:11 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Feat(service):=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=84=B9=EC=85=98=20Image=20=ED=83=9C=EA=B7=B8,=20?= =?UTF-8?q?isLoading,=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=8C=A8=EB=94=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/@modal/(.)image-modal/page.tsx | 11 +++++++-- .../child-problem/[childProblemId]/page.tsx | 21 ++++++++++++----- .../[problemId]/main-problem/page.tsx | 22 +++++++++++++----- .../solve/[publishId]/[problemId]/page.tsx | 23 ++++++++++++++----- .../src/components/problem/DayProblemCard.tsx | 9 +++++--- 5 files changed, 63 insertions(+), 23 deletions(-) diff --git a/apps/service/src/app/@modal/(.)image-modal/page.tsx b/apps/service/src/app/@modal/(.)image-modal/page.tsx index 7dfcb836..ef8cf4d2 100644 --- a/apps/service/src/app/@modal/(.)image-modal/page.tsx +++ b/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 ( -
- full image +
+ full image
); diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx index 33315c6b..debd821f 100644 --- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx +++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx @@ -18,6 +18,7 @@ import { } from '@components'; import { useInvalidate, useModal, useTrackEvent } from '@hooks'; import { components } from '@schema'; +import Image from 'next/image'; import { useChildProblemContext } from '@/hooks/problem'; @@ -51,7 +52,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 +139,10 @@ const Page = () => { onNext(); }; + if (isLoading) { + return <>; + } + return ( <> @@ -158,11 +163,15 @@ const Page = () => { )}
- {`새끼 +
+ {`새끼 +
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx index c954a5ce..09beddfa 100644 --- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx +++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx @@ -16,6 +16,7 @@ import { } from '@components'; import { useInvalidate, useModal, useTrackEvent } from '@hooks'; import { ProblemStatus } from '@types'; +import Image from 'next/image'; import { useChildProblemContext } from '@/hooks/problem'; @@ -46,7 +47,7 @@ const Page = () => { const selectedAnswer = watch('answer'); // apis - const { data } = getProblemById(publishId, problemId); + const { data, isLoading } = getProblemById(publishId, problemId); const { number, @@ -109,6 +110,10 @@ const Page = () => { router.push(`/report/${publishId}/${problemId}/analysis`); }; + if (isLoading) { + return <>; + } + return ( <> @@ -130,11 +135,16 @@ const Page = () => { )}
- {`메인 +
+ {`메인 +
{isDirect && (
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx index 62ef1485..e27b68f2 100644 --- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx +++ b/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 { 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 ( <> @@ -19,11 +25,16 @@ const Page = () => {

메인 문제 {number}번

- {`메인 +
+ {`메인 +
diff --git a/apps/service/src/components/problem/DayProblemCard.tsx b/apps/service/src/components/problem/DayProblemCard.tsx index ee2fabdb..922ff304 100644 --- a/apps/service/src/components/problem/DayProblemCard.tsx +++ b/apps/service/src/components/problem/DayProblemCard.tsx @@ -4,6 +4,7 @@ import { Button, Divider, Tag } from '@components'; import { IcSolve } from '@svg'; import { components } from '@schema'; import Link from 'next/link'; +import Image from 'next/image'; dayjs.locale('ko'); @@ -73,10 +74,12 @@ const DayProblemCard = ({ dayProblemData }: DayProblemCardProps) => { ))}
- 문제 이미지
From 396da3598de783734e33d1beed5e2e56da0be86f Mon Sep 17 00:00:00 2001 From: Yoo TaeSeung Date: Mon, 31 Mar 2025 03:48:30 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat(service):=20ImageContainer=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../child-problem/[childProblemId]/page.tsx | 5 +++-- .../[publishId]/[problemId]/main-problem/page.tsx | 5 +++-- .../problem/solve/[publishId]/[problemId]/page.tsx | 6 +++--- .../service/src/components/common/ImageContainer.tsx | 12 ++++++++++++ apps/service/src/components/common/index.ts | 2 ++ 5 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 apps/service/src/components/common/ImageContainer.tsx diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx index debd821f..35fa37b8 100644 --- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx +++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx @@ -15,6 +15,7 @@ import { TwoButtonModalTemplate, AnswerModalTemplate, Tag, + ImageContainer, } from '@components'; import { useInvalidate, useModal, useTrackEvent } from '@hooks'; import { components } from '@schema'; @@ -163,7 +164,7 @@ const Page = () => { )}
-
+ {`새끼 { width={700} height={200} /> -
+
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx index 09beddfa..b23eeec8 100644 --- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx +++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx @@ -13,6 +13,7 @@ import { SmallButton, NavigationFooter, TimeTag, + ImageContainer, } from '@components'; import { useInvalidate, useModal, useTrackEvent } from '@hooks'; import { ProblemStatus } from '@types'; @@ -135,7 +136,7 @@ const Page = () => { )}
-
+ {`메인 { height={200} priority /> -
+ {isDirect && (
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx index e27b68f2..1b84730c 100644 --- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx +++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx @@ -1,7 +1,7 @@ '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'; @@ -25,7 +25,7 @@ const Page = () => {

메인 문제 {number}번

-
+ {`메인 { height={200} priority /> -
+ diff --git a/apps/service/src/components/common/ImageContainer.tsx b/apps/service/src/components/common/ImageContainer.tsx new file mode 100644 index 00000000..fd36d6a3 --- /dev/null +++ b/apps/service/src/components/common/ImageContainer.tsx @@ -0,0 +1,12 @@ +import { ReactNode } from 'react'; + +interface ImageContainerProps { + children: ReactNode; + className?: string; +} + +const ImageContainer = ({ children, className = '' }: ImageContainerProps) => { + return
{children}
; +}; + +export default ImageContainer; diff --git a/apps/service/src/components/common/index.ts b/apps/service/src/components/common/index.ts index 0250d266..9c20a662 100644 --- a/apps/service/src/components/common/index.ts +++ b/apps/service/src/components/common/index.ts @@ -8,6 +8,7 @@ import ProgressBar from './ProgressBar'; import NavigationFooter from './NavigationFooter'; import Divider from './Divider'; import ProgressHeader from './ProgressHeader'; +import ImageContainer from './ImageContainer'; export * from './Buttons'; export * from './Inputs'; @@ -24,4 +25,5 @@ export { NavigationFooter, Divider, ProgressHeader, + ImageContainer, }; From 23b121148936b7f958a2e90266ae90010292a430 Mon Sep 17 00:00:00 2001 From: Yoo TaeSeung Date: Mon, 31 Mar 2025 04:07:34 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat(service):=20=ED=95=B4=EC=84=A4=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20Image=20&=20ImageContainer=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[publishId]/[problemId]/advanced/page.tsx | 22 ++++++++--- .../[publishId]/[problemId]/analysis/page.tsx | 37 ++++++++++++------ .../[problemId]/prescription/detail/page.tsx | 31 ++++++++++++--- .../[problemId]/reading-tip/page.tsx | 39 +++++++++++++------ 4 files changed, 96 insertions(+), 33 deletions(-) diff --git a/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx b/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx index a9b68e91..4673fb00 100644 --- a/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx +++ b/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 ( <> @@ -44,11 +49,16 @@ const Page = () => {
- advanced + + advanced +
{ router.push(`/report/${publishId}/${problemId}/advanced`); }; + if (!mainAnalysisImageUrl || !mainHandwritingExplanationImageUrl) { + return <>; + } + return ( <> @@ -61,16 +66,26 @@ const Page = () => { selectedTab={selectedTab} onTabChange={handleClickTab} /> - analysis - handWriting + + analysis + + + handWriting +