From 001f98814d6d29bd5d3d8aaa76fc09cbcbcc76f1 Mon Sep 17 00:00:00 2001
From: kimjh2369 <kimjh2369@gmail.com>
Date: Fri, 21 Jun 2024 16:43:14 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=92=80?=
 =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flight/NewFlightApprovalsContainer.js     | 41 +++++++++++++++++--
 src/router/hoc/authenticationCheck.tsx        | 30 +++++++-------
 src/router/routes/RouteFlight.js              |  7 ----
 3 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/containers/flight/NewFlightApprovalsContainer.js b/src/containers/flight/NewFlightApprovalsContainer.js
index fc07023b..a74e390d 100644
--- a/src/containers/flight/NewFlightApprovalsContainer.js
+++ b/src/containers/flight/NewFlightApprovalsContainer.js
@@ -33,7 +33,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
   const [mapObject, setMapObject] = useState();
 
   const { areaCoordList, isOpenModal } = useSelector(state => state.laancState);
-
+  const { user } = useSelector(state => state.authState);
   //
   const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState();
@@ -48,6 +48,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
   const [isPopup, setIsPopup] = useState(false);
   const [popup, setPopup] = useState(null);
   const popupRef = useRef(null);
+  const rightMenuRef = useRef(null);
+  const savedRightMenuRef = useRef(null);
+  const [clientX, setClientX] = useState(0);
 
   const previewGeo2 = {
     type: 'FeatureCollection',
@@ -117,12 +120,38 @@ export default function NewFlightApprovalsContainer({ mode }) {
       }
     };
     let timer;
+    if (rightMenuRef.current) {
+      savedRightMenuRef.current = rightMenuRef.current.getBoundingClientRect();
+    }
     if (popup) {
       timer = setInterval(() => {
         if (popup.closed) {
           setIsPopup(false);
           clearInterval(timer);
         }
+
+        if (savedRightMenuRef.current) {
+          console.log('@?@?@?');
+          // 부모 창의 특정 영역 (right-layer)의 위치와 크기
+          const specificArea = {
+            left: window.screenX + window.outerWidth - clientX, // 영역을 넓게 설정
+            right: window.screenX + window.outerWidth - clientX
+          };
+          console.log(specificArea);
+          // 팝업 창의 현재 위치
+          const popupRightEdge = popup.screenX + popup.outerWidth;
+
+          // window.screenX + window.outerWidth - e.clientX
+          console.log(popupRightEdge);
+          // console.log('Popup Position:', { popupLeft, popupTop });
+          if (
+            popupRightEdge >= specificArea.left &&
+            popupRightEdge <= specificArea.right
+          ) {
+            setIsPopup(false);
+            clearInterval(timer);
+          }
+        }
       }, 1000); // 1초마다 체크
     }
     window.addEventListener('message', childMessage);
@@ -132,7 +161,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
       window.removeEventListener('message', childMessage);
     };
   }, [popup]);
-
+  console.log(history);
   useEffect(() => {
     const handleBeforeUnload = e => {
       localStorage.removeItem('persist:root');
@@ -155,11 +184,12 @@ export default function NewFlightApprovalsContainer({ mode }) {
 
     const popupWidth = el.offsetWidth; // 팝업의 너비
     const popupHeight = el.offsetHeight; // 팝업의 너비
+
     // const popupX = window.screenX + window.outerWidth - e.clientX; // 오른쪽 끝에 띄우기
     // const popupY = Math.round(
     //   window.screenY + window.outerHeight / 2 - popupHeight / 2
     // );
-
+    setClientX(window.screenX + window.outerWidth - e.clientX);
     const popupX =
       window.screenX +
       (window.outerWidth - popupWidth) / 2 +
@@ -298,7 +328,10 @@ export default function NewFlightApprovalsContainer({ mode }) {
       </div>
       {!isPopup && (
         <div className='right-menu active'>
-          <div className='right-layer active flight-approval-layer'>
+          <div
+            className='right-layer active flight-approval-layer'
+            ref={rightMenuRef}
+          >
             <div className='layer-content'>
               <NewFlightApprovalsReport
                 handlerSearch={handlerSearch}
diff --git a/src/router/hoc/authenticationCheck.tsx b/src/router/hoc/authenticationCheck.tsx
index a1d8a76b..8a28e518 100644
--- a/src/router/hoc/authenticationCheck.tsx
+++ b/src/router/hoc/authenticationCheck.tsx
@@ -31,11 +31,22 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
       props: IProps
     ) => JSX.Element;
 
-    useEffect(() => {
-      if (props.match.path === '/account/login') {
-        setIsRender(true);
-        return;
+    useLayoutEffect(() => {
+      if (user?.cptAuthCode === 'DF0002') {
+        const pathname = history.location.pathname;
+
+        if (pathname != '/flight/Approvals/new') {
+          props.history.replace('/flight/Approvals/new');
+          return;
+        }
       }
+    }, [user]);
+
+    useEffect(() => {
+      // if (props.match.path === '/account/login') {
+      //   setIsRender(true);
+      //   return;
+      // }
       dispatch(checkToken() as any).then(({ payload }) => {
         try {
           // 로그인 해야만 접근 가능한 페이지인지 체크하는 옵션
@@ -61,17 +72,6 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
       };
     }, []);
 
-    useLayoutEffect(() => {
-      if (user?.cptAuthCode === 'DF0002') {
-        const pathname = history.location.pathname;
-
-        if (pathname != '/flight/Approvals/new') {
-          props.history.replace('/flight/Approvals/new');
-          return;
-        }
-      }
-    }, [user]);
-
     return <>{isRender ? <Component {...props} user={user} /> : null}</>;
   }
   return AuthenticationCheck;
diff --git a/src/router/routes/RouteFlight.js b/src/router/routes/RouteFlight.js
index 4450f0a5..5c0b1c44 100644
--- a/src/router/routes/RouteFlight.js
+++ b/src/router/routes/RouteFlight.js
@@ -1,13 +1,6 @@
 import { lazy } from 'react';
 
 const RouteFlight = [
-  {
-    path: '/flight/approvals',
-    component: lazy(() => import('../../views/flight/FlightView')),
-    meta: {
-      authRoute: true
-    }
-  },
   {
     path: '/flight/approvals/new',
     component: lazy(() => import('../../views/flight/NewFlightView')),