비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part3 날짜 작업

스케줄 프로젝트 만들기 - part3 

 

후.... 날짜기능과 UI작업하는데 왜 이렇게 오래 걸리는지.... 의지가 꺾일 뻔했지만 개 같이 부활 성공~~

 

저번시간보다 작업된건 날짜 기능과 시간을 등록하는 부분이 추가되었다.

 

리듀서의 schedule파일에 isComplate를 만들어 완료 여부를 확인하는 키값을 만들었습니다.

let keyId = 0

const currentSchedule = {
    scheduleList:[],
}

export const ADD = "ADD_SCHEDULE";
export const DELETE = "SCHEDULE/DELETE";
export const EDIT = "SCHEDULE/EDIT";
export const SUCCESS = "SCHEDULE/SUCCESS";


export const add_schedule = ({title, date, content, isComplate}) => {
    return{
        type:ADD, 
        scheduleList:{
            keyId:keyId++,
            title,
            date,
            content,
            isComplate
        }
    }
};

const schedule = (state = currentSchedule, action) => {
    switch(action.type){
        case ADD :
            return {
                scheduleList : [...state.scheduleList, action.scheduleList]
            }
        default :
        return state
    }
}

export default schedule;

 

그리고 Modal창에서 시간데이터를 받는 부분을 추가하였는데 여기부터 시간이 오래 걸린 거 같아요.

작업하는 시간보다 괜찮은 라이브러리를 찾는 시간이 더 오래 걸린거 같아요.

 

라이브러리를 찾고 설치해 보고 지우고 다른 라이브러리를 찾고... 이런 시간이 많이 걸리네요. 아직 제가 주니어라 그런 거겠죠?? 

 

찾다가 결국 사용한 건 순정 react-datepicker에서 타임 부분만 사용할 수 있어서 사용하기로 결정했어요.

커스터 마이징도 가능하고 개발자분들이 많이 사용하셔서 후기 및 예제들이 많아서 선택했어요. 처음에는 그냥 mui 같은 ui프레임워크를 사용할까 생각도 했지만 mui에 의존하는 거보다 내가 스스로 만들어보자라는 생각이 들어서 선택하게 되었어요.

 

Modal에서 날짜와 시간 부분을

<ModalCalendar>
    <Input placeholder={format(new Date(), "yyyy-MM-dd")} readOnly transparent value={currentDate}  icon={<Icon name="calendar" alternate="true" outline="true" />} />
    <ReactDatePicker 
        selected={currentDate? new Date(currentDate) : new Date()}
        onChange={(date) => changeDate(date)}
        useWeekdaysShort={true}
        disabledKeyboardNavigation
        renderCustomHeader={({monthDate, decreaseMonth, increaseMonth})=>(
            <div className='react-datepicker__div-custom'>
                <button
                    aria-label="Previous Month"
                    className={
                    "react-datepicker__navigation react-datepicker__navigation--previous"
                    }
                    onClick={decreaseMonth}
                >
                    <Icon name="angle left" />
                </button>
                <span className="react-datepicker__current-month">
                    {monthDate.toLocaleString("en-US", {
                        month: "numeric",
                        year:"numeric"
                    }).replace("/", ", ")}
                </span>
                <button
                    aria-label="Next Month"
                    className={
                    "react-datepicker__navigation react-datepicker__navigation--next"
                    }
                    onClick={increaseMonth}
                >
                    <Icon name="angle right" />
                </button>
            </div>
        )}
    />
</ModalCalendar>
<ModalCalendar>
    <Input placeholder={format(new Date(), "k:mm")} readOnly transparent defaultValue={currentTime}  icon={<Icon name="clock outline" alternate="true" outline="true" />}  />
    <ReactDatePicker 
        selected={new Date()} 
        onChange={(date) => changeTime(date)}
        showTimeSelect
        showTimeSelectOnly
        timeFormat="HH:mm"
        timeIntervals={15}
    />
</ModalCalendar>

