🏢 LUPIN 일정관리 프로그램 (FE)

💁🏻 프로젝트 소개

LUPIN 일정관리 프로그램으로 LUPINTECH 회사 사원들의 연차 / 당직을 손쉽게 관리해보세요!

⏰ 개발 기간

• 2023.04.27 ~ 2023. 05. 16

🔗 배포 사이트

• 💻 LUPIN 일정관리 프로그램 💻

👥 팀원 소개

유선주(팀장)	박현준(팀원)	송지윤(팀원)	이승용(팀원)	표승연(팀원)
@yousunzoo	@johnphjkr	@jiyoon29	@yong8048	@pyozz
📍사이트 디자인 📍프로젝트 세팅 및 배포 📍연차/당직 신청 페이지 📍실시간 알람 기능	📍프로필 수정 페이지 📍사원 및 사원 연차 관리 페이지	📍기본 레이아웃 설정 📍네비게이션 바 📍관리자 메인 페이지	📍로그인 페이지 📍회원가입 페이지 📍404 페이지	📍유저 메인 페이지 📍내 일정 보기 페이지 📍캘린더 컴포넌트 세팅
유선주 작업 내역	박현준 작업 내역	송지윤 작업 내역	이승용 작업 내역	표승연 작업 내역

💻 개발 환경

🔧 스킬셋

• 기타 라이브러리 : SweetAlert2, event-source-polyfill, lodash, moment, react-icons
  
  

📁 프로젝트 폴더 구조

┌── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   └── mockServiceWorker.js
└── src
    ├── App.tsx
    ├── apis
    │   └── api 호출에 필요한 함수 세팅
    ├── components
    │   └── 각 페이지에 필요한 컴포넌트 세팅
    ├── constants
    │   └── 프로젝트에 필요한 상수 값 세팅
    ├── hooks
    │   └── 프로젝트에서 사용할 커스텀 훅 세팅
    ├── interfaces
    │   └── 각 페이지에서 사용되는 interface 세팅
    ├── mocks
    │   └── msw 세팅
    ├── mockup
    │   └── 정적 목업 데이터 세팅
    ├── pages
    │   └── 프로젝트에서 구현할 페이지 컴포넌트 세팅
    ├── routes
    │   └── 경로 관련 컴포넌트 세팅
    ├── store
    │   ├── index.ts
    │   └── reducers
    │       └── store에 사용되는 리듀서 함수 세팅
    ├── styles
    │   ├── globalStyle.ts
    │   └── theme.ts
    └── utils
        └── 프로젝트 내에서 공통으로 사용되는 유틸 함수 세팅

💻 프로젝트 실행 방법

1. $ git clone https://github.com/MiniTeam-5/MiniProject-FE.git
2. $ cd MiniProject-FE
3. $ yarn
4. $ yarn dev

🖥️ 주요 기능

✨ 회원가입 및 로그인

✨ 개인정보 수정

• 유저는 자신의 프로필 사진과 비밀번호를 변경할 수 있습니다.
  
  
  

✨ 개인 연차/당직 신청 및 취소

연차/당직 신청

• 연차 신청에서는 모든 사원의 연차 신청 정보 + 나의 당직 신청 정보를 보여주고, 당직 신청에서는 나의 연차 및 당직 신청 정보를 보여줌으로써 유저가 일정에 맞춰서 연차 / 당직 신청을 할 수 있습니다.

연차/당직 취소

✨ 실시간 알람 (SSE)

✨ 관리자 + 마스터

• 승인 대기 중인 현황을 살펴볼 수 있습니다.
• 모든 일정을 달력에서 확인할 수 있습니다.
  
  

• 관리자 홈에서 승인대기 중인 연차 / 당직 현황의 정보를 가져올 수 있습니다.
• 관리자가 승인 / 거부 처리 시 확인 절차를 거친 후에 해당 요청을 완료합니다.
  
  
  

✨ 사원 및 사원 연차 관리

• 관리자와 마스터는 사원의 연차 일수를 조절 할 수 있습니다.
• 마스터는 사원의 직급을 변경할 수 있습니다.
• 사원명을 검색해 원하는 사원을 찾을 수 있습니다.