[JDDEV-26] [JDDEV-30] [JDDEV-33] Feat: 기본 로그인/회원가입/구글 로그인 API 연결

jobdri/src/app/oauth2/redirect/OAuthRedirectClient.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { ROUTES } from "@/constants/routes";
+import { getEmailFromAccessToken, saveAuthTokens } from "@/lib/auth";
+
+export default function OAuthRedirectClient() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const accessToken = searchParams.get("accessToken");
+  const refreshToken = searchParams.get("refreshToken");
+  const error = searchParams.get("error");
+  const errorMessage = searchParams.get("message");
+  const message =
+    accessToken && refreshToken
+      ? "Google 로그인 처리 중입니다."
+      : errorMessage ||
+        (error ? "Google 로그인에 실패했습니다." : "로그인 정보를 확인할 수 없습니다.");
+
+  useEffect(() => {
+    if (accessToken && refreshToken) {
+      saveAuthTokens(
+        { accessToken, refreshToken },
+        searchParams.get("email") ||
+          getEmailFromAccessToken(accessToken) ||
+          undefined,
+      );
+      router.replace(ROUTES.APPLY);
+      return;
+    }
+
+    const timerId = window.setTimeout(() => {
+      router.replace(ROUTES.LOGIN);
+    }, 2000);
+
+    return () => {
+      window.clearTimeout(timerId);
+    };
+  }, [accessToken, refreshToken, router, searchParams]);
+
+  return (
+    <main className="flex min-h-screen w-full items-center justify-center bg-bg-default px-4">
+      <section className="flex w-[440px] max-w-full flex-col items-center gap-6 rounded-card bg-bg-contents-default p-10 shadow-[0_0_24px_0_var(--color-bg-shadow-default)]">
+        <h1 className="text-center text-[32px] leading-[130%] font-bold text-text-neutral-title [font-feature-settings:'liga'_off,'clig'_off]">
+          JobDri
+        </h1>
+        <p className="text-sub14-med text-center text-text-neutral-caption [font-feature-settings:'liga'_off,'clig'_off]">
+          {message}
+        </p>
+      </section>
+    </main>
+  );
+}

jobdri/src/app/oauth2/redirect/page.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import OAuthRedirectClient from "./OAuthRedirectClient";
+
+function OAuthRedirectFallback() {
+  return (
+    <main className="flex min-h-screen w-full items-center justify-center bg-bg-default px-4">
+      <section className="flex w-[440px] max-w-full flex-col items-center gap-6 rounded-card bg-bg-contents-default p-10 shadow-[0_0_24px_0_var(--color-bg-shadow-default)]">
+        <h1 className="text-center text-[32px] leading-[130%] font-bold text-text-neutral-title [font-feature-settings:'liga'_off,'clig'_off]">
+          JobDri
+        </h1>
+        <p className="text-sub14-med text-center text-text-neutral-caption [font-feature-settings:'liga'_off,'clig'_off]">
+          Google 로그인 처리 중입니다.
+        </p>
+      </section>
+    </main>
+  );
+}
+
+export default function OAuthRedirectPage() {
+  return (
+    <Suspense fallback={<OAuthRedirectFallback />}>
+      <OAuthRedirectClient />
+    </Suspense>
+  );
+}

jobdri/src/components/common/lnb/Lnb.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useSyncExternalStore } from "react";
 import { useRouter } from "next/navigation";
 import { createPortal } from "react-dom";
 import Icon, { type IconType } from "@/components/common/icons/Icon";
 import { ModalNotice } from "@/components/common/modal";
+import { AUTH_STORAGE_KEYS, getStoredAuthEmail } from "@/lib/auth";
 
 type LnbItemKey = "experience" | "apply";
 
@@ -34,12 +35,47 @@ const navItems: LnbNavItem[] = [
 const navItemBaseClassName =
   "flex h-9 items-center gap-2 rounded-cta-l p-3 text-sub14-med";
 
+const defaultEmail = "jobdri@gmail.com";
+
+function subscribeToStoredEmail(onStoreChange: () => void) {
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key === AUTH_STORAGE_KEYS.userEmail) {
+      onStoreChange();
+    }
+  };
+
+  window.addEventListener("storage", handleStorage);
+
+  return () => {
+    window.removeEventListener("storage", handleStorage);
+  };
+}
+
+function getStoredEmailSnapshot() {
+  return getStoredAuthEmail() ?? "";
+}
+
+function getServerStoredEmailSnapshot() {
+  return "";
+}
+
+function getEmailInitial(email: string) {
+  return email.trim().charAt(0).toUpperCase() || "J";
+}
+
 export default function Lnb({
   initialActiveItem,
-  email = "jobdri@gmail.com",
+  email,
   creditCount = 32,
 }: LnbProps) {
   const router = useRouter();
+  const storedEmail = useSyncExternalStore(
+    subscribeToStoredEmail,
+    getStoredEmailSnapshot,
+    getServerStoredEmailSnapshot,
+  );
+  const displayEmail = (email ?? storedEmail) || defaultEmail;
+  const emailInitial = getEmailInitial(displayEmail);
   const [isFold, setIsFold] = useState(false);
   const [showComingSoonModal, setShowComingSoonModal] = useState(false);
   const [activeItem, setActiveItem] = useState<LnbItemKey | undefined>(
@@ -151,11 +187,11 @@ export default function Lnb({
             }`}
           >
             <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-text-neutral-caption text-[14px] font-medium leading-[140%] text-text-neutral-white">
-              J
+              {emailInitial}
             </div>
             {!isFold && (
               <span className="truncate text-cap12-med text-text-neutral-caption">
-                {email}
+                {displayEmail}
               </span>
             )}
           </div>