+
+
+
+ setIsAllChecked(check)}
+ loading={userYearlySchedulesLoading}
+ />
+
+
+
+
+
+
+
+
+
+ {year}년 {month}월
+
+
+
+
+
+
+
+ {userYearlySchedulesLoading ? (
+
+
+ );
+}
diff --git a/src/page/home/home.tsx b/src/page/home/home.tsx
new file mode 100644
index 00000000..57c07063
--- /dev/null
+++ b/src/page/home/home.tsx
@@ -0,0 +1,405 @@
+import { AccessTokenAtom } from '@/recoil/AccessTokkenAtom';
+import {
+ DatePicker,
+ Layout,
+ Modal,
+ Button,
+ Select,
+ Space,
+ message,
+} from 'antd';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import Sider from 'antd/es/layout/Sider';
+import { Content } from 'antd/es/layout/layout';
+import { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import Calendar from './calendar';
+import Signin from '@/page/home/signin';
+import { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
+import { addScheduleRequest } from '@/api/mySchedule';
+import MySchedule from '@/page/home/mySchedule';
+import { DUTY_ANNUAL } from '@/data/constants';
+import { ReRenderStateAtom } from '@/recoil/ReRenderStateAtom';
+import { scheduleList } from '@/api/home/scheduleList';
+import { UserEmailAtom } from '@/recoil/UserEmailAtom';
+import { pendingList } from '@/api/home/pendingList';
+
+const { RangePicker } = DatePicker;
+
+export interface ScheduleItem {
+ userEmail: string;
+ userName: string;
+ scheduleType: string;
+ startDate: string;
+ endDate: string;
+ state: string;
+ color: string;
+}
+
+interface mySchedule extends ScheduleItem {
+ id: number;
+}
+
+export default function Home() {
+ // antd message(화면 상단에 뜨는 메세지)기능
+
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const [year, setYear] = useState(new Date().getFullYear());
+ // const {
+ // token: { colorTextLabel },
+ // } = theme.useToken();
+
+ const accessToken = useRecoilValue(AccessTokenAtom);
+
+ const [isModalOpen, setIsModalOpen] = useState
+
+
+ {scheduleInput.scheduleType === 'ANNUAL' ? (
+
+
+
+
+
+
+
+ {contextHolder}
+
+
+ );
+}
diff --git a/src/page/myAccount/admin/adminLayout.tsx b/src/page/myAccount/admin/adminLayout.tsx
new file mode 100644
index 00000000..138c2457
--- /dev/null
+++ b/src/page/myAccount/admin/adminLayout.tsx
@@ -0,0 +1,32 @@
+import { ArrowUpOutlined, CheckOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+
+export default function AdminLayout() {
+ const navigate = useNavigate();
+
+ const { pathname } = useLocation();
+
+ const items: MenuProps['items'] = [
+ {
+ label: '연차 / 당직 승인',
+ key: '/myaccount/approve',
+ icon:
+ {uploadLoading ?
+ );
+
+ return (
+ Upload
+
+ {contextHolder}
+
+
+ {myAccountInfo.userName}
+
+
+ {myAccountInfo.userEmail}
+
+
+
+ 전화번호
+ {editPhoneNumber ? (
+ {
+ setEditPhoneNumber(false);
+ setEditPhonNumberInput(myAccountInfo.phoneNumber);
+ }}
+ />
+ ) : (
+ {
+ setEditPhoneNumber(true);
+ }}
+ style={{ marginLeft: 5, fontSize: 15 }}
+ className="icons"
+ />
+ )}
+
+ }
+ >
+ {editPhoneNumber ? (
+ <>
+
+ setEditPhonNumberInput(e.target.value)}
+ />
+
+
+
+ ) : (
+ <>{formatPhoneNumber(myAccountInfo.phoneNumber)}
+ )}
+
+
+
+
+
+ {myAccountInfo.usedVacation}일
+
+
+ {POSITIONS[myAccountInfo.position]?.total_vacation}일
+
+
+
+ 사진
+ {editprofileThumbUrl ? (
+ {
+ setEditProfileThumbUrl(false);
+ setEditPhonNumberInput(myAccountInfo.phoneNumber);
+ }}
+ />
+ ) : (
+ {
+ setEditProfileThumbUrl(true);
+ setimgUrl('');
+ }}
+ style={{ marginLeft: 5, fontSize: 15 }}
+ className="icons"
+ />
+ )}
+
+ }
+ >
+ {editprofileThumbUrl ? (
+ <>
+
+
+ ) : (
+ <>
+
+
+
+
+
+ );
+}
diff --git a/src/page/myAccount/myAccoutLayout.tsx b/src/page/myAccount/myAccoutLayout.tsx
new file mode 100644
index 00000000..1ed27bc5
--- /dev/null
+++ b/src/page/myAccount/myAccoutLayout.tsx
@@ -0,0 +1,97 @@
+import { Layout, Menu, MenuProps } from 'antd';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { IsManagerAtom } from '@/recoil/IsManagerAtom';
+const { Content, Sider } = Layout;
+
+export default function MyAccountLayout() {
+ const { pathname } = useLocation();
+
+ const MY_ACCOUNT_MENU: {
+ [key: string]: { key: string };
+ } = {
+ '/myaccount': {
+ key: '1',
+ },
+ '/myaccount/vacation': {
+ key: '2',
+ },
+ '/myaccount/approve': {
+ key: '3',
+ },
+ '/myaccount/promote': {
+ key: '3',
+ },
+ };
+
+ const [selectedMenuKey, setSelectedMenuKey] = useState(
+ MY_ACCOUNT_MENU[pathname].key,
+ );
+
+ const navigate = useNavigate();
+
+ // 현재 접속중인 url의 뒷부분을 가져옴
+ const isManager = useRecoilValue(IsManagerAtom);
+
+ const items: MenuProps['items'] = [
+ {
+ key: '1',
+ label: '내 정보',
+ onClick: () => {
+ navigate('/myaccount');
+ setSelectedMenuKey('1');
+ },
+ },
+ {
+ key: '2',
+ label: '내 연차/당직',
+ onClick: () => {
+ navigate('/myaccount/vacation');
+ setSelectedMenuKey('2');
+ },
+ },
+ {
+ key: '3',
+ label: '관리자',
+ onClick: () => {
+ navigate('/myaccount/approve');
+ setSelectedMenuKey('3');
+ },
+ },
+ ];
+
+ return (
+
+
+
+ ) : (
+ // 인증 번호 입력 창과 제출 버튼
+
+
+
+
+ )}
+
+
+ )
+ ) : (
+ 남은 시간: {timer}초
+ 
+ ) : (
+
+
+ )}
+ Upload
+
+ {contextHolder}
+
+
+
+ );
+}
diff --git a/src/page/signup/signupForm.tsx b/src/page/signup/signupForm.tsx
new file mode 100644
index 00000000..1fb7e651
--- /dev/null
+++ b/src/page/signup/signupForm.tsx
@@ -0,0 +1,230 @@
+import { useState } from 'react';
+import { Button, Input, Form } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { handleUpload } from '@/api/auth/cloudinary';
+import { signup } from '@/api/auth/signup';
+import { useSetRecoilState } from 'recoil';
+import { AccessTokenAtom } from '@/recoil/AccessTokkenAtom';
+import { setAccessTokenToCookie } from '@/utils/cookies';
+import ButtonGroup from 'antd/es/button/button-group';
+import Email from './EmailChecked/email';
+import EmailValidation from './EmailValidation/emailValidation';
+import PasswordValidation from './PasswordValidation/passwordValidation';
+import ProfileImg from './ProfileImageUrl/profileImg';
+import SelectPosition from './SelectPostion/selectPosition';
+import {
+ IsEmailCheckAtom,
+ ResendAtom,
+ EmailVerifiedAtom,
+ VerificationAtom,
+} from '@/recoil/EmailRecoil';
+
+interface valuseType {
+ confirm_password: string;
+ phone: string;
+ position: string;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ profileThumbUrl: any;
+ userEmail: string;
+ userPassword: string;
+ userName: string;
+}
+
+export interface SignupFormProps {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ messageApi: any;
+}
+
+export default function SignupForm({ messageApi }: SignupFormProps) {
+ // 회원가입 통신 과정 로딩 ui
+ const [isSigningUp, setIsSigningUp] = useState(false);
+
+ const [form] = Form.useForm();
+
+ const setAccessToken = useSetRecoilState(AccessTokenAtom);
+ const navigate = useNavigate();
+
+ const setIsEmailCheck = useSetRecoilState(IsEmailCheckAtom);
+ const setReSend = useSetRecoilState(ResendAtom);
+ const setEmailVerified = useSetRecoilState(EmailVerifiedAtom);
+ const setVerification = useSetRecoilState(VerificationAtom);
+
+ const onFinish = async (values: valuseType) => {
+ // 클라우디너리로 전송한 이미지 url 가져옴
+ const imageUrl = await getImageUrl(values);
+
+ // 가져온 이미지 url만 profileThumbUrl에 전달하기 위해서
+ // values객체를 전개연산자를 이용해서 newValues에 모든 속성을 복사하고,
+ // profileThumbUrl: imageUrl을 마지막에 사용해서 덮어 씌움
+ const newValues = {
+ ...values,
+ profileThumbUrl: imageUrl,
+ };
+
+ setIsSigningUp(true);
+ try {
+ const response = await signup(newValues);
+
+ // 로그인 성공
+ if (response.status === 200) {
+ const { accessToken } = response.data.response;
+
+ // 쿠키에 저장
+ setAccessTokenToCookie(accessToken);
+
+ // recoil에 저장
+ setAccessToken(accessToken);
+
+ // 안내메시지
+ messageApi.open({
+ type: 'success',
+ content: '회원가입이 완료되었습니다.',
+ });
+
+ // 회원가입이 성공한 경우 홈으로 이동
+ setTimeout(() => {
+ navigate('/');
+ }, 1000);
+
+ return;
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } catch (error: any) {
+ messageApi.open({
+ type: 'error',
+ content:
+ error.response?.data.error.message ||
+ '회원가입에 실패하였습니다. 관리자에게 문의하세요.',
+ });
+ } finally {
+ setIsSigningUp(false);
+ }
+ };
+
+ // cloudinary를 이용해서 이미지url이 없으면 null, 있으면 이미지url을 반환
+ const getImageUrl = async (values: valuseType) => {
+ let imageUrl = null;
+
+ try {
+ if (values.profileThumbUrl && values.profileThumbUrl.length > 0) {
+ const response = await handleUpload(
+ values.profileThumbUrl[0].originFileObj,
+ );
+ if (response?.status === 200) {
+ const data = response.data;
+ imageUrl = data.url; // 이미지 URL을 받아옴
+ } else {
+ throw new Error('이미지 업로드에 실패하였습니다.');
+ }
+ }
+ } catch (error) {
+ console.error('이미지 업로드중 오류 발생:', error);
+ imageUrl = null; // 오류가 발생했으므로 imageUrl을 null로 설정
+ }
+
+ return imageUrl;
+ };
+
+ const goHomeAndResetForm = () => {
+ // 홈으로 이동
+ navigate('/');
+ setIsEmailCheck(false);
+ setEmailVerified(false);
+ setVerification(false);
+ setReSend(false);
+
+ // Form의 값을 초기화
+ form.resetFields();
+ };
+
+ return (
+ <>
+
+
+ );
+}
diff --git a/src/recoil/AccessTokkenAtom.ts b/src/recoil/AccessTokkenAtom.ts
new file mode 100644
index 00000000..a888a124
--- /dev/null
+++ b/src/recoil/AccessTokkenAtom.ts
@@ -0,0 +1,7 @@
+import { getAccessTokenFromCookie } from '@/utils/cookies';
+import { atom } from 'recoil';
+
+export const AccessTokenAtom = atom({
+ key: 'AccessToken',
+ default: getAccessTokenFromCookie(),
+});
diff --git a/src/recoil/EmailRecoil.ts b/src/recoil/EmailRecoil.ts
new file mode 100644
index 00000000..84c61162
--- /dev/null
+++ b/src/recoil/EmailRecoil.ts
@@ -0,0 +1,31 @@
+import { atom } from 'recoil';
+
+export const IsEmailCheckAtom = atom({
+ key: 'IsEmailCheckAtom',
+ default: false,
+});
+
+export const IsLoadingAtom = atom({
+ key: 'IsLoadingAtom',
+ default: false,
+});
+
+export const ResendAtom = atom({
+ key: 'ResendAtom',
+ default: false,
+});
+
+export const EmailVerifiedAtom = atom({
+ key: 'EmailVerifiedAtom',
+ default: false,
+});
+
+export const TimerAtom = atom({
+ key: 'TimerAtom',
+ default: 0,
+});
+
+export const VerificationAtom = atom({
+ key: 'VerificationAtom ',
+ default: false,
+});
diff --git a/src/recoil/ImgUrlAtom.ts b/src/recoil/ImgUrlAtom.ts
new file mode 100644
index 00000000..9dd717bd
--- /dev/null
+++ b/src/recoil/ImgUrlAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const ImgUrlAtom = atom({
+ key: 'ImgUrlAtom',
+ default: '',
+});
diff --git a/src/recoil/IsManagerAtom.ts b/src/recoil/IsManagerAtom.ts
new file mode 100644
index 00000000..ca1c4d5a
--- /dev/null
+++ b/src/recoil/IsManagerAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const IsManagerAtom = atom({
+ key: 'IsManagerAtom',
+ default: false,
+});
diff --git a/src/recoil/ReRenderStateAtom.ts b/src/recoil/ReRenderStateAtom.ts
new file mode 100644
index 00000000..0a650f7e
--- /dev/null
+++ b/src/recoil/ReRenderStateAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const ReRenderStateAtom = atom({
+ key: 'ReRenderStateAtom',
+ default: false,
+});
diff --git a/src/recoil/UserEmailAtom.ts b/src/recoil/UserEmailAtom.ts
new file mode 100644
index 00000000..e193ee48
--- /dev/null
+++ b/src/recoil/UserEmailAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const UserEmailAtom = atom({
+ key: 'UserEmailAtom',
+ default: '',
+});
diff --git a/src/types/IMySchdule.ts b/src/types/IMySchdule.ts
new file mode 100644
index 00000000..cc0486f8
--- /dev/null
+++ b/src/types/IMySchdule.ts
@@ -0,0 +1,8 @@
+export interface IMySchedule {
+ id: number;
+ key: number;
+ scheduleType: 'ANNUAL' | 'DUTY';
+ startDate: string;
+ endDate: string;
+ state: 'REJECT' | 'APPROVE' | 'PENDING';
+}
diff --git a/src/utils/cookies.ts b/src/utils/cookies.ts
new file mode 100644
index 00000000..09f253f7
--- /dev/null
+++ b/src/utils/cookies.ts
@@ -0,0 +1,27 @@
+export const deleteAccessTokenFromCookie = () => {
+ const date = new Date();
+ // 쿠키는 따로 삭제 방법이 있지 않고 만료시간을 현재로 줘서 자동적으로 삭제되게
+ const expires = 'expires=' + date.toUTCString();
+ const cookieString = `accessToken=; ${expires}; path=/`;
+ document.cookie = cookieString;
+};
+
+export const getAccessTokenFromCookie = () => {
+ // 쿠키에 accessToken 있으면 가져오고 없으면 null
+ const cookie = document.cookie
+ .split('; ')
+ .find((cookie) => cookie.split('=')[0] === 'accessToken');
+ return cookie ? cookie.split('=')[1] : null;
+};
+
+export const setAccessTokenToCookie = (accessToken: string) => {
+ const date = new Date();
+
+ // 30분 추가
+ date.setTime(date.getTime() + 30 * 60 * 1000);
+ const expires = 'expires=' + date.toUTCString();
+
+ // 쿠키에 accessToke, 만료시간, path지정
+ const cookieString = `accessToken=${accessToken}; ${expires}; path=/`;
+ document.cookie = cookieString;
+};
diff --git a/src/utils/formatPhonenumber.ts b/src/utils/formatPhonenumber.ts
new file mode 100644
index 00000000..2cb5f77a
--- /dev/null
+++ b/src/utils/formatPhonenumber.ts
@@ -0,0 +1,6 @@
+export default function formatPhoneNumber(phoneNumber: string) {
+ return `${phoneNumber.substring(0, 3)}-${phoneNumber.substring(
+ 3,
+ 7,
+ )}-${phoneNumber.substring(7)}`;
+}
diff --git a/src/utils/getPayloadFromJWT.ts b/src/utils/getPayloadFromJWT.ts
new file mode 100644
index 00000000..204d03bb
--- /dev/null
+++ b/src/utils/getPayloadFromJWT.ts
@@ -0,0 +1,13 @@
+export default function getPayloadFromJWT(jwt: string | null) {
+ // jwt가 없으면 payload도 없는거니깐 undefined return
+ if (!jwt) {
+ return undefined;
+ }
+ // payload부분 base64 decoding하는 로직, jwt관련 외부 라이브러리 사용할 필요 없음
+ const payload = jwt.split('.')[1];
+ const base64 = payload.replace(/_/g, '/').replace(/-/g, '+');
+ const padding = '='.repeat((4 - (base64.length % 4)) % 4);
+ const decodedPayload = atob(base64 + padding);
+ const payloadObject = JSON.parse(decodedPayload);
+ return payloadObject;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///