diff --git a/src/pages/alba/inAlba/AlbaReplace.js b/src/pages/alba/inAlba/AlbaReplace.js
new file mode 100644
index 0000000..7540a5e
--- /dev/null
+++ b/src/pages/alba/inAlba/AlbaReplace.js
@@ -0,0 +1,65 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useState } from "react";
+
+import HeaderAlba from "components/HeaderAlba";
+import LeftMenuAlba from "components/LeftMenuAlba";
+import "../../../style/alba/albaReplace.scss";
+
+const AlbaReplace = () => {
+ const dispatch = useDispatch();
+
+ const navigate = useNavigate();
+ const { id } = useParams();
+
+ const location = useLocation();
+ const alba_replace = useSelector((state) => state.alba_replace);
+
+ return (
+
+
+
+
+
+
+
대타 기록
+
+
+
+ {alba_replace.map((it) => (
+
+
+
+
+ {it.userName}
+
+
+
+ {it.replaceUser}
+
+
+
+ {it.checkDate}
+
+ {it.startTime}
+ {"-"}
+ {it.endTime}
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default AlbaReplace;
diff --git a/src/pages/alba/inAlba/AlbaReplaceForm.js b/src/pages/alba/inAlba/AlbaReplaceForm.js
new file mode 100644
index 0000000..402962f
--- /dev/null
+++ b/src/pages/alba/inAlba/AlbaReplaceForm.js
@@ -0,0 +1,157 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useState, useRef } from "react";
+import HeaderAlba from "components/HeaderAlba";
+import LeftMenuAlba from "components/LeftMenuAlba";
+import "../../../style/alba/albaReplace.scss";
+import { addReplace } from "../../../redux-toolkit/albaModule/AlbaReplaceSlice";
+
+const AlbaReplaceForm = () => {
+ const [info, setInfo] = useState({
+ userName: "김민규",
+ replaceUser: "",
+ startTime: "",
+ endTime: "",
+ checkDate: "",
+ });
+
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { id } = useParams();
+
+ const alba_replace = useSelector((state) => state.alba_replace);
+
+ const inputRefs = {
+ replaceUserInput: useRef(),
+ startTimeInput: useRef(),
+ endTimeInput: useRef(),
+ checkDateInput: useRef(),
+ };
+
+ // const startHandleChange = (e) => {
+ // const inputTime = e.target.value;
+ // // 시간 유효성 검사 등을 수행할 수 있습니다.
+
+ // console.log(inputTime);
+ // setInfo(inputTime);
+ // };
+ const userHandleChange = (e) => {
+ {
+ setInfo((prevInfo) => ({
+ ...prevInfo,
+ [e.target.name]: e.target.value,
+ }));
+ }
+ };
+
+ // const startHandleChange = (e) => {
+ // const inputTime = e.target.value;
+ // setInfo((prevInfo) => ({
+ // ...prevInfo,
+ // startTime: inputTime,
+ // }));
+ // };
+
+ // const endHandleChange = (e) => {
+ // const inputTime = e.target.value;
+ // setInfo((prevInfo) => ({
+ // ...prevInfo,
+ // endTime: inputTime,
+ // }));
+ // };
+
+ // const dateHandleChange = (e) => {
+ // const inputTime = e.target.value;
+ // setInfo((prevInfo) => ({
+ // ...prevInfo,
+ // checkDate: inputTime,
+ // }));
+ // console.log({ info });
+ // };
+
+ const onClickSave = () => {
+ if (info.replaceUser === "") {
+ inputRefs.replaceUserInput.current.focus();
+ } else if (info.startTime === "") {
+ inputRefs.startTimeInput.current.focus();
+ } else if (info.endTime === "") {
+ inputRefs.endTimeInput.current.focus();
+ } else if (info.checkDate === "") {
+ inputRefs.checkDateInput.current.focus();
+ } else {
+ dispatch(addReplace(info));
+ console.log({ info });
+ navigate(`/alba_main/${id}/replace`);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default AlbaReplaceForm;
diff --git a/src/pages/company/inCompany/CompanyInviteContract.js b/src/pages/company/inCompany/CompanyInviteContract.js
new file mode 100644
index 0000000..c810631
--- /dev/null
+++ b/src/pages/company/inCompany/CompanyInviteContract.js
@@ -0,0 +1,194 @@
+import { useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import { useState } from "react";
+
+import Header from "components/Header";
+import LeftMenuCeo from "components/LeftMenuCeo";
+
+import "../../../style/company/companyAlba.scss";
+
+const CompanyInviteContract = (props) => {
+ const navigate = useNavigate();
+ const { id } = useParams();
+ const [alba, setAlba] = useState("______");
+ const [store, setStore] = useState("______");
+ const [workDateStart, setWorkDateStart] = useState("2022년 12월 12일");
+ const [workDateEnd, setWorkDateEnd] = useState("2024년 12월 11일");
+ const [address, setAddress] = useState(
+ " 경기도 부천시 역곡동 역곡로 130번길 24 "
+ );
+ const [workWeek, setWorkWeek] = useState({
+ monday: false,
+ tuesday: true,
+ wednesday: false,
+ thursday: true,
+ friday: false,
+ saturday: false,
+ sunday: false,
+ });
+ const [workTime, setWorkTime] = useState(" 09:00 - 18:00 ");
+ const [pay, setPay] = useState("9500");
+
+ const albalist = useSelector((state) => state.albalist);
+
+ const handleCheckboxChange = (e) => {
+ const { name, checked } = e.target;
+ setWorkWeek((prevState) => ({ ...prevState, [name]: checked }));
+ };
+
+ return (
+
+
+
+
+
+
+
계약정보 조회
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CompanyInviteContract;
diff --git a/src/redux-toolkit/albaModule/AlbaReplaceSlice.js b/src/redux-toolkit/albaModule/AlbaReplaceSlice.js
new file mode 100644
index 0000000..f3e0546
--- /dev/null
+++ b/src/redux-toolkit/albaModule/AlbaReplaceSlice.js
@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const AlbaReplaceSlice = createSlice({
+ name: "alba_replace",
+ initialState: [
+ {
+ userName: "김민규",
+ replaceUser: "김정환",
+ startTime: "08:00",
+ endTime: "13:30",
+ checkDate: "2023-06-02",
+ },
+ {
+ userName: "김민규",
+ replaceUser: "김정환",
+ startTime: "08:00",
+ endTime: "13:30",
+ checkDate: "2023-06-02",
+ },
+ {
+ userName: "김민규",
+ replaceUser: "김정환",
+ startTime: "08:00",
+ endTime: "13:30",
+ checkDate: "2023-06-02",
+ },
+ ],
+ reducers: {
+ addReplace: (state, action) => {
+ const nextId = state.length;
+ state.push({ ...action.payload });
+ },
+ },
+});
+
+export const { addReplace } = AlbaReplaceSlice.actions;
+
+export default AlbaReplaceSlice.reducer;
diff --git a/src/redux-toolkit/store.js b/src/redux-toolkit/store.js
index 99e41ee..6435c8c 100644
--- a/src/redux-toolkit/store.js
+++ b/src/redux-toolkit/store.js
@@ -7,6 +7,7 @@ import { albaCompanyListSlice } from "./albaModule/AlbaCompanyListReducer";
import { AlbaContractSlice } from "./albaModule/AlbaContractSlice";
import { AlbaRecordListSlice } from "./albaModule/AlbaRecordListSlice";
import { AlbaAttendance } from "./albaModule/AlbaAttendance";
+import { AlbaReplaceSlice } from "./albaModule/AlbaReplaceSlice";
import { albaWaitListSlice } from "./albaModule/AlbaWaitListSlice";
const store = configureStore({
@@ -18,6 +19,7 @@ const store = configureStore({
alba_contract: AlbaContractSlice.reducer,
alba_record: AlbaRecordListSlice.reducer,
alba_attendance: AlbaAttendance.reducer,
+ alba_replace: AlbaReplaceSlice.reducer,
alba_waitlist: albaWaitListSlice.reducer,
},
});
diff --git a/src/style/alba/albaReplace.scss b/src/style/alba/albaReplace.scss
new file mode 100644
index 0000000..bd7ec74
--- /dev/null
+++ b/src/style/alba/albaReplace.scss
@@ -0,0 +1,212 @@
+//중복 값 처리
+// 박스 둥굴게 글씨 하얀색
+%bluck_type {
+ border-radius: 50px;
+ border: none;
+ color: #ffffff;
+}
+
+%inputBox {
+ padding: 10px 12px;
+ border: 1px solid #d2d2d2;
+ border-radius: 10px;
+ font-size: 1rem;
+ background-color: #f5f5f5;
+
+ &:focus {
+ outline: none;
+ border-color: #9e30f4;
+ box-shadow: 0 0 1px #9e30f4;
+ }
+
+ &::placeholder {
+ color: #a6a6a6;
+ font-size: 14px;
+ }
+}
+
+.Alba-Wrapper {
+ [type="date"] {
+ @extend %inputBox;
+ cursor: pointer;
+ width: 300px;
+ }
+ display: flex;
+ .list-Wrapper {
+ width: 80vw;
+ .title {
+ display: flex;
+ height: 80px;
+
+ align-items: center;
+ border-bottom: 4px solid #9db5fd;
+ margin-left: 20px;
+ p {
+ color: #000000;
+ font-size: 36px;
+ font-weight: 700;
+ }
+ .btn_record {
+ width: 160px;
+ height: 50px;
+ background: #4a52ff;
+ @extend %bluck_type;
+ margin: 20px;
+ font-size: 20px;
+ }
+ }
+
+ .list {
+ display: inline-block;
+ width: 100%;
+ .company_one {
+ margin: 20px;
+ display: flex;
+ justify-content: center;
+
+ .company_img {
+ width: 200px;
+ height: 100px;
+ }
+
+ .company_one_right {
+ display: flex;
+ background: rgba(17, 26, 215, 0.05);
+ opacity: 0.9;
+ border-radius: 20px;
+ width: 60vw;
+ height: 100px;
+ font-size: 22px;
+
+ flex-direction: row;
+ .company_set {
+ width: 200px;
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+ margin-right: 30px;
+ }
+ .company_set_time {
+ width: 350px;
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+ margin-right: 30px;
+ }
+
+ label {
+ display: inline-block;
+ font-weight: 700;
+ width: 120px;
+ }
+ }
+ .company_one_btn {
+ display: flex;
+ flex-direction: column;
+ width: 80px;
+
+ .in {
+ height: 100%;
+ margin: 5px;
+ background: #4a52ff;
+ @extend %bluck_type;
+ font-size: 18px;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ .form-Wrapper {
+ margin-top: 30px;
+ height: 400px;
+ display: flex;
+ flex-direction: column; /* 요소들을 수직으로 배치 */
+
+ justify-content: flex-start; /* 수직 시작 위치 */
+ align-items: center; /* 수평 가운데 위치 */
+ .line {
+ width: 600px;
+ height: 30px;
+ margin: 16px;
+
+ label {
+ display: inline-block;
+ font-weight: 700;
+ width: 90px;
+ }
+ .input_box {
+ width: 300px;
+ @extend %inputBox;
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+
+ .time {
+ width: 120px;
+ @extend %inputBox;
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+ }
+ .btn_record {
+ width: 160px;
+ height: 50px;
+ background: #4a52ff;
+ @extend %bluck_type;
+ margin: 20px;
+ font-size: 20px;
+ }
+ }
+ .listCheck {
+ display: inline-block;
+ width: 100%;
+ .company_one {
+ margin: 20px;
+ display: flex;
+ justify-content: center;
+
+ .company_img {
+ width: 200px;
+ height: 150px;
+ }
+
+ .company_one_right {
+ display: flex;
+ background: rgba(17, 26, 215, 0.05);
+ opacity: 0.9;
+ border-radius: 20px;
+ width: 60vw;
+ height: 460px;
+ font-size: 20px;
+ // justify-content: center;
+ flex-direction: column;
+ .company_set {
+ display: flex;
+ }
+
+ label {
+ display: inline-block;
+ font-weight: 700;
+ width: 130px;
+ }
+ }
+ .company_one_btn {
+ display: flex;
+ flex-direction: column;
+ width: 80px;
+
+ .in {
+ height: 100%;
+ margin: 5px;
+ background: #4a52ff;
+ @extend %bluck_type;
+ font-size: 18px;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/style/company/companyAlba.scss b/src/style/company/companyAlba.scss
index ab41155..4117776 100644
--- a/src/style/company/companyAlba.scss
+++ b/src/style/company/companyAlba.scss
@@ -51,6 +51,16 @@
margin: 20px;
}
}
+ .cc {
+ text-align: center;
+ .invite-btn {
+ width: 100px;
+ height: 50px;
+ background: #4a52ff;
+ @extend %bluck_type;
+ margin: 20px;
+ }
+ }
.list-Wrapper {
width: 100%;