[미니프로젝트] 1일차

오늘 한 일

 

1. 프로젝트 틀 잡고, elements 폴더에 Button, Input, Grid, Text 구현

2. 모달창을 사용해서 로그인 페이지 구현

3. disabled를 사용해서 아이디, 비밀번호 중 하나라도 입력 하지 않았을 시 버튼 비활성화

4. 로그인 기능 구현 + 로그인에서 회원가입 클릭 시 화면 전환

5. 회원가입 버튼 클릭 시 modal을 유지하면서 이동

6. 헤더 구현 (로그인, 회원가입 버튼 추가 및 연결)

7. 헤더 구현 (로그인 전, 로그인 후 보여지는 버튼 다르게 구현)

8. 로그아웃 구현

9. 모달창 바깥 화면 눌렀을 때 안나가지는 문제 해결

10. Header에서 로그인/회원가입 처음만 모달창 띄워주고 그 이후로는 안띄워 지는 문제 해결

 

고민 했던 부분

 

1) 헤더 -> 로그인 -> 회원가입 / 헤더 -> 회원가입으로 이동 할 때 "modal=true"를 가져가는 방식이 달라서

•  헤더 -> 로그인 -> 회원가입 : 회원가입 버튼을 클릭 시 signUpModal의 값을 true로 바꾸고, 삼항연산자를 사용하여 회원가입 버튼을 누르지 않았을 경우 로그인 JSX를 return 하고 회원가입 버튼을 눌렀을 경우 회원가입 컴포넌트의 JSX를 return 한다.
• 헤더 -> 회원가입 : 회원가입 버튼을 클릭 시 signUpModalOpen state의 값을 true로 바꿔주고 {}와 &&를 사용해서 signUpModal이 true이면 SignUp 모달에 modal을 props로 넘겨서 return 하는 방식으로 수정했다.

2) redux를 사용 해야 하는 가 사용하지 않아도 되는가

: 이 부분은 정찬길 매니저님께 질문을 드렸더니 서버에 요청해서 사용해야 하는 데이터가 있을 것이고, 그 밖에도 프론트에서만 사용하는 데이터가 있을 수 있기 때문에 리덕스를 사용해서 데이터를 전역으로 관리하는 것이 좋다고 말씀 해주셨다.

 

문제 해결

 

1) 모달창 바깥 화면 눌렀을 때 안나가지는 문제 해결

: layout은 모달창 바깥 화면을 조절하는 CSS인 데 left, right, bottm을 줄였더니 잘 안눌리는 것이었다.

그래서 content로 바꿨더니 해결 되었다.

 

2) Header에서 로그인/회원가입 처음만 모달창 띄워주고 그 이후로는 안띄워 지는 문제 해결

        // Header.js
        <Grid is_flex>
          <Button _onClick={loginModalOpen}>로그인</Button>
          {
              loginModal && <Login modal={loginModal} setLoginModal={setLoginModal} setSignUpModal={setSignUpModal}></Login>
              // 기존 코드 loginModal && <Login modal={loginModal}></Login>에서는
              // login modal이 꺼지더라도 loginModal은 true이기 때문에 버튼을 누를 수 없습니다.

              // 수정 코드에서는 setLoginModal이라는 key 값에 setLoginModal state 변경 함수를
              // value로 넘겨서 자식 컴포넌트에서 부모 컴포넌트의 state를 변경 할 수 있도록 하였습니다.

               // + Header에서 로그인을 누를 때 사용자가 이동 할 수 있는 경로는 2가지 입니다.
               // 1) 헤더 로그인 버튼 클릭 -> 로그인 기능 이용
               // : 이 경우에는 setLoginModal만 가져가서 modal창이 닫힐 때 false로 바꿔주면 됩니다.
               // 2) 헤더 로그인 버튼 클릭 -> 회원가입 버튼 클릭 -> 회원가입 기능 이용
               // : 이 경우에는 loginModal, signUpModal 둘 다 true가 되기 때문에 둘 다 false로 바꿔줘야 합니다.
          }
          <Button _onClick={signUpModalOpen}>회원가입</Button>
          {
              signUpModal && <SignUp modal={signUpModal} setSignUpModal={setSignUpModal}></SignUp>
          }
        </Grid>

Login.js

sighUp.js

+ state 변경 함수 같이 함수를 props로 전달하고 받아서 사용 할 때는 key=함수() 형태로 보내고, props.함수() 형태로 받아서 사용한다.

 

내일 할 일

 

1) 아침에 일찍 일어나서 로그인 redux 구현 

2) 팀원분이랑 로그인, 회원가입 기능 합치기 + 메인 페이지 구현 -> 다른 기능 분배해서 구현

3) scroll은 되지만 보이지는 않게 하고 싶은 데 적용이 안되는 중이다.. 더 찾아봐야 할 듯 

 

구현 영상