connect upload component's error to message

app/business/services/lecture/taken-lecture.command.ts

@@ -1,43 +1,40 @@
 'use server';
 import { FormState } from '@/app/ui/view/molecule/form/form-root';
 import { API_PATH } from '../../api-path';
-import { BadRequestError } from '@/app/utils/http/http-error';
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
+import { BadRequestError, HttpError } from '@/app/utils/http/http-error';
 import { instance } from '@/app/utils/api/instance';
+import { ERROR_CODE } from '@/app/utils/api/constant';
 
 export const registerUserGrade = async (prevState: FormState, formData: FormData) => {
-  const parsingText = await parsePDFtoText(formData);
-
-  const res = await fetch(API_PATH.registerUserGrade, {
-    method: 'POST',
-    body: JSON.stringify({ parsingText }),
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
-    },
-  });
-
-  if (!res.ok) {
+  try {
+    const parsingText = await parsePDFtoText(formData);
+    await instance.post(API_PATH.registerUserGrade, { parsingText });
+    return {
+      isSuccess: true,
+      isFailure: false,
+      validationError: {},
+      message: '',
+    };
+  } catch (error) {
+    if (error instanceof HttpError) {
+      return {
+        isSuccess: false,
+        isFailure: true,
+        validationError: {},
+        message: error.getErrorMessage() ?? '',
+      };
+    }
     return {
       isSuccess: false,
       isFailure: true,
       validationError: {},
-      message: 'fail upload grade',
+      message: ERROR_CODE.INTERNAL_SEVER_ERROR,
     };
   }
-  redirect('/result');
 };
 
 export const parsePDFtoText = async (formData: FormData) => {
-  const res = await fetch(API_PATH.parsePDFtoText, { method: 'POST', body: formData });
-  if (!res.ok) {
-    return {
-      errors: {},
-      message: 'fail parsing to text',
-    };
-  }
-  return await res.text();
+  return (await fetch(API_PATH.parsePDFtoText, { method: 'POST', body: formData })).text();
 };
 
 export const deleteTakenLecture = async (lectureId: number) => {

app/ui/lecture/upload-taken-lecture/upload-taken-lecture.tsx

@@ -3,10 +3,17 @@
 import { registerUserGrade } from '@/app/business/services/lecture/taken-lecture.command';
 import UploadPdf from '@/app/ui/view/molecule/upload-pdf/upload-pdf';
 import Form from '../../view/molecule/form';
+import { FormState } from '../../view/molecule/form/form-root';
+import { useRouter } from 'next/navigation';
 
 function UploadTakenLecture() {
+  const router = useRouter();
+  const handleSuccess = (formState?: FormState) => {
+    if (formState?.isSuccess) router.push('/my');
+  };
+
   return (
-    <Form action={registerUserGrade} id="성적업로드">
+    <Form action={registerUserGrade} id="성적업로드" onSuccess={handleSuccess}>
       <UploadPdf />
       <div className="py-6">
         <Form.SubmitButton label="결과 보러가기" position="center" size="md" />

app/utils/api/constant.ts

@@ -20,7 +20,7 @@ export const ERROR_CODE = {
   UNFITTED_GRADUATION_CATEGORY: '',
 
   // LECTURE (아래 세개 모두 PDF Parsing에서 발생하는 에러)
-  INCORRECT_STUDENT_NUMBER: '',
-  NON_EXISTED_LECTURE: '',
-  UNSUPPORTED_STUDENT_CATEGORY: '',
+  INCORRECT_STUDENT_NUMBER: '학번과 일치하는 성적PDF를 입력해주세요.',
+  NON_EXISTED_LECTURE: '알수없는 수강과목이 존재해요. 채널톡으로 문의해주세요',
+  UNSUPPORTED_STUDENT_CATEGORY: '현재 지원하지않는 학번이에요.',
 } as const;

app/utils/http/http-error.ts

@@ -1,9 +1,15 @@
+import { ERROR_CODE } from '../api/constant';
+
 type ErrorConstrutor = {
   message?: string;
   statusCode?: number;
   response?: Partial<Response>;
 };
 
+interface HttpResponse extends Response {
+  data: { errorCode: keyof typeof ERROR_CODE | string };
+}
+
 // Refactor: fetch가 NetworkError랑 TimeoutError 또 자동으로 에러로 던져서 처리가 더 애매하다.
 // export class NetworkError extends Error {
 //   constructor(readonly message = 'Network Error') {
@@ -23,10 +29,16 @@ export class HttpError extends Error {
   constructor(
     readonly statusCode?: number,
     message?: string,
-    readonly response?: Partial<Response>,
+    readonly response?: Partial<HttpResponse>,
   ) {
     super(message);
   }
+
+  getErrorMessage(): string {
+    const errorCode = this.response?.data?.errorCode;
+    if (!errorCode) return ERROR_CODE.INTERNAL_SEVER_ERROR;
+    return errorCode in ERROR_CODE ? ERROR_CODE[errorCode as keyof typeof ERROR_CODE] : errorCode;
+  }
 }
 
 export class BadRequestError extends HttpError {

package.json

@@ -42,7 +42,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "express": "^4.18.2",
-    "fetch-ax": "^1.0.10",
+    "fetch-ax": "^2.0.3",
     "jotai": "^2.7.0",
     "lucide-react": "^0.336.0",
     "next": "^14.2.13",