🌳 Tutice | 튜티스 🌳

쉬운 수업 관리로 열리는 정확한 나의 결실
과외의 출결 체크부터 수업비 관리까지 한번의 클릭으로 쉽게 관리하세요.

🙋🏻‍♀️ 과수원 FE

권은빈 🍅	권혜인 🍌

original Members 류성경🍒, 박희정🥝, 서지수🍑

⚒️ 기술 스택

역할	종류
Library
Programming Language
Styling
State Management
Data Fetching
Formatting
Version Control
Package Manager
Deployment

💡 서비스 핵심 기능 소개

1️⃣ 수업 등록하기

💬 what?

• 학생 과목 등록
  

• 회차, 날짜, 시간 슬라이더 구현
  

• 정기 요일 선택
  (첫 수업일 경우 디폴트 값은 현재 날짜이며, 현재 선택한 요일에 해당하지 않는 날짜를 첫 수업일로 선택한 경우, 저장 불가 및 선택된 요일 배열을 순회하며 해당 요일이 아닌 날짜 버튼 비활성화)
  

• 수업 일시 예외 케이스 처리
  

  상황	비활성 버튼
  조건문을 통해 시간 및 종료 시간을 모두 입력하지 않았을 때	수업 일시 추가
  시간만 입력하고 요일은 입력하지 않은 경우	수업 일시 추가
  요일을 선택할 때, 시작, 종료 시간을 입력하지 않은 경우	모든 버튼
  첫 수업일에 해당하는 요일이 선택한 수업 일시 요일에 해당하지 않는 경우	저장

👀 how?

• useState를 사용해 각 입력폼에 focus 되었는 지 관리 입력받은 값 recoil로 관리

• swiper 라이브러리를 사용한 슬라이더 구현

   <StyledSwiper
   	direction="vertical"
   	slidesPerView={7}
   	spaceBetween={15}
   	freeMode={true}
   	freeModeSticky={true}
   	freeModeMomentumRatio={0.25}
   	freeModeMinimumVelocity={0.1}
   	loop={true}
   	loopAdditionalSlides={5}
   	slideToClickedSlide={true}
   	centeredSlides={true}
   	onSlideChange = {handleSlideChange}
   >
   	{slides}	
   </StyledSwiper>
  

• loop = {true} 속성값을 통한 스크롤을 이어지도록 구현
  

• swiper.realIndex를 통해 유저가 선택한 인덱스의 슬라이드 추적
  날짜 슬라이더의 경우, 현재 달을 기준으로 이전, 현재, 다음 달의 모든 날짜를 담는 객체 배열을 생성하여 각 개체가 하나의 슬라이드가 되도록 구현

2️⃣ 수업 관리

💬 what?

• 수업 관리 ( 출결 및 입금 관리)
  
• 출결 체크 후 알림 보내기
  
• 입금 알림 보내고 입금 등록
  
• 연장하지 않은 수업이 있는 경우 배너 띄우기
  

👀 how?

• children, props 를 이용한 공통 컴포넌트 구현
  
• 수업 내역 또는 입금 내역인지에 대한 현재 페이지 정보 recoil로 불러오기

3️⃣ 수업 관리 => 출결 체크

💬 what?

• 홈 페이지에서 수업 진행 중인 학생 출석 체크
  
• 수업 관리 페이지에서 출결 체크 및 수정
  
• 놓친 출결 페이지에서 출결 체크
  
• 출결 수정 시 이전 출걀 사항 버튼 비활성화
  
• 출결 체크 토스트 모달, 출결 체크 선택시 확인 모달 띄우기
  
• 최종 출결 체크 확인 시 체크되는 애니메이션 구현
  
• 최종 출결 체크 이후 출결 알림 전송 토스트 모달
  
• 푸쉬 알림을 상대가 허용하지 않았을 시에 경고 모달
  
• 출결 알림

👀 how?

• 모든 경우의 수를 따져서 (출석, 결석, 취소, 출석체크 놓친 이후의 출석, 결석, 취소 선택 등) switch-case 문과 삼항 연산자 사용

4️⃣ 캘린더

💬 what?

• 캘린더뷰 date-fns 으로 구현
  
• 오늘 날짜부분 메일 컬러의 배경으로 다른 날짜와 다르게 구성
  
• get해온 데이터에 맞는 날짜에 시간 순서대로 사람 이름 및 시작 시간 불러와 캘린더에 띄워주기
  
• 스케줄 수정 캘린더, 수정이 불가능하고 조회만 가능한 캘린더, 임시로 저장한 수업 시간과 함께 가지고 있는 스케줄을 한 번에 보여주는 캘린더로 나누기
  
• 각 캘린더에서 원하는 날짜를 클릭할 시, 해당 날짜에 있는 스케줄을 모두 보여주는 모달 구현
  
• 각 날짜에 4개 이상의 스케줄이 있을 경우, 2개까지만 보여주고 더보기와 관련된 아이콘 띄워주기
  
• 수정이 가능한 캘린더에서 원하는 날짜를 클릭하면 토스트 모달에서 편집버튼을 누를 시에 편집 모드로 전환
  
• 편집 모드 모달에서 편집하기 원하는 스케줄을 클릭하여 편집 페이지로 이동
  
• 편집 페이지에서 슬라이더를 이용해 원하는 스케줄로 수정하고, 저장을 누르면 바로 캘린더로 확인하도록 구현

👀 how?

• date-fns를 사용한 전체적 레이아웃 구현
  
• while문을 이용해 한 달의 날짜를 보여주도록 구현
  
• 공통 컴포넌트를 이용하여, 토스트 모달, 수정 뷰 슬라이더 등 구현
  
• react-query의 get-patch를 사용한 data 관리
  

5️⃣ PWA를 활용한 푸쉬 알림

💬 what?

• PWA 환경에서 일반 네이티브 앱과 동일하게 푸시 알림을 받을 수 있도록 설정
  선생님 사용자가 출결 체크 또는 입금 알림을 보낼 경우, 학부모 사용자에게 푸쉬 알림이 가도록 구현

👀 how?

• 파이어베이스 프로젝트 생성 후 받은 후 sdk를 이용해 FCM을 연결하여 푸시 알림 구현
  
• FCM으로부터 유저의 deviceToken을 받고, 이를 서버에게 post하여 기기 등록
  
• 등록된 기기로 알림이 갈 수 있도록 구현
  
• PWA 환경에서 일반 네이티브 앱과 동일하게 푸시 알림 가능.

📁 폴더 구조

|-- 📁 .github
|-- 📁 .husky
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
    |-- 📁 api
    |-- 📁 atom
    |-- 📁 assets
        |-- 📁 icon
        |-- 📁 image
        |-- 📁 assets.d.ts
        |-- 📁 index.ts
    |-- 📁 core
    |-- 📁 components
        |-- 📁 common
    |-- 📁 hooks
    |-- 📁 mocks
    |-- 📁 pages
    |-- 📁 style
        |-- globalStyle.ts
        |-- style.d.ts
        |-- theme.ts
    |-- 📁 utils
    |-- 📁 type
    |-- App.tsx
    |-- main.tsx
    |-- Router.tsx
    |-- vite-env.d.ts
|-- .eslintrc.cjs
|-- .gitignore
|-- .prettierrc
|-- index.html
|-- package.json
|-- README.md
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts
|-- yarn.lock