FE: [feat] 수험자 화면 API 연결 #34

src/frontend/eyesee-user/src/apis/examCode.ts

@@ -1,10 +1,10 @@
-import { api } from ".";
+import { apiWithoutAuth } from ".";
 import { RESTYPE } from "@/types/common";
 import { ExamRequest, ExamResponse } from "@/types/exam";
 
 export const enterSession = async (
   data: ExamRequest
 ): Promise<RESTYPE<ExamResponse>> => {
-  const response = await api.post(`/sessions/join`, data);
+  const response = await apiWithoutAuth.post(`/sessions/join`, data);
   return response.data;
 };

src/frontend/eyesee-user/src/apis/index.ts

@@ -54,7 +54,6 @@ function createInstance() {
  *
  * @description
  * 이 함수는 기본 URL만 설정된 Axios 인스턴스를 생성합니다.
- * 인증 토큰이 필요하지 않은 API 요청(예: 로그인, 회원가입 등)에 사용됩니다.
  */
 function createInstanceWithoutAuth() {
   const instance = axios.create({

src/frontend/eyesee-user/src/apis/userInformation.ts

@@ -1,10 +1,10 @@
-import { api } from ".";
+import { apiWithoutAuth } from ".";
 import { RESTYPE } from "@/types/common";
 import { UserInfoRequest, UserInfoResponse } from "@/types/exam";
 
 export const userInformation = async (
   data: UserInfoRequest
 ): Promise<RESTYPE<UserInfoResponse>> => {
-  const response = await api.post(`/sessions/student`, data);
+  const response = await apiWithoutAuth.post(`/sessions/student`, data);
   return response.data;
 };

src/frontend/eyesee-user/src/app/information/page.tsx

@@ -4,16 +4,20 @@ import { userInformation } from "@/apis/userInformation";
 import NextButton from "@/components/common/NextButton";
 import SubHeader from "@/components/common/SubHeader";
 import InformationSection from "@/components/information/InformationSection";
+import { useExamStore } from "@/store/useExamStore";
 import { UserInfoRequest } from "@/types/exam";
+import { setAccessToken, setRefreshToken } from "@/utils/auth";
 import { informationValidation } from "@/utils/validation";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 const InformationPage = () => {
   const router = useRouter();
+  const { exam } = useExamStore();
   const [isAvailable, setIsAvailable] = useState(false);
   const [information, setInformation] = useState<UserInfoRequest>({
-    examCode: "",
+    // TODO: 서버 데이터 타입 통일 필요
+    examCode: exam.examRandomCode,
     name: "",
     department: "",
     userNum: 0,
@@ -25,6 +29,8 @@ const InformationPage = () => {
     try {
       const response = await userInformation(information); // API 호출
       console.log("응답 데이터:", response); // 성공 시 데이터 처리
+      setAccessToken(response.data.access_token);
+      setRefreshToken(response.data.refresh_token);
       router.push("/camera");
     } catch (error) {
       console.error("수험 정보 입력 실패:", error); // 실패 시 에러 처리

src/frontend/eyesee-user/src/components/information/InformationSection.tsx

@@ -1,16 +1,16 @@
-import { Information } from "@/types/information";
+import { UserInfoRequest } from "@/types/exam";
 import { Dispatch, SetStateAction } from "react";
 
 type InformationSectionProps = {
-  information: Information;
-  setInformation: Dispatch<SetStateAction<Information>>;
+  information: UserInfoRequest;
+  setInformation: Dispatch<SetStateAction<UserInfoRequest>>;
 };
 
 const InformationSection = ({
   information,
   setInformation,
 }: InformationSectionProps) => {
-  const handleChange = (key: keyof Information, value: string) => {
+  const handleChange = (key: keyof UserInfoRequest, value: string) => {
     setInformation((prev) => ({
       ...prev,
       [key]: value,
@@ -41,8 +41,8 @@ const InformationSection = ({
           id="department"
           type="text"
           placeholder="학과"
-          value={information.major}
-          onChange={(e) => handleChange("major", e.target.value)}
+          value={information.department}
+          onChange={(e) => handleChange("department", e.target.value)}
           className="w-full text-[#141412] text-[14px] px-3 py-3 border-b border-black"
         />
       </div>
@@ -52,11 +52,11 @@ const InformationSection = ({
           학번
         </label>
         <input
-          id="studentId"
+          id="userNum"
           type="text"
           placeholder="학번"
-          value={information.studentNumber}
-          onChange={(e) => handleChange("studentNumber", e.target.value)}
+          value={information.userNum == 0 ? "" : information.userNum}
+          onChange={(e) => handleChange("userNum", e.target.value)}
           className="w-full text-[#141412] text-[14px] px-3 py-3 border-b border-black"
         />
       </div>
@@ -66,11 +66,11 @@ const InformationSection = ({
           좌석 번호
         </label>
         <input
-          id="seatNumber"
+          id="seatNum"
           type="text"
           placeholder="좌석 번호"
-          value={information.seatNumber}
-          onChange={(e) => handleChange("seatNumber", e.target.value)}
+          value={information.seatNum == 0 ? "" : information.seatNum}
+          onChange={(e) => handleChange("seatNum", e.target.value)}
           className="w-full text-[#141412] text-[14px] px-3 py-3 border-b border-black"
         />
       </div>

src/frontend/eyesee-user/src/store/useExamStore.ts

@@ -1,12 +1,20 @@
 import { ExamResponse, InitialExamResponse } from "@/types/exam";
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 type ExamStore = {
   exam: ExamResponse;
   setExam: (exam: ExamResponse) => void;
 };
 
-export const useExamStore = create<ExamStore>((set) => ({
-  exam: InitialExamResponse,
-  setExam: (exam) => set({ exam }),
-}));
+export const useExamStore = create(
+  persist<ExamStore>(
+    (set) => ({
+      exam: InitialExamResponse,
+      setExam: (exam) => set({ exam }),
+    }),
+    {
+      name: "exam-storage", // localStorage에 저장될 키 이름
+    }
+  )
+);