From 7182fa2c8301596799dfd30c5f26c0af4404e1cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Sun, 5 Nov 2023 16:31:39 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Loading/Loading.tsx | 45 ++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/Loading/Loading.tsx

diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..ec708f5
--- /dev/null
+++ b/src/components/Loading/Loading.tsx
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+const Loading = () => {
+  return (
+    <Main>
+      <svg
+        width='38'
+        height='38'
+        viewBox='0 0 38 38'
+        xmlns='http://www.w3.org/2000/svg'
+        stroke='#fff'
+      >
+        <g fill='none' fillRule='evenodd'>
+          <g transform='translate(1 1)' strokeWidth='2'>
+            <circle strokeOpacity='.5' cx='18' cy='18' r='18' />
+            <path d='M36 18c0-9.94-8.06-18-18-18'>
+              <animateTransform
+                attributeName='transform'
+                type='rotate'
+                from='0 18 18'
+                to='360 18 18'
+                dur='1s'
+                repeatCount='indefinite'
+              />
+            </path>
+          </g>
+        </g>
+      </svg>
+    </Main>
+  );
+};
+
+const Main = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background: url('/img/main/main.png');
+  background-size: 100% 100vh;
+  background-repeat: no-repeat;
+`;
+
+export default Loading;

From 2f71d7e7c283e21d3c7e24504c1dcf18a2a02d78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Sun, 5 Nov 2023 16:32:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20layout=EC=97=90=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 3f4193e..034fddd 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -8,6 +8,7 @@ import Header from '@components/Header/Header';
 import useChannels from '@hooks/useChannels';
 import useProfile from '@hooks/useProfile';
 import NoAuthMain from './Main/NoAuthMain';
+import Loading from './Loading/Loading';
 
 const Layout = ({ children }: PropsWithChildren) => {
   const { channels } = useChannels();
@@ -32,7 +33,7 @@ const Layout = ({ children }: PropsWithChildren) => {
       <>
         <CommonLayout>
           <GlobalStyle />
-          <div>Loading...</div>
+          <Loading />
         </CommonLayout>
       </>
     );