1차 프로젝트 코드리뷰(로그인 모달창)

1차 프로젝트 중 장바구니 다음으로 고민 많았던 로그인 모달창 코드리뷰

왜 고민이 되었는가?

• 우리 팀이 클론 했던 사이트는 sing-up과 sign-in이 매우 흡사하여 별개로 분류하지 않고 하나의 컴포넌트를 사용하려 했었으나 로그인과 회원가입에 들어가는 문구들은 달라 이 부분에 대해 많은 고민을 하게됨.

어떻게 구현하였는가? 🔍

const SIGNUP_DATA = {
  title: 'GET $10 OFF',
  subtitle:
    'Sign up and get $10 off your first Drop Studio purchase. Check your inbox to redeem.',
  facebook: 'Continue WITH FACEBOOK',
  google: 'Continue with Google',
  btn: 'Continue',
  text: 'We will never spam you or sell your email to third parties.',
  footer: 'Already a member? Log In',
  url: 'signUp',
};

const LOGIN_DATA = {
  title: 'Log In To Drop',
  facebook: 'LOG IN WITH FACEBOOK',
  google: 'LOG IN WITH GOOGLE',
  btn: 'LOG IN',
  text: 'I FORGOT MY PASSWORD',
  footer: 'Not a member yet? Sign up',
  url: 'signIn',
};

로그인과 회원가입에 각각 들어가는 문구들을 오브젝트 데이터 형태로 만든뒤 로그인버튼 클릭시엔 LOGIN_DATA, 회원가입 버튼 클릭시엔 SIGNUP_DATA가 들어갈 수 있게 설정할 수 있는 방법을 여러시간 고민한 결과

   {currentModal === 'login' && (
            <Login
              data={LOGIN_DATA}
              dataConvert={dataConvert}
              closeModal={closeModal}
              setCurrentModal={setCurrentModal}
            />
          )}
     {currentModal === 'signup' && (
            <Login
              data={SIGNUP_DATA}
              closeModal={closeModal}
              dataConvert={dataConvert}
              setCurrentModal={setCurrentModal}
           />
     )}    

보통 모달창 같은 경우에는 modal state에 true, false를 주어 사용했었지만 이번엔 한 state로 두가지 역할을 해야하는 경우임. 로그인 버튼 클릭시엔 setCurrentModal
에 login 값을 줌 -> 모달창이 열릴때 LOGIN_DATA가 들어갈 수 있게 구현.

위와 똑같이 회원가입 버튼을 누를시 SIGNUP_DATA가 들어간 login 모달창이 열리게 설정하였다.