Merge pull request #201 from team-offonoff/feat/loading-screen

Loading 화면 분리
team-offonoff · Feb 14, 2024 · d7e66db · d7e66db
2 parents e5d10fa + 88040c3
commit d7e66db
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/src/components/commons/Loading/Loading.tsx b/src/components/commons/Loading/Loading.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { zIndex, colors } from '@styles/theme';
+
+import { ALogoIcon, BLogoIcon } from '@icons/index';
+
+import { Row } from '../Flex/Flex';
+
+const Loading = () => {
+  return (
+    <div
+      className="loading"
+      style={{
+        position: 'fixed',
+        overflow: 'hidden',
+        height: 'calc(var(--vh, 1vh) * 100)',
+        width: '100vw',
+        zIndex: zIndex.modal,
+        backgroundColor: colors.navy_60,
+      }}
+    >
+      <Row
+        justifyContent={'center'}
+        alignItems={'center'}
+        gap={7.5}
+        style={{ width: '100%', height: '100%' }}
+      >
+        <ALogoIcon width={65} fill={colors.A} />
+        <BLogoIcon width={66} fill={colors.B} />
+      </Row>
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/src/routes/Auth/kakao/KakaoLogin.tsx b/src/routes/Auth/kakao/KakaoLogin.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router';
 
 import { kakaoLogin } from '@apis/oauth/kakao';
 import { Row } from '@components/commons/Flex/Flex';
+import Loading from '@components/commons/Loading/Loading';
 
 import { useAuthStore } from '@store/auth';
 
@@ -55,27 +56,7 @@ const KakaoLogin = () => {
 
   return (
     <Container>
-      <div
-        className="loading"
-        style={{
-          position: 'fixed',
-          overflow: 'hidden',
-          height: 'calc(var(--vh, 1vh) * 100)',
-          width: '100vw',
-          zIndex: zIndex.modal,
-          backgroundColor: colors.navy_60,
-        }}
-      >
-        <Row
-          justifyContent={'center'}
-          alignItems={'center'}
-          gap={7.5}
-          style={{ width: '100%', height: '100%' }}
-        >
-          <ALogoIcon width={65} fill={colors.A} />
-          <BLogoIcon width={66} fill={colors.B} />
-        </Row>
-      </div>
+      <Loading />
       <Login />
     </Container>
   );