Feat/#62

frontend/src/App.js

@@ -5,6 +5,8 @@ import OnboardingPage from './pages/OnboardingPage';
 import QnAMainPage from './pages/qna/QnAMainPage';
 import QnAListPage from './pages/qna/QnAListPage';
 import CurriculumPage from './pages/curriculum/CurriculumPage';
+import PiroCheckMain from './pages/pirocheck/PIroCheckMain';
+import Attendance from './pages/pirocheck/attendance/Attendance'
 
 function App() {
   return (
@@ -16,12 +18,18 @@ function App() {
         <Route path="/login" element={<LoginPage />} />
         <Route path="/onboarding" element={<OnboardingPage />} />
 
-        {/* 헤더 있는 페이지 */}
-        <Route element={<Layout />}>
+        {/* 라이트 헤더 페이지 */}
+        <Route element={<Layout headerType="light" />}>
           <Route path="/sessions" element={<QnAMainPage />} />
           <Route path="/sessions/questions" element={<QnAListPage />} />
           <Route path="/curriculum" element={<CurriculumPage />} />
         </Route>
+
+        {/* 다크 헤더 페이지 */}
+        <Route element={<Layout headerType="dark" />}>
+          <Route path="/pirocheck" element={<PiroCheckMain />}/>
+          <Route path="/pirocheck/attendance" element={<Attendance />}/>
+        </Route>
 
       </Routes>
     </BrowserRouter>

frontend/src/components/Header.js

@@ -1,9 +1,9 @@
 import { NavLink } from 'react-router-dom';
 import styles from './Header.module.css';
 
-function Header() {
+function Header({ type }) {
     return (
-        <header className={styles.header}>
+        <header className={`${styles.header} ${type === "dark" ? styles.dark : styles.light}`}>
             <NavLink to="/" className={styles.logo}>PIROIN</NavLink>
             <nav className={styles.nav}>
                 <NavLink to="/pirocheck" className={({ isActive }) => isActive ? styles.active : ''}>PIROCHECK</NavLink>

frontend/src/components/Header.module.css

@@ -1,22 +1,36 @@
+/* 라이트 헤더 */
+.light {
+    --header-bg: var(--white);
+    --header-color: var(--gray600);
+    --logo-color: var(--dark);
+}
+
+/* 다크 헤더 */
+.dark {
+    --header-bg: var(--black);
+    --header-color: var(--white);
+    --logo-color: var(--main);
+    border-bottom: none;  /* 추가 */
+}
+
 .header {
     width: 100%;
-    height: 100px;
-    background: #fff;
+    height: 70px;
+    background: var(--header-bg);
     display: flex;
     align-items: center;
     padding: 0 80px;
     box-sizing: border-box;
-    border-bottom: 1px solid #eee;
     position: relative;
     position: sticky;
     top: 0;
     z-index: 100;
 }
 
 .logo {
-    color: var(--dark);
+    color: var(--logo-color);
     font-family: var(--font-title);
-    font-size: 3rem;
+    font-size: 2.8rem;
     font-weight: 800;
     text-decoration: none;
 }
@@ -31,19 +45,19 @@
 }
 
 .nav a {
-    color: var(--gray600);
+    color: var(--header-color);
     text-align: center;
     font-family: var(--font-main);
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     font-weight: 500;
     text-decoration: none;
 }
 
 .nav a:hover {
-    color: var(--dark);
+    color: var(--logo-color);
 }
 
 .active {
-    color: var(--dark) !important;
+    color: var(--logo-color) !important;
     font-weight: 700;
 }

frontend/src/components/Layout.js

@@ -1,10 +1,10 @@
 import Header from './Header';
 import { Outlet } from 'react-router-dom';
 
-function Layout() {
+function Layout({ headerType }) {
     return (
         <>
-            <Header />
+            <Header type={headerType} />
             <Outlet />
         </>
     );

frontend/src/pages/login/LoginPage.js

@@ -24,6 +24,7 @@ function LoginPage() {
       if (response.ok) {
         const data = await response.json();
         localStorage.setItem('token', data.token);
+        localStorage.setItem('role', data.role); 
         navigate('/home');
       } else {
         alert('이름 또는 비밀번호가 올바르지 않습니다.');

frontend/src/pages/pirocheck/PIroCheckMain.js

@@ -0,0 +1,7 @@
+import { useState, useEffect } from 'react';
+
+<div> Pirocheck </div>
+
+function PIroCheckMain() {  }
+
+export default PIroCheckMain;