main << develop

src/pages/editProfiles/components/ProfileImageUpload/profileImageUpload.css.ts

@@ -41,5 +41,5 @@ export const overlayStyle = style({
 
   padding: '0.2rem 0rem 0.5rem 0rem',
 
-  backgroundColor: vars.colors.black70,
+  backgroundColor: vars.colors.black50,
 });

src/pages/instructor/classRegister/ClassRegister.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
-import type { FormEvent } from 'react';
+import { useEffect, type FormEvent } from 'react';
 import { FormProvider, useController, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useGetLessonDetail } from '@/pages/class/apis/queries';
@@ -28,6 +28,8 @@ import { classRegisterSchema } from '@/pages/instructor/classRegister/schema/cla
 import type { ClassRegisterInfoTypes } from '@/pages/instructor/classRegister/types/api';
 import type { LocationTypes } from '@/pages/instructor/classRegister/types/index';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
+import Modal from '@/common/components/Modal/Modal';
+import { useModalStore } from '@/common/stores/modal';
 import BoxButton from '@/shared/components/BoxButton/BoxButton';
 import { notify } from '@/shared/components/Toast/Toast';
 import { genreEngMapping, levelEngMapping } from '@/shared/constants';
@@ -41,6 +43,7 @@ import { CLASS_REGISTER_EDIT_MESSAGE } from './constants/notifyMessage';
 const ClassRegister = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const { openModal } = useModalStore();
 
   const lessonId = id ? Number(id) : null;
   const isValidId = lessonId !== null && !isNaN(lessonId) && lessonId > 0;
@@ -290,6 +293,26 @@ const ClassRegister = () => {
   };
   useBlockBackWithUnsavedChanges({ methods });
 
+  useEffect(() => {
+    if (isEditMode && lessonData?.lessonRound?.lessonRounds?.length) {
+      const firstRound = lessonData.lessonRound.lessonRounds[0];
+      const startDateTime = new Date(firstRound.startDateTime);
+      const now = new Date();
+
+      if (now >= startDateTime) {
+        openModal(() => (
+          <Modal
+            type="single"
+            content={'비정상적인 접근입니다.'}
+            onClose={() => navigate(-1)}
+            rightButtonText="뒤로가기"
+            onClickHandler={() => navigate(-1)}
+          />
+        ));
+      }
+    }
+  }, [isEditMode, lessonData, navigate, openModal]);
+
   return (
     <>
       <FormProvider {...methods}>

src/shared/hooks/useBlockBackWithUnsavedChanges.tsx

@@ -64,11 +64,18 @@ export default function useBlockBackWithUnsavedChanges<TFieldValues extends Fiel
     const handlePopState = () => {
       if (!shouldBlockRef.current) return;
 
-      // 모달이 열려있으면 모달을 닫고 현재 위치 유지
+      // 모달이 열려있으면 먼저 히스토리를 복원한 후 모달을 닫고 현재 위치 유지
       if (closeModalRef.current) {
-        closeModalRef.current();
-        closeModalRef.current = null;
+        // Chrome에서 popstate 발생 시 이미 페이지가 이동한 상태일 수 있으므로
+        // 즉시 히스토리를 복원해야 함
         history.pushState(null, '', location.href);
+        // 다음 이벤트 루프에서 모달을 닫아서 히스토리 복원이 완료된 후 처리
+        setTimeout(() => {
+          if (closeModalRef.current) {
+            closeModalRef.current();
+            closeModalRef.current = null;
+          }
+        }, 0);
         return;
       }
 
@@ -84,36 +91,41 @@ export default function useBlockBackWithUnsavedChanges<TFieldValues extends Fiel
 
       if (!armedRef.current) return;
 
+      // Chrome에서 popstate 발생 시 이미 페이지가 이동한 상태일 수 있으므로
+      // 즉시 히스토리를 복원한 후 모달을 열어야 함
       history.pushState(null, '', location.href);
 
-      openModal(({ close }) => {
-        closeModalRef.current = close;
-        return (
-          <Modal
-            content={content}
-            description={description}
-            type="default"
-            onClose={() => {
-              closeModalRef.current = null;
-              close();
-            }}
-            leftButtonText={leftButtonText}
-            rightButtonText={rightButtonText}
-            onLeftClickHandler={() => {
-              shouldBlockRef.current = false;
-              closeModalRef.current = null;
-              close();
-              const steps = armedRef.current ? -2 : -1;
-              armedRef.current = false;
-              navigate(steps);
-            }}
-            onRightClickHandler={() => {
-              closeModalRef.current = null;
-              close();
-            }}
-          />
-        );
-      });
+      // 다음 이벤트 루프에서 모달을 열어서 히스토리 복원이 완료된 후 처리
+      setTimeout(() => {
+        openModal(({ close }) => {
+          closeModalRef.current = close;
+          return (
+            <Modal
+              content={content}
+              description={description}
+              type="default"
+              onClose={() => {
+                closeModalRef.current = null;
+                close();
+              }}
+              leftButtonText={leftButtonText}
+              rightButtonText={rightButtonText}
+              onLeftClickHandler={() => {
+                shouldBlockRef.current = false;
+                closeModalRef.current = null;
+                close();
+                const steps = armedRef.current ? -2 : -1;
+                armedRef.current = false;
+                navigate(steps);
+              }}
+              onRightClickHandler={() => {
+                closeModalRef.current = null;
+                close();
+              }}
+            />
+          );
+        });
+      }, 0);
     };
 
     window.addEventListener('popstate', handlePopState);