일정관리 프로젝트 초기 셋팅

원래 fullcalendar 라이브러리를 사용할려고 했는데
커스텀하기가 어려울것같아서 직접 만들었다.

소스코드

import './App.css';
import { useState } from 'react';
import moment from 'moment';
import './assets/css/calendar.scss'
const App = () => {

  const [getMoment, setMoment] = useState(moment());

  const today = getMoment;
  const firstWeek = today.clone().startOf('month').week();
  const lastWeek = today.clone().endOf('month').week() === 1 ? 53 : today.clone().endOf('month').week();

  const calendarArr = () => {

    let result = [];
    let week = firstWeek;
    for (week; week <= lastWeek; week++) {
      result = result.concat(
        <div className='calendar_body_line' key={week}>
          {
            Array(7).fill(0).map((data, index) => {
              let days = today.clone().startOf('year').week(week).startOf('week').add(index, 'day'); //d로해도되지만 직관성

              if (moment().format('YYYYMMDD') === days.format('YYYYMMDD')) {
                return (
                  <div className='calendar_body_days' onClick={() => console.log(days.format('YYYYMMDD'))} key={index} >
                    <span style={{ color: 'red' }}>{days.format('D')}</span>
                  </div>
                );
              } else if (days.format('MM') !== today.format('MM')) {
                return (
                  <div className='calendar_body_days' onClick={() => console.log(days.format('YYYYMMDD'))} key={index} >
                    <span style={{ color: 'gray' }}>{days.format('D')}</span>
                  </div>
                );
              } else {
                return (
                  <div className='calendar_body_days' onClick={() => console.log(days.format('YYYYMMDD'))} key={index}  >
                    <span>{days.format('D')}</span>
                  </div>
                );
              }
            })
          }
        </div>
      );
    }
    return result;
  }

  return (
    <div className="App">
      <div className="calendar_head">
        <button className='calendar_button' onClick={() => { setMoment(getMoment.clone().subtract(1, 'month')) }} >이전달</button>
        <div className='calendar_head_text'>{today.format('YYYY 년 MM 월')}</div>
        <button className='calendar_button' onClick={() => { setMoment(getMoment.clone().add(1, 'month')) }} >다음달</button>
      </div>
      <div className='calendar_body'>
        <div className='calendar_body_box'>
          <Day_kor />
          {calendarArr()}
        </div>
      </div>
    </div>
  );
}
export default App;

function Day_kor() {
  return (
    <>
      <div className='calendar_body_head'>
        <div className='calendar_body_head_days'>
          일
        </div>
        <div className='calendar_body_head_days'>
          월
        </div>
        <div className='calendar_body_head_days'>
          화
        </div>
        <div className='calendar_body_head_days'>
          수
        </div>
        <div className='calendar_body_head_days'>
          목
        </div>
        <div className='calendar_body_head_days'>
          금
        </div>
        <div className='calendar_body_head_days'>
          토
        </div>
      </div>
    </>
  )
}

소스코드를 붙여 넣으면

이렇게 뭔가 이상한게 나올것이다...
여기서 css를 사용해서

html, body {
    height: 100%;
  }
   .App {
    height:100vh;
    width:100vw;
    font-size: 1.5vh;
  }
  
.calendar_head{
    display: flex;
    justify-content: center;
    height: 5%;
    align-items: center;
    .calendar_button{
        margin:5px;
        margin-right: 10px;
        margin-left: 10px;
        color: white;
        background: teal;
        padding: .375rem .75rem;
        border: 1px solid teal;
        border-radius: 5px;
    }
    .calendar_head_text{
        font-size: 2vw;
    }
}


.calendar_body{
    display:flex;
    width:100%;
    height:90%;
    .calendar_body_box{
        display:flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        .calendar_body_head{
            display: flex;
            border:1px solid gray;
            .calendar_body_head_days{
                border:1px solid gray;
                width: 100%;
                font-size:2vw;
            }
        }

        .calendar_body_line{
            display:flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            .calendar_body_days{
                display:flex;
                flex-direction: column;
                border:1px solid gray;
                width: 100%;
                height:100%;
                text-align: initial;
                font-size : 2vw;
                .calendar_body_day{
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                }
            }

        }
    }
}

적용을하면

뭔가 달력같은게 나온다... css손을 많이 봐야할것같다.