1차 프로젝트 Day 8🔥
(이미지 모달 창)
새로운 한 주가 시작했으므로, done을 초기 셋팅 하였음
아래 굵은 글씨 부분이 내가 구현 한 /구현 할 부분
AMI 사이트에서 제품 사진을 클릭하면 화면에 꽉 찬 상세사진이 나오고 왼쪽 상단의 close 버튼을 누르면 다시 제품 페이지로 돌아오는데, 그 부분을 구현했다.
먼저 모달 창을 구현 하려면, 이미지를 클릭 했을 때 일어나는 이벤트 이니, 이미지에 onClick 이벤트로 state를 boolean 값으로 관리
해주고, 사진을 보여 주어야 하니 보내주는 props 값으로 자식요소인 모달에 전달해 주어야 할 것
이고, 모달 내에서 모달창을 끌 수 있는 요소를 함수로 절달해주어야 할 것
이다.
모달에 사용되는 state 값을 본다면 isModalOpen
을 처음 false
값으로 지정해두고, 이미지를 onClick
했을 때, isModalOpen:true
로 변경하는 openModal
함수를 지정한다.
this.state = {
isModalOpen: false,
}
//처음 state 값은 false로 입력
<img onClick={openModal} alt="product-img"
className="product-photo"src={imgobj} />
//클릭하면 모달창이 뜨게 할 이미지에 onClick 함수로 openModal 지정
//다 destructuring 해놓아서 openModal 만 입력하면 되는 코드!
openModal = () => {
this.setState({ isModalOpen: true });
//openModal 함수에 state 값 변경해주는 setState 지정
window.scrollTo(0, 0);
//모달창이 오픈 될때 항상 스크롤 위에 위치하게 하는 함수 배치
};
closeModal = () => {
this.setState({ isModalOpen: false });
};
//closeModal 함수를 만들고 component의 props로 넘겨주었다.
//why? 모달창을 끄는 close 창은 Modal창 안에 위치하기 때문!
ImageModal
을 import
하고 아래와 같은 props 값을 지정해 주었다.<ImageModal
isOpen={isModalOpen}
//Modal이 오픈되면 보여줘야 한다는 state 값
close={closeModal}
//모달 창끄는 함수 전달
images={detailData.product_images} />
//map 데이터 돌릴 데이터 전달
const { isOpened, images, close } = this.props;
//먼저 깔끔한 코드를 위해 불러오는 props값을 destructuring 해준다!
return (
<>
{isOpened ? (
//삼항 연산자를 통해 isOpened가 true일때 modal창을 보여주고
//false이면 표시하지 않는다 'null'는 구성을 나타내 준다.
<div className="Modal-wrapper">
<div className="MyModalImages">
<div className="button-wrap">
<button onClick={close}> close </button>
</div>
//props 로 불러온 close 함수를 close 버튼 onClick에 지정해준다.
{images.map((img) => {
return <img alt="product-img-in-full-size" src={img} />;
//props로 불러온 images를 map 함수를 통해 화면에 보여준다.
})}
</div>
</div>
) : null}
.Modal-wrapper {
position: absolute; //부모요소인 relative가 따로 없는 것은
부모를 window로 받는다는 뜻
z-index: 100;
.MyModalImages {
img {
width: 100%; //화면에 꽉차는 사진을 보여주기 위해 width : 100
vertical-align: bottom; // 이미지를 바닥에 붙이기 위해 사용한 코드
}
.button-wrap {
position: fixed; //항상 오른쪽 상단에 위치해야 함으로 이렇게 배치했다.
right: 0;
margin: 0;
z-index: 200; //이미지 보다 높은 z-index 값을 위해 200으로 지정했다
}
}
}