221223 - TIL

import styled from "styled-components";
import { useDispatch } from "react-redux";
import CustomBtn from "./CustomBtn";
import { deleteBoard } from "../redux/modules/boardSlice";

const BoardItemBox = styled.div`
  border: 1px solid gray;
  border-radius: 20px;

  max-width: 320px;
  min-height: 170px;

  padding: 20px;
`;

const Close = styled.button`
  border: 0px;
  font-size: 24px;
`;

const TitleBox = styled.h2`
  background-color: aqua;
  min-height: 70px;
`;

const BoardItem = () => {
  const dispatch = useDispatch();

  const propsinit = [
    {
      id: "vzSp-jzTXppJSSP3eLZ3k",
      category: "working",
      title: "진행 중 제목",
      content: "보드 내용",
      pw: "보드 비밀번호",
      comments: [
        {
          id: "h-e0M_yaI40OgkHQv_0Yd",
          name: "작성자 이름",
          pw: "작성자 비밀번호",
          comment: "댓글",
        },
      ],
    },
    {
      id: "L1--H0Ob0NOMlfXUHt9r5",
      category: "validate",
      title: "QA 제목",
      content: "보드 내용",
      pw: "보드 비밀번호",
      comments: [
        {
          id: "CP93RdIrJI_xPxj0AVvjd",
          name: "작성자 이름",
          pw: "작성자 비밀번호",
          comment: "댓글",
        },
      ],
    },
  ];

  const onDelete = (id) => {
    dispatch(deleteBoard(id));
  };

  return (
    <BoardItemBox>
      <div> 담당자 </div>
      <TitleBox> {propsinit[0].title} </TitleBox>
      <CustomBtn
        category="progress"
        BoardItemId={propsinit[0].id}
        nameBtn="착수"
      >
        착수
      </CustomBtn>
      <CustomBtn category="back" BoardItemId={propsinit[0].id} nameBtn="번복">
        번복
      </CustomBtn>
      <CustomBtn
        category="validate"
        BoardItemId={propsinit[0].id}
        nameBtn="검토"
      >
        검토
      </CustomBtn>
      <CustomBtn
        category="complete"
        BoardItemId={propsinit[0].id}
        nameBtn="완료"
      >
        완료
      </CustomBtn>
      <CustomBtn
        category="archive"
        BoardItemId={propsinit[0].id}
        nameBtn="저장"
      >
        저장
      </CustomBtn>
      <Close
        onClick={() => {
          onDelete(propsinit[0].id);
        }}
      >
        x
      </Close>
    </BoardItemBox>
  );
};

export default BoardItem;

KANBAN Board에서 board component 를 담당했고 만들었습니다.
대표기능은 axios.patch를 사용한 category update와 exit(x표시 버튼)을 클릭했을 때 사용될 delete 기능 입니다. css는 이후 main page와 합치고 색상 및 layout을 수정할 예정입니다.

CustomBtn을 통해 button을 컴포넌트화 시켰는데 조금 더 간결할 수 있도록 고민해야겠습니다.
어려울 것 같진 않습니다. switching 될 수 있도록 버튼 컴포넌트를 수정하면 될 것 같습니다.

import styled from "styled-components";
import { useDispatch } from "react-redux";
import { toggle } from "../redux/modules/boardSlice";

const CustomBtnStyle = styled.button`
  margin: 5px;
`;

const CustomBtn = ({ nameBtn, BoardItemId, category }) => {
  const dispatch = useDispatch();

  const onToggle = (BoardItemId, category) => {
    dispatch(toggle([BoardItemId, category]));
  }; 

  return (
    <CustomBtnStyle onClick={() => onToggle(BoardItemId, category)}>
      {nameBtn}
    </CustomBtnStyle>
  );
};

export default CustomBtn;

커스텀한 button component 입니다.
useDispatch를 사용해서 toggle 함수 (category를 수정해줄 예정)를 사용합니다.

const boardSlice = createSlice({
  name: "boards",
  initialState,
  reducers: {
    toggle: (state, action) => {
      axios.patch(`http://localhost:3001/boards/${action.payload[0]}`, {
        category: action.payload[1],
      });

      state.boards.forEach((todo) => {
        if (todo.id == action.payload) {
          todo.category = action.payload[1];
        }
      });
    },
    deleteBoard: (state, action) => {
      axios.delete(`http://localhost:3001/boards/${action.payload}`);
      state.todos = state.boards.filter((board) => board.id !== action.payload);
    },
  },
  extraReducers: (builder) => {
   ...
  }
});

slice 부분입니다. reducers에 toggle과 deleteBoaad 를 추가했습니다.
patch를 사용할 때 api가 잘 이해가지 않아서 조금 고생했습니다. (30분정도...)
일단 초기값을 임시로 받아서 사용할 때는 문제가 없습니다. 그러나 자세한 확인은 실제 crud 모두를 구성하고 확인해봐야할 것 같습니다.

위의 기능들을 모두 구성하는데 5시부터 9시까지 걸렸던 것 같습니다. 총 4시간이 걸렸다는 것인데. 2시간이면 뚝딱할 거를 너무 질질 끌었던 것 같습니다. 근본 없는 실력이 문제인듯. 탄탄한 실력이 될 수 있도록 더더더더더더더더더더더더더 노력할 것