📚 Part 3 수정, 삭제, 그리고 로그 기능 추가하기

---

📌 Modal Edit

const boardsSlice = createSlice({
    name : 'boards',
    initialState,
    reducers : {
        updateTask: (state, {payload}: PayloadAction<TAddTaskAction>) => {
            state.boardArray = state.boardArray.map(board => 
                board.boardId === payload.boardId
                   ?
                    {
                       ...board,
                        lists: board.lists.map(list =>
                            list.listId === payload.listId
                               ? {
                                   ...list,
                                    tasks: list.tasks.map(task =>
                                        task.taskId === payload.task.taskId
                                            ? payload.task
                                            : task
                                    )
                                }
                                : list
                        )
                    }
                    : board
            )
        },

        deleteTask: (state, {payload}: PayloadAction<TDeleteTaskAction>) => {
            state.boardArray = state.boardArray.map(board =>
                board.boardId === payload.boardId
                   ?
                    {
                       ...board,
                        lists: board.lists.map(list =>
                            list.listId === payload.listId
                               ? {
                                   ...list,
                                    tasks: list.tasks.filter(
                                        task => task.taskId !== payload.taskId
                                    )
                                }
                                : list
                        )
                    }
                    : board
            )
        }
    }
});

이 기능을 dispatch하여 task 수정, 삭제 기능 추가

📌 Logger Modal & LogItem

const LogItem: FC<TLogItemProps> = ({
  logItem
}) => {
  let timeOffset = new Date(Date.now() - Number(logItem.logTimestamp));

  const showOffsetTime = `
    ${timeOffset.getMinutes() > 0 ? `${timeOffset.getMinutes()}m` : ""}
    ${timeOffset.getSeconds() > 0 ? `${timeOffset.getSeconds()}s ago` : ""}
    ${timeOffset.getSeconds() === 0 ? 'just now' : ""}
    `

  return (
    <div className={logItemWrap}>
      <div className={author}>
        <BsFillPersonFill />
        {logItem.logAuthor}
      </div>
      <div className={message}>{logItem.logMessage}</div>
      <div className={date}>{showOffsetTime}</div>
    </div>
  )
}

로그 보여주기 (시간 계산하여)

📌 게시판 삭제

const boardsSlice = createSlice({
    name : 'boards',
    initialState,
    reducers : {
        deleteBoard: (state, {payload}: PayloadAction<TDeleteBoardAction>) => {
            state.boardArray = state.boardArray.filter(
                board => board.boardId !== payload.boardId
            );
        },
      }
});

게시판 삭제 기능 추가