feat: 로그인시 이전 페이지로 이동하도록 설정

Author: BHyeonKim

src/app/routes/callback.tsx

@@ -6,14 +6,19 @@ import { useEffect } from 'react';
 import type { UserInfoResponse } from '~/entities/user/types/user.type';
 import ApiClient from '~/shared/api/httpClient';
 import { useUserId } from '../provider/UserInfoProvider';
+import { getSession } from '../sessions.server';
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const rawCookie = request.headers.get('Cookie') ?? '';
+
+	const session = await getSession(rawCookie);
+	const referer = session.get('referer') || '/';
+
 	const cookies = cookie.parse(rawCookie);
 	const isAccessTokenExists = !!cookies.access_token;
 
 	if (!isAccessTokenExists) {
-		return redirect('/trade/BTC/login');
+		return redirect(referer);
 	}
 
 	const response = await ApiClient.get<UserInfoResponse>('api/userinfo', {
@@ -24,18 +29,19 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 	const { data } = await response.json();
 
-	return data.userId;
+	return { userId: data.userId, referer: referer };
 }
 
 export default function CallbackRoutes({ loaderData }: Route.ComponentProps) {
+	const { userId, referer } = loaderData;
 	const navigate = useNavigate();
-	const { userId, setUserId } = useUserId();
-	setUserId(loaderData);
+	const { setUserId } = useUserId();
+	setUserId(userId);
 
 	useEffect(() => {
 		if (!userId) return;
-		navigate('/trade/BTC');
-	}, [userId, navigate]);
+		navigate(referer);
+	}, [userId, referer, navigate]);
 
 	return null;
 }

src/app/routes/login.tsx

@@ -1,5 +1,29 @@
+import { data } from 'react-router';
 import { LoginModal } from '~/widgets/auth';
+import { commitSession, getSession } from '../sessions.server';
+import type { Route } from './+types/login';
 
-export default function LoginRouteComponent() {
-	return <LoginModal key="login-modal" />;
+export async function loader({ request }: Route.LoaderArgs) {
+	const { searchParams } = new URL(request.url);
+	const session = await getSession(request.headers.get('Cookie'));
+
+	const referer = searchParams.get('referer') || '/';
+	session.set('referer', referer);
+
+	return data(
+		{ referer },
+		{
+			headers: {
+				'set-cookie': await commitSession(session),
+			},
+		},
+	);
+}
+
+export default function LoginRouteComponent({
+	loaderData,
+}: Route.ComponentProps) {
+	const { referer } = loaderData;
+
+	return <LoginModal key="login-modal" referer={referer} />;
 }

src/app/sessions.server.ts

@@ -0,0 +1,28 @@
+import { createCookieSessionStorage } from 'react-router';
+
+type SessionData = {
+	userId: string;
+	referer: string;
+};
+
+type SessionFlashData = {
+	error: string;
+};
+
+const MINITE = 60;
+
+const { getSession, commitSession, destroySession } =
+	createCookieSessionStorage<SessionData, SessionFlashData>({
+		cookie: {
+			name: '__session',
+
+			httpOnly: true,
+			maxAge: MINITE * 60 * 24,
+			path: '/',
+			sameSite: 'lax',
+			secrets: [String(import.meta.env.VITE_APP_SECRET)],
+			secure: true,
+		},
+	});
+
+export { getSession, commitSession, destroySession };

src/widgets/auth/ui/LoginModal/index.tsx

@@ -8,10 +8,14 @@ import Modal from '~/shared/ui/Modal';
 
 import CloudLogo from '~/assets/images/cloud.webp';
 
-export default function LoginModal() {
+type LoginModalProps = {
+	referer: string;
+};
+
+export default function LoginModal({ referer }: LoginModalProps) {
 	const navigate = useNavigate();
 	const modalRef = useRef<HTMLDialogElement>(null);
-	useClickOutside(modalRef, () => navigate(-1));
+	useClickOutside(modalRef, () => navigate(referer));
 
 	return (
 		<Backdrop>

src/widgets/navbar/ui/NavBar/index.tsx

@@ -39,7 +39,7 @@ export default function NavBar({
 	};
 
 	const LoginButton = () => (
-		<NavLink to={`/trade/${ticker}/login`}>
+		<NavLink to={`/trade/${ticker}/login?referer=${location.pathname}`}>
 			<Button>로그인</Button>
 		</NavLink>
 	);