[ 24 ] 게시판 수정하기 실습 1편

원리

 

등록하기 페이지 

import BoardWrite from "../../../../src/components/units/board/09-write/BoardWrite.container";

export default function GraphqlMutationPage() {
  return (
    <div>
      <BoardWrite isEdit={false} />
    </div>
  );
}

 

상세 페이지 

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

const FETCH_BOARD = gql`
  query fetchBoard($number: Int) {
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const router = useRouter();
  console.log(router);

  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.number),
    },
  });

  console.log(data);

  const onClickMove = () => {
    router.push(`/section09/09-03-boards/${router.query.number}/edit`);
  };

  return (
    <div>
      <div>{router.query.number}번 페이지 이동이 완료되었습니다.</div>
      {/* <div>작성자 : {data ?? data.fetchBoard.writer}</div> */}
      <div>작성자 : {data?.fetchBoard?.writer}</div>
      <div>제목 : {data?.fetchBoard?.title}</div>
      <div>내용 : {data?.fetchBoard?.contents}</div>
      <button onClick={onClickMove}>수정하러가기</button>
    </div>
  );
}

 

게시글 수정 페이지 

import BoardWrite from "../../../../../src/components/units/board/09-write/BoardWrite.container";

export default function GraphqlMutationPage() {
  return (
    <div>
      <BoardWrite isEdit={true} />
    </div>
  );
}

 

BoardWrite 컴포넌트 Container

import { useMutation } from "@apollo/client";
import { useState } from "react";
import BoardWriteUI from "./BoardWrite.presenter";
import { 나의그래프큐엘세팅, UPDATE_BOARD } from "./BoardWrite.queries";
import { useRouter } from "next/router";

export default function BoardWrite(props) {
  const router = useRouter();

  const [isActive, setIsActive] = useState(false);
  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const [updateBoard] = useMutation(UPDATE_BOARD);

  const onClickSubmit = async () => {
    const result = await 나의함수({
      variables: {
        // variables === $ 의 역할
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
    router.push(`/section09/09-03-boards/${result.data.createBoard.number}`);
  };

  const onClickUpdate = async () => {
    const result = await updateBoard({
      variables: {
        number: Number(router.query.number),
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    router.push(`/section09/09-03-boards/${router.query.number}`);
  };

  const onChangeWriter = (e) => {
    setWriter(e.target.value);
    if (e.target.value && title && contents) {
      setIsActive(true);
    }
  };
  const onChangeTitle = (e) => {
    setTitle(e.target.value);
    if (writer && e.target.value && contents) {
      setIsActive(true);
    }
  };
  const onChangeContents = (e) => {
    setContents(e.target.value);
    if (writer && title && e.target.value) {
      setIsActive(true);
    }
  };
  return (
    <div>
      <BoardWriteUI
        onClickSubmit={onClickSubmit}
        onClickUpdate={onClickUpdate}
        onChangeWriter={onChangeWriter}
        onChangeTitle={onChangeTitle}
        onChangeContents={onChangeContents}
        isActive={isActive}
        isEdit={props.isEdit}
      />
    </div>
  );
}

 

 

BoardWrite 컴포넌트 Presenter

import { BlueButton, RedInput } from "./BoardWrite.style";

export default function BoardWriteUI(props) {
  return (
    <div>
      <div>
        작성자 : <RedInput type="text " onChange={props.onChangeWriter} />
        제목 : <input type="text" onChange={props.onChangeTitle} />
        내용 : <input type="text" onChange={props.onChangeContents} />
        <BlueButton
          onClick={props.isEdit ? props.onClickUpdate : props.onClickSubmit}
          isActive={props.isActive}
        >
          {props.isEdit ? "수정" : "등록"}하기
        </BlueButton>
        ;
      </div>
    </div>
  );
}

 

보완해야 할 점 

게시글 수정시 수정 전 내용이 input에 미리 적혀 있어야 한다

작성자, 제목 , 내용 중 원하는 요소만 바꿀 수 있어야 한다