[project] 게시글 'C'RUD

📌

오늘의 프로젝트 작업은 ~ 게임기능외 커뮤니티 서비스가 있었으면 좋겠다는 의견들이 있어서 간단한 글을 작성하고 확인할수 있는 게시판을 구현 하기로 했습니다 😊😊
제가 맡은 부분은 글 작성/수정 인데요 작성 기능 먼저 구현해 보았습니다 !

function WritePost() {
  const dispatch = useDispatch();
  const [categoryCheck, setCategoryCheck] = useState('freeBoard');
  const [content, setContent] = useState('');
  const [title, setTitle] = useState('');
  const [img, setImg] = useState(null);
  function onChangeCheck(e) {
    setCategoryCheck(e.target.value);
  }

  function sendPost() {
    const post = {
      category: categoryCheck,
      content,
      title,
    };
    dispatch(createPost({ post, img }));
  }

  return (
    <StWritePost>
      <StWritePostHeader>
        <Link to="/posts/all">
          <StBackBtn>
            <img src={backBtn} alt="뒤로 가기" />
          </StBackBtn>
        </Link>
        <StTitle>게시글 작성</StTitle>
      </StWritePostHeader>
      <StInputBox>
        <StRadioBox>
          <label className="free">
            <input
              type="radio"
              value="freeBoard"
              checked={categoryCheck === 'freeBoard'}
              onChange={onChangeCheck}
            />
            자유 게시판
          </label>
          <label>
            <input
              type="radio"
              value="feedbackBoard"
              checked={categoryCheck === 'feedbackBoard'}
              onChange={onChangeCheck}
            />
            유저 피드백
          </label>
        </StRadioBox>
        <input
          type="file"
          accept="image/*"
          onChange={(e) => {
            setImg(e.target.files[0]);
          }}
        />
      </StInputBox>
      <StPostSection>
        <StTitleArea
          onChange={(e) => {
            setTitle(e.target.value);
          }}
          placeholder="제목을 입력해주세요."
        />
        <StContentArea
          onChange={(e) => {
            setContent(e.target.value);
          }}
          placeholder="내용을 입력해주세요."
        />
      </StPostSection>
      <StWritePostBtn type="button" onClick={sendPost}>
        <img src={okBtn} alt="확인" />
      </StWritePostBtn>
    </StWritePost>
  );
}

🔧 카테고리는 총 2가지로 구성되어 있고 dispatch를 사용하여 api 요청을 보냈습니다 해당 요청을 보내는 module 파일을 확인 해보겠습니다!

export const createPost = createAsyncThunk(
  'post/CREATE_POST',
  async (payload, thunkAPI) => {
    try {
      const formData = new FormData();
      const json = JSON.stringify(payload.post);
      const blob = new Blob([json], { type: 'application/json' });
      formData.append('postRequestDto', blob);
      formData.append('data', payload.img);

      const response = await instance.post('/posts/write', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

🔧 모듈 파일에서 thunk를 사용한 부분입니다! 서버로 전송할 데이터를 multipart/form-data 화 시킨후 전달 합니다!

export const postSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: {
    [createPost.pending]: (state) => {
      state.isLoading = true;
    },
    [createPost.fulfilled]: (state, action) => {
      window.location.href = `/posts/${action.payload.id}`;
      state.isLoading = false;
    },
    [createPost.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
    [readAllPosts.fulfilled]: (state, action) => {
      console.log('readAll action payload', action.payload);
      state.posts = action.payload;
    },
    [readAllPosts.rejected]: (state, action) => {
      state.error = action.payload;
    },
    [readPostsByCategory.fulfilled]: (state, action) => {
      console.log('readCategory action payload', action.payload);
      state.posts = action.payload;
    },
    [readPostsByCategory.rejected]: (state, action) => {
      state.error = action.payload;
    },
  },
});

🔧 리듀서 부분입니다 ! createPost.fulfilled 부분을 살펴 보시면 글작성 요청을 보낸후 서버로 부터 작성한 글에대한 정보를 응답으로 받는데 해당 데이터에서 글의 id 값을 이용하여 페이를 이동시켜 줄 예정입니다