[Library Management System] 25.10.31 | (구현) 마이페이지 리뷰작성 유무 체크와 UI 구현

[ 작업한 내용 ]

# Frontend

1. 리뷰작성 유무 체크

- 리뷰작성이 되었다면 수정하기 버튼이 화면에 출력이 되고, 리뷰작성이 안 되었다면 작성하기 버튼이 화면에 출력이 된다.

<div className="flex flex-row items-center">
  리뷰작성:
  {item.reviewWritten != true 
    ? (
        <>
          <span className="text-green-700 ml-[4px]">미작성</span>
          <div className="mx-2">|</div>
          <button 
            id="reviewCreate" 
            className="cursor-pointer hover:underline"
            onClick={() => handleClick(item.id, "reviewCreate")}
          >작성하기&nbsp;&gt;</button>
        </>
      )
    : (
        <>
          <span className="text-green-700 ml-[4px]">작성</span>
          <div className="mx-2">|</div>
          <button 
            id="reviewUpdate" 
            className="cursor-pointer hover:underline"
            onClick={() => handleClick(item.id, "reviewUpdate")}
          >수정하기&nbsp;&gt;</button>
        </>
      )
  }
</div>

---

2. 리뷰작성 textarea 생성

- 리뷰 작성하기 또는 수정하기 버튼을 클릭하면 하단에 textarea가 화면에 출력된다. display로 관리. tailwind는 block, hidden으로 css 작성.

{/* 리뷰작성 textarea */}
<div 
	id={`reviewArea${item.id}`} 
	className={`flex flex-col items-start border-t-1 border-gray-300 mt-4 leading-normal hidden`}>
	<div className="font-bold pl-1 mt-4 mb-2">{item.reviewWritten ? "리뷰수정" : "리뷰작성"}</div>
		<textarea 
		  className="
		    border border-gray-300 
		    px-3 py-2 w-full min-h-[100px] max-h-[300px]
		    text-[15px] leading-7
		    outline-none
		    focus:border-black
		  "
		  placeholder="여기에 내용을 입력하세요."
		  value={reviewTexts[item.id] || ""}
		  onChange={(e) => handleChange(item.id, e.target.value)}
		></textarea>
		<div className="flex w-full justify-end">
		  <button className="border border-gray-300 px-3 py-2 mt-2 mr-1 text-[15px] leading-normal">{item.reviewWritten ? "수정하기" : "작성하기"}</button>
		  <button 
		    id="reviewAreaCancleBtn"
		    className="self-end border border-gray-300 px-3 py-2 mt-2 text-[15px] leading-normal"
		    onClick={() => handleCancle(item.id)}
		  >취소</button>
		</div>
	</div>
</div>
))}

---

3. 리뷰작성 textarea 관련 핸들링 함수

// 리뷰작성 및 수정 버튼
const handleClick = (id, mode) => {
  const reviewAreaId = "reviewArea" + id;
  const reviewArea = document.getElementById(reviewAreaId);
  // console.log("id: ", id);
  // console.log("reviewAreaId: ", reviewAreaId);
  if (!reviewArea) return;

  // 모드별 코드 실행
  if (mode === "reviewCreate") {
    setReviewTexts((prev) => ({
      ...prev,
      [id]: "",
    }));
  } else if (mode === "reviewUpdate") {
    setReviewTexts((prev) => ({
      ...prev,
      [id]: "",
    }));
  }

  // 화면에 표시
  reviewArea.style.display = "block";
}

// 리뷰작성 상태 변화 관리
const handleChange = (id, value) => {
  setReviewTexts((prev) => ({
    ...prev,
    [id]: value,
  }));
}

// 취소버튼
const handleCancle = (id) => {
  const reviewAreaId = "reviewArea" + id;
  // console.log("id: ", id);
  // console.log("reviewAreaId: ", reviewAreaId);
  setReviewTexts((prev) => ({
    ...prev,
    [id]: "",
  }));
  document.getElementById(`${reviewAreaId}`).style.display = "none";
}

---