[React / ts] Task App 만들기 - ④ Modal 만들기

 

일(Task)를 눌렀을 때 해당 정보가 모달로 나오도록 구현해보자.

// EditModal.tsx

import React, { ChangeEvent, useState } from "react";
import { FiX } from "react-icons/fi";
import { useTypedDispatch, useTypedSelector } from "../../hooks/redux";
import {
  deleteTask,
  setModalActive,
  updateTask,
} from "../../store/slices/boardsSlice";
import { addLog } from "../../store/slices/loggerSlice";
import { v4 } from "uuid";
import {
  buttons,
  closeButton,
  deleteButton,
  header,
  input,
  modalWindow,
  title,
  updateButton,
  wrapper,
} from "./EditModal.css";

const EditModal = () => {
  const editingState = useTypedSelector((state) => state.modals);
  const dispatch = useTypedDispatch();

  const [data, setData] = useState(editingState);

  const handleCloseButton = () => {
    dispatch(setModalActive(false));
  };

  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setData({
      ...data,
      task: {
        ...data.task,
        taskName: e.target.value,
      },
    });
  };

  const handleDescriptionChange = (e: ChangeEvent<HTMLInputElement>) => {
    setData({
      ...data,
      task: {
        ...data.task,
        taskDescription: e.target.value,
      },
    });
  };

  const handleAuthorChange = (e: ChangeEvent<HTMLInputElement>) => {
    setData({
      ...data,
      task: {
        ...data.task,
        taskOwner: e.target.value,
      },
    });
  };

  const handleUpdate = () => {
    dispatch(
      updateTask({
        boardId: editingState.boardId,
        listId: editingState.listId,
        task: data.task,
      })
    );
    dispatch(
      addLog({
        logId: v4(),
        logMessage: `일 수정하기: ${editingState.task.taskName}`,
        logAuthor: "User",
        logTimestamp: Date.now().toString(),
      })
    );
    dispatch(setModalActive(false));
  };

  const handleDelete = () => {
    dispatch(
      deleteTask({
        boardId: editingState.boardId,
        listId: editingState.listId,
        taskId: editingState.task.taskId,
      })
    );
    dispatch(
      addLog({
        logId: v4(),
        logMessage: `일 삭제하기: ${editingState.task.taskName}`,
        logAuthor: "User",
        logTimestamp: Date.now().toString(),
      })
    );
    dispatch(setModalActive(false));
  };

  return (
    <div className={wrapper}>
      <div className={modalWindow}>
        <div className={header}>
          <div className={title}>{editingState.task.taskName}</div>
          <FiX className={closeButton} onClick={handleCloseButton} />
        </div>
        <div className={title}>제목</div>
        <input
          className={input}
          type="Text"
          value={data.task.taskName}
          onChange={handleNameChange}
        />
        <div className={title}>설명</div>
        <input
          className={input}
          type="text"
          value={data.task.taskDescription}
          onChange={handleDescriptionChange}
        />
        <div className={title}>생성한 사람</div>
        <input
          className={input}
          type="text"
          value={data.task.taskOwner}
          onChange={handleAuthorChange}
        />
        <div className={buttons}>
          <button className={updateButton} onClick={handleUpdate}>
            일 수정하기
          </button>
          <button className={deleteButton} onClick={handleDelete}>
            {" "}
            일 삭제하기
          </button>
        </div>
      </div>
    </div>
  );
};

export default EditModal;

 

// boardsSlice.ts

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
    );
  },
},

 

이전에 board와 list를 추가, 업데이트, 삭제할 때와 마찬가지로 updateTask와 deleteTask를 reducer에 추가해주고

EditModal에서 각 기능을 수행할 수 있도록 구현해주면 된다.