feat: 첫 로딩 시 유저 정보 fetch 전 로딩 페이지 보여주기 (#28)

* feat: 내 정보 조회 전까지 로딩 페이지

* feat: 로그아웃 시 toast

src/api/WinkApiApplication.tsx

@@ -2,18 +2,28 @@
 
 import React, { useEffect } from 'react';
 
+import { Loading } from '@/components';
+
 import { WinkApi } from '@/api';
 
+import { useApplicationState } from '@/store';
+
 interface WinkApiApplicationProps {
   children: React.ReactNode;
 }
 
 export const WinkApiApplication: React.FC<WinkApiApplicationProps> = ({
   children,
 }: WinkApiApplicationProps) => {
+  const { loaded } = useApplicationState();
+
   useEffect(() => {
     WinkApi.init();
   }, []);
 
+  if (!loaded) {
+    return <Loading />;
+  }
+
   return <>{children}</>;
 };

src/api/request/WinkApiRequest.ts

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 import { RefreshResponseDto, User } from '@/api';
 
-import { useUserStore } from '@/store';
+import { useUserStore, useApplicationState } from '@/store';
 
 interface WinkRawApiResponse<T> {
   code: number;
@@ -29,6 +29,8 @@ export class WinkApiRequest {
 
     if (accessToken && refreshToken) {
       this.setToken(accessToken, refreshToken);
+    } else {
+      useApplicationState.setState({ loaded: true });
     }
   }
 
@@ -141,6 +143,10 @@ export class WinkApiRequest {
 
     this.get('/auth/me').then((user) => {
       useUserStore.setState({ user: user as User });
+
+      if (!useApplicationState.getState().loaded) {
+        useApplicationState.setState({ loaded: true });
+      }
     });
   }
 }

src/components/Header.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
 import { WinkApi } from '@/api';
 
-import { useUserStore } from '@/store/useUserStore';
+import { useUserStore } from '@/store';
 
 import logo from '@/public/logo.png';
 
@@ -92,6 +93,8 @@ export const Header: React.FC = () => {
     e.preventDefault();
 
     WinkApi.Request.removeToken();
+
+    toast.info('로그아웃 되었습니다.');
   };
 
   const toggleDropdown = (type: string) => {

src/components/Loading.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Loading: React.FC = () => {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="w-16 h-16 border-t-4 border-blue-500 border-solid rounded-full animate-spin"></div>
+    </div>
+  );
+};

src/components/index.ts

@@ -1,3 +1,5 @@
+export * from './Loading';
+
 export * from './Header';
 export * from './Footer';
 

src/store/index.ts

@@ -1 +1,2 @@
 export * from './useUserStore';
+export * from './useApplicationState';

src/store/useApplicationState.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface ApplicationState {
+  loaded: boolean;
+  setLoaded: (loaded: boolean) => void;
+}
+
+export const useApplicationState = create<ApplicationState>((set) => ({
+  loaded: false,
+  setLoaded: (loaded) => set({ loaded }),
+}));