내가 맡은 파트는
1.로그인,회원가입 모달 구현하기
2.상품 리스트 페이지 ( 필터링 포함 )
이었기 때문에 로그인,회원가입 모달 구현을 우선으로 하였다.
Nav랑 Footer 담당자에 시간에 맞춰서 하기에는 작업 시간이 빠듯하여 로그인 하나 회원가입 하나 이렇게 만들기 시작했다.
레이아웃은 크게 어려움 없이 금방 만들어냈지만,
클릭을 했을 때 이 모달창을 뜨게하고 또 계정 만들기 버튼을 눌렀을 때 회원가입 모달창이 뜨게 하는 작업이 나를 막막하게 만들었다.
하지만 나에게는 구글 교수님이 계셨기에 할 수 있었다 💁♀️💪
일단 로그인 페이지와 회원가입 페이지에 중복 되는 부분을 먼저 보았다.
버튼과 고객 정보를 넣는 input창이 똑같았다.
이 부분을 Component를 하고 작업을 이어나갔다.
여기서 문제는.... 나는 모달창을 열기 위해 작업하던 Component 에서 열 수 있었는 줄 알았는데
잘 생각해보니 Nav 에 로그인 버튼을 클릭 했을 때 모달창이 뜨는 점을 간과했다.
모달이 열리는 Nav Component에서 모달이 열리는 state 값을 저장했다.
**여기서 중요한 것은 상태값 변화는 로그인 페이지 / 회원가입 두 개 이니 상태값 또한 두 개여야 한다.
const [isModalOpen,setIsModalOpen] = useState(false);
const [isSignup, setIsSignup] = useState(false);
//로그인,회원가입 상태값 저장
const handleLoginModal = () => {
setIsLogin(!isLogin);
};
//로그인 페이지가 열리는 함수
const handleSignupModal = () => {
setIsSignup(true);
setIsLogin(false);
}
//로그인 페이지에 계정 만들기 버튼을 눌렀을 때,
로그인 페이지가 닫히고 회원가입 페이지가 열리는 함수
const handleJoinClick = () =< {
setIsSignup(false);
}
//회원가입 창에서 계정 만들기 버튼 눌렀을 때 창이 닫히는 함수button에 props 전달이 잘 확인되고 Nav Component에 조건부 렌더링만 잘 적용하면 모달창 기능이 잘 작동되는 것을 확인 할 수 있다 :-)
✍✔ 레이아웃을 짤 당시에는 분명 화면의 중간이였는데 Nav의 스타일과 충돌되서 레이아웃이 날라가는 현상이 발생했다.
그래서 어떤 화면에서든 중심으로 보여질 수 있도록 설정값을 주었다.
(-webkit,-moz,-ms-,o trnasform에 translate에 -50%,-50%, 설정)
그리고 화면 앞으로 나와야 하는데 footer 창이 더 앞으로 나와있는 현상도 같이 발생했다....(당황)
그래서 로그인과 회원가입 페이지 레이아웃 최상위 부모에게 z-index 값을 주어서 해결했다.
