Merge pull request #130 from newnivers/feat/#129

error(login): 인증 토큰 발급 문제 해결
newnivers · Jan 31, 2024 · 416ff41 · 416ff41
2 parents 6ba2f70 + 4a4ae60
commit 416ff41
Show file tree

Hide file tree

Showing 15 changed files with 193 additions and 78 deletions.
diff --git a/api/core/index.ts b/api/core/index.ts
@@ -17,13 +17,19 @@ export interface RequestData {
 
 const handleRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
   const localStorage = new LocalStorage();
-  const token = localStorage.get(authUserKey) ?? "unauthorized";
+  const authUser = localStorage.get(authUserKey);
+
+  if (!authUser) {
+    return config;
+  }
+
+  const parsedAuthUser = JSON.parse(authUser) as AuthUser;
 
   return {
     ...config,
     headers: {
       ...config.headers,
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${parsedAuthUser.token}`,
     },
   };
 };

diff --git a/app/enrollment-check/page.tsx b/app/enrollment-check/page.tsx
@@ -3,17 +3,20 @@
 import { SpacerSkleton } from "@/components/common/spacer";
 import Typography from "@/components/common/text/Typography";
 import { EnrollmentCheckTable } from "@/components/domains/enrollment-check";
+import { AuthUserInfo } from "@/contexts";
 
 function EnrollmentCheckPage() {
   return (
-    <SpacerSkleton id="main-content" type="vertical" gap={72}>
-      <SpacerSkleton type="vertical" align="center">
-        <Typography typo="headline">등록 확인</Typography>
+    <AuthUserInfo.Provider>
+      <SpacerSkleton id="main-content" type="vertical" gap={72}>
+        <SpacerSkleton type="vertical" align="center">
+          <Typography typo="headline">등록 확인</Typography>
+        </SpacerSkleton>
+        <SpacerSkleton type="vertical" gap={44}>
+          <EnrollmentCheckTable />
+        </SpacerSkleton>
       </SpacerSkleton>
-      <SpacerSkleton type="vertical" gap={44}>
-        <EnrollmentCheckTable />
-      </SpacerSkleton>
-    </SpacerSkleton>
+    </AuthUserInfo.Provider>
   );
 }
 

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -14,7 +14,7 @@ export default function LoginPage() {
         clientId={clientId}
         redirectUri={redirectUri}
         state="test"
-        style={{ backgroundColor: "#03c75A" }}
+        style={{ backgroundColor: "#03c75A", width: "350px" }}
       >
         네이버 로그인
       </OAuthLogin.LoginButton>

diff --git a/app/login/redirect/page.tsx b/app/login/redirect/page.tsx
@@ -1,7 +1,10 @@
 "use client";
 
 import { useEffect } from "react";
+import Image from "next/image";
 import { useSearchParams, useRouter } from "next/navigation";
+import { SpacerSkleton } from "@/components/common/spacer";
+import Typography from "@/components/common/text/Typography";
 import { useAuthUserStorage } from "@/hooks";
 import { usePostAuthorizationCode } from "@/queries";
 
@@ -12,12 +15,12 @@ export default function LoginRedirectPage() {
   const [_, setAuthUserInfo] = useAuthUserStorage();
 
   const { mutate: postAuthorizationCode } = usePostAuthorizationCode({
-    onSuccess: (data) => {
+    onSuccess: (res) => {
       const {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        results: { token, user_id },
-      } = data;
-      setAuthUserInfo({ token, id: user_id });
+        data: { token, userId },
+      } = res;
+
+      setAuthUserInfo({ token, id: userId });
       router.replace("/");
     },
   });
@@ -29,11 +32,40 @@ export default function LoginRedirectPage() {
       return;
     }
 
-    postAuthorizationCode({ code, state: "test" });
-  }, [code]);
+    const state = process.env.NEXT_PUBLIC_AUTH_CLIENT_STATE;
+
+    if (!state) {
+      return;
+    }
+
+    postAuthorizationCode({ code, state });
+  }, [code, postAuthorizationCode]);
 
   if (code) {
-    return <div>redirectPage</div>;
+    return (
+      <SpacerSkleton
+        id="main-content"
+        type="vertical"
+        justify="center"
+        align="center"
+        gap={40}
+      >
+        <Image
+          src="/img/Spin-1s-767px.gif"
+          width={80}
+          height={80}
+          alt="loading-spinner"
+        />
+        <Typography
+          typo="subhead01"
+          style={{
+            color: "#66666",
+          }}
+        >
+          사용자 인증을 진행 중입니다
+        </Typography>
+      </SpacerSkleton>
+    );
   }
 
   return null;

diff --git a/app/register-work/page.tsx b/app/register-work/page.tsx
@@ -12,31 +12,39 @@ import {
   WorkFormComponents,
   classificationInfo,
 } from "@/components/domains/register-work";
+import { AuthUserInfo } from "@/contexts";
 
 function RegisterWorkPage() {
   return (
-    <SpacerSkleton id="main-content" type="vertical" gap={52} align="center">
-      <StepNavigator.Provider steps={steps}>
-        {(currentStep) => (
-          <>
-            <Headline type="vertical" justify="center" align="center" gap={40}>
-              <p id="title">작품등록</p>
-              <BreadCrumbs />
-            </Headline>
-
-            <RegisterInfo type="vertical" gap={47} align="center">
-              <WorkForm.Provider>
-                <RegisterWorkFormTemplate>
-                  {createElement(WorkFormComponents[currentStep], {
-                    classifications: classificationInfo[currentStep],
-                  })}
-                </RegisterWorkFormTemplate>
-              </WorkForm.Provider>
-            </RegisterInfo>
-          </>
-        )}
-      </StepNavigator.Provider>
-    </SpacerSkleton>
+    <AuthUserInfo.Provider>
+      <SpacerSkleton id="main-content" type="vertical" gap={52} align="center">
+        <StepNavigator.Provider steps={steps}>
+          {(currentStep) => (
+            <>
+              <Headline
+                type="vertical"
+                justify="center"
+                align="center"
+                gap={40}
+              >
+                <p id="title">작품등록</p>
+                <BreadCrumbs />
+              </Headline>
+
+              <RegisterInfo type="vertical" gap={47} align="center">
+                <WorkForm.Provider>
+                  <RegisterWorkFormTemplate>
+                    {createElement(WorkFormComponents[currentStep], {
+                      classifications: classificationInfo[currentStep],
+                    })}
+                  </RegisterWorkFormTemplate>
+                </WorkForm.Provider>
+              </RegisterInfo>
+            </>
+          )}
+        </StepNavigator.Provider>
+      </SpacerSkleton>
+    </AuthUserInfo.Provider>
   );
 }
 

diff --git a/components/common/layout/NavBar.tsx b/components/common/layout/NavBar.tsx
@@ -1,13 +1,21 @@
-import { useContext } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import styled, { css } from "styled-components";
 import Typography from "@/components/common/text/Typography";
-import TicketSearchBar from "@/components/domains/search";
-import { AuthUserInfo } from "@/contexts";
+import { useAuthUserStorage } from "@/hooks";
 
 export default function NavBar() {
   const router = useRouter();
-  const { authUser } = useContext(AuthUserInfo.Context);
+  const pathname = usePathname();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [cachedValue, setValue, resetValue] = useAuthUserStorage();
+
+  const onClickLogout = () => {
+    resetValue();
+
+    if (pathname !== "/") {
+      router.replace("/");
+    }
+  };
 
   return (
     <Container>
@@ -17,15 +25,17 @@ export default function NavBar() {
         <MenuButton onClick={() => router.push("/ticket")}>Ticket</MenuButton>
       </NavMenu>
       <UserMenu>
-        {/* <TicketSearchBar /> */}
-        {/* TODO: 로그아웃 기능 확인하기 */}
-        {authUser !== null && authUser.id ? (
+        {!cachedValue?.id && !cachedValue?.token ? (
           <MenuButton onClick={() => router.push("/login")}>LOGIN</MenuButton>
         ) : (
-          <MenuButton>LOGOUT</MenuButton>
+          <MenuButton onClick={onClickLogout}>LOGOUT</MenuButton>
         )}
-        <MenuButton>작품등록</MenuButton>
-        <MenuButton>등록확인</MenuButton>
+        <MenuButton onClick={() => router.push("/register-work")}>
+          작품등록
+        </MenuButton>
+        <MenuButton onClick={() => router.push("/enrollment-check")}>
+          등록확인
+        </MenuButton>
       </UserMenu>
     </Container>
   );

diff --git a/components/common/layout/default.tsx b/components/common/layout/default.tsx
@@ -1,28 +1,37 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { usePathname } from "next/navigation";
 import styled from "styled-components";
 import Footer from "@/components/common/layout/Footer";
 import NavBar from "@/components/common/layout/NavBar";
-import { AuthUserInfo } from "@/contexts";
 
 interface Props {
   children: ReactNode;
 }
 
 function DefaultLayout({ children }: Props) {
+  const pathname = usePathname();
+
+  const renderNavBar = () => {
+    if (pathname === "/login/redirect") {
+      return null;
+    }
+
+    return <NavBar />;
+  };
+
   return (
     <>
-      <NavBar />
-      <Container>
-        <AuthUserInfo.Provider>{children}</AuthUserInfo.Provider>
-      </Container>
+      {renderNavBar()}
+      <Container>{children}</Container>
       <Footer />
     </>
   );
 }
 
 const Container = styled.section`
+  position: relative;
   min-width: 1400px;
   min-height: calc(100% - 407px);
   padding: 0 10rem;

diff --git a/components/domains/oauth/login/layout.tsx b/components/domains/oauth/login/layout.tsx
@@ -1,9 +1,34 @@
 import type { ReactNode } from "react";
+import Image from "next/image";
+import { SpacerSkleton } from "@/components/common/spacer";
+import Typography from "@/components/common/text/Typography";
 
 interface Props {
   children: ReactNode;
 }
 
 export function OAuthLoginLayout({ children }: Props) {
-  return <div>{children}</div>;
+  return (
+    <SpacerSkleton
+      id="main-content"
+      type="vertical"
+      justify="center"
+      align="center"
+      gap={40}
+    >
+      <Image
+        src="/icon/plavnewniverse_black_logo.svg"
+        width={150}
+        height={150}
+        alt="playvnewniverse_black_logo"
+      />
+      <SpacerSkleton type="vertical" align="center">
+        <Typography typo="subhead01">
+          NEWNIVERSE 서비스를 이용하기 위해
+        </Typography>
+        <Typography typo="subhead01">로그인을 진행해 주세요</Typography>
+      </SpacerSkleton>
+      {children}
+    </SpacerSkleton>
+  );
 }
diff --git a/contexts/authUserInfo/index.tsx b/contexts/authUserInfo/index.tsx
@@ -2,10 +2,12 @@
 
 import { createContext, useContext, useEffect, useState } from "react";
 import type { ReactNode } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import { useAuthUserStorage } from "@/hooks";
 import type { AuthUser, AuthError } from "@/types";
 
+const CHECK_SSO_PAGES = ["/", "/ticket", "/login", "/login/redirect"];
+
 export function useAuthUser() {
   const [authUser, setAuthUser] = useState<AuthUser | null>(null);
   const [isLoading, setLoading] = useState(true);
@@ -14,12 +16,14 @@ export function useAuthUser() {
     message: "",
   });
 
-  const [cachedAuthUser, setAuthUserInfo] = useAuthUserStorage();
+  const pathname = usePathname();
+
+  const [cachedAuthUser] = useAuthUserStorage();
 
   useEffect(() => {
     setLoading(false);
 
-    if (!cachedAuthUser) {
+    if (!cachedAuthUser.id || !cachedAuthUser.token) {
       setError({
         isTrigger: true,
         message: "auth failure",
@@ -30,7 +34,7 @@ export function useAuthUser() {
     }
 
     setAuthUser(authUser);
-  }, []);
+  }, [authUser, cachedAuthUser, pathname]);
 
   return [authUser, isLoading, error] as const;
 }
@@ -47,13 +51,18 @@ interface Props {
 
 function UserInfoProvider({ children }: Props) {
   const router = useRouter();
+  const pathname = usePathname();
   const [authUser, isLoading, error] = useAuthUser();
 
   useEffect(() => {
+    if (CHECK_SSO_PAGES.includes(pathname)) {
+      return;
+    }
+
     if (error.isTrigger) {
       router.replace("/login");
     }
-  }, [error.isTrigger]);
+  }, [error.isTrigger, pathname, router]);
 
   return (
     <UserInfoContext.Provider