스케줄 프로젝트 만들기 - part5 스케줄 수정, 삭제 작업

오늘은 스케줄프로젝트 수정, 삭제 부분을 작업하였다.

 

이제는 기반을 다 만들어 놓은 프로젝트여서 디자인을 수정하거나 하지 않는 이상 심각한 에러가 나거나 하진 않았다.

 

다른 페이지는 수정된 내용은 없고 ModalPop페이지 위주로 작업을 하였다.

 

수정하기 버튼을 눌렸는지 눌리지 않았는지 체크하는 state를 만들고 수정하기 버튼을 누르면 수정할 수 있게 input들의 readOnly를 제거해 준다.

 

수정버튼 누리기 전의 디자인

 

수정버튼 눌렀을 때의 디자인

그리고 취소 버튼을 눌렀을 때는 팝업창이 사라지지 않고 내용도 원복 돼야 되기 때문에

    const editCencle = () => {
        setEditMode(false);
        setScheduleTitle(editData.title)
        setCrrentDate(format(new Date(editData.date), "yyyy-MM-dd"))
        setCurrentTime(format(new Date(editData.date), "HH:mm"))
        setscheduleCnt(editData.content)
        setIsChecked(editData.isComplate)
    }

수정만 false로 변경하고 기존 데이터들을 저장해 준다.

 

그리고 버튼들 코드이다.

<Modal.Actions>
    <Button color='black' onClick={() => setModalClose()}>닫기</Button>
    {
        editMode 
            ? <Button
                content='취소'
                color='red' 
                onClick={() => editCencle()}
                icon='close'
            /> 
            : ''
    }
    {
        editMode || !viewMode
            ? <Button
                content={editMode ? "수정" : "등록"}
                icon='checkmark'
                onClick={() => handleAddSchedule()}
                positive
            />
        :''
    }
    {
        viewMode & !editMode 
            ?  
                <>
                    <Button
                        content='삭제'
                        color='red' 
                        onClick={() => deleteData()}
                        icon='trash alternate outline'
                    /> 
                    <Button
                        content='수정하기'
                        color='facebook' 
                        onClick={() => changeMode()}
                        icon='edit'
                    /> 
                </>
            : ''
    }
</Modal.Actions>

그냥 제목만 눌렀을 때는 보기 모드이고 수정하기 누르면 수정모드로 변경되면서 삭제, 취소, 등록 등 상태에 맞게 변경되게 작업하였다.

 

삭제기능의 modal 페이지의 코드이다. 데이터의 keyId를 전달해 준다.

    const deleteData = () => {
        dispatch(delete_schedule(editData.keyId))
        setModalClose()
    }

 

reducer

export const delete_schedule = (keyId) => {
    return{
        type:DELETE,
        keyId
    }
};


const schedule = (state = currentSchedule, action) => {
    switch(action.type){
        case ADD :
            return {
                scheduleList : [...state.scheduleList, action.scheduleList]
            }
        case EDIT :
            return {
                scheduleList : [...state.scheduleList.slice(0, action.scheduleList.keyId), action.scheduleList, ...state.scheduleList.slice(action.scheduleList.keyId + 1) ]
            }
        case DELETE :
            return {
                scheduleList : [...state.scheduleList.filter(x => x.keyId !== action.keyId)]
            }
        default :
        return state
    }
}

scheduleList에서 key값이 아닌 데이터만 리턴해주는 방식을 사용했다.

 

처음에 key값은 전달했는데 제대로 동작하지 않아서 왜 그런가 했는데 나는 keyId만 전달했는데 중괄호를 사용해서 객체어서 키값을 전달해서 계속 삭제가 안되었다.

해당 오류는 그래도 금방 해결해서 다행이었다. 오히려 이런 간단한 오류가 눈에 한번 안 보이면 계속 안 보여서 찾기 힘들었는데 금방 찾아서 다행이라 생각했다.

이제 해당 일정을 완료했는지 체크 여부를 작업해야지~~ 그럼 Update 작업 완료하고 다시 올게요ㅃㅃ

 

일정 완료 기능을 추가하고 돌아온 MIN입니다~~

 

일정 완료 기능은 이전에 만들었던 isChecked를 사용해 체크 여부 상태를 적용하였고

<Button 
    size='mini'
    color={isChecked ? 'blue' : ''}
    onClick={()=>setIsChecked(!isChecked)}
>
    일정완료
</Button>

onClick에 ischecked의 반대로 적용되게 하였습니다. true면 false로 false면 true로 반대의 값이 저장되게 하였고

 checked는 저장이나 수정버튼을 누르지 않아도 변경이 돼야 돼서

 

const setModalClose = () =>{
    if(viewMode & !editMode & editData.isComplate !== isChecked){
        editData.isComplate = isChecked
        dispatch(edit_schedule(editData))
    }
    setScheduleTitle('');
    setCrrentDate('');
    setscheduleCnt('');
    setCurrentTime('');
    setDataError({})
    setEditMode(false);
    closeModal();
}

close기능에 수정모드가 아니고 editData의 체크값과 value가 반대일 때만 edit 되게 하였습니다.

수정모드일 때 완료 누르고 취소 누르거나 닫기 눌렀을 혹시라도 값이 저장이 될까 봐 저렇게 하였습니다. 

isComplate가 반대값이면 editData에서 complete만 값을 isChecked로 바꾸고 dispatch 해주었습니다.

 

아!! 그리고 삭제 기능에서 삭제하시겠습니까?라는 문구 없이 바로 삭제되어서 그 부분도 추가하였습니다.

 

// 삭제 확인
const [deleteCheck, setDeleteCheck] = useState(false)

const deleteData = () => {
    dispatch(delete_schedule(editData.keyId))
    setDeleteCheck(false)
    setModalClose()
}


<Confirm
    content="일정을 삭제 하시겠습니까?"
    open={deleteCheck}
    cancelButton='아니요'
    confirmButton='네'
    onCancel={()=>setDeleteCheck(false)}
    onConfirm={()=>deleteData()}
/>

삭제 여부를 확인해서 confirm에서 ok를 누르면 해당 데이터를 삭제하게 하였습니다.

 

이로써 스케줄 토이 프로젝트는 완료하였습니다.

 

아직 많이 빈약한 프로젝트이지만 혼자서 프로젝트를 만들었다는 게 너무 뿌듯하고 기분이 좋았습니다.

 

나중 경력을 쌓고 보면 볼품없는 코드겠지만 지금으로선 너무 기분 좋고 뭔가 해냈다는 생각이 들고 앞으로 더 재밌는 프로젝트를 해보고 싶다는 생각을 하게 되네요.

 

혹시라도 읽으시는 분이 있으시다면 많이 부족한 글을 봐주셔서 정말 감사드립니다.

 

 

그리고 제가 작업했던 코드들은 아래 Git Hub에 있습니다.

https://github.com/piwe2004/scheduleApp

GitHub - piwe2004/scheduleApp