[FEAT] 로딩 페이지 UX 개선

src/pages/Loading.tsx → src/components/LoadingSpinner.tsx

@@ -1,11 +1,11 @@
 import { ClipLoader } from 'react-spinners';
 
-const Loading = () => {
+const LoadingSpinner = () => {
   return (
     <div className={`flex justify-center items-center w-full h-dvh`}>
       <ClipLoader color={'#132650'} />
     </div>
   );
 };
 
-export default Loading;
+export default LoadingSpinner;

src/layouts/ProtectedLayout.tsx

@@ -4,7 +4,7 @@ import SettingSidebar from '../components/Sidebar/SettingSidebar';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import Loading from '../pages/Loading.tsx';
+import LoadingSpinner from '../components/LoadingSpinner.tsx';
 import ServerError from '../pages/ServerError.tsx';
 import { LOCAL_STORAGE_KEY } from '../constants/key.ts';
 import { useLocalStorage } from '../hooks/useLocalStorage.ts';
@@ -31,7 +31,7 @@ const ProtectedLayout = () => {
     <QueryErrorResetBoundary>
       {({ reset }) => (
         <ErrorBoundary onReset={reset} FallbackComponent={ServerError}>
-          <Suspense fallback={<Loading />}>
+          <Suspense fallback={<LoadingSpinner />}>
             <div className="flex h-screen">
               <aside
                 className="fixed top-0 left-0 h-screen overflow-auto sidebar-scroll transition-all duration-300 ease-in-out"

src/layouts/PublicLayout.tsx

@@ -2,15 +2,15 @@ import { Outlet } from 'react-router-dom';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Suspense } from 'react';
-import Loading from '../pages/Loading.tsx';
+import LoadingSpinner from '../components/LoadingSpinner.tsx';
 import ServerError from '../pages/ServerError.tsx';
 
 const PublicLayout = () => {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
         <ErrorBoundary onReset={reset} FallbackComponent={ServerError}>
-          <Suspense fallback={<Loading />}>
+          <Suspense fallback={<LoadingSpinner />}>
             <main className="w-full h-screen overflow-auto basic-scroll bg-gray-onboard">
               <div className="min-w-max min-h-screen flex flex-col items-center justify-center">
                 <Outlet />

src/pages/onboarding/InviteLoading.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { LOCAL_STORAGE_KEY } from '../../constants/key';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const InviteLoading = () => {
   const { workspaceName } = useParams(); // URL 파라미터 추출
@@ -30,7 +31,7 @@ const InviteLoading = () => {
 
   return (
     <div className="min-w-max min-h-screen flex flex-col items-center justify-center">
-      <h3 className="font-title-sub-r text-gray-600">초대 확인중입니다.</h3>
+      <LoadingSpinner />;
     </div>
   );
 };

src/pages/onboarding/TokenLoading.tsx

@@ -6,6 +6,7 @@ import { postReIssueAccessToken } from '../../apis/auth';
 import { getWorkspaceProfile } from '../../apis/setting/useGetWorkspaceProfile';
 import { LOCAL_STORAGE_KEY } from '../../constants/key';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
+import LoadingSpinner from '../../components/LoadingSpinner';
 
 const TokenLoading = () => {
   const { setItem } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken);
@@ -43,7 +44,7 @@ const TokenLoading = () => {
     init();
   }, [setItem, navigate]);
 
-  return <h3 className="font-title-sub-r text-gray-600">로딩중입니다.</h3>;
+  return <LoadingSpinner />;
 };
 
 export default TokenLoading;

src/pages/workspace/WorkspaceComplete.tsx

@@ -1,6 +1,7 @@
 import { useGetWorkspaceProfile } from '../../apis/setting/useGetWorkspaceProfile.ts';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import LoadingSpinner from '../../components/LoadingSpinner.tsx';
 
 const WorkspaceComplete = () => {
   const { data } = useGetWorkspaceProfile();
@@ -14,7 +15,11 @@ const WorkspaceComplete = () => {
       });
     }
   }, [teamId]);
-  return <div />;
+  return (
+    <div className="min-w-max min-h-screen flex flex-col items-center justify-center">
+      <LoadingSpinner />;
+    </div>
+  );
 };
 
 export default WorkspaceComplete;