로그아웃 로직, 인증 라우터 설정

오늘 한 일

1. 로그인 & 회원가입 로직 리팩토링

기존에 AuthForm이라는 컴포넌트에서 fetch API를 활용해서 초기 로직을 구현했었는데,
일단 작동만 하게 코드를 짰더니, 너무 코드가 길어져서 리팩토링을 해야겠다고 생각했습니다.
store폴더에는 authStore라는 파일을 만들었고, 그 안에서 인증에 관한 상태관리를 하도록 만들었습니다.
기존 fetch로 작성된 코드는, api폴더에 auth.ts라는 파일을 생성해서, firebase 인증 API만 불러오는 파일을 만들었고, 브라우저에 내장된 fatch함수에서 HTTP 비동기 통신 라이브러리인 axios로 바꿔주었습니다.

2. 로그아웃 로직 구현

로그아웃시 바뀌어야 할 값은 하나,
우리의 상태
즉, 토근을 비우면 됩니다.
그리고 authStore에서 만들어둔 isLoggedIn이라는 boolean 타입 변수을,
false로 업데이트해주면 끝!

3. 인증 상태에 따른 라우터 설정

profile 페이지는 로그인 사용자만 보여야 하는 페이지이기 때문에,
로그인하지 않은 사용자는 접근이 불가능하게 만들어야 합니다.
방법은? 라우터를 사용합니다.
1.사용자의 현재 인증 상태를 특정 라우트의 조건으로 삼고!
2.사용자 미인증 시에는 profile 라우트 설정을 아예 렌더링 하지 않게 합니다.
3.그러면 미인증 사용자는 프로필 페이지에 방문할 수 없게된다.

App 컴포넌트에서, AuthStore를 불러옵니다.
AuthStore안에 있는 isLoggedIn 변수를 이용해서,

// App.tsx
const AuthStroe = useContext(AuthStore);

{!AuthStroe.isLoggedIn && (
  <Route path="/auth" element={<AuthPage />} />
)}

{AuthStroe.isLoggedIn && (
  <Route path="/profile" element={<Profile />} />
)}
  </Route>
<Route path="/*" element={<NotFound />} />
  
export default observer(App);

이렇게 해주면 끝!
사용자가 '접근 하지 말아야 할' 페이지에 '접근' 했다면,
NotFound 페이지를 보여주게끔 추가도 해봤습니다.

느낀점

1. mobX를 아직 미숙하게 다루는 것 같아서, 한번 공식 문서를 다시 읽어봐야겠다고 생각했습니다.
2. mobX로 작성된, store를 불러올때는 해당 컴포넌트에 observer를 써주는 걸 잊지 말아야 겠다고 생각했습니다.
3. axios 사용시, body값을 넣고 싶다면 axios.post(url,{ // something }) 이렇게 써주면 됩니다.

할 일

1. localStorage를 활용해서, 사용자 인증 state 유지하기
2. 프로젝트 디자인 수정
   • font: pretendard
   • 포인트 color : #E67800 고려중..
   • 디자인 시스템 : black: #222, gray: #737373
   • 메인 페이지 디자인 수정
3. React Hook Form 추가하기
4. campDetail fawardRef를 적용해서 해결해보기
5. 로딩 스피너 구현