Form

코드정리
사용안하는 라이브러리 제거

사용자 정보 불러오기
기존

 const auth = getAuth();
  const currentUser = auth.currentUser;
  const userId = currentUser?.uid;

수정

 // 로그인한 사용자 상태
  const userUidValue = useSelector((state: any) => state.login.user);
  const userId = userUidValue?.uid;

입력 state 통합
기존

 const [titleValue, settitleValue] = useState("");
  const [contentValue, setContentValue] = useState("");
  
  try {
      //userData는 이 액션에 전달할 데이터
      //액션의 목적에 따라 어떤 데이터를 전달할지 정의
      const userData = {
        did: selectedBoardId, //board에서 불러 온 값
        title: titleValue,
        content: contentValue,
        timedata: new Date(),
        userUid: userId as string,
        isModified: false,
      };
      await dispatch(
        addUserData({
          boardId: selectedBoardId,
          boarditem: userData,
        }) as any
      );

      settitleValue("");
      setContentValue("");

      // navigate("/page"); 기존 상세페이지로 이동 코드
      navigate(`/page/${selectedBoardId}`); //수정 된 코드
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
    
    
    return
     <div className="input_box">
            <input
              type="text"
              maxLength={30}
              defaultValue={titleValue}
              placeholder="제목을 입력해주세요."
              onChange={(e) => settitleValue(e.target.value)}
            />
          </div>
          <div className="textarea_box">
            <textarea
              defaultValue={contentValue}
              placeholder="내용을 입력 해주세요"
              onChange={(e) => setContentValue(e.target.value)}
            />

수정

addUserDatad 의 타입을 지정 하고 싶었는데 gpt에게 질문 한 결과..

일반적으로 Redux Toolkit에서 createAsyncThunk를 사용하면서, 해당 액션의 반환 타입을 명시적으로 지정하는 것은 까다로운 부분이 될 수 있습니다.보통 Redux Toolkit은 내부에서 액션 타입을 처리하고, 이에 따라 상태 업데이트를 자동으로 처리합니다.

state 통합 하여 값을 객체로 받고 태그에 name추가
setFormValue({
...formValue,
fieldName]: fieldValue, 형식으로 데이터 추가
});

 //사용자가 입력 한 데이터
  const [formValue, setFormValue] = useState({
    title: "",
    content: "",
  });
  
  try {
      //userData는 이 액션에 전달할 데이터
      //액션의 목적에 따라 어떤 데이터를 전달할지 정의
      const userData = {
        did: selectedBoardId, //board에서 불러 온 값
        title: formValue.title,
        content: formValue.content,
        timedata: new Date(),
        userUid: userId as string,
        isModified: false,
      };

     
      await dispatch(
        addUserData({
          boardId: selectedBoardId,
          boarditem: userData,
        }) as any
      );
      setFormValue({
        ...formValue,
        [fieldName]: fieldValue,
      });

      navigate(`/page/${selectedBoardId}`);
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };
  
  return
   <input
              type="text"
              maxLength={30}
              name="title"
              value={formValue.title}
              placeholder="제목을 입력해주세요."
              onChange={(e) =>
                setFormValue({ ...formValue, title: e.target.value })
              }
            />
          </div>
          <div className="textarea_box">
            <textarea
              value={formValue.content}
              name="content"
              placeholder="내용을 입력 해주세요"
              onChange={(e) =>
                setFormValue({ ...formValue, content: e.target.value })
              }
            />