refactor : problem api routes component

src/problem/components/AnswerChoiceButton/index.tsx

@@ -8,6 +8,7 @@ import { cn } from "@shared/utils/cn";
 import ChoiceFillCircleSvg from "../ChoiceFillCircleSvg";
 import { ANSWER_CHOICHE_BUTTON_INFO } from "@problem/constants/problemInfo";
 import ProblemContext from "@problem/context/problemContext";
+import { QUERY_KEY } from "@problem/remotes/api";
 import { AnswerCheckInfo, AnswerChoiceInfo } from "@problem/types/problemInfo";
 
 interface AnswerChoiceButtonProps extends Pick<AnswerChoiceInfo, "content"> {}
@@ -25,7 +26,7 @@ export default function AnswerChoiceButton({
 
   const problemAnswerInfo = useMutationState({
     filters: {
-      mutationKey: ["get-problem-answer"],
+      mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER],
     },
     select: (mutation) => mutation.state.data as AnswerCheckInfo,
   });

src/problem/components/ProblemTitle/index.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import { useMutationState, useQuery } from "@tanstack/react-query";
 
 import { PROBLEM_TITLE_INFO } from "@problem/constants/problemInfo";
+import { QUERY_KEY } from "@problem/remotes/api";
 import { getProblemQueryOptions } from "@problem/remotes/getProblemQueryOptions";
 import { AnswerCheckInfo } from "@problem/types/problemInfo";
 
@@ -18,7 +19,7 @@ export default function ProblemTitle() {
   });
   const problemAnswerInfo = useMutationState({
     filters: {
-      mutationKey: ["get-problem-answer", problemIdNumber],
+      mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER, problemIdNumber],
     },
     select: (mutation) => mutation.state.data as AnswerCheckInfo,
   });

src/problem/components/TagList/index.tsx

@@ -6,10 +6,11 @@ import { ApiResponse } from "@api/api-config";
 import queryClient from "@api/query-client";
 
 import Tag from "@common/components/Tag";
+import { QUERY_KEY } from "@problem/remotes/api";
 import { PromblemInfo } from "@problem/types/problemInfo";
 
 export default function TagList() {
-  const problemInfoData = queryClient.getQueryData(["get-Problems-info"]) as
+  const problemInfoData = queryClient.getQueryData([QUERY_KEY.GET_PROBLEM]) as
     | ApiResponse<PromblemInfo>
     | undefined;
 

src/problem/remotes/api.ts

@@ -1,4 +1,9 @@
-export const PROBLEM_API_ROUTES = {
-  problems: (articleId: number) => `/articles/${articleId}/problems`,
-  submitAnswer: (problemId: number) => `/problems/${problemId}`,
+export const API_ROUTE = {
+  PROBLEM: (articleId: number) => `/articles/${articleId}/problems`,
+  SUBMIT_ANSWER: (problemId: number) => `/problems/${problemId}`,
+};
+
+export const QUERY_KEY = {
+  GET_PROBLEM: "get-problem-info",
+  POST_PROBLEM_ANSWER: "post-problem-answer",
 };

src/problem/remotes/getProblemQueryOptions.ts

@@ -2,13 +2,13 @@ import { UseQueryOptions } from "@tanstack/react-query";
 
 import { ApiResponse, axiosRequest } from "@api/api-config";
 
-import { PROBLEM_API_ROUTES } from "./api";
+import { API_ROUTE, QUERY_KEY } from "./api";
 import { PromblemInfo } from "@problem/types/problemInfo";
 
 export const getProblemInfo = ({
   problemId,
 }: ProblemInfoParams): Promise<ApiResponse<PromblemInfo>> => {
-  return axiosRequest("get", PROBLEM_API_ROUTES.problems(problemId));
+  return axiosRequest("get", API_ROUTE.PROBLEM(problemId));
 };
 export const getProblemQueryOptions = ({
   problemId,
@@ -18,7 +18,7 @@ export const getProblemQueryOptions = ({
   PromblemInfo
 > => {
   return {
-    queryKey: ["get-Problems-info"],
+    queryKey: [QUERY_KEY.GET_PROBLEM, problemId],
     queryFn: () => getProblemInfo({ problemId }),
     select: (data) => data.data,
   };

src/problem/remotes/postProblemAnswerOption.ts

@@ -2,18 +2,14 @@ import { UseMutationOptions } from "@tanstack/react-query";
 
 import { ApiResponse, axiosRequest } from "@api/api-config";
 
-import { PROBLEM_API_ROUTES } from "./api";
+import { API_ROUTE, QUERY_KEY } from "./api";
 import { AnswerCheckInfo } from "@problem/types/problemInfo";
 
 export const postProblemAnswer = (
   params: ProblemAnswerParams,
   body: ProblemAnswerBody,
 ): Promise<ApiResponse<AnswerCheckInfo>> => {
-  return axiosRequest(
-    "post",
-    PROBLEM_API_ROUTES.submitAnswer(params.problemId),
-    body,
-  );
+  return axiosRequest("post", API_ROUTE.SUBMIT_ANSWER(params.problemId), body);
 };
 export const postProblemAnswerMutationOptions = (
   params: ProblemAnswerParams,
@@ -23,7 +19,7 @@ export const postProblemAnswerMutationOptions = (
   ProblemAnswerBody
 > => {
   return {
-    mutationKey: ["get-problem-answer", params.problemId],
+    mutationKey: [QUERY_KEY.POST_PROBLEM_ANSWER, params.problemId],
     mutationFn: (body) => postProblemAnswer(params, body),
   };
 };