팀원 소개

박희수 (팀장)	김민기	김선미	임성열	정윤조
Nevacat	minki-dev	seon-mikim	sung34	jyj1111
[메인 페이지] [캘린더 컴포넌트]	[마이 페이지] [네비게이션 바] [프로필 모달]	[연차 / 당직 승인 페이지] [로고 디자인]	[관리자 권한 수정 페이지] [회원가입 승인 페이지]	[회원가입 페이지] [로그인 페이지] [토스트 컴포넌트]

Pantry 프로젝트 소개

• Pantry는 사내 연차와 당직을 관리하는 서비스 입니다.
• 서비스 이용을 위해선 로그인 또는 회원가입 후 승인이 된 이후에 서비스 이용이 가능합니다.

메인 페이지

• 로그인 시 좌측 사이드 바에서 최신 날짜순으로 가장 가까운 연차일 표시 | 최신 날짜순으로 가장 가까운 당직일 표시를 확인할 수 있습니다.
• 메인 좌측 패널에서 당월 연차 / 당직 신청자를 탭 별로 확인이 가능합니다.
• 메인 우측 패널에서 연차 / 당직을 신청할 수 있습니다.
• 상단 중앙의 캘린더 아이콘 클릭 시 큰 화면으로 캘린더를 출력하고, 월별 상세 연차 / 당직을 가시적으로 확인할 수 있습니다.
• 좌측 사이드 바에서 로고 클릭 시 메인페이지('/main')로 이동합니다.
• 우측 상단의 프로필 모달 클릭 시 나타나는 메뉴에서 마이페이지(/'mypage)로 접근할 수 있습니다.
• 우측 상단의 프로필 모달 클릭 시 나타나는 메뉴에서 로그인한 사용자의 올 해 동안 신청 가능한 연차 횟수를 출력합니다.

관리자 전용 페이지

가입자 승인 관리 페이지

• 가입한 회원 승인을 관리할 수 있습니다.

연차 / 당직 승인 관리 페이지

• 연차 / 당직을 신청한 사용자를 이름과 이메일로 검색할 수 있습니다
• 연차 / 당직 신청건에 대한 승인 / 거절을 할 수 있습니다.
• 상단 우측에 캘린더 아이콘 클릭 시 큰 화면으로 월별 연차 / 당직 신청 현황을 확인할 수 있습니다.

관리자 권한 수정 페이지

• 승인된 사용자를 이름과 이메일로 검색할 수 있습니다.
• 조회된 사용자 클릭 시 우측 패널에서 사용자의 관리자 권한 변경에 대한 수정 사항을 저장할 수 있습니다.

마이 페이지

• 개인 정보 수정을 할 수 있습니다.
• 사용자가 승인받은 연차 및 당직 기록을 현재 날짜를 기준으로 하여 지난 내역을 볼 수 있습니다.

⏱ Pantry 프로젝트 과정

• 작업 기간 : 2023.05.02 ~ 2023.05.19
• 서비스 주소: Pantry
• 팀 레포지토리 주소 : Pantry(MiniProject_FE)

테스트용 계정

ID: cos@nate.com
PW: aaaa1234@@

페이지 구성

로그인 페이지	회원가입 페이지

---

사용자 페이지 구성

메인 페이지 연차 / 당직 현황	마이 페이지	메인 페이지 모달 캘린더

---

관리자 페이지 구성

연차 / 당직 승인 관리 페이지	관리자 권한 수정 페이지	계정 승인 관리 페이지

---

🛠️Pantry 기술 스택

FE
- Basic: `React`, `Typescript`, `styled-components`
- Library: `react-router`, `react-query`, `axios`, `eslint`, `react-cookie`, `react-big-calendar`, `react-datepicker`, `react-paginate`, `react-toastify`, `react-hook-form`, `yup`, `react-icons`, `moment`

---

📁 Pantry 프로젝트 구조

MiniProject_FE
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
│ └─ 로고, 기본 이미지와 같은 파일
├─ README.md
├─ src
│ ├─ api - Axios 인스턴스 객체로 구성
│ │ ├─ Admin
│ │ │ └─ 관리자 권한이 필요한 API 요청
│ │ └─ 일반 유저 API │ ├─ App.tsx
│ ├─ components
│ │ ├─ AccApproval
│ │ │ └─ 회원가입한 유저 승인 관리 페이지 (관리자 전용)
│ │ ├─ AdminApproval
│ │ │ └─ 연차 또는 당직 승인/거절 관리 페이지 (관리자 전용)
│ │ ├─ AdminForm
│ │ │ └─ 유저의 권한 변경 관리 페이지 (관리자 전용)
│ │ │ │ │ ├─ common - 공용 컴포넌트
│ │ │ ├─ AlertModal
│ │ │ │ └─ 알림 또는 경고를 위한 공용 컴포넌트
│ │ │ ├─ BigCalendar
│ │ │ │ └─ 캘린더 출력을 위한 공용 컴포넌트
│ │ │ ├─ Button
│ │ │ │ └─ 공용 버튼 컴포넌트
│ │ │ ├─ CircularLoadingProgress
│ │ │ │ └─ 공용 로딩 컴포넌트
│ │ │ ├─ ConfirmModal
│ │ │ │ └─ 확인/취소 상태를 선택하는 공용 모달 컴포넌트
│ │ │ ├─ ListItem
│ │ │ │ └─ 공용 리스트 아이템 컴포넌트 (리스트 결과물 출력)
│ │ │ └─ SkeletonUI
│ │ │ └─ 공용 스켈레톤 UI 컴포넌트
│ │ │ │ │ ├─ ErrorForm
│ │ │ └─ 입력 에러 핸들러 컴포넌트
│ │ ├─ LoginForm
│ │ │ └─ 로그인 페이지에서 사용할 로그인 폼 컴포넌트
│ │ │ │ │ ├─ MainForm
│ │ │ └─ 메인 페이지에서 사용할 연차/당직 신청 폼 컴포넌트 │ │ │ │ │ ├─ MypageForm
│ │ │ └─ 마이 페이지에서 사용할 폼 컴포넌트
│ │ │ │ │ └─ RegisterForm
│ │ └─ 회원가입 페이지에서 사용할 폼 컴포넌트
│ ├─ interface
│ │ └─ Props 타입 관리를 위한 인터페이스
│ ├─ main.tsx
│ ├─ pages
│ │ ├─ AdminAccApprovalPage
│ │ │ └─ 회원가입한 유저 승인 관리 페이지('/accApproval')
│ │ ├─ AdminApprovalPage
│ │ │ └─ 연차 또는 당직 승인/거절 관리 페이지('/adminApproval')
│ │ ├─ AdminAuthPage
│ │ │ └─ 유저 권한 변경 관리 페이지('/adminAuth')
│ │ ├─ ErrorPage
│ │ │ └─ 404 에러 페이지('*')
│ │ ├─ LoginPage
│ │ │ └─ 로그인 페이지('/')
│ │ ├─ MainPage
│ │ │ └─ 연차 또는 당직 신청/조회 페이지('/main')
│ │ ├─ MyPage
│ │ │ └─ 마이 페이지('/mypage')
│ │ └─ RegisterPage
│ │ └─ 회원가입 페이지('/register')
│ ├─ reducers
│ │ └─ reducer hooks 폴더
│ ├─ styles
│ │ ├─ globalStyle.ts - 글로벌 스타일 프리셋 with styled-components
│ │ └─ theme.ts - ThemeProvider with styled-components
│ ├─ utils
│ │ ├─ cookies.ts - 쿠키 관리
│ │ └─ helpers.ts - 날짜 포맷 변경과 같은 헬퍼 함수들
...

---

💻 Pantry 프로젝트 실행 방법

1. $ git clone https://github.com/MiniTeam6/MiniProject_FE.git
2. $ cd MiniProject_FE
3. $ yarn
4. root경로에 .env 파일 생성 후, api관련 정보(API_KEY, API_URL, USER_NAME) 입력 ex) API_KEY=123456
5. $ yarn dev

Designed By ronieo :https://github.com/ronieo
Edited By sung34: https://github.com/sung34