Refactor: 로딩 화면 추가

components/loading/Loading.tsx

@@ -1,30 +1,17 @@
+import { memo } from 'react';
+import styled from './loading.module.css';
 import Image from 'next/image';
-import styled from 'styled-components';
-
-const LoadingWrap = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 10;
-  img {
-    width: 150px;
-  }
-`;
 
 function Loading() {
   return (
-    <LoadingWrap>
+    <div className={styled.loadingWrap}>
       <Image
         src='/assets/icon/icon_loading.svg'
         alt='loading'
+        width={100}
+        height={100}
       />
-    </LoadingWrap>
+    </div>
   );
 }
-export default Loading;
+export default memo(Loading);

components/loading/loading.module.css

@@ -0,0 +1,16 @@
+.loadingWrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 10;
+}
+
+.loadingWrap img {
+  width: 150px;
+}

pages/folder/index.tsx

@@ -10,7 +10,7 @@ import FolderContentControll from '@/components/folder/FolderContentControll';
 import PostCardList from '@/components/folder/PostCardList';
 import Modal from '@/components/modal/Modal';
 import Loading from '@/components/loading/Loading';
-import { BodyInner, BookmarkBox, FolderContainHead } from '../../styles/folderStyle';
+import { BodyInner, BookmarkBox, EmptyBox, FolderContainHead } from '../../styles/folderStyle';
 import { IFolderContentApi, IFolderMenuButtonApi } from '../../components/folder/interface';
 import { instance } from '@/lib/axios';
 
@@ -52,6 +52,7 @@ export default function Folder({ $menu, $content }: { $menu: IFolderMenuButtonAp
   const [isModalShow, setIsModalShow] = useState(false);
   const [modalType, setModalType] = useState<string>('');
   const [searchContatn, setSearchContent] = useState<any>();
+  const [isStylesLoaded, setIsStylesLoaded] = useState(false);
 
   // 폴더리스트버튼
   const handleClick = (id: number) => {
@@ -115,9 +116,11 @@ export default function Folder({ $menu, $content }: { $menu: IFolderMenuButtonAp
       alert('페이지가 없습니다.');
       router.push(`/folder`);
     }
+
+    setIsStylesLoaded(true);
   }, [$menu, router]);
 
-  if (!$menu || !$content) return <Loading />;
+  if (!isStylesLoaded) return <Loading />;
 
   return (
     <Container>

pages/index.tsx

@@ -1,8 +1,18 @@
 import { Container, TitleLs, TitleMs } from '@/styles/commonStyle';
 import { Section } from '../styles/mainStyle';
 import LinkButton from '@/components/common/atoms/LinkButton';
+import { useEffect, useState } from 'react';
+import Loading from '@/components/loading/Loading';
 
 export default function Home() {
+  const [isStylesLoaded, setIsStylesLoaded] = useState(false);
+
+  useEffect(() => {
+    setIsStylesLoaded(true);
+  }, []);
+
+  if (!isStylesLoaded) return <Loading />;
+
   return (
     <Container className='body__main'>
       <Section className='section__banner'>

pages/shared/[id].tsx

@@ -65,6 +65,7 @@ export default function Shared({ $title, $content }: { $title: IShareTitle; $con
   const contentSearch = searchContatn ?? $content?.data;
 
   if (!$title.data[0]) router.push('/notfound');
+
   return (
     <Container>
       <ContainHead>

pages/signin/index.tsx

@@ -11,6 +11,7 @@ import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
 import { useForm } from 'react-hook-form';
 import Image from 'next/image';
+import Loading from '@/components/loading/Loading';
 
 const BASE_PAGE_URL = '/';
 const SIGNIN_PAGE_URL = '/signin';
@@ -61,6 +62,8 @@ export default function SignIn() {
   const router = useRouter();
   const { handleLogin } = useContext(AuthContext);
   const [IsVisibility, setIsVisibility] = useState(false);
+  const [isStylesLoaded, setIsStylesLoaded] = useState(false);
+
   const {
     register,
     handleSubmit,
@@ -93,7 +96,11 @@ export default function SignIn() {
       alert('로그인한 상태입니다.');
       router.push('/folder');
     }
+    setIsStylesLoaded(true);
   }, [router]);
+
+  if (!isStylesLoaded) return <Loading />;
+
   return (
     <JoinWrap className='no-header--container signin__wrap'>
       <JoinBody>

pages/signup/index.tsx

@@ -10,6 +10,7 @@ import { useRouter } from 'next/router';
 import { IJoinForm } from '@/components/join/interfase';
 import { GetServerSidePropsContext } from 'next';
 import Image from 'next/image';
+import Loading from '@/components/loading/Loading';
 
 const BASE_PAGE_URL = '/';
 const SIGNUP_PAGE_URL = '/signup';
@@ -65,6 +66,7 @@ export default function SignUp() {
     setError,
     setValue,
   } = useForm<IJoinForm>({ mode: 'onBlur' });
+  const [isStylesLoaded, setIsStylesLoaded] = useState(false);
 
   const handleEmailCheck = async (email: IJoinForm['email']) => {
     try {
@@ -96,7 +98,11 @@ export default function SignUp() {
       alert('로그인한 상태입니다.');
       router.push('/folder');
     }
+    setIsStylesLoaded(true);
   }, [router]);
+
+  if (!isStylesLoaded) return <Loading />;
+
   return (
     <JoinWrap className='no-header--container signup__wrap'>
       <JoinBody>