From 0fb385e4724f5f8030fb7b81b6917bdb311976b3 Mon Sep 17 00:00:00 2001 From: kimhyunjo Date: Sun, 15 Oct 2023 23:29:49 +0900 Subject: [PATCH] :alien: Change long problem grade api to submit api --- .../src/Page/LongProblemAnswerPage/index.tsx | 13 +++++++++---- .../ResultPage/Content/StandardAnswer/index.tsx | 4 ++-- packages/service/src/Page/ResultPage/index.tsx | 3 +-- .../src/api/wrapper/problem/problemApiWrapper.ts | 8 ++++++++ packages/service/src/constants/apiUrl.ts | 3 ++- packages/service/src/types/api/problem.ts | 12 +++++++++++- 6 files changed, 33 insertions(+), 10 deletions(-) diff --git a/packages/service/src/Page/LongProblemAnswerPage/index.tsx b/packages/service/src/Page/LongProblemAnswerPage/index.tsx index fa20cfbc..2ba4ed1d 100644 --- a/packages/service/src/Page/LongProblemAnswerPage/index.tsx +++ b/packages/service/src/Page/LongProblemAnswerPage/index.tsx @@ -6,7 +6,7 @@ import { TextBox } from '../../Component/Box'; import { SkeletonLongProblemResultPage } from '../../Component/Skeleton/SkeletonLongProblemResultPage'; import { INVALID_ID_ERROR } from '../../errors'; import { SplitProblemDetailPageTemplate } from '../../Template/SplitProblemDetailPageTemplate'; -import { ILongProblemResultData } from '../../types/api/problem'; +import { ILongProblemSubmitData } from '../../types/api/problem'; import { ILongProblemResultLocationState } from '../../types/problem'; import { StandardAnswerContent } from '../ResultPage/Content/StandardAnswer'; import { answerContentStyle, contentStyle, subtitleStyle } from '../ResultPage/style.css'; @@ -15,11 +15,16 @@ import { MetaTag } from '../utils/MetaTag'; export const LongProblemAnswerPage = () => { const { id } = useParams(); const { userAnswer, title } = useLocation().state as ILongProblemResultLocationState; - const { data: result, isLoading, mutate } = useMutation(handleSubmit); + const { + data: result, + isLoading, + isSuccess, + mutate, + } = useMutation(handleSubmit); function handleSubmit() { if (!id) throw INVALID_ID_ERROR; - return problemApiWrapper.longProblemResult(id, userAnswer); + return problemApiWrapper.longProblemSubmit(id, userAnswer); } useEffect(() => { @@ -42,7 +47,7 @@ export const LongProblemAnswerPage = () => { }} isResult={true} isResultPage={true} - leftSideContent={} + leftSideContent={isSuccess ? : <>} rightSideContent={

내 답안

diff --git a/packages/service/src/Page/ResultPage/Content/StandardAnswer/index.tsx b/packages/service/src/Page/ResultPage/Content/StandardAnswer/index.tsx index 8904ffb7..2bc16d90 100644 --- a/packages/service/src/Page/ResultPage/Content/StandardAnswer/index.tsx +++ b/packages/service/src/Page/ResultPage/Content/StandardAnswer/index.tsx @@ -1,10 +1,10 @@ import { useEffect, useState } from 'react'; import { TextBox } from '../../../../Component/Box'; import { MarkdownBox } from '../../../../Component/Box/MarkdownBox'; -import { ILongProblemResult } from '../../../../types/problem'; +import { ILongProblemSubmitData } from '../../../../types/api/problem'; import { contentStyle, standardAnswerContentStyle, subtitleStyle } from '../../style.css'; -export const StandardAnswerContent = ({ result }: ILongProblemResult) => { +export const StandardAnswerContent = ({ result }: { result: ILongProblemSubmitData }) => { const [text, setText] = useState(''); useEffect(() => { diff --git a/packages/service/src/Page/ResultPage/index.tsx b/packages/service/src/Page/ResultPage/index.tsx index e0d6e455..e14e937f 100644 --- a/packages/service/src/Page/ResultPage/index.tsx +++ b/packages/service/src/Page/ResultPage/index.tsx @@ -9,7 +9,6 @@ import { MetaTag } from '../utils/MetaTag'; import { SplitProblemDetailPageTemplate } from '../../Template/SplitProblemDetailPageTemplate'; import { ILongProblemResultLocationState } from '../../types/problem'; import { INVALID_ID_ERROR } from '../../errors'; -import { StandardAnswerContent } from './Content/StandardAnswer'; import { UserAnswerContent } from './Content/UserAnswer'; import { ChartContent } from './Content/Chart'; import { createUserAnswerDOM } from '../../utils/createLongProblemDOM'; @@ -49,7 +48,7 @@ export default function ResultPage() { handleSubmit={handleSubmit} isResult={true} isResultPage={true} - leftSideContent={} + leftSideContent={<>} rightSideContent={} bottomContent={} /> diff --git a/packages/service/src/api/wrapper/problem/problemApiWrapper.ts b/packages/service/src/api/wrapper/problem/problemApiWrapper.ts index 75692555..db35611f 100644 --- a/packages/service/src/api/wrapper/problem/problemApiWrapper.ts +++ b/packages/service/src/api/wrapper/problem/problemApiWrapper.ts @@ -12,6 +12,7 @@ import { IShortProblemDetailResponseDataV2, TProblemSetListResponse, IProblemSetDetailResponse, + ILongProblemSubmitData, } from '../../../types/api/problem'; import { AxiosRequestConfig } from 'axios'; import { BEARER_TOKEN } from 'auth/constants'; @@ -43,6 +44,13 @@ export const problemApiWrapper = { .get(API_URL_WITH_PARAMS.MULTIPLE_PROBLEM_DETAIL(problem_id)) .then((res: { data: IMultipleProblemDetailResponseData }) => res.data); }, + longProblemSubmit: (problem_id: string, answer: string) => { + return apiClient + .post(API_URL_WITH_PARAMS.LONG_PROBLEM_SUBMIT(problem_id), { + answer, + }) + .then((res: { data: ILongProblemSubmitData }) => res.data); + }, longProblemResult: (problem_id: string, answer: string) => { return apiClient .post( diff --git a/packages/service/src/constants/apiUrl.ts b/packages/service/src/constants/apiUrl.ts index 3c0c31d4..35ced3ad 100644 --- a/packages/service/src/constants/apiUrl.ts +++ b/packages/service/src/constants/apiUrl.ts @@ -23,7 +23,8 @@ const API_URL_WITH_PARAMS = { SHORT_PROBLEM_DETAIL: (problem_id: string) => `/v1/problems/short/${problem_id}`, SHORT_PROBLEM_DETAIL_V2: (problem_id: string) => `/v2/problems/short/${problem_id}`, MULTIPLE_PROBLEM_DETAIL: (problem_id: string) => `/v1/problems/multiple/${problem_id}`, - LONG_PROBLEM_RESULT: (problem_id: string) => `/v1/problems/long/${problem_id}/grade`, + LONG_PROBLEM_SUBMIT: (problem_id: string) => `/v1/problems/long/${problem_id}/submit`, // 채점 X + LONG_PROBLEM_RESULT: (problem_id: string) => `/v1/problems/long/${problem_id}/grade`, // 채점 O SHORT_PROBLEM_RESULT: (problem_id: string) => `/v1/problems/short/${problem_id}/grade`, MULTIPLE_PROBLEM_RESULT: (problem_id: string) => `/v1/problems/multiple/${problem_id}/grade`, UPDATE_USER: (user_id: string) => `/v1/users/${user_id}`, diff --git a/packages/service/src/types/api/problem.ts b/packages/service/src/types/api/problem.ts index 10bed75d..6c1df6b3 100644 --- a/packages/service/src/types/api/problem.ts +++ b/packages/service/src/types/api/problem.ts @@ -27,6 +27,16 @@ export interface ILongProblemDetailResponseData extends IProblemDetailResponseDa bottomScore: number; } +export interface ILongProblemSubmitData extends ILongProblemDetailResponseData { + title: string; + tags: string[]; + description: string; + totalSubmissionCount: number; + userSubmissionCount: number; + userAnswer: string; + standardAnswer: string; +} + export interface ILongProblemResultData extends ILongProblemDetailResponseData { gradingHistoryId: number; problemId: number; @@ -50,7 +60,7 @@ export const SHORT_ANSWER_TYPE = { NUMERIC: 'NUMERIC', } as const; -export type TShortAnswerType = typeof SHORT_ANSWER_TYPE[keyof typeof SHORT_ANSWER_TYPE]; +export type TShortAnswerType = (typeof SHORT_ANSWER_TYPE)[keyof typeof SHORT_ANSWER_TYPE]; export interface IShortProblemDetailResponseDataV2 extends IProblemDetailResponseData { correctSubmission: number;