[재활용 프로젝트][리액트] post edit page 구현

목차

 

완성된 모습

게시물 수정하는 페이지

 

PostEditPage 코드 구현

이미지 파일 수정은 추후 수정 예정

import { useNavigate, useParams } from 'react-router-dom';
import { useCallback, useEffect, useState } from 'react';
import { Button } from '@mui/material';
import { useRecoilState } from 'recoil';
import { UserInterface } from 'configs/interface/UserInterface';
import { userState } from 'store/atom/UserAtom';
import { Position } from 'configs/interface/KakaoMapInterface';
import { patchData } from 'services/patchData';
import { useMutation, useQuery } from '@tanstack/react-query';
import { getData } from 'services/getData';
import ImageUploader from './ImageUploader';
import TextArea from './TextArea';
import PostAddPostion from './PostAddPostion';
import styles from './PostEdit.module.scss';

import {
  FormDataEntryInterface,
  postFormData,
} from '../../services/postFormData';
function PostEdit() {
  // const token = useSelector((state) => state.Auth.token);
  const navigate = useNavigate();
  // URI 파라미터 가져오기
  const { postId } = useParams();
  // 게시판 제목, 내용, 사진
  // 게시판 제목, 내용, 사진
  const [user, setUser] = useRecoilState<UserInterface>(userState);
  const [image, setImage] = useState({
    image_file: '',
    preview_URL: './img/profile.png',
  });
  const [position, setPosition] = useState<Position>({
    lat: 0,
    lng: 0,
  });
  const { data: board, isSuccess } = useQuery({
    queryKey: ['postList', postId],
    queryFn: ({ signal }) => getData<any>(`api/boards/${postId}`, signal),
  });

  useEffect(() => {
    console.log(board);
  }, [board]);
  const canSubmit = useCallback(() => {   //모든 내용이 입력되야 함
    return (  //usecallback을 통해 특정 함수를 새로 만들지 않고 재사용
      image.image_file !== '' &&
      user.content !== '' &&
      user.title !== '' &&
      position.lat !== 0 &&
      position.lng !== 0 &&
      user.nickname !== '' &&
      user.password !== ''
    );
  }, [image, user.title, user.content, user.latitude, user.longitude]);
  const handleSubmit = useCallback(async () => {
    try {
      const Data = {
        nickname: user.nickname,
        password: user.password,
        title: user.title,
        content: user.content,
        image: '',  //이미지 파일은 아직 안됨
        latitude: position.lat.toString(),
        longitude: position.lng.toString(),
      };

      console.log(Data);
      const response = await patchData(`api/boards/${postId}`, Data);
   
      console.log(response);
      window.alert('등록이 완료되었습니다');
      navigate('/postView');
    } catch (e) {
      console.log('patch-error');
    }
  }, [canSubmit]);
  return (
    <div className={styles['addBoard-wrapper']}>
      <div className={styles['addBoard-header']}>게시물 수정하기 🖊️</div>
      <div className={styles.submitButton}>
        {canSubmit() ? (
          <Button
            onClick={handleSubmit}
            className={styles['success-button']}
            variant="outlined"
          >
            수정하기
          </Button>
        ) : (
          <Button
            className={styles['disable-button']}
            variant="outlined"
            size="large"
          >
            수정힐 내용을 모두 입력하세요
          </Button>
        )}
      </div>
      <div className={styles['addBoard-body']}>
      //이전 contents값 불러오기 
        {board && <TextArea contents={board.content} titles={board.title} />}
        <ImageUploader setImage={setImage} />
        <PostAddPostion position={position} setPosition={setPosition} />
      </div>
    </div>
  );
}

export default PostEdit;