회원가입 시 기능들을 소개해 주는 팝업창을 추가했다.
요구사항
1) 팝업 형식으로 배경 처리
2) 좌우로 스와이프
3) 마지막 페이지 넘길 시 홈화면
<div className="howtouse" style={{ display: onJoin ? 'block' : 'none' }}>
<div className="logo">
<img src="./images/logo/icon.png" alt="logo" />
<p>
오늘하날의 회원이 되신걸 환영합니다!
</p>
<p>
여러가지 기능들을 알려드릴게요.
</p>
</div>
<Swiper
navigation={true}
modules={[Navigation]}
className="mySwiper"
onReachEnd={() => {
dispatch(offJoin())
}
}
>
<SwiperSlide>
<div className="info">
<p>
다른 회원님들의 오늘 하날을 볼 수 있어요!
</p>
<p>
마음에 드는 하날에 좋아요를 누르고
</p>
<p>
댓글도 달아보세요.
</p>
</div>
<div className="line">
</div>
</SwiperSlide>
홈 화면에 사용법 팝업을 위한 background와 swiper를 추가했다.
회원가입 시 onJoin변수가 true로 바뀌게 되고 todays로 navigate 됨과 동시에 팝업이 뜨게 된다.
<Swiper
navigation={true}
modules={[Navigation]}
className="mySwiper"
onReachEnd={() => {
dispatch(offJoin())
}
}
>
swiper 옵션에 onReachEnd(마지막 페이지 swiper시) onJoin변수를 false로 변경해 주는 함수를 호출했다.