노마드코더 인스타그램 클론코딩 바로가기 https://nomadcoders.co/instaclone

🔆 회원가입 성공 알림창 만들기

SignUp에서 성공적으로 회원가입이 완료 되었을 때 Login페이지로 이동한다.
이때 회원가입이 완료되었으니 로그인 해주세요. 라는 notification을 만들고 싶다면 어떻게 해야할까 ?
답은 바로 useHistory와 useLocation에 있다.

useHistory

useHistory Hook은 기본적으로 어떤 이벤트 성공적으로 발생시 페이지 이동에 사용된다.

history.push(routes.home,{message:"회원가입이 완료되었습니다. 로그인 해주세요!"})

-> home 페이지로 이동하는데 이때 state로 message를 전달한다.

useLocation

현재 상황은 state로 message를 전달한 상태이고 이를 Login 페이지에서 전달 받기 위해서는 useLocation을 사용해줘야 한다.

console.log(location)의 결과 창

이를 이용해 Login 페이지에서 알림창을 만들 수 있다.

🔆 Redirecting User

회원가입 후 로그인 페이지로 가는데 이때 username과 password를 state로 받는다.

// Signup.js

const {username,password} = getValues();

history.push(routes.home,{
   message:"회원가입 완료되었습니다. 로그인 해주세요.",
   username,
   password,
});

// Login.js

const {...} = useForm({
   mode:"onChange",
   defaultValues:{
      username:location?.state?.username || "",
      password:location?.state?.password || "",
   },
});

여기서 문제점은 로그인하고 로그아웃을 해도 defaultValues값이 들어가 있는 것을 볼 수 있다.

🔎 해결

로그아웃 호출시 history를 전달 받고 이를 이용해 location의 state를 초기화 해준다.

//apollo.js

export const logUserOut = (history)=>{
   history.replace();
   window.location.reload();
}

🔆 Dark Mode

다크모드 토글 버튼 생성해 DarkMode 구현

KEYPOINT

• styled-components의 ThemeProvider의 props를 이용한 theme별 styles 적용

// styles.js

export const lightTheme ={
   // light 테마 Style EX
   fontColor : "black",
   bgColor : "white",
}

export const darkTheme ={
   // dark 테마 Style EX
   fontColor : "white",
   bgColor : "black",
}