리액트 일정관리 프로젝트 데이터 넣기

박슬빈·2021년 9월 16일
0

데이터 넣기


최종 화면 맛보기

데이터 만들기

data.json

{
    "work": [
      {
        "start": "2021-09-16",
        "end": "2021-09-16",
        "title" : "제목임",
        "data" : "뭔일있냐"
        },
      {
        "start": "2021-09-13",
        "end": "2021-09-13",
        "data" : "뭔일없음"
        }
          ,
      {
        "start": "2021-09-14",
        "end": "2021-09-14",
        "data" : "뭔일있음"
        },
    {
        "start": "2021-09-14",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    },
    {
        "start": "2021-10-12",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    },
    {
        "start": "2021-10-11",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    },
    {
        "start": "2021-10-13",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    }
        
    ]
  }

임시로 데이터를 만들고

위에 import pr_data from './data/data.json'
import를 해주고

전체코드
App.js

import './App.css';
import { useState } from 'react';
import moment from 'moment';
import pr_data from './data/data.json'
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>
                    <Show_event days={days} />
                  </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>
                    <Show_event days={days} />
                  </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 Show_event({ days }) {
  return (
    <>
      {
        pr_data.work.map((v, i) => {
          if (days.format('YYYYMMDD') == moment(v.start).format('YYYYMMDD')) {
            return <div key={i} onClick={() => console.log(v)} className='calendar_body_days_event'>{v.data}</div>
          }
        })
      }
    </>
  )
}

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>
    </>
  )
}

Show_event 함수를 작성해서 화면에 보여준다.

function Show_event({ days }) {
  return (
    <>
      {
        pr_data.work.map((v, i) => {
          if (days.format('YYYYMMDD') == moment(v.start).format('YYYYMMDD')) {
            return <div key={i} onClick={() => console.log(v)} className='calendar_body_days_event'>{v.data}</div>
          }
        })
      }
    </>
  )
}

props로는 days 를 넘겨줘서 data에서 그 날짜에 맞는경우 보여주는것이다.
data전체를 훑어서 보여주는거라서 상당히 비효율적이지만
n번만에 끝나서 한사람의 데이터가 많아봤자 억단위로 안갈것 같아서 당분간은 이렇게 사용할것같다...

key 값은 i , index로 넣어줬고
css는 이것을 넣었다.

.calendar_body_days_event{
	font-size: 15px;
	background: gray;
	color: white;
	border-radius: 5px;
	padding: 2px;
	margin: 1px;
}

아직 데이터구조는 다 안짜서 백엔드를 시작을 못했다..
퍼블리싱을 먼저 하고 데이터 구조를 잡아야겠다.

profile
이것저것합니다

0개의 댓글