[Next.js] 게시판 수정기능

1.일단 수정버튼을 만들자

<Link href={`/board/edit/` + data[i]._id}>수정</Link>

 

 

2. 수정페이지를 만들자

저 Link주소에 맞는 파일을 생성하고 거기에 수정페이지를 꾸미자

export default function Edit() {
  return (
    <div className="p-20">
      <h4>수정페이지</h4>
      <form action="/api/post/new" method="POST">
        <input name="title" placeholder="제목을입력하세요" />
        <input name="content" placeholder="내용을입력하세요" />
        <button type="submit">버튼</button>
      </form>
    </div>
  );
}

 

 

3. 수정페이지에 기존의 내용을 가져와서 채워놔야함

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function Edit(props) {
  //console.log(props);
  const client = await connectDB;
  const db = client.db("market");
  const result = await db
    .collection("post")
    .findOne({ _id: new ObjectId(props.params.id) });
  console.log(result);

  return (
    <div className="p-20">
      <h4>수정페이지</h4>
      <form action="/api/post/new" method="POST">
        <input name="title" placeholder="제목을입력하세요" />
        <input name="content" placeholder="내용을입력하세요" />
        <button type="submit">버튼</button>
      </form>
    </div>
  );
}

 

 

이렇게 하니까 result에 데이터가 담겨있다.

 

그걸 이용하면된다.

<input name="title" value={result.title} />

이렇게.

 

value안되면 defaultValue 로 쓰면 잘될거다.

 

4. 이제 버튼누르면 수정되게 해야함.

document수정은 updateOne()이다.

await db.collection('post').updateOne({수정할게시물정보}, {$set : {수정할내용}})

 

5. 전송버튼 누르면 서버로 요청.

서버는 요청오면 DB글 수정.

 <form action="/api/post/edit" method="POST">

 

 

이렇게 해주면 요청하는 데이터로 수정이 된다.

export default async function handler(요청, 응답) {
  if (요청.method == "POST") {
    //console.log(요청.body);
    //DB에 있는 데이터를 수정하라.
    const client = await connectDB;
    const db = client.db("market");
    let result = await db.collection("post").updateOne({}, { $set: 요청.body });
  }
}

 

근데 어떤 데이터를 저렇게 수정할지 정해야하는데 id를 이용하면 편하니까 

내용을 보낼때 id도 같이 보내자.

<div className="p-20">
      <h4>수정페이지</h4>
      <form action="/api/post/edit" method="POST">
        <input name="title" value={result.title} />
        <input name="content" value={result.content} />
        <input name="_id" value={result._id} />
        <button type="submit">전송</button>
      </form>
    </div>

 

 

근데 id는 유저가 건들이면 안되니까 안보이게 하자

 <div className="p-20">
      <h4>수정페이지</h4>
      <form action="/api/post/edit" method="POST">
        <input name="title" value={result.title} />
        <input name="content" value={result.content} />
        <input style={{ display: "none" }} name="_id" value={result._id} />
        <button type="submit">전송</button>
      </form>
    </div>

 

 

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function handler(요청, 응답) {
  if (요청.method == "POST") {
    //console.log(요청.body);
    //DB에 있는 데이터를 수정하라.
    const client = await connectDB;
    const db = client.db("market");
    let result = await db
      .collection("post")
      .updateOne(
        { _id: new ObjectId(요청.body._id) },
        { $set: { title: 요청.body.title, content: 요청.body.content } }
      );
  }
}

 

---

board/edit/[id]/page.js

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function Edit(props) {
  const client = await connectDB;
  const db = client.db("market");
  let result = await db
    .collection("post")
    .findOne({ _id: new ObjectId(props.params.id) });

  return (
    <div className="p-20">
      <h4>수정페이지</h4>
      <form action="/api/post/edit" method="POST">
        <input name="title" defaultValue={result.title} />
        <input name="content" defaultValue={result.content} />
        <input
          style={{ display: "none" }}
          name="_id"
          defaultValue={result._id}
        />
        <button type="submit">전송</button>
      </form>
    </div>
  );
}

 

pages/api/post/edit.js

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function handler(요청, 응답) {
  if (요청.method == "POST") {
    const client = await connectDB;
    const db = client.db("market");
    let result = await db
      .collection("post")
      .updateOne(
        { _id: new ObjectId(요청.body._id) },
        { $set: { title: 요청.body.title, content: 요청.body.content } }
      );
    응답.redirect(302, "/board");
  }
}