Feat: 로그인 및 Account 페이지 API 연결, 토큰 관리 로직 구현 등

[grapefruit13]

관련 문서

• issue: #
• close #

유형

• 기능 구현
• UI 구현
• 리팩토링
• 버그 해결
• 문서 업데이트
• 기타( )

작업 내용

설명

📌 기능

🍪 토큰 관리

1. js-cookie는 클라이언트 사이드에서만 접근이 가능하여 삭제하고, nookies를 설치해 사용했습니다.
2. 쿠키에 토큰을 저장하고, 가져오는 함수를 utils/cookieUtils.ts에서 구현했습니다.
3. 비로그인 상태로 페이지 접근 시 원하는 주소로 유저를 리다이렉트 시키고, 리프레시 토큰이 있을때는 토큰을 갱신하는 함수를 utils/checkAuth.ts 에서 구현했습니다.
4. Auth.renewToken 메서드를 CSR과 SSR 타입으로 구분했습니다.

🔑 로그인 로직

1. useSignin 훅이 아니라, 훅의 mutationFn에서 직접 유저 입력값을 받도록 수정했습니다.
2. 로그인 성공시 유저를 롤 게시판으로 이동시키도록 했습니다.
3. 로그인 실패시 useSignin 에서 반환하는 error 객체의 response status를 활용해 signinForm에서 경고 모달을 띄우도록 했습니다.

🧑‍🦱 account 로직

1. account 페이지는 로그인한 유저만 접근할 수 있는 페이지이므로, utils/checkAuth.ts의 requiresLogin를 사용해 로그인하지 않은 유저는 롤 게시판으로 이동되도록 했습니다. refreshToken만 있는 유저라면 토큰이 갱신되어 쿠키에 저장됩니다.

SSR과 useQuery

1. app_.tsx에 HydrationBoundary를 추가해, SSR에서 useQuery를 사용할 수 있게 설정하였습니다.

_app.tsx

export default function App({ Component, pageProps }: AppProps) {
  const Layout = (Component as ComponentType).FullLayout || EmptyLayout;

  return (
    <QueryClientProvider client={queryClient}>
      <HydrationBoundary state={pageProps.dehydratedState}>
        <ReactQueryDevtools initialIsOpen={false} />
        <FullLayout>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </FullLayout>
      </HydrationBoundary>
    </QueryClientProvider>
  );
}

📌 UI

• 로그인 페이지: 로그인 실패 시 error response status에 따라 모달창이 뜹니다.

📌 사용하기

💡requiresLogin, getAuthCookie, setAuthCookie

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { accessToken, refreshToken } = getAuthCookie(context);

  const res = await requiresLogin(context, accessToken, refreshToken, PAGE_PATHS.mainList);
  if (res) {
    const { newAccessToken, newRefreshToken } = res;
    setAuthCookie(context, newAccessToken, newRefreshToken);
  }

  return {
    props: {},
  };
}

🎥 모션 영상

localhost_3000_signin.-.Chrome.2024-03-28.17-15-38.mp4

리뷰 요구사항

[CheeseB]

LGTM