선생님 글쓰기 기능에서 줄바꿈이 적용안됩니다ㅠㅠ

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2023년 11월 1일 18:43 #102688

참가자

지금 write페이지는 이렇게 코드 짜놓은 상태이구요 (날짜부분외에는 똑같습니다)

export default function Write() {
  let nowDay = new Date();
  nowDay =
    nowDay.getFullYear() +
    "-" +
    (nowDay.getMonth() + 1) +
    "-" +
    nowDay.getDate();
  return (
    <div className="detail-bg">
      <div className="detail-con">
        <h3>글쓰기</h3>
        <form action="/api/write" method="POST">
          <div className="write-tit">
            <span>제목 : </span>
            <input
              type="text"
              name="title"
              placeholder="제목을 입력하세요."
              className="title"
              required
              autoFocus
            ></input>
          </div>

          <div className="write-con">
            <textarea
              name="content"
              placeholder="내용을 입력하세요."
              required
            ></textarea>
          </div>
          <input
            type="text"
            name="date"
            value={nowDay}
            style={{ display: "none" }}
          />

          <button type="submit" className="btn1">
            작성완료
          </button>
        </form>
      </div>
    </div>
  );
}

이 다음에 줄바꿈해서 글 여러개 발행해보니까 줄바꿈이 적용이 안되더라구요.
그래서 콘솔로 확인해 보니까 content에 /r/n이 포함되어 보내지는걸 알게 되었습니다.
구글에 열심히 찾아서 post전송하고 나서 request.body.content를 변수에 저장했다가
if (lineBrack.includes("/r/n")) {
        lineBrack.replaceAll(/(\n|\r\n)/g, "&#10");
      }
이런식으로도 코드 짜보고 
css에서 해결할 수도 있다길래 textarea태그 부분에
.write-con > textarea {
  width: 100%;
  display: block;
  display: -webkit-box;
  white-space: pre-line;
  word-break: break-word;
}
이렇게 수정도 해봤는데 줄바꿈이 전혀 적용되지 않습니다...ㅠㅠㅠㅠ
도와주세요 선생님

2023년 11월 1일 18:49 #102690

plmnko

참가자

api/wrtie.js입니다!

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

export default async function handler(request, answer) {
  if (request.method == "POST") {
    let lineBrack = request.body.content;
    try {
      if (lineBrack.includes("/r/n")) {
        lineBrack.replaceAll(/(\n|\r\n)/g, "&#10");
      }
      console.log(lineBrack);
      const db = (await connectDB).db("woolandonly");
      let result = await db.collection("post").insertOne(request.body);
      answer.redirect(302, "/list");
    } catch (error) {
      return answer.status(500).json("서버 오류입니다.");
    }
  }
}

2023년 11월 1일 19:58 #102700

plmnko

참가자

선생님 DB에 글 보낼때 <br/>를 바꾸는 대신 detail페이지에서 받아올때 바꾸는걸로 바꿔보았는데요

import { connectDB } from "@/util/database.js";
import { ObjectId } from "mongodb";
import Link from "next/link";

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

  let br = result.content.replace(/(?:\r\n|\r|\n)/g, "<br/>");
  console.log(br);
  return (
    <div className="detail-bg">
      <div className="detail-con">
        <h3>Detail</h3>
        <h4>{result.title}</h4>
        <p v-html={br}>{br}</p>
      </div>
      <div className="btnBox">
        <Link href="/list" className="btn2">
          돌아가기
        </Link>
        <Link href={"/edit/" + result._id} className="btn2">
          수정하기
        </Link>
      </div>
    </div>
  );
}


사이에 <br/>태그가 그대로 보여집니다ㅠㅠㅠㅠㅠ

여러 사이트에 구글링을 해봤지만 해결이 안되고있습니다... 도와주십쇼....ㅠㅠㅠ
그리고 한 가지 더 여쭤보자면, 지금 글쓰는 이런 에디터는 무엇인가요??

에디터로 이미지저장하고 글쓰고싶은데 참고할만한 라이브러리 있으면 알려주십시용!!ㅠㅠ
감사합니다!

2023년 11월 1일 21:05 #102709

codingapple

키 마스터

db에 있던 html 집어넣을땐 dangerouslySetInnerHTML 속성열어서 거기 넣어야할걸요
toast어쩌구 에디터가 깔끔하고 쉬워보입니다

글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

선생님 글쓰기 기능에서 줄바꿈이 적용안됩니다ㅠㅠ

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png