From 5b6115ae27941e83c5839daf93617ba084fd57df Mon Sep 17 00:00:00 2001
From: Jihwan Kim <kjhwan0802@naver.com>
Date: Tue, 20 Aug 2024 10:49:21 +0900
Subject: [PATCH] feat: not selected space, user view modal

---
 src/pages/LoginPage/LoginModal.tsx | 63 ++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/pages/LoginPage/LoginModal.tsx b/src/pages/LoginPage/LoginModal.tsx
index b5c7790..64060ac 100644
--- a/src/pages/LoginPage/LoginModal.tsx
+++ b/src/pages/LoginPage/LoginModal.tsx
@@ -8,6 +8,7 @@ export const LoginModal = ({ exceptionRouters }: { exceptionRouters: string[] })
   const location = useLocation(); // 현재 경로를 가져옴
 
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isSpaceModalOpen, setIsSpaceModalOpen] = useState(false);
 
   useEffect(() => {
     if (exceptionRouters.includes(location.pathname)) {
@@ -15,33 +16,53 @@ export const LoginModal = ({ exceptionRouters }: { exceptionRouters: string[] })
     }
 
     const token = localStorage.getItem("Authorization");
+    const spaceId = localStorage.getItem("spaceId");
 
     if (!token) {
       setIsModalOpen(true);
+    } else if (!spaceId) {
+      if ("/space" === location.pathname) {
+        return;
+      }
+      setIsSpaceModalOpen(true);
     }
-  }, [navigate, location.pathname]);
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-  };
+  }, [navigate, location.pathname, exceptionRouters]);
 
   return (
-    <StopModal
-      isOpen={isModalOpen}
-      onClose={handleCloseModal}
-      onConfirm={() => {
-        navigate("/login");
-        setIsModalOpen(false);
-      }}
-      title={"로그인이 필요합니다."}
-      content={["로그인 페이지로 이동하시겠어요?"]}
-      contentColor="#767681"
-      confirmButtonColor="#48FFBD"
-      cancelButtonText="취소"
-      confirmButtonText="확인"
-      confirmButtonTextColor="#171719"
-    />
-  ); // 조건이 충족되면 자식 컴포넌트를 렌더링
+    <>
+      <StopModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={() => {
+          navigate("/login");
+          setIsModalOpen(false);
+        }}
+        title={"로그인이 필요합니다."}
+        content={["로그인 페이지로 이동하시겠어요?"]}
+        contentColor="#767681"
+        confirmButtonColor="#48FFBD"
+        cancelButtonText="취소"
+        confirmButtonText="확인"
+        confirmButtonTextColor="#171719"
+      />
+
+      <StopModal
+        isOpen={isSpaceModalOpen}
+        onClose={() => setIsSpaceModalOpen(false)}
+        onConfirm={() => {
+          navigate("/space");
+          setIsSpaceModalOpen(false);
+        }}
+        title={"Space 선택이 필요합니다."}
+        content={["Space 선택 페이지로 이동하시겠어요?"]}
+        contentColor="#767681"
+        confirmButtonColor="#48FFBD"
+        cancelButtonText="취소"
+        confirmButtonText="확인"
+        confirmButtonTextColor="#171719"
+      />
+    </>
+  );
 };
 
 export default LoginModal;