refactor: my page refactor

app/(sub-page)/sign-in/components/updateInstruction.tsx

@@ -0,0 +1,36 @@
+'use client';
+import useDialog from '@/app/hooks/useDialog';
+import Button from '@/app/ui/view/atom/button/button';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader } from '@/app/ui/view/molecule/alert-dialog/alert-dialog';
+import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
+import { redirect } from 'next/navigation';
+
+export default function UpdateInstruction() {
+  const { isOpen, close } = useDialog(DIALOG_KEY.UPDATE_INSTRUCTION);
+
+  return (
+    <AlertDialog open={isOpen}>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-4">
+          <div className="text-xl font-bold">업데이트 안내문</div>
+          <p className="text-gray-800 leading-6">
+            <span className="text-primary font-bold">졸업을 부탁해</span>가 2.0.2 버전으로 업데이트됨에 따라, 2024년 9월
+            3일 이전에 성적표를 업로드하신 모든 사용자께서는 성적표를 재업로드해 주시기 바랍니다.
+            <br />
+            감사합니다.
+          </p>
+          <Button
+            label="확인"
+            size="xs"
+            variant="list"
+            style={{ alignSelf: 'flex-end' }}
+            onClick={() => {
+              close();
+              redirect('/grade-upload');
+            }}
+          />
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -44,35 +44,33 @@ export const parsePDFtoText = async (formData: FormData) => {
 };
 
 export const deleteTakenLecture = async (lectureId: number) => {
-  // try {
-  const response = await fetch(`${API_PATH.takenLectures}/${lectureId}`, {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
-    },
-  });
-  // http error handling에서 result가 필수값이므로 사용할 수 없음
-  // 하지만 fetch 가 수정되면서 바꿀 예정이므로 현재는 작동만 되도록
-  if (response.ok) {
-    revalidateTag(TAG.GET_TAKEN_LECTURES);
-    return {
-      isSuccess: true,
-    };
-  } else {
-    return {
-      isSuccess: false,
-    };
+  try {
+    const response = await fetch(`${API_PATH.takenLectures}/${lectureId}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
+      },
+    });
+    if (response.ok) {
+      revalidateTag(TAG.GET_TAKEN_LECTURES);
+      return {
+        isSuccess: true,
+      };
+    } else {
+      return {
+        isSuccess: false,
+      };
+    }
+  } catch (error) {
+    if (error instanceof BadRequestError) {
+      return {
+        isSuccess: false,
+      };
+    } else {
+      throw error;
+    }
   }
-  // } catch (error) {
-  //   if (error instanceof BadRequestError) {
-  //     return {
-  //       isSuccess: false,
-  //     };
-  //   } else {
-  //     throw error;
-  //   }
-  // }
 };
 
 export const addTakenLecture = async (lectureId: number) => {

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

@@ -7,7 +7,7 @@ export interface TakenLecturesResponse {
   takenLectures: TakenLectureInfoResponse[];
 }
 
-interface TakenLectureInfoResponse {
+export interface TakenLectureInfoResponse {
   [index: string]: string | number;
   id: number;
   year: string;

app/business/services/user/user.command.ts

@@ -17,11 +17,12 @@ import {
   SignInResponseSchema,
   ValidateTokenResponseSchema,
   ResetPasswordFormSchema,
+  isExpiredGradeUser,
 } from './user.validation';
 import { cookies } from 'next/headers';
 import { isValidation } from '@/app/utils/zod/validation.util';
 import { redirect } from 'next/navigation';
-import { auth } from './user.query';
+import { fetchUser } from './user.query';
 
 function deleteCookies() {
   cookies().delete('accessToken');
@@ -132,8 +133,16 @@ export async function authenticate(prevState: FormState, formData: FormData): Pr
     }
   }
 
+  const user = await fetchUser();
+  if (isExpiredGradeUser(user)) {
+    return {
+      isSuccess: true,
+      isFailure: false,
+      validationError: {},
+      message: '재업로드',
+    };
+  }
   redirect('/my');
-
   return {
     isSuccess: true,
     isFailure: false,

app/business/services/user/user.validation.ts

@@ -124,3 +124,7 @@ export const SignUpFormSchema = z
 export function isInitUser(x: UserInfoResponse | InitUserInfoResponse): x is InitUserInfoResponse {
   return x.studentName === null;
 }
+
+export function isExpiredGradeUser(x: UserInfoResponse | InitUserInfoResponse): x is InitUserInfoResponse {
+  return x.studentName !== null && x.takenCredit === 0 && x.totalCredit === 0;
+}

app/store/querys/lecture.ts

@@ -13,7 +13,7 @@ export const useFetchSearchLecture = () => {
   const searchWord = useAtomValue(searchWordAtom);
 
   return useSuspenseQuery<SearchedLectureInfoResponse[]>({
-    queryKey: [QUERY_KEY.SEARCH_LECTURE],
+    queryKey: [QUERY_KEY.SEARCH_LECTURE, searchWord.type, searchWord.keyword],
     queryFn: () => {
       return fetchSearchLectures(searchWord.type, searchWord.keyword as string);
     },

app/store/stores/dialog.ts

@@ -7,6 +7,7 @@ const initialState = {
   [DIALOG_KEY.LECTURE_SEARCH]: false,
   [DIALOG_KEY.USER_DELETE]: false,
   [DIALOG_KEY.SIDE_NAVIGATION]: false,
+  [DIALOG_KEY.UPDATE_INSTRUCTION]: false,
 };
 
 const dialogAtom = atom(initialState);

app/ui/lecture/lecture-search/lecture-search-result.tsx

@@ -3,9 +3,22 @@ import List from '@/app/ui/view/molecule/list';
 import Grid from '@/app/ui/view/molecule/grid';
 import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button';
 import { useFetchSearchLecture } from '@/app/store/querys/lecture';
+import { useAtomValue } from 'jotai';
+import { searchWordAtom } from '@/app/store/stores/search-word';
+
+const emptyDataRender = (searchWord: string) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="text-md font-medium text-gray-400 text-center whitespace-pre-wrap">
+        <span className="text-light-blue-7 text-lg font-semibold">{searchWord}</span> 에 대한 검색 결과가 없습니다.
+      </div>
+    </div>
+  );
+};
 
 export default function LectureSearchResult() {
   const { data } = useFetchSearchLecture();
+  const searchWord = useAtomValue(searchWordAtom);
 
   const renderAddActionButton = (item: SearchedLectureInfoResponse, taken: boolean) => {
     return <AddTakenLectureButton lectureItem={item} isTaken={taken} />;
@@ -28,5 +41,14 @@ export default function LectureSearchResult() {
     );
   };
 
-  return <List data={data} render={render} isScrollList={true} />;
+  return (
+    <List
+      data={data}
+      render={render}
+      isScrollList={true}
+      emptyDataRender={() => {
+        return emptyDataRender(searchWord.keyword as string);
+      }}
+    />
+  );
 }

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

@@ -1,15 +1,29 @@
-import { fetchTakenLectures } from '@/app/business/services/lecture/taken-lecture.query';
+import { fetchTakenLectures, TakenLectureInfoResponse } from '@/app/business/services/lecture/taken-lecture.query';
 import TakenLectureList from './taken-lecture-list';
 import TakenLectureLabel from './taken-lecture-label';
 import TakenLectureAtomHydrator from '@/app/store/stores/taken-lecture-atom-hydrator';
 import UpdateTakenLecture from './update-taken-lecture';
 
+const processChapel = (takenLectures: TakenLectureInfoResponse[]) => {
+  return takenLectures.map((lecture) => {
+    return {
+      id: lecture.id,
+      year: lecture.year,
+      semester: lecture.semester,
+      lectureCode: lecture.lectureCode,
+      lectureName: lecture.lectureName,
+      credit: lecture.lectureName === '채플' ? 0.5 : lecture.credit,
+    };
+  });
+};
 export default async function TakenLecture() {
   const data = await fetchTakenLectures();
+  const takenLectures = processChapel(data.takenLectures);
+
   return (
     <div className="flex flex-col gap-2">
-      <TakenLectureAtomHydrator initialValue={data.takenLectures}>
-        <UpdateTakenLecture data={data.takenLectures}>
+      <TakenLectureAtomHydrator initialValue={takenLectures}>
+        <UpdateTakenLecture data={takenLectures}>
           <TakenLectureLabel />
           <TakenLectureList />
         </UpdateTakenLecture>

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

@@ -22,6 +22,9 @@ export default function TakenLectureList() {
       });
     }
     deleteLecture(lectureId);
+    toast({
+      title: '과목 삭제에 성공했습니다',
+    });
   };
 
   return (

app/ui/user/sign-in-form/sign-in-form.tsx

@@ -1,15 +1,29 @@
 'use client';
+import UpdateInstruction from '@/app/(sub-page)/sign-in/components/updateInstruction';
 import Form from '../../view/molecule/form';
 import { authenticate } from '@/app/business/services/user/user.command';
+import useDialog from '@/app/hooks/useDialog';
+import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 
 export default function SignInForm() {
+  const { open } = useDialog(DIALOG_KEY.UPDATE_INSTRUCTION);
   return (
-    <Form id="로그인" className="space-y-6" action={authenticate}>
-      <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력하세요" />
-      <Form.PasswordInput required={true} label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" />
-      <div className="pt-6">
-        <Form.SubmitButton label="로그인" position="center" variant="primary" />
-      </div>
-    </Form>
+    <>
+      <Form
+        id="로그인"
+        className="space-y-6"
+        action={authenticate}
+        onSuccess={(formState) => {
+          if (formState?.message === '재업로드') open();
+        }}
+      >
+        <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력하세요" />
+        <Form.PasswordInput required={true} label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" />
+        <div className="pt-6">
+          <Form.SubmitButton label="로그인" position="center" variant="primary" />
+        </div>
+      </Form>
+      <UpdateInstruction />
+    </>
   );
 }

app/ui/view/atom/button/button.tsx

@@ -21,7 +21,7 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
       dark: 'bg-dark rounded-[100px] text-white border-0 hover:bg-dark-hover',
       secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray-6 hover:bg-white-hover',
       text: 'font-medium text-slate-400 text-sm hover:text-slate-600',
-      list: 'py-1 px-3 bg-blue-500 rounded-[7px] text-white leading-5 font-medium text-base hover:bg-blue-500',
+      list: 'py-1 px-3 bg-blue-500 rounded-[7px] text-white leading-5 font-medium text-base hover:bg-blue-600',
     },
     size: {
       default: '',

app/utils/key/dialog-key.util.ts

@@ -4,6 +4,7 @@ export const DIALOG_KEY = {
   LECTURE_SEARCH: 'LECTURE_SEARCH',
   USER_DELETE: 'USER_DELETE',
   SIDE_NAVIGATION: 'SIDE_NAVIGATION',
+  UPDATE_INSTRUCTION: 'UPDATE_INSTRUCTION',
 } as const;
 
 export type DialogKey = (typeof DIALOG_KEY)[keyof typeof DIALOG_KEY];

middleware.ts

@@ -1,6 +1,6 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { auth } from './app/business/services/user/user.query';
-import { isInitUser } from './app/business/services/user/user.validation';
+import { isExpiredGradeUser, isInitUser } from './app/business/services/user/user.validation';
 import { refreshToken } from './app/business/services/user/user.command';
 
 async function getAuth(request: NextRequest): Promise<{
@@ -22,7 +22,7 @@ async function getAuth(request: NextRequest): Promise<{
   }
 
   return {
-    role: isInitUser(user) ? 'init' : 'user',
+    role: isInitUser(user) || isExpiredGradeUser(user) ? 'init' : 'user',
   };
 }