diff --git a/.env.production b/.env.production
index bb04dc5..9a90a3c 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,2 @@
 # .env.production
-VITE_API_BASE_URL=http://3.39.237.218:8080
\ No newline at end of file
+VITE_API_BASE_URL=http://43.200.176.79:8080
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 74a8d9f..866c67e 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/Pages/Employee/EmployeeMainPage.tsx b/src/Pages/Employee/EmployeeMainPage.tsx
index 1393f3f..6a9463e 100644
--- a/src/Pages/Employee/EmployeeMainPage.tsx
+++ b/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>
   );
diff --git a/src/Pages/Owner/OwnerMyPage.tsx b/src/Pages/Owner/OwnerMyPage.tsx
index 919cf35..0299bbc 100644
--- a/src/Pages/Owner/OwnerMyPage.tsx
+++ b/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;
diff --git a/src/Pages/Owner/my/Header.tsx b/src/Pages/Owner/my/Header.tsx
new file mode 100644
index 0000000..a5a46bf
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Owner/my/Navbar.tsx b/src/Pages/Owner/my/Navbar.tsx
new file mode 100644
index 0000000..5f33112
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Owner/my/OwnerMyInfo.tsx b/src/Pages/Owner/my/OwnerMyInfo.tsx
new file mode 100644
index 0000000..64a3141
--- /dev/null
+++ b/src/Pages/Owner/my/OwnerMyInfo.tsx
@@ -0,0 +1,215 @@
+import styles from "../../../components/employeeMy/EmployeeMyInfo.module.css";
+import { useState, useEffect } from "react";
+import { useModal } from "../../../contexts/ModalContext";
+import EditModal from "../../../components/Modal/Edit/EditModal";
+import DoneModal from "../../../components/Modal/Edit/DoneModal";
+import axiosInstance from "../../../api/loginAxios";
+import EditableField from "../../../components/Modal/Edit/EditableField";
+import EditNameModal from "../../../components/Modal/Edit/EditNameModal";
+import EditEmailModal from "../../../components/Modal/Edit/EditEmailModal";
+import EditPasswordModal from "../../../components/Modal/Edit/EditPasswordModal";
+import StoreEditModal from "./StoreEditModal";
+
+const OwnerMyInfo = () => {
+  const { activeModal, openModal, closeModal } = useModal();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const [storeToManage, setStoreToManage] = useState<any | null>(null);
+  const [isEditNameModalOpen, setIsEditNameModalOpen] = useState(false);
+  const [isEditEmailModalOpen, setIsEditEmailModalOpen] = useState(false);
+  const [isEditPasswordModalOpen, setIsEditPasswordModalOpen] = useState(false);
+  const [isEditStoreModalOpen, setIsEditStoreModalOpen] = useState(false);
+
+  const handleEditField = (field: string) => {
+    switch (field) {
+      case "fullName":
+        setIsEditNameModalOpen(true);
+        break;
+      case "email":
+        setIsEditEmailModalOpen(true);
+        break;
+      case "password":
+        setIsEditPasswordModalOpen(true);
+        break;
+      case "storeNames":
+        setIsEditStoreModalOpen(true);
+        break;
+    }
+  };
+
+  const [userInfo, setUserInfo] = useState({
+    fullName: "",
+    email: "",
+    password: "********",
+    role: "",
+    stores: [] as any[],
+  });
+
+  useEffect(() => {
+    const fetchUserInfo = async () => {
+      try {
+        const response = await axiosInstance.get("/user/me");
+        const storeResponse = await axiosInstance.get("/store/me");
+        const storeData = storeResponse.data || [];
+
+        const formattedStores = storeData.map((store: any) => ({
+          id: store.storeId,
+          name: store.name,
+          storeCode: store.storeCode,
+          createdAt: store.createdAt,
+        }));
+
+        setUserInfo({
+          fullName: response.data.fullName || "",
+          email: response.data.email || "",
+          password: "********",
+          role: response.data.role || "",
+          stores: formattedStores,
+        });
+      } catch (error: any) {
+        console.error("유저 정보 불러오기 실패:", error);
+        if (error.response?.status === 401) {
+          localStorage.removeItem("accessToken");
+          window.location.href = "/login";
+        }
+      }
+    };
+
+    fetchUserInfo();
+  }, []);
+
+  return (
+    <div className={styles.employeeMyInfo}>
+      <div className={styles.title}>
+        <div className={styles.titleT}>나의 정보</div>
+        <div
+          className={styles.titleEdit}
+          onClick={() => {
+            isEditing ? openModal("done") : openModal("edit");
+          }}
+        >
+          {isEditing ? "수정 완료" : "내 정보 수정하기"}
+        </div>
+      </div>
+
+      <div className={styles.content}>
+        <EditableField
+          label="이름"
+          value={userInfo.fullName}
+          fieldName="fullName"
+          isEditing={isEditing}
+          isEditable={true}
+          onClick={handleEditField}
+        />
+        <EditableField
+          label="이메일"
+          value={userInfo.email}
+          fieldName="email"
+          isEditing={isEditing}
+          isEditable={true}
+          onClick={handleEditField}
+        />
+        <EditableField
+          label="비밀번호"
+          value={userInfo.password}
+          fieldName="password"
+          isEditing={isEditing}
+          isEditable={true}
+          onClick={handleEditField}
+        />
+        <EditableField
+          label="직업"
+          value={userInfo.role}
+          fieldName="role"
+          isEditing={isEditing}
+          isEditable={true}
+          onClick={handleEditField}
+        />
+        <EditableField
+          label="운영 매장"
+          fieldName="storeNames"
+          isEditing={isEditing}
+          isEditable={true}
+          onClick={handleEditField}
+        >
+          <div className={styles.storeList}>
+            {userInfo.stores.map((store) => (
+              <div key={store.id} className={styles.storeItem}>
+                <span className={styles.storeName}>{store.name}</span>
+                {isEditing && (
+                  <span
+                    className={styles.manageButton}
+                    onClick={() => {
+                      setStoreToManage(store);
+                    }}
+                  >
+                    매장 관리
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </EditableField>
+      </div>
+
+      {activeModal === "edit" && (
+        <EditModal onClose={closeModal} onSuccess={() => setIsEditing(true)} />
+      )}
+      {activeModal === "done" && (
+        <DoneModal onClose={closeModal} onSuccess={() => setIsEditing(false)} />
+      )}
+
+      {isEditNameModalOpen && (
+        <EditNameModal
+          fullName={userInfo.fullName}
+          onClose={() => setIsEditNameModalOpen(false)}
+          onSave={(newFullName) => {
+            setUserInfo((prev) => ({ ...prev, fullName: newFullName }));
+            setIsEditNameModalOpen(false);
+          }}
+        />
+      )}
+
+      {isEditEmailModalOpen && (
+        <EditEmailModal
+          onClose={() => setIsEditEmailModalOpen(false)}
+          onSuccess={(email) => {
+            setUserInfo((prev) => ({ ...prev, email }));
+            setIsEditEmailModalOpen(false);
+          }}
+        />
+      )}
+
+      {isEditPasswordModalOpen && (
+        <EditPasswordModal
+          onClose={() => setIsEditPasswordModalOpen(false)}
+          onSuccess={() => {
+            setUserInfo((prev) => ({ ...prev, password: "********" }));
+            setIsEditPasswordModalOpen(false);
+          }}
+        />
+      )}
+
+      {storeToManage && (
+        <StoreEditModal
+          storeId={storeToManage.id}
+          storeName={storeToManage.name}
+          storeCode={storeToManage.storeCode}
+          createdAt={storeToManage.createdAt}
+          onClose={() => setStoreToManage(null)}
+          onSuccess={(updatedName) => {
+            setUserInfo((prev) => ({
+              ...prev,
+              stores: prev.stores.map((s) =>
+                s.id === storeToManage.id ? { ...s, name: updatedName } : s
+              ),
+            }));
+            setStoreToManage(null);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default OwnerMyInfo;
diff --git a/src/Pages/Owner/my/StoreEditModal.module.css b/src/Pages/Owner/my/StoreEditModal.module.css
new file mode 100644
index 0000000..d9e27fa
--- /dev/null
+++ b/src/Pages/Owner/my/StoreEditModal.module.css
@@ -0,0 +1,121 @@
+.modalOverlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+
+  font-family: "Noto Sans KR", sans-serif;
+  display: flex;
+  justify-content: center;
+}
+
+.modal {
+  width: 900px;
+  height: 500px;
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 250px;
+}
+
+.container {
+  width: 900px;
+  height: 40px;
+  border-bottom: 1px #666666 solid;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  width: 608px;
+  height: 24px;
+  margin-left: 20px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.deleteButton {
+  color: #D00000;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.contentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 40px;
+  border: 1px black solid;
+}
+
+.contents {
+  width: 750px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.contentsTitle {
+  font-size: 24px;
+  color: #1C170D;
+}
+
+.workerList {
+  max-height: 200px;
+  overflow-y: auto;
+  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border: 1px black solid;
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.workerList::-webkit-scrollbar {
+  width: 6px;
+}
+
+.workerList::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+}
+
+.workerList::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.workerItem {
+  width: 150px;
+  padding: 8px 16px;
+  text-align: center;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.workerItem:hover {
+  background-color: #f0f0f0;
+}
+
+.workerItem.selected {
+  background-color: #bcbcbc;
+  font-weight: 600;
+}
+
+.buttonBox {
+  display: flex;
+  gap: 20px;
+}
+
+.deleteWorkerButton {
+  font-size: 16px;
+  cursor: pointer;
+  color: #d00000;
+}
diff --git a/src/Pages/Owner/my/StoreEditModal.tsx b/src/Pages/Owner/my/StoreEditModal.tsx
new file mode 100644
index 0000000..9512b9c
--- /dev/null
+++ b/src/Pages/Owner/my/StoreEditModal.tsx
@@ -0,0 +1,149 @@
+import styles from "./StoreEditModal.module.css";
+import { useState, useEffect } from "react";
+import {
+  deleteStore,
+  getWorkersByStoreId,
+  deleteWorkerFromStore, 
+  Worker,
+} from "../../../api/albaAdd";
+import { useOwnerSchedule } from ".././../../contexts/OwnerScheduleContext"; // 추가된 부분
+
+interface StoreEditModalProps {
+  storeId: number;
+  storeName: string;
+  storeCode: string;
+  createdAt: string;
+  onClose: () => void;
+  onSuccess: (updatedName: string) => void;
+}
+
+const StoreEditModal = ({
+  storeId,
+  storeName,
+  storeCode,
+  createdAt,
+  onClose,
+  onSuccess,
+}: StoreEditModalProps) => {
+  const [workers, setWorkers] = useState<Worker[]>([]);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+
+  const { setSelectedStore } = useOwnerSchedule(); // 🔥 요거 추가!
+
+  const toggleSelection = (id: number) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+    );
+  };
+
+  useEffect(() => {
+    const fetchWorkers = async () => {
+      try {
+        const response = await getWorkersByStoreId(storeId);
+        setWorkers(response.data);
+      } catch (error) {
+        console.error("❌ 알바생 목록 불러오기 실패:", error);
+      }
+    };
+
+    fetchWorkers();
+  }, [storeId]);
+
+  const handleDelete = async () => {
+    const confirmDelete = window.confirm(`'${storeName}' 매장을 정말 삭제하시겠습니까?`);
+    if (!confirmDelete) return;
+
+    try {
+      await deleteStore(storeId);
+      alert("✅ 매장이 성공적으로 삭제되었습니다.");
+      onSuccess(storeName);
+      onClose();
+    } catch (error) {
+      console.error("❌ 매장 삭제 실패:", error);
+      alert("⚠️ 매장 삭제 중 오류가 발생했습니다.");
+    }
+  };
+
+  const handleDeleteSelectedWorkers = async () => {
+  if (selectedIds.length === 0) {
+    alert("삭제할 알바생을 선택해주세요.");
+    return;
+  }
+
+  const confirmDelete = window.confirm(
+    `선택한 알바생 ${selectedIds.length}명을 정말 삭제하시겠습니까?`
+  );
+  if (!confirmDelete) return;
+
+  try {
+    await Promise.all(
+      selectedIds.map((id) => deleteWorkerFromStore(storeId, id))
+    );
+    alert("✅ 선택된 알바생이 삭제되었습니다.");
+    setSelectedIds([]);
+    const response = await getWorkersByStoreId(storeId); // 목록 새로고침
+    setWorkers(response.data);
+
+    setSelectedStore(prev => prev); // 🔥 요거 추가! => context 갱신 트리거
+  } catch (error) {
+    console.error("❌ 알바생 삭제 실패:", error);
+    alert("⚠️ 알바생 삭제 중 오류가 발생했습니다.");
+  }
+};
+
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <div className={styles.container}>
+          <div className={styles.title}>매장 관리하기</div>
+          <div className={styles.deleteButton} onClick={handleDelete}>
+            매장삭제하기
+          </div>
+        </div>
+        <div className={styles.contentContainer}>
+          <div className={styles.contents}>
+            <div className={styles.contentsTitle}>매장명</div>
+            <div className={styles.contentsTitle}>{storeName}</div>
+          </div>
+          <div className={styles.contents}>
+            <div className={styles.contentsTitle}>등록 일자</div>
+            <div className={styles.contentsTitle}>{createdAt}</div>
+          </div>
+          <div className={styles.contents}>
+            <div className={styles.contentsTitle}>매장 코드</div>
+            <div className={styles.contentsTitle}>{storeCode}</div>
+          </div>
+          <div className={styles.contents}>
+            <div className={styles.contentsTitle}>알바생 목록</div>
+            <div className={styles.workerList}>
+                <div>
+              {workers.map((worker) => (
+                <div
+                  key={worker.userId}
+                  className={`${styles.workerItem} ${
+                    selectedIds.includes(worker.userId) ? styles.selected : ""
+                  }`}
+                  onClick={() => toggleSelection(worker.userId)}
+                >
+                  {worker.name}
+                </div>
+              ))}
+              </div>
+              <div className={styles.deleteWorkerButton} onClick={handleDeleteSelectedWorkers}>
+                선택 알바생 삭제
+              </div>
+            </div>
+            
+          </div>
+          <div className={styles.buttonBox}>
+            <div>확인</div>
+            <div onClick={onClose}>취소</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StoreEditModal;
diff --git a/src/api/albaAdd.ts b/src/api/albaAdd.ts
new file mode 100644
index 0000000..341ff5c
--- /dev/null
+++ b/src/api/albaAdd.ts
@@ -0,0 +1,74 @@
+import axiosInstance from "./axios";
+
+interface AddStoreRequest {
+  name: string;
+  location: string;
+  businessNumber: string;
+}
+//사업자번호 유효성 검사
+export const validateBusinessNumber = (businessNumber: string) => {
+  console.log("✅ 현재 baseURL 확인:", import.meta.env.VITE_API_URL);
+
+  return axiosInstance.post("/store/validate-business-number", { businessNumber });
+};
+
+// 사장님이 매장 등록
+export const registerStore = (data: AddStoreRequest) => {
+  console.log("📤 [API] registerStore payload:", data); // ✅ 여기도 찍어볼 수 있음
+  return axiosInstance.post("/store", data);
+};
+
+// 알바생이 매장 등록
+export const joinStore = (storeCode: string) => {
+  console.log("📤 [API] joinStore payload:", storeCode);
+  return axiosInstance.post("/store/join", { storeCode });
+};
+
+// 매장 삭제
+export const deleteStore = (storeId: number) => {
+  return axiosInstance.delete(`/store/${storeId}`);
+};
+
+// 알바생 불러오기
+export interface Worker{
+  userId: number;
+  name: string;
+}
+
+export const getWorkersByStoreId = (storeId: number) => {
+  return axiosInstance.get<Worker[]>(`/store/${storeId}/workers`);
+};
+
+// 내가 일하는 매장 목록 조회
+export interface StoreInfo {
+  id: number;
+  storeId: number;
+  storeCode: string;
+  businessNumber: string;
+  name: string;
+  location: string;
+  requireApproval: boolean;
+  defaultHourlyWage: number;
+  createdAt: string;
+}
+
+export const getMyStores = () => {
+  return axiosInstance.get<StoreInfo[]>(`/store/me`);
+};
+
+// 일자리 정보 수정
+export interface UpdateStoreRequest {
+  name: string;
+  location: string;
+  contactNumber: string;
+}
+
+export const updateStore = (storeId: number, data: UpdateStoreRequest) => {
+  return axiosInstance.put(`/store/${storeId}`, data);
+};
+
+
+// 특정 매장에서 알바생 삭제
+export const deleteWorkerFromStore = (storeId: number, userId: number) => {
+  return axiosInstance.delete(`/store/${storeId}/worker/${userId}`);
+};
diff --git a/src/api/axios.ts b/src/api/axios.ts
index bfb8117..e2ffec8 100644
--- a/src/api/axios.ts
+++ b/src/api/axios.ts
@@ -2,20 +2,50 @@
 import axios from "axios";
 
 const axiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
+  baseURL: import.meta.env.VITE_API_URL, // .env에서 설정된 API 주소
   headers: {
     "Content-Type": "application/json",
   },
-  withCredentials: true,
+  withCredentials: true, // 필요 시
 });
 
-// api 요청 실패 시 공통 에러 처리 등을 추가
+// ✅ 요청 인터셉터 - Authorization 토큰 자동 삽입
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("accessToken");
+    console.log("🔐 저장된 토큰:", token);
+
+    if (token) {
+      config.headers["Authorization"] = `Bearer ${token}`;
+      console.log("✅ Authorization 헤더 추가됨:", config.headers);
+    } else {
+      console.warn("⚠️ accessToken이 없습니다. 로그인되지 않은 상태입니다.");
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// ✅ 응답 인터셉터 - 공통 에러 처리 (선택)
 axiosInstance.interceptors.response.use(
   (response) => response,
   (error) => {
-    // 에러 처리 로직
+    // 여기에 401, 403 등 처리 가능
     return Promise.reject(error);
   }
 );
 
+// ✅ 다른 탭에서 로그인/로그아웃 시 헤더 자동 반영
+window.addEventListener("storage", () => {
+  const token = localStorage.getItem("accessToken");
+  if (token) {
+    axiosInstance.defaults.headers["Authorization"] = `Bearer ${token}`;
+    console.log("✅ 스토리지 변경 감지: Authorization 헤더 업데이트됨!");
+  } else {
+    delete axiosInstance.defaults.headers["Authorization"];
+    console.log("🧼 accessToken 삭제됨: Authorization 헤더 제거됨.");
+  }
+});
+
 export default axiosInstance;
diff --git a/src/api/scheduleAdd.ts b/src/api/scheduleAdd.ts
new file mode 100644
index 0000000..8b87af0
--- /dev/null
+++ b/src/api/scheduleAdd.ts
@@ -0,0 +1,74 @@
+import axiosInstance from "./axios";
+
+// 템플릿 조회
+// scheduleAdd.ts
+export interface TimeObj {
+  hour: number;
+  minute: number;
+  second: number;
+  nano: number;
+}
+
+export interface ScheduleTemplate {
+  templateId: number;
+  storeId: number;
+  templateName: string;
+  startTime: TimeObj;
+  endTime: TimeObj;
+  breakTime: TimeObj;
+}
+
+export const getTemplatesByStoreId = async (storeId: number): Promise<ScheduleTemplate[]> => {
+  const response = await axiosInstance.get(`/template/store/${storeId}`);
+  return response.data;
+};
+
+
+// 템플릿 등록
+export interface CreateTemplateRequest {
+  templateName: string;
+  startTime: string;
+  endTime: string;
+  breakTime: string;
+}
+
+export const postTemplate = async (storeId: number, data: CreateTemplateRequest) => {
+  const res = await axiosInstance.post(`/template/store/${storeId}`, data);
+  return res.data;
+};
+
+// 템플릿을 이용한 근무 등록
+export interface ScheduleFromTemplateRequest {
+  userIds: number[];
+  storeId: number;
+  workDate: string;
+  repeatDays?: string[];
+  repeatEndDate?: string;
+  repeating: boolean;
+}
+
+export const postScheduleFromTemplate = async (
+  templateId: number,
+  data: ScheduleFromTemplateRequest
+) => {
+  const response = await axiosInstance.post(`/schedule/from-template/${templateId}`, data);
+  return response.data;
+};
+
+
+// 직접 등록
+export interface ScheduleRequest {
+  userIds: number[];
+  storeId: number;
+  workDate: string;
+  startTime: string;
+  endTime: string;
+  breakTime: string;
+  repeatDays?: string[];
+  repeatEndDate?: string;
+}
+
+export const postManualSchedule = async (storeId: number, data: ScheduleRequest) => {
+  const response = await axiosInstance.post(`/schedule/store/${storeId}`, data);
+  return response.data;
+};
\ No newline at end of file
diff --git a/src/components/Button.module.css b/src/components/Button.module.css
index d34e0ec..371fca7 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.css
@@ -25,3 +25,12 @@
     background-color: #ABABAB;
     color: #FFFFFF;
 }
+
+.blue {
+  background-color: #2196f3;
+  color: white;
+}
+
+.blue:hover {
+  background-color: #2079d2;
+}
\ No newline at end of file
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ee0d2a0..4b848c4 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,7 +4,7 @@ import styles from "./Button.module.css";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     width?: string;
     height?: string;
-    variant?: "green" | "gray";
+    variant?: "green" | "gray" | "blue";
 }
 
 const Button: React.FC<ButtonProps> = ({
diff --git a/src/components/Choice.tsx b/src/components/Choice.tsx
index 2ff2f0d..0c9ace6 100644
--- a/src/components/Choice.tsx
+++ b/src/components/Choice.tsx
@@ -1,11 +1,15 @@
 import { useOwnerSchedule } from "../contexts/OwnerScheduleContext";
+import { useModal } from "../contexts/ModalContext"
 import ChoiceSchedule from "./ChoiceSchedule";
 import Button from "./Button";
+import ScheduleAddModal from "./Modal/ScheduleAddModal";
 import styles from "./Choice.module.css";
 
 const Choice = () => {
     const { currentDate, groupedSchedules } = useOwnerSchedule();
 
+    const { openModal, activeModal } = useModal();
+
     // 선택된 날짜를 YYYY-MM-DD 형식으로 변환
     const dateStr = currentDate.format("YYYY-MM-DD");
 
@@ -29,7 +33,8 @@ const Choice = () => {
                     <ChoiceSchedule schedules={schedulesForDate} />
                 )}
             </div>
-            <Button children={"근무 등록하기"} />
+            <Button onClick = { () => openModal("scheduleAdd")} children={"근무 등록하기"} />
+            {activeModal === "scheduleAdd" && <ScheduleAddModal />}
         </div>
     );
 };
diff --git a/src/components/Modal/AlbaAddModal.tsx b/src/components/Modal/AlbaAddModal.tsx
index 7d1152d..f603963 100644
--- a/src/components/Modal/AlbaAddModal.tsx
+++ b/src/components/Modal/AlbaAddModal.tsx
@@ -1,179 +1,87 @@
 import styles from "./AlbaAddModal.module.css";
 import { useState } from "react";
 import Button from "../Button";
-import axiosInstance from "../../api/axios";
+import { validateBusinessNumber, registerStore } from "../../api/albaAdd";
 
 interface AlbaAddModalProps {
   onClose: () => void;
 }
 
 const AlbaAddModal: React.FC<AlbaAddModalProps> = ({ onClose }) => {
+  const [step, setStep] = useState<number>(1);
+
   const [businessNumber, setBusinessNumber] = useState<string>("");
-  const [shop, setShop] = useState<string>("");
+  const [storeName, setStoreName] = useState<string>("");
+  const [location, setLocation] = useState<string>("");
+  const [defaultHourlyWage, setDefaultHourlyWage] = useState<number>(0);
+
   const [isValidating, setIsValidating] = useState<boolean>(false);
   const [validationError, setValidationError] = useState<string>("");
 
   const handleBusinessNumber = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // 하이픈 자동 포맷팅 (000-00-00000)
-    let value = e.target.value;
-    // 숫자와 하이픈만 입력 가능하도록
-    value = value.replace(/[^\d-]/g, '');
-    
-    // 하이픈 자동 추가
-    if (value.length > 0) {
-      // 기존 하이픈 제거
-      value = value.replace(/-/g, '');
-      
-      // 숫자만 최대 10자리 제한
-      if (value.length > 10) {
-        value = value.substring(0, 10);
-      }
-      
-      // 하이픈 추가 (XXX-XX-XXXXX 형식)
-      if (value.length > 5) {
-        value = `${value.substring(0, 3)}-${value.substring(3, 5)}-${value.substring(5)}`;
-      } else if (value.length > 3) {
-        value = `${value.substring(0, 3)}-${value.substring(3)}`;
-      }
-    }
-    
+    const value = e.target.value.replace(/[^\d]/g, ""); // 숫자만 허용, 하이픈 제거
     setBusinessNumber(value);
-    // 입력 시 에러 메시지 초기화
     setValidationError("");
   };
 
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  
-  // 매장이 틀렸을 경우 버튼을 눌러서 다시 없어지도록 설정
-  const closeShop = () => {
-    setIsOpen(false);
-  };
-
-  // 스탭별로 작업
-  const [step, setStep] = useState<number>(1);
-
-  // 사업자등록번호 검증 함수
-  const validateBusinessNumber = async (number: string) => {
-    // 하이픈 제거
-    const cleanNumber = number.replace(/-/g, '');
-    
-    // 검증 기본 규칙 - 10자리 숫자 확인
-    if (!/^\d{10}$/.test(cleanNumber)) {
+  const handleValidateBusinessNumber = async () => {
+    if (businessNumber.length !== 10) {
       setValidationError("사업자등록번호는 10자리 숫자여야 합니다.");
-      return false;
+      return;
     }
-    
+
     try {
       setIsValidating(true);
-      
-      // 백엔드 API를 통한 사업자번호 검증
-      const response = await axiosInstance.post('/store/validate-business-number', {
-        businessNumber: cleanNumber
-      });
-      
-      // 검증 결과
-      const isValid = response.data;
-      
-      if (!isValid) {
-        setValidationError("유효하지 않은 사업자등록번호입니다.");
-      }
-      
-      return isValid;
+      await validateBusinessNumber(businessNumber);
+      alert("유효한 사업자등록번호입니다.");
+      setValidationError("");
+      setStep(2); // step 2로 이동
     } catch (error) {
-      console.error("사업자등록번호 검증 중 오류 발생:", error);
-      setValidationError("사업자등록번호 검증에 실패했습니다.");
-      return false;
+      console.error("사업자등록번호 검증 실패:", error);
+      setValidationError("유효하지 않은 사업자등록번호입니다.");
     } finally {
       setIsValidating(false);
     }
   };
 
-  // 사업자번호로 매장 정보 조회
-  const fetchFakeShop = async () => {
-    if (!businessNumber) {
-      setValidationError("사업자등록번호를 입력해주세요.");
-      return;
-    }
-    
-    // 하이픈 제거
-    const cleanNumber = businessNumber.replace(/-/g, '');
-    
-    // 사업자번호 검증
-    const isValid = await validateBusinessNumber(businessNumber);
-    
-    if (!isValid) {
+  const handleRegisterStore = async () => {
+    if (!storeName || !location || !defaultHourlyWage) {
+      setValidationError("모든 값을 입력해주세요.");
       return;
     }
-    
-    // 하드코딩된 데이터에서 매장 조회
-    if (fakeShops[cleanNumber]) {
-      setShop(fakeShops[cleanNumber]); // 매장명 설정
-      setIsOpen(true);
-    } else {
-      // 검증은 성공했지만 DB에 없는 사업자번호일 경우 매장명 입력 기능 추가
-      setValidationError("확인된 사업자번호이나 등록된 매장 정보가 없습니다. 매장명을 직접 입력해주세요.");
-      setShop("");
-      setIsOpen(true);
-    }
-  };
 
-  // 사업자번호에 따른 하드코딩된 매장 정보
-  const fakeShops: { [key: string]: string } = {
-    "0000000000": "스타벅스 성신여대점",
-    "1111111111": "투썸플레이스 성공회대점",
-    "2222222222": "이디야 숙명여대점",
-  };
+    const payload = {
+      name: storeName,
+      location: location,
+      businessNumber: businessNumber,
+      defaultHourlyWage: defaultHourlyWage,
+    };
 
-  // 매장 정보 저장
-  const registerShop = async () => {
-    if (!shop && !document.getElementById('shopNameInput')) {
-      setValidationError("매장명을 입력해주세요.");
-      return;
-    }
-    
-    // 직접 입력한 매장명 가져오기
-    const inputElement = document.getElementById('shopNameInput') as HTMLInputElement;
-    const shopName = inputElement ? inputElement.value : shop;
-    
-    if (!shopName) {
-      setValidationError("매장명을 입력해주세요.");
-      return;
-    }
+    console.log("📦 registerStore로 보낼 데이터:", payload);
 
     try {
-      await axiosInstance.post("/store", {
-        businessNumber: businessNumber.replace(/-/g, ''),
-        shopName: shopName,
-      });
-
-      setStep(2); // 등록 완료 화면으로 이동
-    } catch (error) {
-      console.error("매장 등록 중 오류 발생:", error);
-      setValidationError("매장 등록에 실패했습니다.");
-    }
-  };
-
-  // 매장명 직접 입력 상태
-  const [isDirectInput, setIsDirectInput] = useState<boolean>(false);
-  
-  // 매장명 직접 입력 전환
-  const toggleDirectInput = () => {
-    setIsDirectInput(!isDirectInput);
-    if (!isDirectInput) {
-      setShop("");
+      await registerStore(payload);
+      alert("매장이 성공적으로 등록되었습니다.");
+      onClose();
+    } catch (error: any) {
+      console.error("매장 등록 실패:", error);
+      if (error.response?.data) {
+        console.error("❗서버 응답 메시지:", error.response.data);
+      }
+      setValidationError("매장 등록 중 오류가 발생했습니다.");
     }
   };
 
   return (
     <div className={styles.modalOverlay}>
       <div className={styles.modal}>
-        <div className={styles.container} style={{ marginTop: "20px" }}>
+        <div className={styles.container}>
           <div className={styles.title}>근무지 등록하기</div>
-          <div className={styles.button} onClick={onClose}>
-            취소
-          </div>
+          <div className={styles.button} onClick={onClose}>취소</div>
         </div>
+
         <div className={styles.content}>
+          {/* Step 1: 사업자등록번호 입력 */}
           <div className={styles.contentBox}>
             <div className={styles.contentTitle}>매장 사업자번호 입력</div>
             <div className={styles.contentContent}>
@@ -182,83 +90,66 @@ const AlbaAddModal: React.FC<AlbaAddModalProps> = ({ onClose }) => {
                 value={businessNumber}
                 onChange={handleBusinessNumber}
                 className={styles.numberInput}
-                placeholder="매장의 사업자번호를 입력해 주세요 (000-00-00000)"
+                placeholder="매장의 사업자번호를 입력해 주세요 (숫자만 입력)"
               />
               <button 
                 className={styles.inputButton} 
-                onClick={fetchFakeShop}
+                onClick={handleValidateBusinessNumber}
                 disabled={isValidating}
               >
                 {isValidating ? "검증 중..." : "입력 완료"}
               </button>
             </div>
+            {validationError && <div className={styles.errorMessage}>{validationError}</div>}
           </div>
-          {validationError && (
-            <div className={styles.errorMessage}>{validationError}</div>
-          )}
-          
-          {/* 입력 확인을 눌렀을 때 매장이 나오도록 하는 코드 */}
-          {isOpen && (
+
+          {/* Step 2: 매장 정보 입력 */}
+          {step === 2 && (
             <>
-              <div className={styles.openShopBox}>
-                <div className={styles.openBox}>
-                  <div className={styles.contentTitle}>매장명</div>
-                  {isDirectInput && (
-                    <div className={styles.directInputToggle} onClick={toggleDirectInput}>
-                      저장된 매장명 사용
-                    </div>
-                  )}
-                  {!isDirectInput && shop && (
-                    <div className={styles.directInputToggle} onClick={toggleDirectInput}>
-                      직접 입력
-                    </div>
-                  )}
-                </div>
-                <div className={styles.openBox}>
-                  {isDirectInput || !shop ? (
-                    <input 
-                      id="shopNameInput"
-                      type="text" 
-                      className={styles.shopNameInput}
-                      placeholder="매장명을 입력해주세요"
-                      defaultValue={shop}
-                    />
-                  ) : (
-                    <div className={styles.openShop}>{shop}</div>
-                  )}
+              <div className={styles.contentBox}>
+                <div className={styles.contentTitle}>매장 이름</div>
+                <div className={styles.contentContent}>
+                  <input
+                    type="text"
+                    value={storeName}
+                    onChange={(e) => setStoreName(e.target.value)}
+                    className={styles.numberInput}
+                    placeholder="매장 이름을 입력해 주세요"
+                  />
                 </div>
               </div>
 
-              {/* 매장이 나오도록 하는 코드 */}
-              {/* 동시에 "위 매장이 맞나요?" 텍스트와 두 개의 버튼이 나타남 */}
-              <div className={styles.openText}>근무지가 위 매장이 맞나요?</div>
-              {step === 1 && (
-                <div className={styles.openButtonBox}>
-                  <Button
-                    width="216px"
-                    height="46px"
-                    children="네 맞습니다."
-                    onClick={registerShop}
-                  />
-                  <Button
-                    width="216px"
-                    height="46px"
-                    children="아닙니다."
-                    variant="gray"
-                    onClick={closeShop}
+              <div className={styles.contentBox}>
+                <div className={styles.contentTitle}>매장 위치</div>
+                <div className={styles.contentContent}>
+                  <input
+                    type="text"
+                    value={location}
+                    onChange={(e) => setLocation(e.target.value)}
+                    className={styles.numberInput}
+                    placeholder="매장 위치를 입력해 주세요 (예: 서울 송파구)"
                   />
                 </div>
-              )}
-            </>
-          )}
-          {step === 2 && (
-            <>
-              <div className={styles.step2Box}>
-                <div className={styles.done}>매장등록이 완료되었습니다.</div>
-                <div className={styles.move} onClick={onClose}>
-                  메인페이지로 이동하기.
+              </div>
+
+              <div className={styles.contentBox}>
+                <div className={styles.contentTitle}>기본 시급</div>
+                <div className={styles.contentContent}>
+                  <input
+                    type="number"
+                    value={defaultHourlyWage}
+                    onChange={(e) => setDefaultHourlyWage(Number(e.target.value))}
+                    className={styles.numberInput}
+                    placeholder="기본 시급을 입력해 주세요 (예: 9860)"
+                  />
                 </div>
               </div>
+
+              <div className={styles.registerButtonBox}>
+                <Button width="30%" height="46px" onClick={handleRegisterStore}>
+                  매장 등록하기
+                </Button>
+              </div>
             </>
           )}
         </div>
diff --git a/src/components/Modal/AlbaJoinModal.tsx b/src/components/Modal/AlbaJoinModal.tsx
new file mode 100644
index 0000000..d290e83
--- /dev/null
+++ b/src/components/Modal/AlbaJoinModal.tsx
@@ -0,0 +1,59 @@
+import styles from "./AlbaAddModal.module.css";
+import { useState } from "react";
+import Button from "../Button";
+import { joinStore } from "../../api/albaAdd";
+import { useEmployeeSchedule } from "../../contexts/EmployeeScheduleContext"; // ✅ 추가
+
+interface AlbaJoinModalProps {
+  onClose: () => void;
+}
+
+const AlbaJoinModal: React.FC<AlbaJoinModalProps> = ({ onClose }) => {
+  const [storeCode, setStoreCode] = useState<string>("");
+
+  const { refetchStores } = useEmployeeSchedule(); // ✅ 추가
+
+  const handleJoinStore = async () => {
+    try {
+      const res = await joinStore(storeCode); // 참여 코드로 매장 등록 요청
+      alert("매장에 성공적으로 참여했어요!");
+      await refetchStores(); // ✅ 매장 목록 다시 불러오기
+      onClose(); // 모달 닫기
+    } catch (err: any) {
+      console.error("❌ 참여 실패", err.response?.data || err.message);
+      alert(err.response?.data?.message || "유효하지 않은 참여 코드입니다.");
+    }
+  };
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <div className={styles.container}>
+          <div className={styles.title}>근무지 추가하기</div>
+          <div className={styles.button} onClick={onClose}>취소</div>
+        </div>
+
+        <div className={styles.content}>
+          <div className={styles.contentBox}>
+            <div className={styles.contentTitle}>참여 코드 입력</div>
+            <div className={styles.contentContent}>
+              <input
+                type="text"
+                value={storeCode}
+                onChange={(e) => setStoreCode(e.target.value)}
+                className={styles.numberInput}
+                placeholder="매장 참여 코드를 입력해 주세요"
+              />
+            </div>
+
+            <Button width="30%" height="46px" onClick={handleJoinStore}>
+              매장 참여하기
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AlbaJoinModal;
diff --git a/src/components/Modal/Edit/DeleteStoreModal.module.css b/src/components/Modal/Edit/DeleteStoreModal.module.css
new file mode 100644
index 0000000..fd906be
--- /dev/null
+++ b/src/components/Modal/Edit/DeleteStoreModal.module.css
@@ -0,0 +1,72 @@
+.modalOverlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0%;
+  left: 50%;
+  transform: translateX(-50%); /* ✅ 좌우 정중앙 정렬 */
+
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+
+  font-family: "Noto Sans KR", sans-serif;
+
+  display: flex;
+  justify-content: center;
+  /* align-items: flex-start; */
+}
+
+.modal {
+  width: 1000px;
+  height: 400px;
+  /* border: 1px black solid; */
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 250px;
+}
+
+.container {
+  width: 900px;
+  height: 40px;
+  border-bottom: 1px #666666 solid;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+.title {
+  width: 608px;
+  height: 24px;
+  /* border: 1px black solid; */
+  margin-left: 20px;
+  font-size: 20px;
+  font-weight: 700;
+}
+.button {
+  width: 30px;
+  height: 24px;
+  /* border: 1px black solid; */
+  margin-right: 20px;
+}
+.button:hover {
+  cursor: pointer;
+}
+.contentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+  gap: 70px;
+}
+.contents {
+  width: 750px;
+  margin-top: 10%;
+
+  border: 1px solid black;
+
+  display: flex;
+  justify-content: center
+}
+.input {
+  width: 450px;
+}
diff --git a/src/components/Modal/Edit/DeleteStoreModal.tsx b/src/components/Modal/Edit/DeleteStoreModal.tsx
new file mode 100644
index 0000000..bebf0a9
--- /dev/null
+++ b/src/components/Modal/Edit/DeleteStoreModal.tsx
@@ -0,0 +1,53 @@
+import { useState } from "react";
+import styles from "./DeleteStoreModal.module.css";
+import { deleteStore } from "../../../api/albaAdd"; // 경로는 실제 위치에 맞게 조절
+
+interface AlarmProps {
+  storeId: number;              // ✅ 추가: 실제 API 호출용
+  storeName: string;           // ✅ 기존 그대로 유지
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const DeleteStoreModal: React.FC<AlarmProps> = ({
+  storeId,
+  storeName,
+  onClose,
+  onSuccess,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDelete = async () => {
+    try {
+      setIsLoading(true);
+      await deleteStore(storeId);           // ✅ API 호출
+      onSuccess();                          // ✅ 성공 후 콜백
+    } catch (error) {
+      console.error("❌ 매장 삭제 실패:", error);
+      alert("매장 삭제에 실패했습니다. 다시 시도해주세요.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <div className={styles.container}>
+          <div className={styles.title}>매장 삭제하기</div>
+          <div className={styles.button} onClick={onClose}>취소</div>
+        </div>
+        <div className={styles.contentContainer}>
+          <div className={styles.contents}>
+            정말 <strong>{storeName}</strong> 매장을 삭제하시겠습니까?
+          </div>
+          <div className={styles.confirmButton} onClick={handleDelete}>
+            {isLoading ? "삭제 중..." : "확인"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteStoreModal;
diff --git a/src/components/Modal/Edit/EditableField.module.css b/src/components/Modal/Edit/EditableField.module.css
index b577ea3..9f4015d 100644
--- a/src/components/Modal/Edit/EditableField.module.css
+++ b/src/components/Modal/Edit/EditableField.module.css
@@ -18,3 +18,10 @@
   font-size: 20px;
   text-decoration: underline;
 }
+
+.manageButton {
+  color: #4a90e2;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: bold;
+}
diff --git a/src/components/Modal/Edit/EditableField.tsx b/src/components/Modal/Edit/EditableField.tsx
index b683a0d..6cdb594 100644
--- a/src/components/Modal/Edit/EditableField.tsx
+++ b/src/components/Modal/Edit/EditableField.tsx
@@ -1,14 +1,16 @@
 // ✅ EditableField: 사용자 정보(이름, 이메일, 비밀번호 등)를 화면에 출력하고,
 // 편집 모드일 때, 수정 가능한 항목만 클릭 가능하게 만드는 재사용 컴포넌트
 import styles from "./EditableField.module.css";
+import { ReactNode } from "react";
 
 interface EditableFieldProps {
   label: string;                           // 항목 라벨 (예: 이름)
-  value: string;                           // 항목 값 (예: 홍길동)
+  value?: string;                          // 항목 값 (예: 홍길동) (선택)
   fieldName: string;                       // 필드 이름 (예: "fullName", "email")
   isEditing: boolean;                      // 현재 편집 모드인지 여부
   isEditable: boolean;                     // 해당 항목이 수정 가능한지 여부
   onClick?: (field: string) => void;       // 클릭 이벤트 핸들러 (옵션)
+  children?: ReactNode;                   // 커스텀 출력용 JSX 지원
 }
 
 const EditableField = ({
@@ -18,17 +20,21 @@ const EditableField = ({
   isEditing,
   isEditable,
   onClick,
+  children,
 }: EditableFieldProps) => {
   const isClickable = isEditing && isEditable;
+  const isStoreField = fieldName === "storeNames"; // ✅ storeNames인지 확인
 
-  return (
+    return (
     <div className={styles.contents}>
       <div className={styles.contentsTitle}>{label}</div>
       <div
         className={isClickable ? styles.contentsContentsTrue : styles.contentsContents}
-        onClick={isClickable && onClick ? () => onClick(fieldName) : undefined}
+        onClick={
+          isClickable && !isStoreField && onClick ? () => onClick(fieldName) : undefined
+        }
       >
-        {value || `${label} 없음`}
+        {children ?? value ?? `${label} 없음`}
       </div>
     </div>
   );
diff --git a/src/components/Modal/ManualScheduleForm.tsx b/src/components/Modal/ManualScheduleForm.tsx
new file mode 100644
index 0000000..a4347a9
--- /dev/null
+++ b/src/components/Modal/ManualScheduleForm.tsx
@@ -0,0 +1,104 @@
+// 직접 등록하기 버튼을 눌렀을때 이루어지는 과정 컴포넌트 분리해서 진행
+// TemplateCreateForm.tsx
+// ManualScheduleForm.tsx
+import { useEffect, useState } from "react";
+import { getWorkersByStoreId, Worker } from "../../api/albaAdd";
+import { postManualSchedule } from "../../api/scheduleAdd";
+import { useModal } from "../../contexts/ModalContext";
+import Button from "../Button";
+import styles from "./ScheduleAddModal.module.css";
+
+interface Props {
+  onBack: () => void;
+}
+
+const ManualScheduleForm = ({ onBack }: Props) => {
+  const { closeModal } = useModal();
+
+  const storeId = 1;
+  const [workers, setWorkers] = useState<Worker[]>([]);
+  const [userId, setUserId] = useState<number | "">("");
+  const [date, setDate] = useState("");
+  const [startTime, setStartTime] = useState("09:00");
+  const [endTime, setEndTime] = useState("18:00");
+  const [breakHour, setBreakHour] = useState(1);
+  const [breakMinute, setBreakMinute] = useState(0);
+
+  useEffect(() => {
+    getWorkersByStoreId(storeId)
+      .then((res) => setWorkers(res.data))
+      .catch((err) => console.error("알바생 불러오기 실패", err));
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!date || userId === "") {
+      alert("날짜와 알바생을 모두 선택해 주세요");
+      return;
+    }
+
+    const breakTime = `${String(breakHour).padStart(2, "0")}:${String(breakMinute).padStart(2, "0")}`;
+
+    const payload = {
+      userIds: [Number(userId)],
+      storeId,
+      workDate: date,
+      startTime,
+      endTime,
+      breakTime,
+    };
+
+    try {
+      await postManualSchedule(storeId, payload);
+      alert("근무 등록 완료!");
+      closeModal();
+    } catch (err) {
+      console.error("근무 등록 실패", err);
+      alert("근무 등록 중 오류가 발생했습니다.");
+    }
+  };
+
+  return (
+    <div className={styles.formBox}>
+      <div className={styles.formGroup}>
+        <label>근무 날짜<span className={styles.required}>*</span></label>
+        <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className={styles.input} />
+      </div>
+
+      <div className={styles.formGroup}>
+        <label>적용할 알바생<span className={styles.required}>*</span></label>
+        <select value={userId} onChange={(e) => setUserId(Number(e.target.value))} className={styles.input}>
+          <option value="">선택하기</option>
+          {workers.map((w) => (
+            <option key={w.userId} value={w.userId}>{w.name}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className={styles.formGroup}>
+        <label>근무시간</label>
+        <div className={styles.inlineGroup}>
+          <input type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} className={styles.inputSmall} />
+          <span>~</span>
+          <input type="time" value={endTime} onChange={(e) => setEndTime(e.target.value)} className={styles.inputSmall} />
+        </div>
+      </div>
+
+      <div className={styles.formGroup}>
+        <label>휴게시간</label>
+        <div className={styles.inlineGroup}>
+          <input type="number" value={breakHour} onChange={(e) => setBreakHour(Number(e.target.value))} min={0} max={12} className={styles.inputTiny} />
+          <span>시간</span>
+          <input type="number" value={breakMinute} onChange={(e) => setBreakMinute(Number(e.target.value))} min={0} max={59} className={styles.inputTiny} />
+          <span>분</span>
+        </div>
+      </div>
+
+      <div className={styles.formButtonBox}>
+        <Button onClick={onBack}>이전</Button>
+        <Button onClick={handleSubmit}>확인</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ManualScheduleForm;
diff --git a/src/components/Modal/ScheduleAddModal.module.css b/src/components/Modal/ScheduleAddModal.module.css
new file mode 100644
index 0000000..185b0a4
--- /dev/null
+++ b/src/components/Modal/ScheduleAddModal.module.css
@@ -0,0 +1,244 @@
+.modalOverlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0%;
+  left: 50%;
+  transform: translateX(-50%); /* ✅ 좌우 정중앙 정렬 */
+
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+
+  font-family: "Noto Sans KR", sans-serif;
+
+  display: flex;
+  justify-content: center;
+  /* align-items: flex-start; */
+}
+
+.modal {
+  width: 800px;
+  height: 500px;
+  /* border: 1px black solid; */
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 5%;
+}
+.container {
+  width: 752px;
+  height: 40px;
+  border-bottom: 1px #666666 solid;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+.title {
+  width: 608px;
+  height: 24px;
+  /* border: 1px black solid; */
+  margin-left: 20px;
+  font-size: 20px;
+  font-weight: 700;
+  text-align: left;
+}
+.button {
+  /* width: 30px; */
+  height: 24px;
+  /* border: 1px black solid; */
+  margin-right: 20px; 
+}
+.contents{
+    width: 100%;
+    height: 80%;
+    border: 1px black solid;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.templeteBox{
+    width: 90%;
+    height: 70%;
+    border: 1px black solid;
+}
+.buttonBox{
+    width: 90%;
+    height: 15%;
+    border: 1px black solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+}
+
+
+
+/* ScheduleAddModal.module.css */
+.templateCard {
+  width: 120px;
+  padding: 12px;
+  border: 2px solid #bfeadf;
+  border-radius: 10px;
+  background-color: #f0fff4;
+  text-align: center;
+  margin: 8px;
+  cursor: pointer;
+}
+
+.role {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.time {
+  font-size: 14px;
+}
+
+/* ManualSchdeuleForm */
+.formBox {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  
+  gap: 16px;
+  padding-top: 16px;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.required {
+  color: red;
+  margin-left: 4px;
+}
+
+.input {
+  width: 23%;
+  margin: 0px auto;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.inputSmall {
+  width: 120px;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.inputTiny {
+  width: 60px;
+  padding: 6px 6px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.inlineGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.formButtonBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  margin-top: auto;
+}
+
+/* TemplateSelector */
+/* TemplateSelector용 전용 네이밍 */
+.templateGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  padding: 16px 0;
+  width: 90%;
+}
+
+.templateCardGrid {
+  width: 22%;
+  min-width: 120px;
+  padding: 12px;
+  border: 2px solid #bfeadf;
+  border-radius: 10px;
+  background-color: #f0fff4;
+  text-align: center;
+  box-sizing: border-box;
+}
+/* 확인 버튼은 템플릿 목록 아래에 중앙 정렬로 배치 */
+.confirmButton {
+  text-align: center;
+  margin: 16px 0;
+}
+.roleText {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.timeText {
+  font-size: 14px;
+}
+
+.selectedCard {
+  border: 2px solid #1890ff;
+  background-color: #e6f7ff;
+}
+
+
+/* TemplateScheduleForm에서 선택된 템플릿 표시용 */
+.selectedTemplateBox {
+  width: 22%;
+  min-width: 120px;
+  border: 2px dashed #52c41a;
+  border-radius: 8px;
+  background-color: #f6ffed;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  text-align: left;
+  font-size: 14px;
+  color: #389e0d;
+}
+.formBox2 {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  
+  gap: 16px;
+  padding-top: 16px;
+}
+.formBox2Element{
+  display: flex;
+}
+
+.formBox2L{
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+
+.formBox2R{
+  width: 50%;
+}
+
+.formBox2Input {
+  width: 23%;
+  margin: 0px auto;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
\ No newline at end of file
diff --git a/src/components/Modal/ScheduleAddModal.tsx b/src/components/Modal/ScheduleAddModal.tsx
new file mode 100644
index 0000000..33d10ba
--- /dev/null
+++ b/src/components/Modal/ScheduleAddModal.tsx
@@ -0,0 +1,66 @@
+// 사장님 근무등록하기 모달창
+// 사장님 근무등록하기 모달창
+import { useState, useEffect } from "react";
+import { useModal } from "../../contexts/ModalContext";
+import TemplateSelector from "./TemplateSelector";
+import ManualScheduleForm from "./ManualScheduleForm";
+import TemplateCreateForm from "./TemplateCreateForm";
+import TemplateScheduleForm from "./TemplateScheduleForm";
+import styles from "./ScheduleAddModal.module.css";
+
+const ScheduleAddModal = () => {
+  console.log("📌 ScheduleAddModal 렌더링됨");
+
+  const { closeModal } = useModal();
+
+  type ViewState =
+    | { type: "default" }
+    | { type: "manual" }
+    | { type: "template" }
+    | { type: "templateForm"; templateId: number };
+
+  const [viewState, setViewState] = useState<ViewState>({ type: "default" });
+
+  useEffect(() => {
+    setViewState({ type: "default" });
+  }, []);
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <div className={styles.container} style={{ marginTop: "20px" }}>
+          <div className={styles.title}>
+            {viewState.type === "manual" && "근무 직접 등록"}
+            {viewState.type === "template" && "근무 템플릿 생성하기"}
+            {viewState.type === "templateForm" && "템플릿으로 근무 등록"}
+            {viewState.type === "default" && "근무 등록하기"}
+          </div>
+          <div className={styles.button} onClick={closeModal}>
+            취소
+          </div>
+        </div>
+
+        <div className={styles.contents}>
+          {viewState.type === "default" && (
+            <TemplateSelector onNext={setViewState} />
+          )}
+          {viewState.type === "manual" && (
+            <ManualScheduleForm onBack={() => setViewState({ type: "default" })} />
+          )}
+          {viewState.type === "template" && (
+            <TemplateCreateForm onBack={() => setViewState({ type: "default" })} />
+          )}
+          {viewState.type === "templateForm" && (
+            <TemplateScheduleForm
+              templateId={viewState.templateId}
+              onBack={() => setViewState({ type: "default" })}
+              onSuccess={() => closeModal()}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ScheduleAddModal;
\ No newline at end of file
diff --git a/src/components/Modal/TemplateCreateForm.tsx b/src/components/Modal/TemplateCreateForm.tsx
new file mode 100644
index 0000000..317317a
--- /dev/null
+++ b/src/components/Modal/TemplateCreateForm.tsx
@@ -0,0 +1,113 @@
+// 템플릿 생성하기 눌렀을때 이루어지는 과정
+// TemplateCreateForm.tsx
+import { useState, useEffect } from "react";
+import { postTemplate } from "../../api/scheduleAdd";
+import Button from "../Button";
+import styles from "./ScheduleAddModal.module.css";
+
+interface Props {
+  onBack: () => void;
+}
+
+const TemplateCreateForm = ({ onBack }: Props) => {
+  const storeId = 1; // TODO: 실제 값으로 대체
+
+  const [templateName, setTemplateName] = useState("");
+  const [startTime, setStartTime] = useState("09:00");
+  const [endTime, setEndTime] = useState("18:00");
+  const [breakHour, setBreakHour] = useState(1);
+  const [breakMinute, setBreakMinute] = useState(0);
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [createdTemplate, setCreatedTemplate] = useState<{ templateName: string; startTime: string; endTime: string } | null>(null);
+
+  const handleSubmit = async () => {
+    if (!templateName) {
+      alert("템플릿명을 입력해주세요.");
+      return;
+    }
+
+    const breakTime = `${String(breakHour).padStart(2, "0")}:${String(breakMinute).padStart(2, "0")}`;
+
+    const payload = {
+      templateName,
+      startTime,
+      endTime,
+      breakTime,
+    };
+
+    try {
+      await postTemplate(storeId, payload);
+      setIsSubmitted(true);
+      setCreatedTemplate({ templateName, startTime, endTime });
+    } catch (err) {
+      console.error("템플릿 생성 실패", err);
+      alert("템플릿 생성 중 오류가 발생했습니다.");
+    }
+  };
+    // ✅ 이거 추가
+  useEffect(() => {
+    setIsSubmitted(false);
+    setCreatedTemplate(null);
+  }, []);
+
+  return (
+    <div className={styles.formBox}>
+      {!isSubmitted ? (
+        <>
+          <div className={styles.formGroup}>
+            <label>템플릿명<span className={styles.required}>*</span></label>
+            <input
+              type="text"
+              value={templateName}
+              onChange={(e) => setTemplateName(e.target.value)}
+              placeholder="ex) 오픈, 4시간, …"
+              className={styles.input}
+            />
+          </div>
+
+          <div className={styles.formGroup}>
+            <label>근무시간<span className={styles.required}>*</span></label>
+            <div className={styles.inlineGroup}>
+              <input type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} className={styles.inputSmall} />
+              <span>~</span>
+              <input type="time" value={endTime} onChange={(e) => setEndTime(e.target.value)} className={styles.inputSmall} />
+            </div>
+          </div>
+
+          <div className={styles.formGroup}>
+            <label>휴게시간<span className={styles.required}>*</span></label>
+            <div className={styles.inlineGroup}>
+              <input type="number" value={breakHour} onChange={(e) => setBreakHour(Number(e.target.value))} className={styles.inputTiny} />
+              <span>시간</span>
+              <input type="number" value={breakMinute} onChange={(e) => setBreakMinute(Number(e.target.value))} className={styles.inputTiny} />
+              <span>분</span>
+            </div>
+          </div>
+
+          <div className={styles.formButtonBox}>
+            <Button onClick={onBack}>이전</Button>
+            <Button onClick={handleSubmit}>생성하기</Button>
+          </div>
+        </>
+      ) : (
+        <div className={styles.templateCompleteBox}>
+          <p className={styles.completeText}>템플릿 생성이 완료되었습니다!</p>
+          {createdTemplate && (
+            <div className={styles.templateCard}>
+              <div className={styles.role}>{createdTemplate.templateName}</div>
+              <div className={styles.time}>
+                {createdTemplate.startTime} ~ {createdTemplate.endTime}
+              </div>
+            </div>
+          )}
+          <div className={styles.formButtonBox}>
+            <Button onClick={onBack}>닫기</Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TemplateCreateForm;
diff --git a/src/components/Modal/TemplateScheduleForm.tsx b/src/components/Modal/TemplateScheduleForm.tsx
new file mode 100644
index 0000000..988c597
--- /dev/null
+++ b/src/components/Modal/TemplateScheduleForm.tsx
@@ -0,0 +1,141 @@
+// 만들어진 템플릿 근무 등록
+import { useState, useEffect } from "react";
+import { getTemplatesByStoreId, ScheduleTemplate, postScheduleFromTemplate } from "../../api/scheduleAdd";
+import { getWorkersByStoreId, Worker } from "../../api/albaAdd";
+import { formatTimeFlexible } from "../../utils/timeFormat";
+import styles from "./ScheduleAddModal.module.css";
+import Button from "../Button";
+
+interface Props {
+  templateId: number;
+  onBack: () => void;
+  onSuccess: () => void;
+}
+
+const TemplateScheduleForm = ({ templateId, onBack, onSuccess }: Props) => {
+  const [workDate, setWorkDate] = useState("");
+  const [repeatEndDate, setRepeatEndDate] = useState("");
+  const [repeatDays, setRepeatDays] = useState<string[]>([]);
+  const [userIds, setUserIds] = useState<number[]>([]);
+  const [selectedTemplate, setSelectedTemplate] = useState<ScheduleTemplate | null>(null);
+  const [workers, setWorkers] = useState<Worker[]>([]);
+
+  const storeId = 1; // TODO: 실제 storeId로 대체
+
+  useEffect(() => {
+    getTemplatesByStoreId(storeId).then((data) => {
+      const found = data.find((t) => t.templateId === templateId);
+      setSelectedTemplate(found ?? null);
+    });
+
+    getWorkersByStoreId(storeId).then((res) => {
+      setWorkers(res.data);
+    });
+  }, [templateId]);
+
+  const handleSubmit = async () => {
+    try {
+      await postScheduleFromTemplate(templateId, {
+        userIds,
+        storeId,
+        workDate,
+        repeatDays,
+        repeatEndDate,
+        repeating: true,
+      });
+      alert("스케줄이 등록되었습니다.");
+      onSuccess();
+    } catch (error) {
+      console.error("등록 실패", error);
+      alert("스케줄 등록에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className={styles.formBox2}>
+      {selectedTemplate && (
+        <div className={styles.selectedTemplateBox}>
+          <div className={styles.roleText}>{selectedTemplate.templateName}</div>
+          <div className={styles.timeText}>
+            {formatTimeFlexible(selectedTemplate.startTime)} ~ {formatTimeFlexible(selectedTemplate.endTime)}
+          </div>
+        </div>
+      )}
+
+      <div className={styles.formBox2Element}>
+        <div className={styles.formBox2L}>
+          <div>
+            <label>
+              <div>근무 시작일</div>
+              <input
+                type="date"
+                value={workDate}
+                onChange={(e) => setWorkDate(e.target.value)}
+                className={styles.formBox2input}
+              />
+            </label>
+          </div>
+
+          <div>
+            <label>
+              <div>반복 종료일</div>
+              <input
+                type="date"
+                value={repeatEndDate}
+                onChange={(e) => setRepeatEndDate(e.target.value)}
+                className={styles.formBox2input}
+              />
+            </label>
+          </div>
+
+          <div>
+            <div>반복 요일:</div>
+            {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
+              <button
+                key={day}
+                onClick={() =>
+                  setRepeatDays((prev) =>
+                    prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+                  )
+                }
+                style={{
+                  backgroundColor: repeatDays.includes(day) ? "#aaf" : "#eee",
+                  margin: "4px",
+                }}
+              >
+                {day}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className={styles.formBox2R}>
+          <label>
+            <div>알바생 선택</div>
+            <select
+              onChange={(e) => setUserIds([parseInt(e.target.value, 10)])}
+              className={styles.formBox2input}
+              defaultValue=""
+            >
+              <option value="" disabled>
+                알바생을 선택하세요
+              </option>
+              {workers.map((worker) => (
+                <option key={worker.userId} value={worker.userId}>
+                  {worker.name} (ID: {worker.userId})
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+      </div>
+
+      <div className={styles.formButtonBox}>
+        <Button onClick={onBack}>이전</Button>
+        <Button onClick={handleSubmit}>등록</Button>
+      </div>
+    </div>
+  );
+};
+
+export default TemplateScheduleForm;
diff --git a/src/components/Modal/TemplateSelector.tsx b/src/components/Modal/TemplateSelector.tsx
new file mode 100644
index 0000000..66f3894
--- /dev/null
+++ b/src/components/Modal/TemplateSelector.tsx
@@ -0,0 +1,93 @@
+// 근무 템플릿을 선택하거나 새로 등록하여 다음 단계로 넘어가는 선택 화면
+// 여기서 3개의 폼으로 넘어감: 직접 등록, 템플릿 생성, 템플릿으로 근무 등록
+import { useEffect, useState } from "react";
+import { getTemplatesByStoreId, ScheduleTemplate } from "../../api/scheduleAdd";
+import { formatTimeFlexible } from "../../utils/timeFormat";
+import Button from "../Button";
+import styles from "./ScheduleAddModal.module.css";
+
+interface Props {
+  onNext: (
+    view:
+      | { type: "manual" }              // 근무 직접 등록
+      | { type: "template" }            // 템플릿 생성
+      | { type: "templateForm"; templateId: number } // 템플릿으로 근무 등록
+  ) => void;
+}
+
+const TemplateSelector = ({ onNext }: Props) => {
+  const [templates, setTemplates] = useState<ScheduleTemplate[]>([]);
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(null);
+  const storeId = 1; // TODO: 실제 storeId로 교체
+
+  // 템플릿 리스트 불러오기
+  useEffect(() => {
+    getTemplatesByStoreId(storeId)
+      .then((data) => {
+        console.log("✅ 템플릿 불러오기 성공:", data);
+        setTemplates(data);
+      })
+      .catch((err) => {
+        console.error("❌ 템플릿 불러오기 실패:", err);
+      });
+  }, []);
+
+  // 확인 버튼 클릭 시, 템플릿 ID를 넘김
+  const handleConfirm = () => {
+    if (selectedTemplateId !== null) {
+      onNext({ type: "templateForm", templateId: selectedTemplateId });
+    } else {
+      alert("템플릿을 선택해주세요.");
+    }
+  };
+
+  return (
+    <>
+      {/* 템플릿 목록 영역 */}
+      <div className={styles.templateGrid}>
+        {templates.length === 0 ? (
+          <div style={{ textAlign: "center", marginTop: "40px" }}>
+            템플릿이 없습니다.
+          </div>
+        ) : (
+          templates.map((template) => (
+            <div
+              key={template.templateId}
+              className={`${styles.templateCardGrid} ${
+                selectedTemplateId === template.templateId ? styles.selectedCard : ""
+              }`}
+              onClick={() => setSelectedTemplateId(template.templateId)}
+            >
+              <div className={styles.roleText}>{template.templateName}</div>
+              <div className={styles.timeText}>
+                {formatTimeFlexible(template.startTime)} ~ {formatTimeFlexible(template.endTime)}
+              </div>
+            </div>
+          ))
+        )}
+        {/* 템플릿 선택 시에만 확인 버튼 노출 */}
+        {selectedTemplateId !== null && (
+          <div className={styles.confirmButton}>
+            <Button onClick={handleConfirm} variant="blue">
+              확인
+            </Button>
+          </div>
+        )}
+      </div>
+
+
+
+      {/* 하단 버튼 영역 */}
+      <div className={styles.buttonBox}>
+        <Button onClick={() => onNext({ type: "manual" })}>
+          근무 직접 등록하기
+        </Button>
+        <Button onClick={() => onNext({ type: "template" })} variant="gray">
+          템플릿 등록하기
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default TemplateSelector;
diff --git a/src/components/SelectRadio.tsx b/src/components/SelectRadio.tsx
index efc0eb4..3b34a0e 100644
--- a/src/components/SelectRadio.tsx
+++ b/src/components/SelectRadio.tsx
@@ -12,25 +12,28 @@ const SelectRadio = () => {
             <div className={styles.selectRadio}>
                 <div className={styles.selectBtn}>
                     {safeStores.length > 0 ? (
-                        safeStores.map((store) => (
-                            <label
-                                key={store.storeId}
-                                className={styles.selectLabel}>
-                                <input
-                                    type="radio"
-                                    name="store"
-                                    value={store.storeId}
-                                    checked={selectedStore === store.storeId}
-                                    onChange={
-                                        (e) =>
+                        safeStores.map((store) => {
+                            console.log("store:", store); // ✅ 여기에 콘솔 추가!
+
+                            return (
+                                <label
+                                    key={store.storeId}
+                                    className={styles.selectLabel}>
+                                    <input
+                                        type="radio"
+                                        name="store"
+                                        value={store.storeId}
+                                        checked={selectedStore === store.storeId}
+                                        onChange={(e) =>
                                             setSelectedStore(
                                                 Number(e.target.value)
-                                            ) // storeId를 number로 변환하여 설정
-                                    }
-                                />
-                                {store.name}
-                            </label>
-                        ))
+                                            )
+                                        }
+                                    />
+                                    {store.name}
+                                </label>
+                            );
+                        })
                     ) : (
                         <p>가게 목록이 없습니다.</p>
                     )}
diff --git a/src/components/employeeMy/EmployeeMyInfo.module.css b/src/components/employeeMy/EmployeeMyInfo.module.css
index c3fa517..3e37748 100644
--- a/src/components/employeeMy/EmployeeMyInfo.module.css
+++ b/src/components/employeeMy/EmployeeMyInfo.module.css
@@ -52,3 +52,32 @@
   font-size: 20px;
   text-decoration: underline;
 }
+
+.storeList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.storeItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 20px;
+  color: black;
+}
+
+.storeName {
+  flex: 1;
+  word-break: keep-all;
+  text-decoration: none; /* ✅ 밑줄 제거 */
+}
+
+.manageButton {
+  margin-left: 12px;
+  color: #4a90e2;
+  cursor: pointer;
+  font-size: 20px;
+  white-space: nowrap;
+  text-decoration: underline; /* ✅ 밑줄 유지 */
+}
diff --git a/src/components/employeeMy/EmployeeMyInfo.tsx b/src/components/employeeMy/EmployeeMyInfo.tsx
index ff0ce34..549a298 100644
--- a/src/components/employeeMy/EmployeeMyInfo.tsx
+++ b/src/components/employeeMy/EmployeeMyInfo.tsx
@@ -3,21 +3,23 @@ import { useState, useEffect } from "react";
 import { useModal } from "../../contexts/ModalContext";
 import EditModal from "../Modal/Edit/EditModal";
 import DoneModal from "../Modal/Edit/DoneModal";
-import axiosInstance from "../../api/loginAxios"
-import EditableField from "../../components/Modal/Edit/EditableField"
-import EditNameModal from "../Modal/Edit/EditNameModal"; 
-import EditEmailModal from "../Modal/Edit/EditEmailModal"
-import EditPasswordModal from "../Modal/Edit/EditPasswordModal"
-import EditStoreModal from "../Modal/Edit/EditStoreModal";
+import axiosInstance from "../../api/loginAxios";
+import EditableField from "../../components/Modal/Edit/EditableField";
+import EditNameModal from "../Modal/Edit/EditNameModal";
+import EditEmailModal from "../Modal/Edit/EditEmailModal";
+import EditPasswordModal from "../Modal/Edit/EditPasswordModal";
+import DeleteStoreModal from "../Modal/Edit/DeleteStoreModal";
 
 const EmployeeMyInfo = () => {
   const { activeModal, openModal, closeModal } = useModal();
   const [isEditing, setIsEditing] = useState(false);
 
+  const [storeToDelete, setStoreToDelete] = useState<{ id: number; name: string } | null>(null);
   const [isEditNameModalOpen, setIsEditNameModalOpen] = useState(false);
   const [isEditEmailModalOpen, setIsEditEmailModalOpen] = useState(false);
   const [isEditPasswordModalOpen, setIsEditPasswordModalOpen] = useState(false);
   const [isEditStoreModalOpen, setIsEditStoreModalOpen] = useState(false);
+
   const handleEditField = (field: string) => {
     switch (field) {
       case "fullName":
@@ -40,7 +42,7 @@ const EmployeeMyInfo = () => {
     email: "",
     password: "********",
     role: "",
-    storeNames: [] as string[],
+    stores: [] as { id: number; name: string }[],
   });
 
   useEffect(() => {
@@ -49,16 +51,24 @@ const EmployeeMyInfo = () => {
         const response = await axiosInstance.get("/user/me");
         console.log("🔍 유저 정보:", response.data);
 
+        // user/me에는 storeNames(string[])만 있으므로 storeId가 필요한 경우 /store/me 추가 호출 필요
+        const storeResponse = await axiosInstance.get("/store/me");
+        const storeData = storeResponse.data || [];
+
+        const formattedStores = storeData.map((store: any) => ({
+          id: store.storeId,
+          name: store.name,
+        }));
+
         setUserInfo({
           fullName: response.data.fullName || "",
           email: response.data.email || "",
-          password: "********", // 실제 비번은 보여주지 않음
+          password: "********",
           role: response.data.role || "",
-          storeNames: response.data.storeNames || [],
-       });
+          stores: formattedStores,
+        });
       } catch (error: any) {
         console.error("유저 정보 불러오기 실패:", error);
-
         if (error.response?.status === 401) {
           localStorage.removeItem("accessToken");
           window.location.href = "/login";
@@ -66,8 +76,8 @@ const EmployeeMyInfo = () => {
       }
     };
 
-  fetchUserInfo();
-}, []);
+    fetchUserInfo();
+  }, []);
 
   return (
     <div className={styles.employeeMyInfo}>
@@ -76,17 +86,13 @@ const EmployeeMyInfo = () => {
         <div
           className={styles.titleEdit}
           onClick={() => {
-            if (isEditing) {
-              openModal("done");
-              console.log("수정 완료 버튼 클릭됨");
-            } else {
-              openModal("edit"); // 비밀번호 확인 모달 열기
-            }
+            isEditing ? openModal("done") : openModal("edit");
           }}
         >
           {isEditing ? "수정 완료" : "내 정보 수정하기"}
         </div>
       </div>
+
       <div className={styles.content}>
         <EditableField
           label="이름"
@@ -120,59 +126,89 @@ const EmployeeMyInfo = () => {
           isEditable={true}
           onClick={handleEditField}
         />
-       <EditableField
+        <EditableField
           label="근무 매장"
-          value={userInfo.storeNames.join(", ")} // 배열 처리
           fieldName="storeNames"
           isEditing={isEditing}
           isEditable={true}
           onClick={handleEditField}
-        />
+        >
+          <div className={styles.storeList}>
+            {userInfo.stores.map((store) => (
+              <div key={store.id} className={styles.storeItem}>
+                <span className={styles.storeName}>{store.name}</span>
+                {isEditing && (
+                  <span
+                    className={styles.manageButton}
+                    onClick={() => {
+                      console.log("🧩 매장 관리 클릭됨:", store);
+                      setStoreToDelete({ id: store.id, name: store.name });
+                    }}
+                  >
+                    매장 관리
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </EditableField>
       </div>
-      {/* activeModal이 "edit"일 때 EditModal 렌더링 */}
-      {activeModal === "edit" && <EditModal onClose={closeModal} onSuccess={() => setIsEditing(true)}/>}
-      {activeModal === "done" && <DoneModal onClose={closeModal} onSuccess={() => setIsEditing(false)}/>}
-       {isEditNameModalOpen && (
-      <EditNameModal
-        fullName={userInfo.fullName}
-        onClose={() => setIsEditNameModalOpen(false)}
-        onSave={(newFullName) => {
-          setUserInfo((prev) => ({ ...prev, fullName: newFullName }));
-          setIsEditNameModalOpen(false);
-        }}
-      />
-    )}
-    {isEditEmailModalOpen && (
-      <EditEmailModal
-        onClose={() => setIsEditEmailModalOpen(false)}
-        onSuccess={(email) => {
-          setUserInfo((prev) => ({ ...prev, email: email }));
-          setIsEditEmailModalOpen(false);
-        }}
-      />
-    )}
-    {isEditPasswordModalOpen && (
-      <EditPasswordModal
-        onClose={() => setIsEditPasswordModalOpen(false)}
-        onSuccess={() => {
-          setUserInfo((prev) => ({ ...prev, password:"********" }));
-          setIsEditPasswordModalOpen(false);
-        }}
-      />
-    )}
-
-    {/* {isEditStoreModalOpen && (
-      <EditStoreModal
-        storeNames={userInfo.storeNames}
-        onClose={() => setIsEditStoreModalOpen(false)}
-        onSave={(storeNames) => {
-          setUserInfo((prev) => ({ ...prev, storeNames }));
-          setIsEditStoreModalOpen(false);
-        }}
-      />
-    )} */}
 
+      {/* ✅ 모달들 */}
+      {activeModal === "edit" && (
+        <EditModal onClose={closeModal} onSuccess={() => setIsEditing(true)} />
+      )}
+      {activeModal === "done" && (
+        <DoneModal onClose={closeModal} onSuccess={() => setIsEditing(false)} />
+      )}
 
+      {isEditNameModalOpen && (
+        <EditNameModal
+          fullName={userInfo.fullName}
+          onClose={() => setIsEditNameModalOpen(false)}
+          onSave={(newFullName) => {
+            setUserInfo((prev) => ({ ...prev, fullName: newFullName }));
+            setIsEditNameModalOpen(false);
+          }}
+        />
+      )}
+
+      {isEditEmailModalOpen && (
+        <EditEmailModal
+          onClose={() => setIsEditEmailModalOpen(false)}
+          onSuccess={(email) => {
+            setUserInfo((prev) => ({ ...prev, email }));
+            setIsEditEmailModalOpen(false);
+          }}
+        />
+      )}
+
+      {isEditPasswordModalOpen && (
+        <EditPasswordModal
+          onClose={() => setIsEditPasswordModalOpen(false)}
+          onSuccess={() => {
+            setUserInfo((prev) => ({ ...prev, password: "********" }));
+            setIsEditPasswordModalOpen(false);
+          }}
+        />
+      )}
+
+      {/* ✅ 삭제 모달 */}
+      {storeToDelete && (
+        <DeleteStoreModal
+          storeId={storeToDelete.id}
+          storeName={storeToDelete.name}
+          onClose={() => setStoreToDelete(null)}
+          onSuccess={() => {
+            setUserInfo((prev) => ({
+              ...prev,
+              stores: prev.stores.filter((s) => s.id !== storeToDelete.id),
+            }));
+            setStoreToDelete(null);
+            // ❌ setIsEditing(false) 제거 => 수정모드 유지!
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/contexts/EmployeeScheduleContext.tsx b/src/contexts/EmployeeScheduleContext.tsx
index 5416bda..d776030 100644
--- a/src/contexts/EmployeeScheduleContext.tsx
+++ b/src/contexts/EmployeeScheduleContext.tsx
@@ -22,11 +22,17 @@ interface EmployeeSchedule {
 }
 
 interface Store {
+    id: number | null;
     storeId: number;
-    name: string;
     storeCode: string;
+    businessNumber: string | null;
+    name: string;
+    location: string;
+    requireApproval: boolean | null;
+    createdAt: string;
 }
 
+
 /* 공유할 context type */
 interface EmployeeScheduleContextType {
     stores: Store[]; // 전체 매장 목록 -> 나중에 사용자 따라서 다른 걸 받아오도록 해야 됨!
@@ -64,6 +70,7 @@ interface EmployeeScheduleContextType {
     selectedName: string;
     setSelectedName: React.Dispatch<React.SetStateAction<string>>;
     otherGroupMembers: { userId: number; name: string }[];
+    refetchStores: () => Promise<void>; // ✅ 이 줄 추가!
 }
 
 const EmployeeScheduleContext = createContext<
@@ -92,51 +99,43 @@ export const EmployeeScheduleProvider = ({
 
     // console.log("selectedName: ", selectedName);
 
-    // DB에서 가게 목록 가져오기 (axios로 변경)
-    useEffect(() => {
-        const fetchStores = async () => {
-            try {
-                if (token) {
-                    // axios 요청 헤더에 토큰을 추가합니다.
-                    const res = await axiosInstance.get(
-                        "http://43.200.176.79:8080/store/me",
-                        {
-                            headers: {
-                                Authorization: `Bearer ${token}`, // Authorization 헤더에 Bearer 토큰 추가
-                            },
-                        }
-                    );
-                    const data = res.data;
-
-                    // console.log("받아온 데이터: ", data);
-
-                    if (!data) {
-                        console.error("가게 목록 데이터가 없습니다.");
-                        return;
+    const fetchStores = async () => {
+        try {
+            if (token) {
+                const res = await axiosInstance.get(
+                    "http://43.200.176.79:8080/store/me",
+                    {
+                        headers: {
+                            Authorization: `Bearer ${token}`,
+                        },
                     }
+                );
+                const data = res.data;
+                
+                console.log("📦 불러온 매장 데이터:", data); // ✅ 이 줄 추가
 
-                    const filteredStores = data.map((store: Store) => ({
-                        storeId: store.storeId,
-                        name: store.name,
-                        storeCode: store.storeCode,
-                    }));
+                if (!data) {
+                    console.error("가게 목록 데이터가 없습니다.");
+                    return;
+                }
 
-                    setStores(filteredStores);
-                    if (filteredStores.length > 0) {
-                        setSelectedStore(filteredStores[0].storeId);
-                    }
-                } else {
-                    console.error("토큰이 없습니다. 인증을 확인하세요.");
-                    // 인증 절차를 여기에 추가할 수 있습니다.
+                setStores(data); // ✅ 전체 저장
+                if (data.length > 0) {
+                    setSelectedStore(data[0].storeId); // ✅ 첫 가게 자동 선택
                 }
-            } catch (error) {
-                console.error("가게 목록을 불러오는 데 실패했습니다.", error);
+            } else {
+                console.error("토큰이 없습니다. 인증을 확인하세요.");
             }
-        };
-
+        } catch (error) {
+            console.error("가게 목록을 불러오는 데 실패했습니다.", error);
+        }
+    };
+    // DB에서 가게 목록 가져오기 (axios로 변경)
+    useEffect(() => {
         fetchStores();
     }, [token]);
 
+
     // 가게 선택할 때마다 스케줄 다르게 불러오기 (axios로 변경)
     useEffect(() => {
         const fetchSchedules = async () => {
@@ -459,6 +458,7 @@ export const EmployeeScheduleProvider = ({
                 selectedName,
                 setSelectedName,
                 otherGroupMembers,
+                refetchStores: fetchStores, // ✅ 이 한 줄 추가!
             }}>
             {children}
         </EmployeeScheduleContext.Provider>
diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx
index 84a7a96..6d40145 100644
--- a/src/contexts/ModalContext.tsx
+++ b/src/contexts/ModalContext.tsx
@@ -1,18 +1,18 @@
 import { createContext, useContext, useState, ReactNode } from "react";
 
-type ModalType = "alarm" | "albaAdd" | "request" | "edit";
+type ModalType = "alarm" | "albaAdd" | "request" | "edit" | "done" | "scheduleAdd";
 
 // 모달 컨텍스트 생성
 interface ModalContextType {
 
   /* 열 때 어떤 모달창인지 타입 명시 */
   openModal: (
-    modal: "alarm" | "albaAdd" | "request" | "edit" | "done",
+    modal: "alarm" | "albaAdd" | "request" | "edit" | "done" | "scheduleAdd",
     data?: any
   ) => void;
   closeModal: () => void;
   /* 활성화 된 타입 */
-  activeModal: "alarm" | "albaAdd" | "request" | "edit" | "done" | null;
+  activeModal: "alarm" | "albaAdd" | "request" | "edit" | "done" | "scheduleAdd" | null;
   /* 전달된 데이터를 저장할 변수 */
   modalData: any;
 
@@ -23,12 +23,12 @@ const ModalContext = createContext<ModalContextType | undefined>(undefined);
 export const ModalProvider = ({ children }: { children: ReactNode }) => {
 
   const [activeModal, setActiveModal] = useState<
-    "alarm" | "albaAdd" | "request" | "edit" | "done" |null
+    "alarm" | "albaAdd" | "request" | "edit" | "done" | "scheduleAdd" |null
   >(null);
   const [modalData, setModalData] = useState<any>(null); // 데이터 저장
 
   const openModal = (
-    modal: "alarm" | "albaAdd" | "request" | "edit" | "done",
+    modal: "alarm" | "albaAdd" | "request" | "edit" | "done" | "scheduleAdd" ,
     data?: any
   ) => {
     setActiveModal(modal);
diff --git a/src/utils/timeFormat.ts b/src/utils/timeFormat.ts
new file mode 100644
index 0000000..c6e99dd
--- /dev/null
+++ b/src/utils/timeFormat.ts
@@ -0,0 +1,34 @@
+// utils/timeFormat.ts
+
+/**
+ * 시간 객체 (hour, minute)를 "HH:MM" 문자열로 변환
+ * 잘못된 값이 들어오면 "시간 정보 없음" 반환
+ */
+export const formatTime = (
+  time: { hour?: number; minute?: number } | null | undefined
+): string => {
+  if (!time || typeof time.hour !== "number" || typeof time.minute !== "number") {
+    return "시간 정보 없음"; // 또는 "-"
+  }
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return `${pad(time.hour)}:${pad(time.minute)}`;
+};
+
+// string 또는 객체 모두 처리 가능한 함수
+export const formatTimeFlexible = (time: any): string => {
+  if (!time) return "시간 정보 없음";
+
+  // 문자열일 경우: "HH:mm:ss"
+  if (typeof time === "string") {
+    const [hour, minute] = time.split(":");
+    return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+  }
+
+  // 객체일 경우: { hour, minute }
+  if (typeof time === "object" && "hour" in time && "minute" in time) {
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    return `${pad(time.hour)}:${pad(time.minute)}`;
+  }
+
+  return "시간 정보 없음";
+};