Merge pull request #30 from softeerbootcamp4th/TASK-41

[Feature][Task-41] 전체 레이아웃 구현 (지민님 -> 성락현 재할당)

packages/admin/src/constants/routePath.ts

@@ -1,5 +1,6 @@
 const RoutePaths = {
 	ROOT: '/',
+	EVENT_PAGE: '/eventPage',
 	QUIZ_WINNER_DRAW: '/quizWinnerDraw',
 	FASTEST_WINNER_DRAW: '/fastestWinnerDraw',
 	WINNER_RESULT: '/winnerResult',

packages/admin/src/hooks/useHeader.tsx

@@ -0,0 +1,12 @@
+import { useLocation, useMatches } from 'react-router-dom';
+
+const useHeader = () => {
+	const matches = useMatches();
+	const location = useLocation();
+	const matchResult = matches
+		.filter((match) => match.id !== '0')
+		.find((match) => match.pathname === location.pathname);
+	const headerTitle = matchResult?.id ?? '';
+	return { headerTitle };
+};
+export default useHeader;

packages/admin/src/layouts/appLayout.tsx

@@ -2,15 +2,20 @@ import { Outlet } from 'react-router-dom';
 import Header from 'src/components/appLayout/Header';
 import SideBarContainer from 'src/components/appLayout/SideBarContainer';
 import SystemContainer from 'src/components/appLayout/System';
+import useHeader from 'src/hooks/useHeader';
 
 export default function AppLayout() {
+	const { headerTitle } = useHeader();
+
 	return (
-		<div className="mx-auto mt-5 flex h-screen w-full max-w-[1200px] gap-10">
+		<div className="mx-auto flex h-screen w-screen min-w-[1200px] bg-gradient-to-r from-orange-500 to-indigo-600">
 			<SideBarContainer />
-			<SystemContainer />
-			<div className="mt-8 flex w-full flex-col">
-				<Header headerTitle="이벤트 등록" />
-				<Outlet />
+			<div className="mx-auto flex h-screen w-full max-w-[1200px] gap-10">
+				<SystemContainer />
+				<div className="flex w-full flex-col p-4 pb-8 pt-8">
+					<Header headerTitle={headerTitle} />
+					<Outlet />
+				</div>
 			</div>
 		</div>
 	);

packages/admin/src/libs/index.tsx

@@ -7,7 +7,7 @@ export default function AppProviders({ children }: PropsWithChildren) {
 	return (
 		<AlertProvider>
 			<ModalProvider>
-				<QueryProvider>{children}</QueryProvider>;
+				<QueryProvider>{children}</QueryProvider>
 			</ModalProvider>
 		</AlertProvider>
 	);

packages/admin/src/pages/start/LoginPage.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Button } from 'src/components/ui/button';
+import { Input } from 'src/components/ui/input';
+
+function LoginPage() {
+	const [userId, setUserId] = useState('');
+	const [password, setPassword] = useState('');
+
+	const handleIdChange = (newId: string) => {
+		setUserId(newId);
+	};
+
+	const handlePasswordChange = (newPassword: string) => {
+		setPassword(newPassword);
+	};
+
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center">
+			<p className="mb-10">Admin System</p>
+			<div className="flex w-[200px] flex-col gap-2">
+				<Input
+					placeholder="아이디를 입력하세요."
+					value={userId}
+					onChange={(event) => handleIdChange(event.target.value)}
+				/>
+				<Input
+					type="password"
+					placeholder="비밀번호를 입력하세요."
+					value={password}
+					onChange={(event) => handlePasswordChange(event.target.value)}
+				/>
+				<Button>로그인</Button>
+			</div>
+		</div>
+	);
+}
+export default LoginPage;

packages/admin/src/routes/router.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouteObject } from 'react-router-dom';
 import RoutePaths from 'src/constants/routePath';
 import AppLayout from 'src/layouts/appLayout';
 import EventPage from 'src/pages/events/EventsPage';
+import LoginPage from 'src/pages/start/LoginPage';
 import QuizWinnerDraw from 'src/pages/winner/QuizWinnerDraw';
 import WinnerResult from 'src/pages/winner/WinnerResult';
 
@@ -10,14 +11,17 @@ const routes: RouteObject[] = [
 		path: RoutePaths.ROOT,
 		element: <AppLayout />,
 		children: [
-			{ index: true, element: <EventPage /> },
+			{ path: RoutePaths.ROOT, element: <LoginPage />, id: '로그인' },
+			{ path: RoutePaths.EVENT_PAGE, element: <EventPage />, id: '이벤트 관리' },
 			{
 				path: RoutePaths.QUIZ_WINNER_DRAW,
 				element: <QuizWinnerDraw />,
+				id: '추첨하기',
 			},
 			{
 				path: RoutePaths.WINNER_RESULT,
 				element: <WinnerResult />,
+				id: '당첨자 목록',
 			},
 		],
 	},