[Feat] add Header component

.gitignore

@@ -13,4 +13,5 @@
 # Common
 .DS_Store
 *.log
-.env
+.env
+*.pem

README.md

@@ -1,2 +1,2 @@
-# PiroCheck
+# 🏫 PiroCheck
 피로그래밍 과제/출석/보증금 관리 서비스

frontend/.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 
-.env
+*.env
+*.pem

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.507.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.5.3"

frontend/src/App.jsx

@@ -2,10 +2,12 @@ import React from "react";
 import InputBlock from "./components/InputBlock";
 import InfoBlock from "./components/InfoBlock";
 import PageBtn from "./components/PageBtn";
+import Header from "./components/Header";
 
 function App() {
   return (
     <>
+      <Header />
       <div>
         <InputBlock />
         <InfoBlock />

frontend/src/components/Header.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useNavigate, useLocation  } from 'react-router-dom';
+import { ArrowLeft, Wallet } from 'lucide-react';
+import './componentsCss/Header.css';
+import arrowIcon from '../assets/img/arrowicon.svg';
+import moneyIcon from '../assets/img/moneyicon.svg';
+const Header = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const path = location.pathname;
+
+  let title = "ATTENDANCE CHECK";
+  if (path.includes('assignment')) title = "ASSIGNMENT CHECK";
+  else if (path.includes('deposit')) title = "DEPOSIT";
+
+  const showRightButton = !path.includes('deposit');
+
+  return (
+    <header className="header-container">
+      <button className="icon-button" onClick={() => navigate(-1)} aria-label="뒤로가기">
+        <img src={arrowIcon} alt="Back" width={34} height={34} />
+      </button>
+      <h1 className="header-title">{title}</h1>
+      {showRightButton ? (
+        <button className="icon-button" onClick={() => navigate('/deposit')} aria-label="보증금 페이지 이동">
+      <img src={moneyIcon} alt="Deposit" width={30} height={30} />
+        </button>
+      ) : (
+        <div style={{ width: '30px' }} /> // 오른쪽 공백 유지
+      )}
+    </header>
+  );
+};
+
+export default Header;

frontend/src/components/componentsCss/Header.css

@@ -0,0 +1,27 @@
+.header-container {
+  background-color: var(--background-black);
+  color: var(--main-green);
+  font-family: "Cafe24Moyamoya-Regular-v1.0", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.header-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: var(--main-green);
+}
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.icon-button svg {
+  color: var(--main-green);
+}

frontend/src/index.css

@@ -66,3 +66,5 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+

frontend/src/main.jsx

@@ -3,9 +3,13 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.jsx";
 import "./assets/root.css";
+import { BrowserRouter } from 'react-router-dom';
 
 createRoot(document.getElementById("root")).render(
-  <StrictMode>
+  /*<StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>*/
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
 );