<aside> 💡 개인이 사용한 애니메이션 라이브러리 등에 대해 기록

</aside>

$ npm install @splidejs/react-splide @splidejs/splide-extension-auto-scroll

$ npm i classnames

const isSelectedStyle = classNames({
		// [classes.defaultStyle]: true ==> 이렇게 하면 디폴트 값으로 적용 
    [classes.modalStyle]: isModalOpen, // 조건에 따라 바뀜
    [classes.selectedsplideSlide]: selected && !isModalOpen,
    [classes.unselectedSplideSlide]: !selected && !isModalOpen,
  });

  return (
    <SplideSlide className={isSelectedStyle} onClick={onClick}>
      <img
        className={classes.routineImg}
        src={`images/Routine/${routineImg}`}
        alt="routineImg"
      />
      <p className={classes.routineName}>{routineContent}</p>
    </SplideSlide>
  );
}

$ npm i react-modal

// modal style ==> 지금 현재 RoutineSelectMain에 적용되어있는 스타일링
// **하단에 있는 옵션 말고도 웬만하면 CSS에서 줄 수 있는 스타일링 들어가는 것 같아요!**

  const modalStyle = {
		//모달창 바깥부분 관련 스타일링
    overlay: {
      position: "fixed",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: "rgba(0,0,0,0.6)",
      zIndex: 10,
    },
		// 모달창 내부 관련 스타일링
    content: {
      display: "flex",
      flexDirextion: "column",
      backgroundColor: "rgba(255,255,255,0.95)",
      overflow: "auto",
      zIndex: 10,
			// top,left,right,bottom ==> 모달창의 사이즈가 아니고 여백에서부터  
																// 얼마나 떨어지게 할지 입니다.
      top: "300px",
      left: "300px",
      right: "300px",
      bottom: "300px",
      border: "5px solid black",
      borderRadius: "20px",
    },
  };

<Modal
    style={modalStyle}
    isOpen={modalIsOpen} // ==> 모달 오픈 옵션 true or false
    onRequestClose={() => closeModal(false)} // ==> esc나 모달 외부 누르면꺼지게 하는 옵션, 콜백함수로 넣을 것 
>
// ... 내부 필요한 것
</Modal>