41일차 프론트엔드 공부 - 게시글 수정하기

- 프론트엔드 공부 41일차 -

 

게시글 등록

게시글 상세 보기

게시글 수정페이지

수정된 게시글

 

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

export default function GraphqlMutationPage() {

  return <BoardWrite isEdit={false} />;

}

게시글 등록하기 전이기에 isEdit에 false 값을 넣어준다.

버튼에 '등록하기' 버튼으로 노출시키기 위해서 

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 DynamicRoutingMovedPage() {
  const router = useRouter();
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.number),
    },
  });
  console.log(data);

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

  return (
    <div>
      <div>{router.query.number}번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data?.fetchBoard?.writer}</div>
      <div>제목: {data?.fetchBoard?.title}</div>
      <div>내용: {data?.fetchBoard?.contents}</div>
      <button onClick={onClickMove}>수정하기</button>
    </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 GraphqlMutationPage() {
  const router = useRouter();
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.number),
    },
  });

  return <BoardWrite isEdit={true} data={data} />;
}

  return <BoardWrite isEdit={true} data={data} />;

이미 등록되어 있는 게시글을 수정하기 위해 사용한 코드

isEdit에 true값을 넣어준다.

이후부터 버튼에 '수정하기'를 노출시키기위해

import { useMutation } from "@apollo/client";
import { useState } from "react";
import BoardWriteUI from "./BoardWrite.presenter";
import { CREATE_BOARD, UPDATE_BOARD } from "./BoardWrite.queries";
import { useRouter } from "next/router";

export default function BoardWrite(props) {
  const router = useRouter();
  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  const [createBoard] = useMutation(CREATE_BOARD);

  const [updateBoard] = useMutation(UPDATE_BOARD);

  const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {
        // variables는 $와 같은 역할을함
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
    router.push(`/day09/09-04-boards/${result.data.createBoard.number}`);
  };

  const onClickUpdate = async () => {
    const myVariables = {
      number: Number(router.query.number),
    };
    if (writer) {
      myVariables.writer = writer;
    }
    if (title) {
      myVariables.title = title;
    }
    if (contents) {
      myVariables.contents = contents;
    }

    const result = await updateBoard({
      variables: myVariables,
    });
    console.log(result);
    router.push(`/day09/09-04-boards/${result.data.updateBoard.number}`);
  };

  const onChangeWriter = (event) => {
    setWriter(event.target.value);
  };

  const onChangeTitle = (event) => {
    setTitle(event.target.value);
  };

  const onChangeContents = (event) => {
    setContents(event.target.value);
  };

  return (
    <BoardWriteUI
      onClickSubmit={onClickSubmit}
      onClickUpdate={onClickUpdate}
      onChangeWriter={onChangeWriter}
      onChangeTitle={onChangeTitle}
      onChangeContents={onChangeContents}
      isEdit={props.isEdit}
      data={props.data}
    />
  );
}

const onClickUpdate = async () => {

    const myVariables = {

      number: Number(router.query.number),

    };

    if (writer) {

      myVariables.writer = writer;

    }

    if (title) {

      myVariables.title = title;

    }

    if (contents) {

      myVariables.contents = contents;

    }

    const result = await updateBoard({

      variables: myVariables,

    });

    console.log(result);

    router.push(`/day09/09-04-boards/${result.data.updateBoard.number}`);

  };

 

게시글 수정 페이지에서 수정하지 않은 값은 전달하지 않기 위한 코드

writer, title, contents 를 바로 updateBoard에 전달한다면 수정하지 않은 값은 빈값으로 DB에 전달되게 된다.

 

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

작성자 :

      <input

        type="text"

        onChange={props.onChangeWriter}

        defaultValue={props.data?.fetchBoard.writer}

      ></input>

defaultValue는 input안에 기본값을 넣기 위한 코드

만약 데이터가 존재한다면 작성자 input 안에는 기존 작성자에 대한 정보를 보여준다.

 

<button

        onClick={props.isEdit ? props.onClickUpdate : props.onClickSubmit}

      >

        {props.isEdit ? "수정" : "등록"}하기

      </button>

isEdit의 상태에 따라 게시글 등록/ 수정 여부 , 버튼이 '수정하기 / 등록하기' 을 정해준다. 

import { gql } from "@apollo/client";

export const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;
export const UPDATE_BOARD = gql`
  mutation updateBoard(
    $number: Int
    $writer: String
    $title: String
    $contents: String
  ) {
    updateBoard(
      number: $number
      writer: $writer
      title: $title
      contents: $contents
    ) {
      _id
      number
      message
    }
  }
`;