[ToyProject-Todomate] 투두메이트 클론 프로젝트 36

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

---

1. 할 일 클릭 시 등장 모달

2. 수정 / 삭제 기능

---

 

 

 

 

728x90

 

 

1. 할 일 클릭 시 등장 모달

 

이제 뿌려진 할 일을 클릭하면 5개의 버튼이 있는 모달창을 띄워야 한다.

이 모달은 해당 할 일의 정보를 변경해주는 기능을 한다.

목표 설정할 때 썼던 MUI Dialog UI를 쓸까도 생각했는데 단순한 버튼만 있으면 되어서 이번에는 Modal을 적용해보았다. 

 

원본과 비슷한 사이즈로 모달의 컨테이너와 버튼을 구현했다.

 

 

{/* 모달 생성 */}
<TodoModal 
modalOpen={modalOpen} handleTodoModalClose={handleTodoModalClose}s
electedTodo={selectedTodo} 
clickTodoEditHandler={clickTodoEditHandler} 
clickTodoDeleteHandler={clickTodoDeleteHandler}  />

 

export function TodoModal (props) {

    const modalOpen = props.modalOpen;
    const handleTodoModalClose = props.handleTodoModalClose;
    const selectedTodo = props.selectedTodo;
    const clickTodoEditHandler = props.clickTodoEditHandler;
    const selectedInputIndex = props.selectedInputIndex;
    const clickTodoDeleteHandler = props.clickTodoDeleteHandler;

    return(
        <Modal open={modalOpen}
        onClose={handleTodoModalClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        className="feed-todo-modal-box"
         >
            <Box className="feed-todo-modal-wrap" >
                <p className="feed-todo-modal-head">{selectedTodo.title}</p>
                <Box className="feed-todo-modal-icon-wrap">
                    <button className="feed-todo-edit-icon" onClick={clickTodoEditHandler} data-index={selectedInputIndex} ><EditIcon className="feed-modal-icon" /><span>수정</span></button>
                    <button className="feed-todo-delay-icon" data-index={selectedInputIndex} ><SkipNextIcon className="feed-modal-icon" /><span>내일 하기</span></button>
                    <button className="feed-todo-date-change-icon" data-index={selectedInputIndex} ><SyncAltIcon className="feed-modal-icon" /><span>날짜 바꾸기</span></button>
                    <button className="feed-todo-order-change-icon" data-index={selectedInputIndex} ><WrapTextIcon className="feed-modal-icon" /><span>순서 변경</span></button>
                    <button className="feed-todo-delete-icon" data-index={selectedInputIndex} ><DeleteOutlineIcon className="feed-modal-icon" onClick={clickTodoDeleteHandler} data-index={selectedInputIndex} /><span>삭제</span></button>
                </Box>
            </Box>
        </Modal>  
    )
}

 

 

 

모달을 on/off 하고 이벤트 핸들러 함수들은 굳이 atom에 넣지 않아도 될 것 같아서 props로 전달했다.

 

모달은 이미 MUI에서 내부 이벤트가 다 구현이 되어 있기 때문에 madalOpen 이라는 props에 true, false 불리언 값만 적용해주면 된다. 해당 이벤트 핸들러는 아래와 같다.

 

 

/* 모달 관련 */

//투두 클릭 시 모달 등장 이벤트 핸들러
const clickTodoModalHandler = (e) => {
    // console.log("click index", e.currentTarget.dataset.key)
    let todoIndex = e.currentTarget.dataset.key;
    handleTodoModalOpen()
    setSelectedTodo(selectedTodo = todo[todoIndex])
    setSelectedInputIndex(todoIndex);
}

// 투두 클릭시 모달 노출 on off
const handleTodoModalOpen = () => setModalOpen(true);
const handleTodoModalClose = () => setModalOpen(false);

 

 

todo 값에 맞는 index를 얻어내야 하기 때문에 dataset 을 이용했다.

todo.map 으로 뿌리고 있는 <input> 태그에 (이전까지는 InputBase MUI 를 이용했는데, readOnly 설정이 잘 안먹혀서 HTML 기본 태그인 input으로 변경했다.)

이벤트 핸들러를 추가해주고 data-index 또한 추가해주어서 e.target에 담겨 오도록 했다.

 

 

 

※ data-oo 속성으로 정보 사용하기

 

현재 map으로 index를 뿌려줄 수 있기 때문에 각 input 태그에 data 접두사를 이용해 정보를 담아 줄 수 있다.

이런 data 접두사를 dataset 이라고 하는데 

<element data-item="itisdata"></element> 처럼 사용한 다음

onclick이나 onchange 등 정보 변경을 캐치할 수 있는 이벤트 함수들에서 사용할 때는

e.target.dataset.item 이렇게 사용할 수 있다. 이 때는 "itisdata"가 넘어오게 된다.

 

이 data-index를 가지고 있기 때문에 해당하는 정보를 전부 모달에 전달할 수가 있었다.

대신 todo 원본 데이터를 뽑아 전달하는 것이 아니라 클릭하면 selectedTodo라는 state를 생성해 클릭한 정보값을 쉽게 사용할 수 있도록 했다. 

 

 

 

 

 

할 일 수정 모달 기능 

 

1. 수정

선택한 index의 todo input 부분의 readOnly 상태 변경 후 받아온 todo State를 수정해서 다시 recoil에 반영

 

2. 날짜바꾸기

해당 todo State의 date 값을 변경 해 준다.

 

3. 오늘 하기

해당 todo State의 date 값을 오늘로 변경

 

4. 순서 변경

해당 날짜의 todo state를 별도의 컴포넌트 (페이지) 로 이동시켜서 드래그로 order 값을 변경할 수 있도록 한다.

음... drag 라이브러리 써야겠지?

 

5. 삭제

선택한 index의 todo를 삭제해 recoil에 반영

 

최종  수정된 recoil todo state는 페이지 벗어날 때 api를 통해 업데이트 시키도록 한다.

 

 

 

 

 

2. 수정 / 삭제 기능

 

모달에서 수정 버튼을 클릭하면 input의 readonly 속성이 true에서 false로 변해야 한다.

readonly 속성을 주는 이유는 '수정' 상태가 아니면 input 자체가 list의 기능도 함께 해야 하기 때문이다.

readonly는 그야말로 '읽기전용' 상태라 읽기 전용이면 쓰기가 안되니 true 상태면 쓰기를 할 수 없고 false면 쓰기가 가능해진다.

MUI의 InputBase에서도 readonly를 적용할 수 있는데 상태값을 바꿔도 적용이 안되어서 input을 사용하기로 했다.

대신 CSS의 border와 outline 을 0으로 수정해서 작성하지 않을 때는 리스트처럼 보이도록 했다.

 

 

수정 기능

 

수정이 좀 고난이도였는데 readonly 속성이 잘 안바뀌어서 해결하느라고 이틀을 소비했다. InputBase를 포기하는 것으로 하고 input으로 바꾸니 이렇게 간단히 해결이 되는걸...!

 

수정 또한 클릭한 할 일만 readonly가 false가 되어야 해서 목표 클릭 이벤트를 구현했 던 것처럼 배열을 생성했다.

원래 todo의 readonly 속성도 recoil로 관리하려고 했지만 굳이 recoil로 왔다갔다 할 필요가 전혀 없어서

해당 컴포넌트에서 관리할 수 있도록 정리했다.

 

let [todoReadOnly, setTodoReadOnly] = useState(Array(todo.length).fill(true));

 

 

그리고 이 state 또한 todo가 map으로 뿌려지는 동안 index로 관리할 수 있기 때문에 readOnly 속성에 배열로 뿌려주었다.

 

todo.map((todo,index)=>{
    return (
        <Box className="goals-todo-input-list-Box" key={index} onClick={clickTodoModalHandler} data-key={index}>

        {goal.goal_id === parseInt(todo.goal_id) ? (<>
        <div className="goals-todo-input-list-check-wrap">
            <CheckBoxOutlineBlankIcon className="goals-todo-list-input-check-icon"/>
            <input
             key={`todo${index}`} readOnly={todoReadOnly[index]} type="text" maxLength={"35"} name={todo.title} data-index={index} id="todo-input" value={todo.title} onChange={todoEditEventHandler} onKeyDown={enterKeyEventHandler} className="goals-todo-list-input" />

        </div>
        <Button className="goals-todo-list-input-btn" ><MoreHorizIcon className="goals-todo-list-input-btn-icon" /></Button>
        </>
        ) : null} 
        </Box>
    )
})

 

 

이렇게 readonly 속성을 개별로 줄 수 있게 되면 value값을 e.target.value로 받아와서 수정되게 하면 되겠구나 하고 쉽게 생각했는데, 생각보다 오류가 많이 발생했다.

 

e.target.value를 recoil로 받아온 todo 객체의 title에 state변경 함수로 넣으려고 했더니 

cannot set properties of undefined (setting 'title') 오류가 엄청 떴다.

 

결국 찾아보면 해당 title은 수정할 수 없는 '읽기 전용' 이라는 거였는데 스택오버플로우에서도 ... 딥 카피를 이용하라고 했으나 이미 딥 카피를 이용하고 있었다.

이게 안되면 JSON을 텍스트로 변환했다가 다시 파싱하라고 해서 해봤는데도 안되더라.

해결 방법은 useRecoilState로 받아온 todo 객체를 originTodo라는 이름으로 받아서 미리 딥 카피하고, 그걸 함수에서 받아 JSON 파싱을 해서 recoilState와 완전 관련없는 객체로 만들어버린 다음에 setOriginTodo로 덮어씌우는 방식을 사용하니 정상적으로 recoil에 업데이트 되었다.

 

 

코드는 아래와 같다.

 

let [originTodo, setOriginTodo] = useRecoilState(todoData); //recoil에 있는 todo 원본 객체
let todo = [...originTodo]; //originTodo Deep Copy

//투두 클릭-수정 버튼 이벤트 핸들러 - 투두 클릭했을 때
const clickTodoEditHandler = (e) => {
    const index = e.currentTarget.dataset.index;
    const newArr = Array(todo.length).fill(true);
    newArr[index] = false;
    setTodoReadOnly(newArr)
    handleTodoModalClose();
}

//투두 수정 이벤트 핸들러
const todoEditEventHandler = (e) => {
    let index = parseInt(e.target.dataset.index);
    let value = e.target.value;
    const originTodo = JSON.parse(JSON.stringify(todo)); // todo State 카피
    originTodo[index].title = value;
    setOriginTodo(originTodo) ; //setOriginTodo를 이용해 state 변경
}

 

CSS 를 약간 수정해 자연스럽게 만들어 주니 아래와 같이 동작했다.

maxLength도 35자로 줄였고 모달에서도 2줄 이상 노출되지 않도록 text-overflow: ellipsis;를 주었다. 

 

 

 

 

바깥 쪽을 클릭하거나 엔터를 쳤을 경우 자연스럽게 readOnly가 바뀌면서 자동으로 submit이 되는 것 같이 보이기 위해서 두 가지의 이벤트 핸들러를 구현했다.

 

각각 input에 onKeyDown과 onBlur로 적용했다.

 

 

<input key={`todo${index}`} id="todo-input" className="goals-todo-list-input" type="text" maxLength={"80"} 
name={todo.title} data-index={index} readOnly={todoReadOnly[index]} value={todo.title} 
onChange={todoEditEventHandler} onKeyDown={enterKeyEventHandler} 
onBlur={inputLostFocusEventHandler}  />


//외부 클릭 readonly 변경
const inputLostFocusEventHandler = (e) => {
    let newArr = Array(todo.length).fill(true);
    setTodoReadOnly(newArr)
}

//투두 수정 이벤트 핸들러
const clickTodoEditHandler = (e) => {
    console.log("현재 인덱스 ", e.currentTarget.dataset.index)
    const index = e.currentTarget.dataset.index;
    const newArr = Array(todo.length).fill(true);
    newArr[index] = false;
    console.log("newArr[index]", index, newArr[index], newArr)
    setTodoReadOnly(newArr)
    handleTodoModalClose();
}

 

 

 

삭제 기능

 

 

수정 기능이 하도 안 풀려서 삭제를 먼저 만들었었다. 구조는 목표 때와 똑같지만 이번엔 filter로 걸러낼 수가 없었다.

 

왜냐면 현재 todo 객체의 index 값을 이용해서 모든 정보를 처리하고 있었기 때문에

삭제를 위해서 goal_id와 todo_id를 비교해서 맞는 값을 찾아 filter로 걸러내는 복잡한 방식을 구현하고 싶지 않았다.

 

todo가 어쨌든 순서를 가진 배열로 받아올 수 있고 순회 가능한 정보.. 이기 때문에 index로 구현하는 것이 가장 쉽고 빨랐다고 생각한다ㅠ 

 

 

그래서 구현한 것은 아래와 같다. 모달의 delete 버튼에 onClick으로 연결해 주었고 클릭하면 즉시 삭제되도록 하였다.

 

//투두 삭제 이벤트 핸들러
const clickTodoDeleteHandler = (e) => {
    let index = parseInt(e.currentTarget.dataset.index);
    const originTodo = [...todo]; // todo State 원본 카피
    originTodo.splice(index, 1) //원본 todo 배열에서 해당 index 찾아서 1개 삭제
    setOriginTodo(originTodo) ;//setOriginTodo를 이용해 state 변경
    handleTodoModalClose();
}

 

이건 splice한 거라 수정에서 겪은 것 처럼 '읽기 전용' 오류가 뜨지는 않았다. 그러나 수정을 만들고 나서 딥 카피한 todo를 다시 딥 카피해서 사용했다.

원본 불변의 법칙을 잊지 말고 딥 카피해서 사용하자. 자꾸 날 것의 정보를 뜯어서 사용하려고 하니까 오류가 뜬다.

 

그리고 수정이건 삭제건 버튼을 클릭하면 모달이 사라져야 하기 때문에 handleTodoModalClose() 함수를 실행시켜 모달이 종료될 수 있도록 해준다.

 

이제 할 일은 3개의 날짜, 순서 변경 버튼과 체크를 클릭하면 완료 여부 state가 변경될 수 있도록 하는 것이다..!