[ Feat ] 로그인 상태 유지할 수 있도록 일렉트론 메인프로세스 로직 수정

package.json

@@ -12,20 +12,21 @@
   "main": "dist-electron/main.js",
   "scripts": {
     "dev": "pnpm dev:react & pnpm dev:electron",
-    "dev:react": "vite",
+    "dev:react": "vite --mode react",
     "dev:electron": "pnpm transpile:electron && cross-env NODE_ENV=development electron .",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build --mode react",
+    "build:electron": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "transpile:electron": "tsc --project src/electron/tsconfig.json",
-    "dist:mac": "pnpm transpile:electron && pnpm build && electron-builder --mac --arm64",
-    "dist:mac:intel": "pnpm transpile:electron && pnpm build && electron-builder --mac --x64",
-    "dist:mac:universal": "pnpm transpile:electron && pnpm build && electron-builder --mac --universal",
+    "dist:mac": "pnpm transpile:electron && pnpm build:electron && electron-builder --mac --arm64",
+    "dist:mac:intel": "pnpm transpile:electron && pnpm build:electron && electron-builder --mac --x64",
+    "dist:mac:universal": "pnpm transpile:electron && pnpm build:electron && electron-builder --mac --universal",
     "dist:mac:notarize": "./scripts/build-mac.sh",
     "dist:mac:intel:notarize": "./scripts/build-mac-intel.sh",
     "dist:mac:universal:notarize": "./scripts/build-mac-universal.sh",
-    "dist:win": "pnpm transpile:electron && pnpm build && electron-builder --win --x64",
-    "dist:linux": "pnpm transpile:electron && pnpm build && electron-builder --linux --x64"
+    "dist:win": "pnpm transpile:electron && pnpm build:electron && electron-builder --win --x64",
+    "dist:linux": "pnpm transpile:electron && pnpm build:electron && electron-builder --linux --x64"
   },
   "dependencies": {
     "@remix-run/router": "^1.17.0",

src/app/pages/LoginPage/LoginPage.tsx

@@ -1,9 +1,14 @@
+import { useEffect } from 'react';
 import Lottie from 'react-lottie';
+import { useNavigate } from 'react-router-dom';
 
-import LottieData from '@/shared/assets/lotties/morib_logo_motion.json';
+import LottieData from '@/shared/assets/lotties/main_motion.json';
 import GoogleLoginIcon from '@/shared/assets/svgs/google_login.svg?react';
 
+import { ROUTES_CONFIG } from '@/router/routesConfig';
+
 import { useLottieAnimation } from '@/pages/LoginPage/hooks/useLottieAnimation';
+import { authConfig } from '@/shared/config/auth';
 
 const defaultOptions = {
 	autoplay: true,
@@ -14,17 +19,15 @@ const defaultOptions = {
 	},
 };
 
-const API_URL = `${import.meta.env.VITE_GOOGLE_URL}`;
-const ELECTRON_URL = `${import.meta.env.VITE_ELECTRON_AUTH_URL}`;
-
 const LoginPage = () => {
 	const { isAnimationComplete, lottieRef, handleAnimationComplete } = useLottieAnimation();
+	const navigate = useNavigate();
 
 	const handleClick = () => {
 		if (window.electron) {
-			window.open(ELECTRON_URL, '_blank');
+			window.open(authConfig.google.url.electron, '_blank');
 		} else {
-			window.location.href = API_URL;
+			window.location.href = authConfig.google.url.react;
 		}
 	};
 
@@ -34,9 +37,15 @@ const LoginPage = () => {
 		});
 	};
 
