Feature/alba add

.env.production

@@ -1,2 +1,2 @@
 # .env.production
-VITE_API_BASE_URL=http://3.39.237.218:8080
+VITE_API_BASE_URL=http://43.200.176.79:8080

src/App.tsx

@@ -35,14 +35,8 @@ function App() {
         <Route path="ownermychange" element={<OwnerMyChange />}></Route>
         <Route path="employeemain" element={<EmployeeMainPage />}></Route>
         <Route path="employeemypage" element={<EmployeeMyPage />}></Route>
-        <Route
-          path="employeemypage/mysalary"
-          element={<EmployeeMySalary />}
-        ></Route>
-        <Route
-          path="employeemypage/mychange"
-          element={<EmployeeMyChange />}
-        ></Route>
+        <Route path="employeemypage/mysalary" element={<EmployeeMySalary />}></Route>
+        <Route path="employeemypage/mychange" element={<EmployeeMyChange />}></Route>
       </Routes>
       <Footer />
     </WebSocketProvider>

src/Pages/Employee/EmployeeMainPage.tsx

@@ -5,7 +5,7 @@ import CalendarEmployee from "../../components/CalendarEmployee";
 import ChoiceEmployee from "../../components/ChoiceEmployee";
 import PartTimeEmployee from "../../components/PartTimeEmployee";
 import SelectRadioEmployee from "../../components/SelectRadioEmployee";
-import AlbaAddModal from "../../components/Modal/AlbaAddModal";
+import AlbaJoinModal from "../../components/Modal/AlbaJoinModal";
 import AlarmModal from "../../components/Modal/AlarmModal";
 import RequestModalEmployee from "../../components/Modal/RequestModalEmployee";
 import styles from "./EmployeeMainPage.module.css";
@@ -39,7 +39,7 @@ const EmployeeMainPage = () => {
       </div>
       {/* 모달 조건부 렌더링 */}
       {activeModal === "alarm" && <AlarmModal onClose={closeModal} />}
-      {activeModal === "albaAdd" && <AlbaAddModal onClose={closeModal} />}
+      {activeModal === "albaAdd" && <AlbaJoinModal onClose={closeModal} />}
       {activeModal === "request" && <RequestModalEmployee onClose={closeModal} />}
     </div>
   );

src/Pages/Owner/OwnerMyPage.tsx

@@ -1,41 +1,26 @@
-import styles from "./OwnerMyPage.module.css";
-import Header from "../../components/Header";
-import MyPageLeft from "../../components/MyPageLeft";
-import MyInformation from "../../components/MyInformation";
-import MySalary from "../../components/MySalary";
-import MyChange from "../../components/MyChange";
-import { useState } from "react";
+import style from "../Employee/EmployeeMyPage.module.css";
 
-const OwnerMyPage = () => {
-  // 내정보, 급여, 변경사항 이 세개를 조건부로 랜더링 할 것이다.
-  const [openComponent, setOpenComponent] = useState<string>("MyInformation");
 
-  const renderContent = () => {
-    switch (openComponent) {
-      case "MyInformation":
-        return <MyInformation />;
-      case "MySalary":
-        return <MySalary />;
-      case "MyChange":
-        return <MyChange />;
-      default:
-        return <MyInformation />;
-    }
-  };
+import EmployeeMyInfo from "./my/OwnerMyInfo";
+import EmployeeNavBar from "./my/Navbar";
+import MyHeader from "./my/Header";
+
+const EmployeeMyPage = () => {
+
 
   return (
-    <div className={styles.background}>
-      <div className={styles.ownerMyPage}>
-        <Header />
-        <div className={styles.title}>My Page</div>
-        <div className={styles.contents}>
-          {/* 현재 어떤 컴포넌트를 랜더링 시킬 건지 상태 업데이트 함수를 props로 전달 */}
-          <MyPageLeft setOpenComponent={setOpenComponent} />
-          {renderContent()}
+    <div className={style.employeeMyPage}>
+      <div className={style.contents}>
+        {/* 헤더 */}
+        <MyHeader />
+        <div className={style.title}>My Page</div>
+        <div className={style.components}>
+          <EmployeeNavBar />
+          <EmployeeMyInfo />
         </div>
       </div>
     </div>
   );
 };
 
-export default OwnerMyPage;
+export default EmployeeMyPage;

src/Pages/Owner/my/Header.tsx

@@ -0,0 +1,64 @@
+import styles from "../../../components/employeeMy/MyHeader.module.css";
+import logo from "../../../assets/logo.svg";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+const MyHeader = () => {
+  const myLocation = useLocation();
+  const nav = useNavigate();
+  const [userName, setUserName] = useState("");
+
+  useEffect(() => {
+    const userInfo = localStorage.getItem("userInfo");
+    if (userInfo) {
+      try {
+        const parsedUserInfo = JSON.parse(userInfo);
+        setUserName(parsedUserInfo.name || "");
+      } catch (error) {
+        console.error("사용자 정보 파싱 오류:", error);
+      }
+    }
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("userInfo");
+    console.log("🍅 토큰 삭제 완료");
+    nav("/login", { replace: true });
+  };
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.logoContainer}>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <Link to="/ownermain" className={styles.title}>
+          알바이즈
+          {userName && <span className={styles.userName}> | {userName}</span>}
+        </Link>
+      </div>
+      <div className={styles.nav}>
+        <Link
+          to="/ownermain"
+          className={`${styles.link} ${
+            myLocation.pathname === "/ownermain" ? styles.active : ""
+          }`}
+        >
+          Calendar
+        </Link>
+        <Link
+          to="/ownermypage"
+          className={`${styles.link} ${
+            myLocation.pathname === "/ownermypage" ? styles.active : ""
+          }`}
+        >
+          My Page
+        </Link>
+        <button onClick={handleLogout} className={styles.logout}>
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default MyHeader;

src/Pages/Owner/my/Navbar.tsx

@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import styles from "../../../components/employeeMy/EmployeeNavBar.module.css";
+
+const EmployeeNavBar = () => {
+  return (
+    <div className={styles.employeeNavBar}>
+      <nav className={styles.container}>
+        <Link to="/ownermypage" className={styles.nav}>
+          나의 정보
+        </Link>
+        <Link to="/ownermysalary" className={styles.nav}>
+          근무/급여 확인
+        </Link>
+        <Link to="/ownermychange" className={styles.nav}>
+          근무 변경 내용
+        </Link>
+      </nav>
+    </div>
+  );
+};
+
+export default EmployeeNavBar;