항해 25일차 (테스트)

항해 25일차

오늘은 이번 주에 대한 테스트를 보았다.

간단하게 테스트에 대한 부분들을 보면

먼저 첫 번째 문제는

1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.

수정 전 
const onSubmitHandler = (event) => {
event.preventDefault();
if (todo.title.trim() === "" || todo.body.trim() === "") return;

setTodo({
id: 0,
title: "",
body: "",
isDone: false,
});
};

수정 후
const dispatch = useDispatch();
const onSubmitHandler = (event) => {
event.preventDefault();
if (todo.title.trim() === "" || todo.body.trim() === "") return;

dispatch(addTodo(todo));

setTodo({
id: 0,
title: "",
body: "",
isDone: false,
});
};

onSubmitHandler에서 redux의 todos에 입력한 todo 항목을 추가하는 부분이 빠져있다.

2. 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐

수정 전
const todos = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [action.payload],
};
...
};
    
수정 후
const todos = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos, action.payload],
};
...
};

todos.js의 ADD_TODO에서, 기존 state와 새로 입력받은 todo를 함께 저장해야 하는데, 새로 입력받은 todo만 저장하고 있다.

3. 삭제 기능이 동작하지 않음.

수정 전 

const todos = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos, action.payload],
};
case TOGGLE_STATUS_TODO:
...
case GET_TODO_BY_ID:
...
default:
...
}
};
  
수정 후

const todos = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos, { ...action.payload, id: String(state.todos.length + 1) }],
};

case DELETE_TODO:
return {
...state,
todos: state.todos.filter((todo) => (todo.id !== action.payload)),
};
case TOGGLE_STATUS_TODO:
...
case GET_TODO_BY_ID:
...
default:
...
}
};

todos에 DELETE_TODO case가 없고, 추가된 todo들이 모두 0이라는 동일한 id를 가지고 있다.

4. 상세 페이지에 진입 하였을 때 데이터가 업데이트 되지 않음.

수정 전 
...
const dispatch = useDispatch();
const todo = useSelector((state) => state.todos.todo);

const { id } = useParams();
...
수정 후
...
const dispatch = useDispatch();
const { id } = useParams();

const todo = useSelector((state) => state.todos.todo);

useEffect(() => {
dispatch(getTodoByID(id));
}, []);
const navigate = useNavigate();
...

useParams으로 받은 id로 state의 todos에서 todo를 검색하는 부분이 빠져있다.dispatch의 getTodoByID로 useParams으로 받은 id의 데이터를 검색하도록 하였다.dispatch는 페이지 접속 시 1회만 실행되도록 useEffect로 감쌌다.

5. 완료된 카드의 상세 페이지에 진입 하였을 때 올바른 데이터를 불러오지 못함.

수정 전
<StLink to={`/${index}`} key={todo.id}>
->
수정 후
<StLink to={`/${todo.id}`} key={todo.id}>

Done 리스트에서 StLink의 to가 index로 설정되어 있습니다. id를 참조하여 페이지를 이동할 수 있도록 변경했습니다.

6. 취소 버튼 클릭시 기능이 작동하지 않음.

수정 전
<StButton
borderColor="green"
onClick={onToggleStatusTodo}
>
->
수정 후
<StButton
borderColor="green"
onClick={() => onToggleStatusTodo(todo.id)}
>

취소 버튼의 onClick에 함수 자체가 들어있다. 함수가 실행될 수 있도록 event 발생 후 onToggleStatusTodo에 id를 담아 실행하는 형태로 변경했다.

마무리

상세보기 부분에서 조금 막혔지만, 테스트를 잘 풀어나간 거 같아 뿌듯하였고, 한 주를 잘 보낸거 같은 기분이 들어 좋았다.