오늘은 캘린더 라이브러리를 사용해 내 일정을 관리할 수 있는 페이지를 제작했다. 시간이 없어서 일단 급하게 진행한거라 css도 더 입혀야 하고 기능적으로도 추가시켜야 할 것들이 몇가지 있지만 일단 진행상황부터 써보자면
<Calendar
onChange={onChange} // useState로 포커스 변경 시 현재 날짜 받아오기
formatDay={(locale, date) => moment(date).format("DD")} // 날'일' 제외하고 숫자만 보이도록 설정
value={value}
minDetail="month" // 상단 네비게이션에서 '월' 단위만 보이게 설정
maxDetail="month" // 상단 네비게이션에서 '월' 단위만 보이게 설정
navigationLabel={null}
showNeighboringMonth={false} // 이전, 이후 달의 날짜는 보이지 않도록 설정
className="mx-auto w-full text-sm border-b"
tileContent={({ date, view }) => {
const ddate = moment(date).format("YYYY-MM-DD");
let html = [];
if (marks.find((x) => x.dateTime === ddate)) {
html.push(<div className="dot"></div>);
}
return (
<>
<div className="flex justify-center items-center absoluteDiv">
{html}
</div>
</>
);
}}
/>라이브러리는 react-calendar를 사용했고 이 코드를 통해 캘린더 형태를 가져올 수 있었다.
그리고 css파일도 node_modules에 있는 기본 css파일을 가져와 커스터마이징 할 수 있게 구현해놓았고 일정이 추가가 된 날은 달력에 동그라미 체크가 되게 했다.
<div className="text-gray-500 mt-4">
{moment(value).format("YYYY년 MM월 DD일")}
{marks !== undefined
? marks.map((x) => {
if (x.dateTime === moment(value).format("YYYY-MM-DD")) {
return (
<div key={x.id}>
<div>키:{x.id}</div>
<div>날짜:{x.dateTime}</div>
<div>시간:{x.time}</div>
<div>제목:{x.title}</div>
<div>할일:{x.todo}</div>
<button
onClick={() => {
const config = {
headers: {
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIyIiwic3ViIjoia3NqQG5hdmVyLmNvbSIsImF1dGgiOiJST0xFX01FTUJFUiIsImV4cCI6MTY2OTExNDM3Nn0.i0fG5tjXERuiS8fCVMRVWDEsbf9wQ6ZFrN5BffFJlgw",
"Refresh-Token":
"eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2Njk2MzI3NzZ9.LRDgMrwnIO5hBFqzgcaImwFfjfhOkm1KhbGe4b3-JQA",
},
};
axios
.delete(`http://localhost:3001/date/${x.id}`, config)
.then(function (response) {
console.log(response);
marks.filter((x) => x.id !== response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
alert("DELETE SECCESS");
window.location.reload(); //쓰면 안좋음.. 이거 수정할 수 있는 방법 찾아보자
}}
>
일정 삭제
</button>
</div>
);
}
})
: null}
</div>이 코드 부분은 게시글을 작성했을때 GET하는 작업에 대한 화면 구성이고 삭제버튼을 눌렀을때 onclick함수를 따로 빼서 사용하려다보니 x.id를 읽어오는 과정에서 문제가 있었고 state값에 담거나 ref등등을 써봤지만 해당 id값을 담지 못해 그냥 여기에서 바로 delete동작하는 axios를 작성했다.
게시글 작성에서는 수정해야 할 부분이 있어 올리지 않았지만 나는 단일일정으로 진행하고 있었고 서버에서 연속일정으로 추가가 가능한지에 대해 요청해서 연속일정을 선택하는 것으로 진행을 다시 해보려고 한다.
트러블슈팅
filter나 map등등 내장함수가 사용되지 않는 문제(데이터 형태의 문제)
-> extraReducer에서 처리하는 형태가 배열의 형태가 아닌 객체의 형태로 처리되어 있었기 때문에 내가 사용하려는 형태와 달라 내장함수가 적용되지 않았다. 그 사실을 모르고 있었던 나는 안되는 이유를 찾지 못하고 if,for문을 사용해 구현을 했지만 도저히 이 방법은 아닌것 같아 살펴보던 중 발견할 수 있었고 이 부분을 고치고 나니 내장함수 사용이 가능한 형태가 되었다.
