[49일차]게시판 삭제 기능 추가

1. 핵심 파일 및 역할

• App.tsx:
  사용자의 상호작용을 처리하는 최상위 컴포넌트이다. 삭제 버튼의 이벤트 핸들러(handleDeleteBoard)를 포함하며, Redux 상태 변화에 따라 UI를 렌더링하는 역할을 담당한다.

• store/slices/boardsSlice.ts:
  게시판과 관련된 Redux 상태 로직을 관리하는 슬라이스(Slice)이다. deleteBoard 액션과 해당 리듀서를 정의하여 실제 상태(state)에서 게시판을 제거하는 역할을 수행한다.

---

2. 실행 흐름 (Execution Flow)

게시판 삭제 기능은 다음의 순서로 실행된다.

2.1. 사용자 입력 (User Input)

• 사용자가 UI의 "게시판 삭제" 버튼을 클릭한다.
• 이 버튼에는 onClick 이벤트에 handleDeleteBoard 함수가 바인딩되어 있다.

// App.tsx
<button className={deleteBoardButton} onClick={handleDeleteBoard}>
  게시판 삭제
</button>

---

2.2. 이벤트 핸들러 실행 (handleDeleteBoard)

• App.tsx 내의 handleDeleteBoard 함수가 호출된다.

---

2.3. 삭제 조건 검사

• 함수 내부에서 현재 존재하는 게시판의 개수(boards.length)를 확인한다.
• 게시판이 1개를 초과할 경우에만 삭제 로직이 진행되며,
  그렇지 않으면 alert을 통해 사용자에게 "최소 한 개의 게시판은 남겨두어야 합니다."라는 메시지를 알린다.
  이는 애플리케이션의 최소 기능 유지를 위한 방어 로직이다.

// App.tsx
if (boards.length > 1) {
  // ...삭제 로직 진행
} else {
  alert("최소 한 개의 게시판은 남겨두어야 합니다.");
}

---

2.4. 상태 변경 요청 (Dispatch)

• 조건을 만족하면, Redux에 두 가지 액션을 순차적으로 디스패치(dispatch)한다.

  1. deleteBoard 액션:
     boardsSlice에 정의된 액션으로, 삭제할 게시판의 boardId를 페이로드(payload)로 전달한다. 이는 Store에 게시판 제거를 요청하는 핵심 명령이다.

  2. addLog 액션:
     loggerSlice에 정의된 액션으로, 게시판 삭제 활동을 기록하기 위한 로그 데이터를 전달한다.

// App.tsx
const boardToDelete = getActiveBoard;
if (!boardToDelete) return;

// 1. 게시판 삭제 요청
dispatch(deleteBoard({ boardId: boardToDelete.boardId }));

// 2. 활동 로그 기록 요청
dispatch(
  addLog({
    logId: v4(),
    logMessage: `게시판 삭제하기: ${boardToDelete.boardName}`,
    logAuthor: "JHParrrk",
    logTimestamp: String(Date.now()),
  })
);

---

2.5. 리듀서 실행 (Reducer Execution)

• dispatch(deleteBoard(...)) 요청을 받은 Redux Store는 boardsSlice의 deleteBoard 리듀서를 실행한다.
• 리듀서는 state.boardArray를 filter 메서드로 순회하며, 액션 페이로드로 받은 boardId와 일치하지 않는 게시판만으로 구성된 새로운 배열을 생성하여 state.boardArray에 할당한다.
• Redux Toolkit에 포함된 Immer 라이브러리 덕분에, 위와 같은 "직접 수정" 방식의 코드가 내부적으로 불변성을 유지하며 안전하게 상태를 업데이트한다.

// store/slices/boardsSlice.ts