modifyForm.tsx

수정 하는 페이지

import

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import modifyUserData from "../../redux/thunks/boardModifyThunk";

Modify

//선택한 페이지 id 받음
const { id } = useParams();

//선택한 보드 id
const selectedBoardId = useSelector(
    (state: any) => state.board.selectedBoardId
  );
//사용자 입력 데이터
const userData = useSelector((state: any) => state.boardItemMap.boarditem);
 
//사용자 정보
const userUidValue = useSelector((state: any) => state.login.user);
const uidVar = userUidValue?.uid;
const userDB = userData[selectedBoardId][0];

const dispatch = useDispatch();


//사용자가 입력 한 데이터 관련 hook
const [titleValue, settitleValue] = useState("");
const [contentValue, setContentValue] = useState("");

const navigate = useNavigate();


const handleWrite = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      const userData = {
        did: selectedBoardId, //board에서 불러 온 값
        title: titleValue,
        content: contentValue,
        timedata: new Date(),
        userUid: uidVar,
        isModified: true,
      };

      console.log(selectedBoardId);
      console.log(userData);
      dispatch(
        modifyUserData({
          boardId: selectedBoardId,
          boarditem: userData,
        }) as any
      );

      navigate(`/pagemo/${selectedBoardId}`); //수정 된 화면 경로
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };

modifyUserData에서 선택되는 값은 선택된 boardId와 사용자 입력 데이터

return

return (
    <>
      <div className="container">
        <header>
          <h1>글 수정 페이지 </h1>
        </header>
        <form onSubmit={handleWrite}>
          <div className="input_box">
            <input
              type="text"
              defaultValue={userDB.title} //등록된 데이터 출력
              placeholder="제목을 입력해주세요."
              onChange={(e) => settitleValue(e.target.value)}
            />
          </div>
          <div className="textarea_box">
            <textarea
              defaultValue={userDB.content}
              placeholder="내용을 입력 해주세요"
              onChange={(e) => setContentValue(e.target.value)}
            ></textarea>
            <input type="file" className="file_box" />
          </div>
          <div className="form_btn_box">
            <input type="submit" value="등록" />
            <input type="button" value="취소" />
          </div>
        </form>
      </div>
    </>
  );

수정 화면에서는 기존에 있었던 데이터가 input창에 출력 되도록 작업
사용자가 입력 하는 값에는 isModified를 추가 하여 수정전 false 수정 후 true로 변경 되도록 작업