Merge branch 'develop' of https://github.com/PERMIT-SEOUL/permit-fe

Author: pepperdad

apps/ticket-admin/src/lib/axios/index.ts

@@ -1,11 +1,10 @@
 import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from "axios";
 
-import { API_URL } from "@/data/constants";
 import { EXTERNAL_PATH } from "@/shared/constants/path";
 import { IS_LOGINED } from "@/shared/constants/storage";
 import { isAxiosErrorResponse } from "@/shared/types/axioxError";
 
-import { safeLocalStorage } from "../storage";
+import { safeSessionStorage } from "../storage";
 import { refreshAccessToken } from "./helpers";
 import { ERROR_CODE } from "./utils/errorCode";
 
@@ -48,7 +47,6 @@ instance.interceptors.response.use(
       // 엑세스 토큰 없음
       if (
         error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN ||
-        error.response?.data.code === ERROR_CODE.ACCESS_TOKEN_EXPIRED ||
         error.response?.data.code === ERROR_CODE.REFRESH_TOKEN_EXPIRED
       ) {
         redirectToLoginOnce();
@@ -111,9 +109,11 @@ function redirectToLoginOnce() {
   isLoginAlertShown = true;
 
   alert("로그인이 필요한 페이지입니다.");
-  safeLocalStorage.remove(IS_LOGINED);
+  safeSessionStorage.remove(IS_LOGINED);
 
-  const redirectUrl = `${EXTERNAL_PATH.LOGIN}?redirectUrl=${encodeURIComponent(window.location.pathname)}`;
+  const redirectUrl = `${EXTERNAL_PATH.LOGIN}?redirectUrl=${encodeURIComponent(
+    window.location.origin + window.location.pathname + window.location.search,
+  )}`;
 
   window.location.href = redirectUrl;
 }

apps/ticket/next.config.ts

@@ -42,6 +42,7 @@ const nextConfig: NextConfig = {
   images: {
     domains: [
       process.env.NEXT_PUBLIC_CDN_DOMAIN || "",
+      process.env.NEXT_PUBLIC_CDN_NOTION_DOMAIN || "",
       "avatars.githubusercontent.com",
       "scontent-icn2-1.cdninstagram.com",
       "images.unsplash.com",

apps/ticket/src/app/(pages)/auth/page.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import { useLoginMutation } from "@/data/users/postUserLogin/mutation";
-import { safeLocalStorage } from "@/lib/storage";
+import { safeLocalStorage, safeSessionStorage } from "@/lib/storage";
 import { LoadingWithLayout } from "@/shared/components/LoadingWithLayout";
 import { PATH } from "@/shared/constants/path";
 import {
@@ -32,7 +32,7 @@ const AuthPage = () => {
   const authorizationCode = searchParams.get("code");
 
   const socialType = safeLocalStorage.get(SOCIAL_LOGIN_TYPE_KEY) as SocialLoginType;
-  const redirectUrl = safeLocalStorage.get(REDIRECT_URL_KEY);
+  const redirectUrl = safeSessionStorage.get(REDIRECT_URL_KEY);
 
   const { mutateAsync } = useLoginMutation();
 
@@ -47,7 +47,7 @@ const AuthPage = () => {
         safeLocalStorage.set(IS_LOGINED, "true");
 
         router.replace(redirectUrl || PATH.HOME);
-        safeLocalStorage.remove(REDIRECT_URL_KEY);
+        safeSessionStorage.remove(REDIRECT_URL_KEY);
       } catch (error) {
         safeLocalStorage.set(TOKEN_KEY, (error as Error).message);
         router.replace(PATH.SIGNUP);

apps/ticket/src/app/(pages)/staff/ticket-authorization/_clientBoundary/TicketAuthorizationClient/index.tsx

@@ -7,6 +7,8 @@ import classNames from "classnames/bind";
 import { Flex, Typography } from "@permit/design-system";
 import { useGuestTicketDoorValidationQuery } from "@/data/tickets/getGuestTicketDoorValidation/queries";
 import { useTicketDoorValidationQuery } from "@/data/tickets/getTicketDoorValidation/queries";
+import { useGuestTicketCameraConfirmMutation } from "@/data/tickets/postStaffGuestTicketDoorConfirm/mutation";
+import { useUserTicketCameraConfirmMutation } from "@/data/tickets/postStaffTicketDoorConfirm/mutation";
 import { isAxiosErrorResponse } from "@/shared/types/axioxError";
 
 import styles from "./index.module.scss";
@@ -143,6 +145,9 @@ export const TicketAuthorizationClient = () => {
   const qrCodeRef = useRef<any>(null);
   const scanningRef = useRef(false);
 
+  const { mutateAsync: userTicketCameraMutate } = useUserTicketCameraConfirmMutation();
+  const { mutateAsync: guestTicketCameraMutate } = useGuestTicketCameraConfirmMutation();
+
   // html5-qrcode 스타일 주입
   useEffect(() => {
     const styleId = "qr-reader-styles";
@@ -278,48 +283,47 @@ export const TicketAuthorizationClient = () => {
 
   // 검증 결과 처리
   useEffect(() => {
-    console.log(scannedTicketCode, scanningRef.current);
-
-    if (!scannedTicketCode || !scanningRef.current) {
-      return;
-    }
-
-    // staff 권한으로 ticketCode 에 대해서 입장 가능하다는 API 를 쏘면 해당 티켓 체크
-
-    // if (error) {
-    //   if (isAxiosErrorResponse(error)) {
-    //     let message = "티켓 검증에 실패했습니다.";
-
-    //     if (error.code === NO_ENTRY_TIME) {
-    //       message = "해당 티켓의 유효 시간이 아닙니다.";
-    //     } else if (error.code === ALREADY_USED_TICKET) {
-    //       message = "이미 사용한 티켓입니다.";
-    //     } else if (error.code === CANCELED_TICKET) {
-    //       message = "취소된 티켓입니다.";
-    //     } else if (error.message) {
-    //       message = error.message;
-    //     }
-
-    //     showToast(message, "error");
-    //   } else {
-    //     showToast("티켓 검증에 실패했습니다.", "error");
-    //   }
+    if (!scannedTicketCode || !scanningRef.current) return;
 
-    // 검증 실패 후 스캔 재개
-    setTimeout(() => {
-      scanningRef.current = false;
-      setScannedTicketCode(null);
-    }, 2000);
-
-    showToast(`확인되었습니다.`, "success");
+    const verifyTicket = async () => {
+      try {
+        if (isGuest) {
+          await guestTicketCameraMutate({ ticketCode: scannedTicketCode });
+        } else {
+          await userTicketCameraMutate({ ticketCode: scannedTicketCode });
+        }
+
+        // ✅ 성공
+        showToast("확인되었습니다.", "success");
+      } catch (error) {
+        // ❌ 실패
+        let message = "티켓 검증에 실패했습니다.";
+
+        if (isAxiosErrorResponse(error)) {
+          if (error.code === NO_ENTRY_TIME) {
+            message = "해당 티켓의 유효 시간이 아닙니다.";
+          } else if (error.code === ALREADY_USED_TICKET) {
+            message = "이미 사용한 티켓입니다.";
+          } else if (error.code === CANCELED_TICKET) {
+            message = "취소된 티켓입니다.";
+          } else if (error.message) {
+            message = error.message;
+          }
+        }
+
+        showToast(message, "error");
+      } finally {
+        // 🔄 성공/실패 상관없이 스캔 재개
+        setTimeout(() => {
+          scanningRef.current = false;
+          setScannedTicketCode(null);
+          setLastScannedCode(null);
+        }, 2000);
+      }
+    };
 
-    // 검증 성공 후 스캔 재개
-    setTimeout(() => {
-      scanningRef.current = false;
-      setScannedTicketCode(null);
-      setLastScannedCode(null);
-    }, 2000);
-  }, [scannedTicketCode, isGuest]);
+    verifyTicket();
+  }, [scannedTicketCode, isGuest, guestTicketCameraMutate, userTicketCameraMutate]);
 
   return (
     <div className={cx("container")}>

apps/ticket/src/data/constants.ts

@@ -66,5 +66,9 @@ export const API_URL = {
     CONFIRM: "/api/tickets/door/staff/confirm",
     /** 도어용 게스트 스탭 티켓 확인 API */
     GUEST_CONFIRM: "/api/guests/tickets/door/staff/confirm",
+    /** 도어용 유저 스탭 카메라 확인 API */
+    CAMERA_USER_TICKET_CONFIRM: "/api/staff/tickets/door/confirm",
+    /** 도어용 게스트 스탭 카메라 확인 API */
+    CAMERA_GUEST_TICKET_CONFIRM: "/api/staff/guests/door/confirm",
   },
 } as const;

apps/ticket/src/data/tickets/postStaffGuestTicketDoorConfirm/mutation.ts

@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { API_URL } from "@/data/constants";
+import { instance } from "@/lib/axios";
+import { AxiosErrorResponse } from "@/shared/types/axioxError";
+import { UsePermitMutationOptions } from "@/shared/types/queryOptions";
+
+import { StaffGuestTicketConfirmRequest } from "./types";
+
+/** 도어용 게스트 티켓 카메라 확인 API */
+export const useGuestTicketCameraConfirmMutation = (
+  options?: UsePermitMutationOptions<null, AxiosErrorResponse, StaffGuestTicketConfirmRequest>,
+) => {
+  return useMutation({
+    mutationFn: (params) =>
+      instance.post(API_URL.TICKET.CAMERA_GUEST_TICKET_CONFIRM, params).then((res) => res.data),
+    ...options,
+  });
+};

apps/ticket/src/data/tickets/postStaffGuestTicketDoorConfirm/types.ts

@@ -0,0 +1,4 @@
+export type StaffGuestTicketConfirmRequest = {
+  /** 티켓고유코드 */
+  ticketCode: string;
+};

apps/ticket/src/data/tickets/postStaffTicketDoorConfirm/mutation.ts

@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { API_URL } from "@/data/constants";
+import { instance } from "@/lib/axios";
+import { AxiosErrorResponse } from "@/shared/types/axioxError";
+import { UsePermitMutationOptions } from "@/shared/types/queryOptions";
+
+import { StaffTicketConfirmRequest } from "./types";
+
+/** 도어용 유저 티켓 카메라 확인 API */
+export const useUserTicketCameraConfirmMutation = (
+  options?: UsePermitMutationOptions<null, AxiosErrorResponse, StaffTicketConfirmRequest>,
+) => {
+  return useMutation({
+    mutationFn: (params) =>
+      instance.post(API_URL.TICKET.CAMERA_USER_TICKET_CONFIRM, params).then((res) => res.data),
+    ...options,
+  });
+};

apps/ticket/src/data/tickets/postStaffTicketDoorConfirm/types.ts

@@ -0,0 +1,4 @@
+export type StaffTicketConfirmRequest = {
+  /** 티켓고유코드 */
+  ticketCode: string;
+};

apps/ticket/src/lib/axios/index.ts

@@ -5,7 +5,7 @@ import { PATH } from "@/shared/constants/path";
 import { IS_LOGINED } from "@/shared/constants/storage";
 import { AxiosErrorResponse, isAxiosErrorResponse } from "@/shared/types/axioxError";
 
-import { safeLocalStorage } from "../storage";
+import { safeLocalStorage, safeSessionStorage } from "../storage";
 import { refreshAccessToken } from "./helpers";
 import { ERROR_CODE } from "./utils/errorCode";
 
@@ -37,25 +37,25 @@ instance.interceptors.response.use(
   async (error: AxiosError<AxiosErrorResponse>) => {
     if (typeof window === "undefined") {
       // Server에서는 기본 전파
-      console.error(error);
+      // console.error(error);
 
       return Promise.reject(error);
     }
 
-    console.error("##error", JSON.stringify(error));
+    // console.error("##error", JSON.stringify(error));
+
+    if (error.config?.url === API_URL.USER.LOGOUT) {
+      safeLocalStorage.remove(IS_LOGINED);
+      window.location.href = PATH.LOGIN;
+    }
 
     // 로그인이 필요한 요청이거나, 리프레시 토큰 모두 만료시 로그인 페이지로 이동
     if (isAxiosErrorResponse(error.response?.data)) {
       // 엑세스 토큰 없음
       if (
         error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN ||
-        error.response?.data.code === ERROR_CODE.ACCESS_TOKEN_EXPIRED ||
         error.response?.data.code === ERROR_CODE.REFRESH_TOKEN_EXPIRED
       ) {
-        if (error.config?.url === API_URL.USER.LOGOUT) {
-          safeLocalStorage.remove(IS_LOGINED);
-        }
-
         redirectToLoginOnce();
       }
 
@@ -121,7 +121,7 @@ function redirectToLoginOnce() {
   isLoginAlertShown = true;
 
   alert("로그인이 필요한 페이지입니다.");
-  safeLocalStorage.remove(IS_LOGINED);
+  safeSessionStorage.remove(IS_LOGINED);
 
   const redirectUrl = window.location.pathname + window.location.search;