1차 프로젝트 Day 8🔥

(이미지 모달 창)

Daily standing meeting log (1 차 프로젝트 Day 8)👉🏼

새로운 한 주가 시작했으므로, done을 초기 셋팅 하였음

Back-end

Done

• CSV 넣기
• product merge DB테스트 완료

Today's To-do's

• 데이터 베이스 CSV 밀어 넣기 (ING)
• 비밀번호 validation
• 인가 데코레이터
• 뷰 논의

blocker

• x

Front-end

아래 굵은 글씨 부분이 내가 구현 한 /구현 할 부분

Done

• Newsletter, search 페이지 만들기
• 메인 페이지 슬라이더 이벤트
• 메인 페이지 사진 간 틈 해결하기
• 제품 상세 페이지 레이아웃 구현 완료
• data 형식 백엔드 공유
• 장바구니 페이지 레이아웃 완료

Today's To-do's

• log-in/password 인가 backend와 맞추기
• log-in/password detail 구현
• 장바구니 페이지 /팝업 형 장바구니 페이지
• 위시리스트 페이지 만들기
• img 모달 만들기

blocker x

• x

---

React 모달 창(까꿍)👐🏼👐🏼

모달 팝업 창 구현하기

• 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 데이터 돌릴 데이터 전달 
        

• 모달 페이지의 jsx 코드는 아래와 같다.

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}

• 모달 페이지의 scss 코드는 아래와 같다.
  버튼은 단순 css 기능만 넣어서 제외하였다.

.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으로 지정했다

    }
  }
}

• 모달 완성 🙌🏼🙌🏼