feat: app loading spinner error fixed - 3

bsideproject · Jul 28, 2023 · 39620b9 · 39620b9
2 parents e360011 + 4043654
commit 39620b9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -13,9 +13,10 @@ import {useNavigate} from "react-router-dom";
 import Spinner from "../../components/common/Spinner";
 
 const Main = () => {
-    let key = RootStore.userStore.getJwtKey;
+    // let key = RootStore.userStore.getJwtKey;
     let navigate = useNavigate();
 
+    const [key, setKey] = useState<string>();
     // 리스트 비었을 때 분기처리
     const [isEmptyList, setIsEmptyList] = useState<boolean>(true);
     const [registerBtn, setRegisterBtn] = useState<boolean>(false);
@@ -26,11 +27,13 @@ const Main = () => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
     useEffect(() => {
+        setKey(RootStore.userStore.getJwtKey);
+
         const isFirstVisit = sessionStorage.getItem('isFirstVisit');
         if (isFirstVisit !== null) {
             setIsLoading(false);
         }else{
-            setIsLoading(true)
+            setIsLoading(true);
             sessionStorage.setItem('isFirstVisit', 'true');
         }
         setTimeout(() => {
@@ -92,8 +95,7 @@ const Main = () => {
 
     return (
         <>
-            {isLoading ?
-                <Spinner /> :
+            {isLoading ? <Spinner /> :
                 <div className="Main inner">
                         <div className="main-header">
                             <span className="setting-btn" onClick={() => navigate(`/page/setting?nick=${RootStore.userStore.getUserName}`)}><img src={IcSettingBtn} alt="setting-btn" /></span>

diff --git a/src/styles/abstracts/_common.scss b/src/styles/abstracts/_common.scss
@@ -271,10 +271,12 @@
 }
 
 .spinner-wrap{
-  position: relative;
+  position: fixed;
+  left: 0; top: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  z-index: 999;
   .spinner-bg{
     width: 100%;
     filter: blur(3px);