[React Project] 리뷰 쓰기 폼 기능 구현 (Form 열고 닫기)

ReviewAdd.js

리뷰쓰기 버튼 클릭 👉🏻 리뷰쓰기 컴포넌트 나타남

const [reviewAdd, setReviewAdd] = useState(false);
const onClick = () => {
  setReviewAdd(true);
};

<button className="reviewAdd" onClick={onClick}>
  <FontAwesomeIcon icon={faPlus} />
  <span className="reviewAddDesc">리뷰 쓰기</span>
</button>
{reviewAdd && <ReviewAdd />}

리뷰 쓰기 폼 닫기

1. X 버튼 클릭하면 닫기

// ReviewBox.js
const [reviewAdd, setReviewAdd] = useState(false);
const onClick = () => {
  setReviewAdd(true);
};

{reviewAdd && (
  <ReviewAdd reviewAdd={reviewAdd} setReviewAdd={setReviewAdd} />
)}

// ReviewAdd.js
<button className="close" onClick={() => setReviewAdd(false)}>
  <FontAwesomeIcon icon={faX} />
</button>

2. 폼 밖 영역 클릭 시 닫기

참고
#3. 모달창 구현( feat. 영역 밖 클릭 시 닫기)

{ReviewAdd ? (
  <div
    className="reviewWriteWarp"
    ref={outSection}
    onClick={e => {
      if (outSection.current === e.target) {
        setReviewAdd(false);
      }
    }}
    >
    <div className="reviewWriteFrom">
      <h3 className="reviewWriteHead">리뷰 쓰기</h3>

      <select name="상품선택">
        {menu.map(({ id, menuName }) => (
          <option key={id}>{menuName}</option>
        ))}
      </select>

      <form className="reviewWriteForm">
        <p className="reviewFileTitle">사진 첨부 (선택)</p>
        <p className="reviewFileDesc">
          오늘의집에 올렸던 사진에서 고르거나 새로운 사진을 첨부해주세요.
          (최대 1장)
        </p>

        <div className="reviewFileUplode">
          <label className="reviewFileUplodeTitle">사진 첨부하기</label>
          <input className="reviewFileUplodeInput" type="file" />
        </div>

        <div className="review">
          <label className="userReviewWrite">리뷰 작성</label>
          <textarea
            placeholder="자세하고 솔직한 리뷰는 다른 고객에게 큰 도움이 됩니다 (최소 20자 이상)"
            required
            maxLenth="200"
            minLength="20"
            />
        </div>

        <button className="reviewSubmitBtn">완료</button>
      </form>

      <details>
        <summary>Namba1 리뷰 정책</summary>
        <div class="detailsDesc">
          {DETAILS_DESC.map(({ id, detailsDesc }) => (
            <span key="id" className="detail">
              {detailsDesc}
              <br />
            </span>
          ))}
        </div>
      </details>

      <button className="close" onClick={() => setReviewAdd(false)}>
        <FontAwesomeIcon icon={faX} />
      </button>
    </div>
  </div>
) : null}

3. ESC 키 감지되면 폼 닫기

참고
https://velog.io/@quack777/React-esc로-modal-alert-닫기

    useEffect(() => {
    const escKeyModalClose = e => {
      if (e.keyCode === 27) {
        setReviewAdd(false);
      }
    };
    window.addEventListener('keydown', escKeyModalClose);
    return () => window.removeEventListener('keydown', escKeyModalClose);
    }, [setReviewAdd]);

참고
아스키코드 사용하지 않는다는 스택오버플로우 답변
keyCode 는 요즘 안쓴다고 한다.

참고
모질라에서 나온 e.keycode 사용안한다는 증거

최근에는 아래와 같다.

    useEffect(() => {
    const escKeyModalClose = e => {
      if (e.Code === "Escape") {
        setReviewAdd(false);
      }
    };
    window.addEventListener('keydown', escKeyModalClose);
    return () => window.removeEventListener('keydown', escKeyModalClose);
    }, [setReviewAdd]);