[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-3. 달력 페이지 구현

가계부 웹 사이트인 만큼 수입, 지출 내역 페이지와 수입 지출을 한 눈에 보여줄 달력 페이지가 메인으로 사용될 것이다.

그래서 서칭을 하다 보니 달력 라이브러리가 있다고 해서 사용해 보기로 했다. 

 

https://velog.io/@khy226/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%B1%EC%97%90-%EB%8B%AC%EB%A0%A5react-calendar-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

리액트 앱에 달력(react-calendar) 적용하기

위 블로그 글을 참고했다.

 

 

CalenderPage.jsx

import React, { useState } from "react";
import styled from "styled-components";
import Calendar from "react-calendar";

export default function CalenderPage() {
  const [value, onChange] = useState(new Date());

  return (
    <Section>
      {" "}
      <Calendar onChange={onChange} value={value} />
    </Section>
  );
}

const Section = styled.section`
  margin-left: 18vw;
  padding: 2rem;
  height: 100%;

  @media screen and (min-width: 280px) and (max-width: 1080px) {
    margin-left: 0;
  }
`;

달력이 잘 뜬다.

다만 한눈에 보기에 직관적이지 않은 면이 있어 스타일을 적용해야 한다.

 

 

import 'react-calendar/dist/Calendar.css';

위 코드를 import 한다.

아까보다 훨씬 깔끔해졌다.

 

캘린더 css 제작은 다음 블로그를 참고했다.

https://dev.to/fitzgeraldkd/react-calendar-with-custom-styles-30c9

React-Calendar with Custom Styles

 

 

**추가: 캘린더를 내가 원하는 스타일대로 구현하는 것이 어려워서, 아쉽게도 가계부 웹 사이트에서 해당 기능을 빼기로 했다.