[Feat] pirocheck 메인 화면 UI

frontend/src/components/Layout.js

@@ -3,10 +3,10 @@ import { Outlet } from 'react-router-dom';
 
 function Layout({ headerType }) {
     return (
-        <>
+        <div style={{ background: headerType === 'dark' ? '#111111' : '#ffffff', minHeight: '100vh' }}>
             <Header type={headerType} />
             <Outlet />
-        </>
+        </div>
     );
 }
 

frontend/src/index.css

@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;

frontend/src/pages/pirocheck/PIroCheckMain.js

@@ -1,7 +1,38 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './PIroCheckMain.module.css';
 
-<div> Pirocheck </div>
+function PIroCheckMain() {
+    const navigate = useNavigate();
+    const role = localStorage.getItem('role') || 'MEMBER';
 
-function PIroCheckMain() {  }
+    const adminMenus = [
+        { label: '출석 관리', path: '/pirocheck/attendance' },
+        { label: '과제 관리', path: '/pirocheck/assignment' },
+        { label: '수강생 관리', path: '/pirocheck/students' },
+    ];
+
+    const memberMenus = [
+        { label: 'ATTENDANCE CHECK', path: '/pirocheck/attendance' },
+        { label: 'ASSIGNMENT CHECK', path: '/pirocheck/assignment' },
+        { label: 'DEPOSIT CHECK', path: '/pirocheck/deposit' },
+    ];
+
+    const menus = role === 'ADMIN' ? adminMenus : memberMenus;
+
+    return (
+        <div className={styles.container}>
+            {menus.map((menu, i) => (
+                <button
+                    key={i}
+                    className={styles.menuBtn}
+                    onClick={() => navigate(menu.path)}
+                >
+                    {menu.label}
+                </button>
+            ))}
+        </div>
+    );
+}
 
 export default PIroCheckMain;

frontend/src/pages/pirocheck/PIroCheckMain.module.css

@@ -0,0 +1,28 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    height: calc(100vh - 100px); 
+    background: var(--black);
+}
+
+.menuBtn {
+    width: 420px;
+    padding: 25px 0;
+    background: #3a3a3a;
+    border: none;
+    border-radius: 10px;
+    color: var(--main);
+    font-family: var(--font-title);
+    font-size: 2rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.menuBtn:hover {
+    background: var(--dark);
+    color: var(--white);
+}

frontend/src/pages/pirocheck/attendance/Attendance.module.css

@@ -3,7 +3,7 @@
     flex-direction: column;
     align-items: center;
     padding: 60px 20px;
-    min-height: 80vh;
+    min-height: calc(80vh - 100px); 
     background: var(--black);
     justify-content: center;
 }