fix: 주엽님과의 작업 사항 합치기

boostcampwm-2024 · Nov 12, 2024 · 70691fc · 70691fc
1 parent 885c410
commit 70691fc
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 194 deletions.
diff --git a/apps/client/src/components/logo/HarmonyWithText.tsx b/apps/client/src/components/logo/HarmonyWithText.tsx
@@ -1,4 +1,4 @@
-function HarmonyWithText({ size = 24 }: { size?: number }) {
+function HarmonyWithText({ size = 28 }: { size?: number }) {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" width={size * 4} height={size} viewBox="0 0 1000 250">
 			<g>

diff --git a/apps/client/src/pages/Home.tsx b/apps/client/src/pages/Home.tsx
@@ -1,12 +1,28 @@
 import { Link } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
-import { Github } from '@/components/logo';
-import Header from '@/components/Header.tsx';
+import { Github, HarmonyWithText } from '@/components/logo';
+import { Topbar } from '@/components/navigation/topbar';
 
 function Home() {
 	return (
 		<div className="flex min-h-screen flex-col">
-			<Header />
+			<Topbar
+				leftContent={
+					<Link to="/">
+						<HarmonyWithText />
+					</Link>
+				}
+				rightContent={
+					<>
+						<Button variant="ghost" asChild>
+							<Link to="/login">로그인</Link>
+						</Button>
+						<Button asChild>
+							<Link to="/signup">회원가입</Link>
+						</Button>
+					</>
+				}
+			/>
 
 			<main className="mt-16 flex-grow bg-white text-black dark:bg-black dark:text-white">
 				<section className="container mx-auto max-w-6xl from-pink-500 via-red-500 to-yellow-500 px-6 py-20 text-center">

diff --git a/apps/client/src/pages/Login.tsx b/apps/client/src/pages/Login.tsx
@@ -1,38 +1,84 @@
-import Header from '@/components/Header.tsx';
+import { Link, useNavigate, useRouter, useRouterState } from '@tanstack/react-router';
+import { useState } from 'react';
 import { Input } from '@/components/ui/input.tsx';
 import { Button } from '@/components/ui/button.tsx';
-import { Github, Harmony } from '@/components/logo';
+import { Github, Harmony, HarmonyWithText } from '@/components/logo';
+import { Topbar } from '@/components/navigation/topbar';
+import { useAuth } from '@/contexts/authContext';
+import { sleep } from '@/utils/sleep';
 
 function Login() {
+	const auth = useAuth();
+	const router = useRouter();
+	const isLoading = useRouterState({ select: (s) => s.isLoading });
+	const navigate = useNavigate();
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const isLoggingIn = isLoading || isSubmitting;
+
+	const onFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		setIsSubmitting(true);
+		try {
+			event.preventDefault();
+			const data = new FormData(event.currentTarget);
+			const fieldValue = data.get('username');
+			if (!fieldValue) {
+				return;
+			}
+			const username = fieldValue.toString();
+			await auth.login(username);
+			await router.invalidate();
+			await sleep(1); // 상태 업데이트를 위한 임시 방편
+			await navigate({ to: '/account' });
+		} catch (error) {
+			console.error('Error logging in: ', error);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
 	return (
 		<>
 			<div className="flex h-screen flex-col">
-				<Header />
+				<Topbar
+					leftContent={
+						<Link to="/">
+							<HarmonyWithText />
+						</Link>
+					}
+					rightContent={
+						<Button variant="outline" asChild>
+							<Link to="/signup">회원가입</Link>
+						</Button>
+					}
+				/>
 
 				<main className="flex h-full items-center justify-center">
 					<div className="w-full max-w-md">
 						<div className="mb-8 text-center">
 							<h1 className="text-3xl font-bold">Harmony 로그인</h1>
 						</div>
-						<form className="mb-4 bg-white px-8 pb-8 dark:bg-gray-800">
+						<form className="mb-4 bg-white px-8 pb-8 dark:bg-gray-800" onSubmit={onFormSubmit}>
 							<div className="mb-4">
 								<Input
-									type="id"
 									id="username"
+									type="text"
+									name="username"
 									placeholder="아이디"
 									className="h-12 w-full dark:border-gray-600 dark:bg-gray-700 dark:text-white"
 								/>
 							</div>
 							<div className="mb-4">
 								<Input
-									type="password"
 									id="password"
+									type="password"
+									name="password"
 									placeholder="패스워드"
 									className="h-12 w-full dark:border-gray-600 dark:bg-gray-700 dark:text-white"
 								/>
 							</div>
 
-							<Button className="text-md h-12 w-full">로그인하기</Button>
+							<Button className="text-md h-12 w-full" type="submit">
+								{isLoggingIn ? 'Loading...' : 'Login'}
+							</Button>
 						</form>
 					</div>
 				</main>

diff --git a/apps/client/src/pages/Signup.tsx b/apps/client/src/pages/Signup.tsx
@@ -1,13 +1,25 @@
-import Header from '@/components/Header.tsx';
+import { Link } from '@tanstack/react-router';
 import { Input } from '@/components/ui/input.tsx';
 import { Button } from '@/components/ui/button.tsx';
-import { Github, Harmony } from '@/components/logo';
+import { Github, Harmony, HarmonyWithText } from '@/components/logo';
+import { Topbar } from '@/components/navigation/topbar';
 
 function Signup() {
 	return (
 		<>
 			<div className="flex h-screen flex-col">
-				<Header />
+				<Topbar
+					leftContent={
+						<Link to="/">
+							<HarmonyWithText />
+						</Link>
+					}
+					rightContent={
+						<Button variant="outline" asChild>
+							<Link to="/login">로그인</Link>
+						</Button>
+					}
+				/>
 
 				<main className="flex h-full items-center justify-center">
 					<div className="w-full max-w-md rounded-2xl border">

diff --git a/apps/client/src/routeTree.gen.ts b/apps/client/src/routeTree.gen.ts
@@ -13,7 +13,6 @@
 import { Route as rootRoute } from './routes/__root';
 import { Route as SignupImport } from './routes/signup';
 import { Route as LoginImport } from './routes/login';
-import { Route as JoinImport } from './routes/join';
 import { Route as AuthImport } from './routes/_auth';
 import { Route as IndexImport } from './routes/index';
 import { Route as AuthAccountImport } from './routes/_auth.account';
@@ -34,12 +33,6 @@ const LoginRoute = LoginImport.update({
 	getParentRoute: () => rootRoute,
 } as any);
 
-const JoinRoute = JoinImport.update({
-	id: '/join',
-	path: '/join',
-	getParentRoute: () => rootRoute,
-} as any);
-
 const AuthRoute = AuthImport.update({
 	id: '/_auth',
 	getParentRoute: () => rootRoute,
@@ -87,13 +80,6 @@ declare module '@tanstack/react-router' {
 			preLoaderRoute: typeof AuthImport;
 			parentRoute: typeof rootRoute;
 		};
-		'/join': {
-			id: '/join';
-			path: '/join';
-			fullPath: '/join';
-			preLoaderRoute: typeof JoinImport;
-			parentRoute: typeof rootRoute;
-		};
 		'/login': {
 			id: '/login';
 			path: '/login';
@@ -159,7 +145,6 @@ const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren);
 export interface FileRoutesByFullPath {
 	'/': typeof IndexRoute;
 	'': typeof AuthRouteWithChildren;
-	'/join': typeof JoinRoute;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
 	'/account': typeof AuthAccountRouteWithChildren;
@@ -170,7 +155,6 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
 	'/': typeof IndexRoute;
 	'': typeof AuthRouteWithChildren;
-	'/join': typeof JoinRoute;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
 	'/account/settings': typeof AuthAccountSettingsRoute;
@@ -181,7 +165,6 @@ export interface FileRoutesById {
 	__root__: typeof rootRoute;
 	'/': typeof IndexRoute;
 	'/_auth': typeof AuthRouteWithChildren;
-	'/join': typeof JoinRoute;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
 	'/_auth/account': typeof AuthAccountRouteWithChildren;
@@ -191,22 +174,13 @@ export interface FileRoutesById {
 
 export interface FileRouteTypes {
 	fileRoutesByFullPath: FileRoutesByFullPath;
-	fullPaths:
-		| '/'
-		| ''
-		| '/join'
-		| '/login'
-		| '/signup'
-		| '/account'
-		| '/account/settings'
-		| '/account/';
+	fullPaths: '/' | '' | '/login' | '/signup' | '/account' | '/account/settings' | '/account/';
 	fileRoutesByTo: FileRoutesByTo;
-	to: '/' | '' | '/join' | '/login' | '/signup' | '/account/settings' | '/account';
+	to: '/' | '' | '/login' | '/signup' | '/account/settings' | '/account';
 	id:
 		| '__root__'
 		| '/'
 		| '/_auth'
-		| '/join'
 		| '/login'
 		| '/signup'
 		| '/_auth/account'
@@ -218,15 +192,13 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
 	IndexRoute: typeof IndexRoute;
 	AuthRoute: typeof AuthRouteWithChildren;
-	JoinRoute: typeof JoinRoute;
 	LoginRoute: typeof LoginRoute;
 	SignupRoute: typeof SignupRoute;
 }
 
 const rootRouteChildren: RootRouteChildren = {
 	IndexRoute: IndexRoute,
 	AuthRoute: AuthRouteWithChildren,
-	JoinRoute: JoinRoute,
 	LoginRoute: LoginRoute,
 	SignupRoute: SignupRoute,
 };
@@ -243,7 +215,6 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/_auth",
-        "/join",
         "/login",
         "/signup"
       ]
@@ -257,9 +228,6 @@ export const routeTree = rootRoute
         "/_auth/account"
       ]
     },
-    "/join": {
-      "filePath": "join.tsx"
-    },
     "/login": {
       "filePath": "login.tsx"
     },

diff --git a/apps/client/src/routes/index.tsx b/apps/client/src/routes/index.tsx
@@ -1,7 +1,5 @@
-import { createFileRoute, Link, redirect } from '@tanstack/react-router';
-import { HarmonyWithText } from '@/components/logo';
-import { Topbar } from '@/components/navigation/topbar';
-import { Button } from '@/components/ui/button';
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import Home from '@/pages/Home';
 
 export const Route = createFileRoute('/')({
 	beforeLoad: ({ context }) => {
@@ -11,30 +9,5 @@ export const Route = createFileRoute('/')({
 			});
 		}
 	},
-	component: HomePage,
+	component: Home,
 });
-
-function HomePage() {
-	return (
-		<div>
-			<Topbar
-				leftContent={
-					<Link to="/">
-						<HarmonyWithText />
-					</Link>
-				}
-				rightContent={
-					<>
-						<Button variant="outline" asChild>
-							<Link to="/login">로그인</Link>
-						</Button>
-						<Button asChild>
-							<Link to="/join">회원가입</Link>
-						</Button>
-					</>
-				}
-			/>
-			<h2>랜딩 페이지</h2>
-		</div>
-	);
-}
diff --git a/apps/client/src/routes/join.tsx b/apps/client/src/routes/join.tsx