Merge pull request #125 from TripInfoWeb/dev_auth

Dev auth
TripInfoWeb · Jul 19, 2024 · fa68dc5 · fa68dc5
2 parents afec20d + f5e481b
commit fa68dc5
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 26 deletions.
diff --git a/src/app/api/auth/logout/route.ts b/src/app/api/auth/logout/route.ts
@@ -1,13 +1,26 @@
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { cookies } from "next/headers";
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
-export async function GET() {
+export async function GET(request: NextRequest) {
   try {
-    cookies().delete('access_token');
-    cookies().delete('refresh_token');
+    const access_cookie = request.cookies.get("access_token");
+    // 사용자 정보 조회 API
+    await fetchWithAuth(`${process.env.BACKEND_URL}/api/auth/oauth2/logout`, {
+      method: "POST",
+      headers: {
+        Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+    });
+    cookies().delete("access_token");
+    cookies().delete("refresh_token");
     return new NextResponse("로그아웃", { status: 200 });
   } catch (error) {
     console.error(error);
+    cookies().delete("access_token");
+    cookies().delete("refresh_token");
     return new NextResponse("Internal Server Error", { status: 500 });
   }
 }
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,7 +1,7 @@
+import HeaderSidebarContainer from "@/containers/common/HeaderSidebarContainer";
 import Image from "next/image";
 import Link from "next/link";
 import { MdOutlineMenu } from "react-icons/md";
-import HeaderSidebarContainer from "@/containers/common/HeaderSidebarContainer";
 
 interface Props {
   pathname: string;
@@ -10,7 +10,7 @@ interface Props {
   onMenuClicked: () => void;
   onClose: () => void;
   logoutHandler: () => void;
-  nickName?: string;
+  userId: number;
 }
 
 const Header = ({
@@ -19,7 +19,7 @@ const Header = ({
   transparent,
   onMenuClicked,
   onClose,
-  nickName,
+  userId,
   logoutHandler,
 }: Props) => {
   return (
@@ -121,24 +121,17 @@ const Header = ({
             size="1.5rem"
             onClick={onMenuClicked}
           />
-          <div className="flex flex-row items-center gap-2 pr-[2.375rem] text-sm max-[1024px]:pr-4 max-[744px]:hidden">
-            {nickName == "" ? (
+          <div className={"mr-[3.375rem] flex h-[2.25rem] w-[8rem] flex-row items-center gap-2 rounded-lg p-[.5rem]  text-sm max-[744px]:hidden backdrop-blur-[120px]"}>
+            {userId == 0 ? (
               <>
-                <Link
-                  className="font-medium text-gray1 hover:text-main dark:text-slate-400"
-                  href="/auth/signin"
-                >
-                  로그인
-                </Link>
-                <div className="text-gray-400">|</div>
-                <Link
-                  className="font-semibold text-black hover:text-main dark:text-slate-200"
-                  href="/auth/signup"
-                >
-                  회원가입
-                </Link>
+                <div
+                  className={
+                    "relative aspect-square w-[1.875rem] animate-pulse rounded-[50%] shadow dark:bg-slate-200"
+                  }
+                ></div>
+                <div className="h-[1.875rem] w-[4rem] animate-pulse font-semibold text-black hover:text-main dark:text-slate-200"></div>
               </>
-            ) : (
+            ) : userId > 0 ? (
               <>
                 <Link
                   href={"/mypage/profile"}
@@ -160,6 +153,22 @@ const Header = ({
                   로그아웃
                 </button>
               </>
+            ) : (
+              <>
+                <Link
+                  className="font-semibold text-black hover:text-main dark:text-slate-200"
+                  href="/auth/signin"
+                >
+                  로그인
+                </Link>
+                <div className="text-gray-400">|</div>
+                <Link
+                  className="font-semibold text-black hover:text-main dark:text-slate-200"
+                  href="/auth/signup"
+                >
+                  회원가입
+                </Link>
+              </>
             )}
           </div>
         </div>

diff --git a/src/containers/common/HeaderContainer.tsx b/src/containers/common/HeaderContainer.tsx
@@ -31,6 +31,9 @@ const HeaderContainer = () => {
   const logoutHandler = async () => {
     // api로 로그아웃 요청해서 쿠키제거
     authStore.initialize();
+    authStore.setUser({
+      id: -1
+    })
     await fetch("/api/auth/logout");
   };
 
@@ -49,6 +52,10 @@ const HeaderContainer = () => {
         data.json().then((res: userResponseDto) => {
           authStore.setUser(res);
         });
+      } else {
+        authStore.setUser({
+          id: -1
+        })
       }
     };
     login();
@@ -62,7 +69,7 @@ const HeaderContainer = () => {
       transparent={transparent}
       onMenuClicked={onMenuClicked}
       onClose={onClose}
-      nickName={authStore.nickname}
+      userId={authStore.id}
       logoutHandler={logoutHandler}
     />
   );

diff --git a/src/store/authStore.ts b/src/store/authStore.ts
@@ -26,7 +26,7 @@ interface AuthActions {
 
 // 3. 초기 상태 정의
 const initialState: AuthState = {
-  id: NaN,
+  id: 0,
   userStatus: "",
   nickname: "",
   age: 0,
@@ -35,7 +35,7 @@ const initialState: AuthState = {
   phoneNumber: "",
   isAdmin: false,
   userImage: {
-    id: NaN,
+    id: 0,
     address: "",
     createdDate: "",
   }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -48,6 +48,20 @@ const config: Config = {
           from: { transform: "rotateY(0deg)" },
           to: { transform: "rotateY(90deg)" },
         },
+        pulse: {
+          "0%": {
+            "background-image":
+              "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+          },
+          "50%": {
+            "background-image":
+              "linear-gradient(90deg, #f0f0f0 25%, #f0f0f0 50%, #e0e0e0 75%)",
+          },
+          "100%": {
+            "background-image":
+              "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+          },
+        },
       },
       animation: {
         sidebarFadeIn: "sidebarFadeIn 0.3s",
@@ -58,6 +72,7 @@ const config: Config = {
         bannerImage3: "bannerImage 3s linear infinite",
         cardFlip: "cardFlip 0.5s linear",
         cardFlip2: "cardFlip2 0.5s linear",
+        pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
     },
   },