[DAY - 108] #12 개인프로젝트 '오늘 하날'

회원가입 시 기능들을 소개해 주는 팝업창을 추가했다.

 

요구사항

 

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로 변경해 주는 함수를 호출했다.

 

howtouse

howtouse