데이터를 입력할 수 있게 만들고 이제 데이터를 받기 위해 작업을 진행했습니다.

 

    // 날짜
    const [currentDate, setCrrentDate] = useState('')
    //시간
    const [currentTime, setCurrentTime] = useState('');

    const changeDate = (e) =>{
        setCrrentDate(format(e, "yyyy-MM-dd"));
    }
    const changeTime = (e) =>{
        setCurrentTime(format(e, "HH:mm"));
    }

    const handleAddSchedule = () =>{
        dispatch(add_schedule({
            title:scheduleTitle,
            date:new Date(`${currentDate} ${currentTime}`),
            content:scheduleCnt,
        }))
        setModalClose()
    }

이렇게 내용을 보니깐 별 내용이 없는데 혼자 얼마나 삽질을 했는지....

처음에는 날짜와 시간 데이터를 각각 받으니 리듀서에도 date와 time 2개를 받아야 되고 하나만 받자니 이미 데이터를 받을 때 format을 해서 저장하는데 저부분을 시간데이터도 들어오면 한 번에 넘길까 했다가 time도 가져와야 되는데 깔끔하게 가져와지지 않더라고요.

 

그래서 format을 하면 string으로 저장이 되니 string으로 저장된 2개를 new Date로 저장하면 되겠다 생각이 들어서 하나로 합치고 했는데 뭘 잘못 적었는지 자꾸 time이 없다고 에러가 나고 아니면 데이터 자체가 없다고 에러가 나더라고요.

 

아마 데이터가 들어오는지 확인하려고 console을 작성한 부분이 오류였던 거 같아요.

 

date와 time을 따로따로 저장해도 되는데 굳이 왜 new Date에 저장을 했냐면 새로운 기능을 넣으려고 추가한 컴포넌트에서 date와 time의 각각이 아니라 합쳐진 데이터를 원하게 되고 그런 컴포넌트들이 몇 개 더 생겨서 컴포넌트마다 new Date로 합쳐주는 것보다 처음부터 new Date에 넣는 게 좋다고 생각했어요.

 

그러면 저번시간에 만들었던 Item부분도 date의 value가 달라졌기 때문에 코드를 변경했어요.

 

const CalendarItem = ({currentDay}) => {

    const schedulsDataList = useSelector(state => state.schedule.scheduleList);
    const dateDay = format(currentDay, "yyyy-MM-dd");

    if(schedulsDataList.length > 0){
        return(
            <ul>
                {schedulsDataList.map((schedule, i) => {
                    // eslint-disable-next-line no-lone-blocks
                    {
                        return(
                            format(new Date(schedule.date), "yyyy-MM-dd") === dateDay &&
                                <li className='calendarItem__li-items' key={schedule.keyId}>
                                    <p className='calendarItem__items__p-title'>
                                        {schedule.title}
                                    </p>
                                </li>
                        )
                    }
                })}
            </ul>
        )
    }
}

리듀서에서 데이터를 받아오는 부분을 수정했어요. 

처음에는 map으로 감싸서 안에서 schedule을 가져오는지 생각을 못하고 밖으로 빼서 가져오려고 했는데 오류가 막 나더라고요. 그러다 다시 보니 map으로 작업을 했던 게 보여서 아차 싶어서 바로 수정하고 format을 해서 데이터를 가져오게 작업했는데...

 

여기서도 문제가 저는 처음에 스토리지에 저장할 때 new Date를 저장했기 때문에 가져올 때 그대로 가져오면 되겠구나 했는데 계속 오류가 나더라고요??

 

2023-05-22T19:15:00.000Z

 

날짜 데이터가 로컬 스토리지에는 저렇게 저장이 되더라고요. 그래도 저는 format을 하면 알아서 변경이 되는 줄 알았는데 꼭 다시 가져올 때 new Date를 사용해서 날짜 형식으로 변경을 해줘야 오류가 안 생겨서 문제를 해결했어요.

 

후... 이제는 일정을 클릭하면 상세 보기 기능을 만들어서 추가해보려고 해요.

 

그럼 오늘 하루종일 이것저것 씨름 하다가 내일 다시 블로그를 쓸 거 같아요. 그럼 빠잉~~