[ToyProject-Todomate] 투두메이트 클론 프로젝트 19

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

오늘의 할 일은 Explore의 달력부분을 만드는 일이다.

 

달력의 경우 NHN TOAST에서 제공하는 Calendar UI 라이브러리를 사용하기로 하였다.

그래서 TOAST의 공식문서에서 적용방법을 따라해본다.

 

 

1. 설치

 

npm 이나 bower, CDN을 통해 라이브러리를 이용할 수 있다.

리액트 프로젝트이기 때문에 간편한 CDN 보다는 npm을 통해 패키지를 설치하자.

 

npm install --save @toast-ui/react-calendar

 

 

2. Calendar 패키지와 CSS를 import 해온다.

 

import Calendar from '@toast-ui/react-calendar';
import 'tui-calendar/dist/tui-calendar.css';

 

3. 적용하기

 

공식문서는 함수형이 아닌 클래스형 컴포넌트를 제공하고 있다.

잘 모르겠으니 일단 다 때려놓고 본다.

 

import React from 'react';
import Box from '@mui/material/Box';
import Calendar from '@toast-ui/react-calendar';
import 'tui-calendar/dist/tui-calendar.css';

const calendarOptions = {
  // sort of option properties.
};

class CalendarBox extends React.Component {
  calendarRef = React.createRef();

  handleClickNextButton = () => {
    const calendarInstance = this.calendarRef.current.getInstance();

    calendarInstance.next();
  };

  handleClickButton = () => {
    this.calendarRef.current.getRootElement().classList.add('calendar-root');
  };

  handleClickDayname = (ev) => {
    // view : week, day
    console.group('onClickDayname');
    console.log(ev.date);
    console.groupEnd();
  };

  render() {
    return (
      <>
        <Calendar
          ref={this.calendarRef}
          {...calendarOptions}
          onClickDayname={this.handleClickDayname}
        />
        <button onClick={this.handleClickNextButton}>Go next!</button>
      </>
    );
  }
}
export default CalendarBox;

 

 

 

 

이렇게 넣어놓고 나니... 우리의 계획보다 더 무겁고 화려하고 "어려운" 라이브러리가 아닌가 싶다.

차라리 그냥 달력모양만 나타나는게 더 낫지 않을까 ㅠㅠ

 

 

 

 

---

 

 

그래서 MUI의 Date Picker 중에 Landscape Orientation을 적용해본다.

 

 

 

 

1. MUI의 달력, 시간 등을 이용하기 위한 패키지 설치

 

npm을 이용해 아래 시간, 날짜 관련 패키지를 설치해준다.

뭘.. 설치해도 상관은 없는 것 같다.

 

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install -s @date-io/dayjs
// or for Luxon
npm install -s @date-io/luxon
// or for Moment.js
npm install @date-io/moment

 

 

2.  dateAdapter 패키지를 import 해온다.

 

 

// date-fns
import DateAdapter from '@mui/lab/AdapterDateFns';
// or for Day.js
import DateAdapter from '@mui/lab/AdapterDayjs';
// or for Luxon
import DateAdapter from '@mui/lab/AdapterLuxon';
// or for Moment.js
import DateAdapter from '@mui/lab/AdapterMoment';

 

여기까지 하고 하단의 코드를 작성했는데 

Can't resolve '@mui/lab/AdapterDateFns' in 파일경로 오류가 떴다.

 

스택오버플로우에 찾아보니 이것도 버전 문제인거 같은데 (제발! 호환 좀!)

 

 

Module not found: Can't resolve '@mui/lab/AdapterDateFns'

 

아래 @mui/lab을 설치해줘야 한다.

 

npm i @mui/lab

 

 

위의 @mui/lab 가지고 안되면

 

npm i @mui/material
npm i date-fns

 

도 설치해주자.

 

 

결론

 

 

 

3. 나머지 컴포넌트 들을 import 해온다.

 

import isWeekend from 'date-fns/isWeekend';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import StaticDatePicker from '@mui/lab/StaticDatePicker';

 

 

4. 그리고 예시코드를 가지고 온다.

 

 

<LocalizationProvider dateAdapter={AdapterDateFns}>
            <StaticDatePicker
              orientation="landscape"
              openTo="day"
              value={value}
              shouldDisableDate={isWeekend}
              onChange={(newValue) => {
                setValue(newValue);
              }}
              renderInput={(params) => <TextField {...params} />}
            />
</LocalizationProvider>

 

 

 

훨씬 예쁘다..!