👽 Change long problem grade api to submit api

SW13-Monstera · Oct 15, 2023 · 0fb385e · 0fb385e
1 parent 48aace1
commit 0fb385e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 10 deletions.
diff --git 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<ILongProblemResultData>(handleSubmit);
+  const {
+    data: result,
+    isLoading,
+    isSuccess,
+    mutate,
+  } = useMutation<ILongProblemSubmitData>(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={<StandardAnswerContent result={result} />}
+        leftSideContent={isSuccess ? <StandardAnswerContent result={result} /> : <></>}
         rightSideContent={
           <div className={contentStyle}>
             <h3 className={subtitleStyle}>내 답안</h3>

diff --git 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
@@ -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={<StandardAnswerContent result={result} />}
+        leftSideContent={<></>}
         rightSideContent={<UserAnswerContent result={result} />}
         bottomContent={<ChartContent result={result} />}
       />

diff --git 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
@@ -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
@@ -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;