TodoList 발전시키기

---

라우팅 설정

기존 TodoItem 에 onClick 와 useNavigate 사용하여 페이지 이동기능 추가

<li>
      <TodoCardItemContainer onClick={() => navigate(`/detail/${id}`)}>
        <TodoCardItem $isDone={isDone}>
          <h3>{title}</h3>
          <p>{content}</p>
          <time>{formattedDeadLine}</time>
        </TodoCardItem>
        <TodoActionContainer>
          <TodoActionBtn
            $backgroundColor="tomato"
            onClick={() => onDeleteTodoItem(id)}
          >
            삭제
          </TodoActionBtn>
          <TodoActionBtn
            $backgroundColor="skyblue"
            onClick={() => onToggleTodoItem(id)}
          >
            {isDone ? "취소" : "완료"}
          </TodoActionBtn>
        </TodoActionContainer>
      </TodoCardItemContainer>
    </li>

Router.js 파일을 만들어서 BrowserRouter, Route, Routes 를 import 하고 이동할 페이지 설정

function Router() {
  return (
    <BrowserRouter>
      <Routes >
        <Route path="/" element={<Home/>}/>
        <Route path="/detail/:id" element={<Detail/>}/>
      </Routes>
    </BrowserRouter>
  )
}

문제점

<TodoCardItemContainer onClick={() => navigate(`/detail/${id}`)}>

위 코드대로 navigate를 설정했더니 todo 에 있는 "완료" 와 "삭제" 버튼이 안되고 navigate 기능이 작동되고있었다.
TodoCardItem 에 적용시키면 버튼이 활성화 될테지만 카드 전체 영역에 기능을 넣고싶어서 찾아보니 stopPropagation 라는 기능이 있었다. stopPropagation 는 이벤트 전파를 막는 기능이라고 한다.

<TodoActionContainer onClick={(e) => e.stopPropagation()}>
          <TodoActionBtn
            $backgroundColor="tomato"
            onClick={() => onDeleteTodoItem(id)}
          >
            삭제
          </TodoActionBtn>
          <TodoActionBtn
            $backgroundColor="skyblue"
            onClick={() => onToggleTodoItem(id)}
          >
            {isDone ? "취소" : "완료"}
          </TodoActionBtn>

TodoActionContainer 부분에 stopPropagation 넣어서 버튼이 작동하게 만들었다.