10.05 항해 23일차 TIL

4주차 개인 프로젝트 '나만의 캘린더' 만들기
"Scheduler"

📌필수 구현 기능

✅ 게시글 목록 페이지

• 이전 월 보기, 다음 월 보기 버튼이 있고 해당 버튼 클릭 시 월 이동 가능하게 하기
• 일정 하나를 클릭할 시 팝업 띄우기
• 일정 추가하기 버튼 (페이지 우측 아래에 플로팅 버튼으로 처리) 클릭 시 일정 추가하기 페이지로 이동하기 (이동까지만 구현)
• 캘린더 내 일정은 시간 순으로 정렬하기
  • [주의] 파이어스토어에서 필터해서 가져오지 말고 전체 데이터를 가져온 후, 리덕스에서 필터를 할 것 (컴포넌트에서도 가능)
• 우측 아래의 추가하기 버튼 위에 [완료된 일정 보기] 만들기
  • 클릭 시, 완료된 일정만 캘린더에 표시 되고 버튼 텍스트가 [모든 일정 보기]로 바뀌도록 하기
  • [모든 일정 보기] 버튼 클릭 시, 모든 일정 캘린더에 표시하기
• PC, 모바일, 태블릿 3가지로 확인했을 때 뷰가 깨지지 않게 하기
  
  
  

✅ 게시글 작성 페이지

• 일시, 일정 내용을 기입하지 않으면 팝업으로 경고하기
  • 실제로 파이어스토어에 들어가지 못하게 막기
• 일정 추가 시 캘린더 페이지로 이동하기

📌 기능 구현

순한맛 과제와 매운맛 과제가 있었는데 고민 없이 매운맛을 고르고 시작을 하게 되었다.

fullcalendar 라이브러리를 사용하여 뼈대를 구성하였다.

• 캘린더 뷰 적용

import React from "react";
import FullCalendar from "@fullcalendar/react"; // must go before plugins
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from '@fullcalendar/interaction'; // a plugin!
import Grid from "../elements/Grid";

import SchDetail from "./SchDetail";

const Calendar = (props) => {
  const handleDateClick = (arg) => { // bind with an arrow function
    console.log(arg)
  }

  // 클릭 시 이벤트 정보 받아옴
  const handleEventClick = (clickInfo) => {
    console.log(clickInfo.event.id) // id 값 나옴    
    }

  return (
    <Grid width="70%" padding="30px">
      <FullCalendar
        plugins={[dayGridPlugin,interactionPlugin]}
        initialView="dayGridMonth"
        selectable = {true}
        dateClick={handleDateClick}
        eventClick={handleEventClick}
        select={handleDateSelect}
        weekends={true}
        events={sch_list}
        height="90vh"
      />
    </Grid>
  );
};

export default Calendar;

완성되어있는 라이브러리를 가져다 쓰는거라 쉽게 끝날 줄 알았는데 사용법을 모르는 상태에서 적용 하려니 계속 적용이 안되서 공식문서를 한참을 들여다 보았다.

이정도면 공식문서에 되게 잘 나와있는건가? 싶다가도 예제 부분은 조금 부족한게 아닌가 하는 생각이 들었다. 물론 내 기준...

그렇게 사용법을 알아가다 보니 시간이 늦기도 해서 각 페이지의 기능을 위한 View를 만드는 것을 오늘의 목표로 정했다.

• 일정 추가 페이지
  

• 일정 상세 팝업
  

그냥 생각나는 대로 팝업창을 구현 했는데 팝업 시 주변을 어둡게 하는 방법을 찾아보다가 react-modal 이라는 패키지가 있다는 것을 알게 되어서 기능 구현을 마치고 적용 시켜 보러고 한다.