+	useEffect(() => {
+		if (authConfig.isAuthenticated()) {
+			navigate(ROUTES_CONFIG.home.path);
+		}
+	}, [navigate]);
+
 	return (
 		<div className="flex h-screen items-center justify-center bg-login bg-login-bg bg-cover">
-			<div className="h-[37rem] w-[60rem]">
+			<div className="flex flex-col items-center justify-center">
 				<Lottie
 					ref={lottieRef}
 					options={defaultOptions}
@@ -55,7 +64,7 @@ const LoginPage = () => {
 				<button
 					onMouseEnter={handleMouseEnter}
 					onClick={handleClick}
-					className={`ml-[12rem] transition-opacity duration-300 ${isAnimationComplete ? 'opacity-100' : 'opacity-0'}`}
+					className={`transition-opacity duration-300 ${isAnimationComplete ? 'opacity-100' : 'opacity-0'}`}
 				>
 					<GoogleLoginIcon />
 				</button>

src/app/router/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet, useNavigate } from 'react-router-dom';
 
 import ErrorBoundary from '@/shared/components/ErrorBoundary/ErrorBoundary';
 
@@ -9,9 +9,12 @@ import { ROUTES_CONFIG } from './routesConfig';
 
 const ProtectedRoute = () => {
 	const accessToken = getAccessToken();
+	const navigate = useNavigate();
+
 	if (!accessToken) {
 		alert(mapStatusToMessage(401));
-		return <Navigate to={ROUTES_CONFIG.login.path} replace />;
+		navigate(ROUTES_CONFIG.login.path, { replace: true });
+		return null;
 	}
 
 	return (

src/app/router/Router.tsx

@@ -10,13 +10,13 @@ import LoadingOverlay from '@/shared/components/LoadingOverlay/LoadingOverlay';
 import AllowedServicePage from '@/pages/AllowedServicePage/AllowedServicePage';
 import HomePage from '@/pages/HomePage/HomePage';
 import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage';
+import RedirectPage from '@/pages/RedirectPage/RedirectPage';
 import Layout from '@/shared/layout/Layout';
 
 import ProtectedRoute from './ProtectedRoute';
 import { ROUTES_CONFIG } from './routesConfig';
 
 const LoginPage = lazy(() => import('@/pages/LoginPage/LoginPage'));
-const RedirectPage = lazy(() => import('@/pages/RedirectPage/RedirectPage'));
 const OnboardingPage = lazy(() => import('@/pages/OnboardingPage/OnboardingPage'));
 const TimerPage = lazy(() => import('@/pages/TimerPage/TimerPage'));
 

src/app/shared/apisV2/setting/setting.mutations.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { reloginWithoutLogout } from '@/shared/utils/auth';
+import { useLogout } from '@/shared/hooks/useLogout';
 
 import { deleteAccount, putChangeProfile } from './setting.api';
 import { settingKeys } from './setting.keys';
@@ -18,12 +18,13 @@ export const usePutChangeProfile = () => {
 
 export const useDeleteAccount = () => {
 	const queryClient = useQueryClient();
+	const { handleLogout } = useLogout();
 
 	return useMutation({
 		mutationFn: deleteAccount,
 		onSuccess: () => {
 			queryClient.invalidateQueries();
-			reloginWithoutLogout();
+			handleLogout();
 		},
 	});
 };

src/app/shared/config/auth.ts

@@ -0,0 +1,28 @@
+import { redirect } from 'react-router-dom';
+
+import { ROUTES_CONFIG } from '@/router/routesConfig';
+
+import { getAccessToken, getIsOnboardingCompleted } from '../utils/auth';
+
+export const authConfig = {
+	google: {
+		url: {
+			react: import.meta.env.VITE_GOOGLE_URL,
+			electron: import.meta.env.VITE_ELECTRON_AUTH_URL,
+		},
+	},
+
+	isAuthenticated: () => {
+		const accessToken = getAccessToken();
+		return !!accessToken;
+	},
+
+	isOnboardingCompleted: () => {
+		const isOnboardingCompleted = getIsOnboardingCompleted();
+		return !!isOnboardingCompleted;
+	},
+
+	redirectToLogin: () => {
+		redirect(ROUTES_CONFIG.login.path);
+	},
+};

src/app/shared/hooks/useLogout.ts

@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom';
+
+import { ROUTES_CONFIG } from '@/router/routesConfig';
+
+import { removeAllTokens } from '../utils/auth';
+
+export const useLogout = () => {
+	const navigate = useNavigate();
+
+	const handleLogout = () => {
+		removeAllTokens();
+		navigate(ROUTES_CONFIG.login.path, { replace: true });
+	};
+
+	return { handleLogout };
+};

src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx

@@ -4,7 +4,7 @@ import ButtonRadius8 from '@/shared/components/ButtonRadius8/ButtonRadius8';
 import ButtonStatusToggle from '@/shared/components/ButtonStatusToggle/ButtonStatusToggle';
 import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';
 
-import { reloginWithoutLogout } from '@/shared/utils/auth';
+import { useLogout } from '@/shared/hooks/useLogout';
 
 import { UserProfileType } from '@/shared/types/profile';
 
@@ -19,12 +19,15 @@ type AccountContentProps = UserProfileType;
 const AccountContent = ({ ...props }: AccountContentProps) => {
 	const logoutModalRef = useRef<ModalWrapperRef>(null);
 	const deleteAccountModalRef = useRef<ModalWrapperRef>(null);
+
 	const { mutate: changeProfile } = usePutChangeProfile();
 	const { mutate: deleteAccount } = useDeleteAccount();
 
 	const [isToggleOn, setIsToggleOn] = useState(props.isPushEnabled);
 	const [userName, setUserName] = useState(props.name);
 
+	const { handleLogout } = useLogout();
+
 	const handleToggle = () => setIsToggleOn((prev) => !prev);
 
 	const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -52,7 +55,7 @@ const AccountContent = ({ ...props }: AccountContentProps) => {
 	};
 
 	const handleDeleteAccount = () => {
-		deleteAccount(undefined, { onSuccess: reloginWithoutLogout });
+		deleteAccount(undefined, { onSuccess: handleLogout });
 	};
 
 	return (
@@ -122,7 +125,7 @@ const AccountContent = ({ ...props }: AccountContentProps) => {
 			<ModalWrapper ref={logoutModalRef} backdrop>
 				{(_) => (
 					<ModalContentsAlert.Logout
-						onConfirm={reloginWithoutLogout}
+						onConfirm={handleLogout}
 						onCloseModal={handleCloseLogoutModal}
 						userEmail={props.email}
 					/>

src/app/shared/utils/auth.ts

@@ -32,3 +32,18 @@ export const getRefreshToken = () => {
 export const setRefreshToken = (refreshToken: string) => {
 	localStorage.setItem('refreshToken', refreshToken);
 };
+
+export const getIsOnboardingCompleted = () => {
+	const isOnboardingCompleted = localStorage.getItem('isOnboardingCompleted');
+	return isOnboardingCompleted;
+};
+
+export const setIsOnboardingCompleted = (isOnboardingCompleted: string) => {
+	localStorage.setItem('isOnboardingCompleted', isOnboardingCompleted);
+};
+
+export const removeAllTokens = () => {
+	localStorage.removeItem('accessToken');
+	localStorage.removeItem('refreshToken');
+	localStorage.removeItem('isOnboardingCompleted');
+};

src/electron/contants/protocol.ts

@@ -0,0 +1 @@
+export const DEFAULT_PROTOCOL = 'morib';