솔로프로젝트 과제 - 모달창

이미지를 누르면 나오는 모달창 기능구현을 했다. 처음에는 main컴포넌트 밖에서 조작을 하려 했지만 더 힘들다는 결론을 내리고 만들어두었던 Shoppinglist컴포넌트에서 기능구현을 했다.

Shopping.js

const Shoppinglist = function Shoppinglist({ Col, data, idx }) {
  const [clickimg, setClickimg] = useState(false);
  const [starimg, setStarimg] = useState(false);

  return (
    <>
 <Col sm>
        <div className="shopping-items">
          <div className="shoppinglist-img">
            <img
              className="shoppingimg"
              src={
                data[idx].image_url === null
                  ? data[idx].brand_image_url
                  : data[idx].image_url
              }
              alt=""
              onClick={() => {
                setClickimg(!clickimg);
              }} // 이미지를 눌렀을때 clickimg의 boolean값을 변화시켜 주었다.
            />
            <img src={bookstar} alt="" className="bookstar" />
          </div>
          <div className="shoppinglist-text">
            <div className="shop-title">{data[idx].title}</div>
            <div className="shop-right">
              <div className="shop-percent">
                {data[idx].discountPercentage === null
                  ? null
                  : data[idx].discountPercentage + "%"}
              </div>
              <div className="shop-price">
                {data[idx].price === null
                  ? null
                  : Number(data[idx].price)
                      .toString()
                      .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "원"}
              </div>
            </div>
          </div>
        </div>
      </Col>
      {clickimg === true ? (
        <Modal data={data} idx={idx} setClickimg={setClickimg} />
      ) : null} // setClickimg가 true일때 모달창을 나오게 했고 모달창이 나왔을때 닫기버튼과 모달창의 배경화면을 누르면 false값을 주기위해 props로 내려주었다.
    </>
  );
};

Modal.js

const Modal = function Modal({ data, idx, setClickimg }) {
  return (
    <div
      className="modal-bg"
      onClick={() => {
        setClickimg(false);
      }} // 모달창이 없어지는 기능구현을 위해 background를 누르면 clickimg값을 false값으로 바꿔 줬다.
    >
      <div className="modal-main">
        <img
          className="modal-img"
          src={
            data[idx].image_url === null
              ? data[idx].brand_image_url
              : data[idx].image_url
          }
          alt=""
        />
        <img
          className="closebutton"
          src={closebutton}
          alt=""
          onClick={() => {
            setClickimg(false);
          }} // 모달창이 없어지는 기능구현을 위해 	X이미지를 누르면 clickimg값을 false값으로 바꿔 줬다.
        />
        <div className="modal-title">
          <img src={bookstar} alt="" />
          {data[idx].title}
        </div>
      </div>
    </div>
  );
};

Modal.css

.modal-bg {
  position: fixed; // fixed속성으로 모달창이 켜졌을때 shoppinglist 컴포넌트에서 grid속성을 안받게끔 하기위해 사용 해줬다.
  z-index: 1; // 혹시 겹지는 부분이 있을까 모달창 레이어를 z축으로 조금 가져왔다.
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 

  background-color: rgba(255, 255, 255, 0.4); 
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-main {
  position: relative; // 모달창 내부에 들어갈 엘리먼트들의 position값을 조정하기 위해 사용해줬다.
  width: 744px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0px 0px 36px 0px rgb(0, 0, 0, 0.5); /* 0.5로 바꾸기 */
}

.closebutton {
  position: absolute;
  top: 25px;
  right: 25px;
  cursor: pointer; // 버튼아이콘에 마우스가 올라갔을 경우 손가락모양으로 바꿔준다.
}

.modal-title {
  position: absolute;
  left: 20px;
  bottom: 15px;
  font-size: 24px;
  font-weight: bold;
  color: white;