SAJO 엔터테인먼트 직원들을 위한 급여와 스케줄 관리 모바일 웹앱
https://toy-project2-team4-fastcom4.web.app
| name | username |
|---|---|
| 권혁준 | @red-dev-Mark |
| 배하은 | @haruyam15 |
| 박지영 | @jizerozz |
| 고낙연 | @nakyeonko3 |
본 프로젝트는 외근이 잦아 사내 컴퓨터로 자신의 급여 내역이나 스케줄을 확인하기 어려운 엔터테인먼트 매니저(직원)를 위한 웹 애플리케이션입니다.
이 웹앱을 통해 직원들은 편리하게 급여 내역을 확인할 수 있으며, 필요시 급여에 대한 정정 신청도 가능합니다.
또한, 캘린더 기능을 통해 자신의 스케줄을 손쉽게 관리할 수 있습니다.
npm installnpm run start사용자는 이메일과 비밀번호를 입력하여 웹 애플리케이션에 로그인할 수 있습니다. 로그인 성공 시 홈 화면으로 이동합니다.
홈 화면에서는 개인 정보 및 당일 스케줄을 조회할 수 있으며, 공지 카드를 통해 급여 명세서 정정 기간 알림을 받을 수 있습니다.
로그인 후 '급여 내역' 메뉴에서 자신의 급여 목록을 연도별로 필터링 하여 조회가 가능하며 급여명세서 페이지에서 '다운로드' 버튼을 클릭하여 급여 명세서를 PDF 형식으로 다운로드할 수 있습니다.
정정신청 페이지에서는 자신이 정정 신청한 목록을 확인하고 삭제할 수 있습니다. 또한, 정정신청 버튼을 클릭하여 급여 내역에 대한 정정 요청을 할 수 있습니다.
자신의 사내 일정과 개인 일정을 조회할 수 있으며, 일정을 추가할 수 있습니다. 버튼을 통해 월별로 달력을 조회할 수 있고, today 버튼을 눌러 오늘에 해당하는 달력으로 돌아갈 수 있습니다. 이러한 기능을 통해 직원이 일정을 효율적으로 확인하고 관리할 수 있습니다.
개인 정보를 확인하고 수정할 수 있는 기능을 제공합니다.
- React: 18.3.1
- TypeScript: 5.2.2
- Vite: 5.3.4
- Redux Toolkit: 2.2.7
- React Query: 5.51.21
- Styled Components: 6.1.12
- MUI (Material-UI):
- @mui/material: 5.16.4
- @mui/icons-material: 5.16.5
- @mui/joy: 5.0.0-beta.48
- @mui/x-date-pickers: 7.11.1
- React Hook Form: 7.52.2
- Dayjs: 1.11.12
- jspdf: 2.5.1
- html2canvas: 1.4.1
- Firebase: 10.12.4
- Firebase Admin: 12.3.0
-
ESLint: 8.57.0
-
Prettier: 3.3.3
📦src
┣ 📂api
┃ ┣ 📂login.ts
┃ ┃ ┗ 📜createId.ts
┃ ┣ 📜firebaseApp.ts
┃ ┣ 📜firebaseConfig.ts
┣ 📂components
┃ ┣ 📂button
┃ ┣ 📂cardBox
┃ ┣ 📂datepicker
┃ ┣ 📂Heading
┃ ┣ 📂iconButton
┃ ┣ 📂loading
┃ ┣ 📂modal
┃ ┣ 📂nav
┃ ┣ 📂selectBox
┃ ┗ 📂textInputField
┣ 📂hooks
┣ 📂layout
┣ 📂pages
┃ ┣ 📂Calendar
┃ ┣ 📂Dashboard
┃ ┣ 📂login
┃ ┣ 📂myPage
┃ ┣ 📂salaryAdjustment
┃ ┣ 📂salaryDetail
┃ ┗ 📂salaryList
┃ ┃ ┣ 📂api
┃ ┃ ┃ ┗ 📜fetchSalaryInfo.ts
┣ 📂router
┃ ┣ 📜paths.tsx
┃ ┗ 📜router.tsx
┣ 📂slices
┃ ┣ 📜authSlice.ts
┃ ┣ 📜salaryAdSlice.ts
┃ ┗ 📜scheduleSlice.tsx
┣ 📂store
┃ ┗ 📜store.ts
┣ 📂styles
┃ ┣ 📂fonts
┃ ┃ ┣ 📂SUIT-ttf
┃ ┃ ┗ 📂SUIT-woff2
┃ ┣ 📂images
┃ ┃ ┗ 📜sajoLogo.png
┃ ┣ 📜fonts.css
┃ ┣ 📜GlobalStyle.tsx
┃ ┗ 📜reset.css
┣ 📂utils
┃ ┣ 📜FormatDate.tsx
┃ ┣ 📜getCurrentDate.ts
┃ ┗ 📜IFElse.tsx
┣ 📜App.tsx
┣ 📜main.tsx
┗ 📜vite-env.d.ts