Feat(client): logout시 google 로그인 view

apps/client/src/layout/Layout.tsx

@@ -1,14 +1,15 @@
-import { Outlet,useLocation } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { Sidebar } from '@shared/components/sidebar/Sidebar';
 
 const Layout = () => {
   const location = useLocation();
   const isOnboarding = location.pathname.startsWith('/onboarding');
+  const isLogin = location.pathname.startsWith('/login');
 
   return (
     <>
       <div className="flex h-screen">
-         {!isOnboarding && <Sidebar />}
+        {!isOnboarding && !isLogin && <Sidebar />}
         <main className="bg-gray-bg flex-1 overflow-y-auto">
           <Outlet />
         </main>

apps/client/src/pages/login/Login.tsx

@@ -0,0 +1,73 @@
+import onBoardingBg from '/assets/onBoarding/background/onBoardingBg.webp';
+import Header from '@pages/onBoarding/components/header/Header';
+import Footer from '@pages/onBoarding/components/footer/Footer';
+import { Icon } from '@pinback/design-system/icons';
+import { handleGoogleLogin } from '@shared/utils/handleGoogleLogin';
+import { Link } from 'react-router-dom';
+import Chippi from '@assets/chippi_extension_popup.svg';
+import GoogleLogo from '/assets/onBoarding/icons/googleLogo.svg';
+
+const Login = () => {
+  return (
+    <div
+      className="relative flex h-screen w-screen flex-col bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${onBoardingBg})` }}
+    >
+      <Header />
+
+      <main className="flex w-full flex-1 items-center justify-center">
+        <div className="bg-white-bg flex h-[54.8rem] w-[63.2rem] flex-col items-center justify-center rounded-[2.4rem]">
+          <img
+            src={Chippi}
+            alt="치삐 이미지"
+            className="mb-[1.6rem] h-[19.4rem] w-[19.4rem] object-contain"
+          />
+
+          <Icon name={'logo'} height={34} width={123} className="mb-[1.6rem]" />
+
+          <h1 className="head2 text-font-black-1 mb-[0.8rem] text-center">
+            가장 재미있게 북마크를 활용하는 방법
+          </h1>
+
+          <p className="body2-m text-font-gray-3 mb-[3.5rem] text-center">
+            내가 저장해둔 영감을 pinback과 함께 열어볼까요?
+          </p>
+
+          <button
+            onClick={handleGoogleLogin}
+            className="sub2-sb flex h-[5.2rem] w-[29.8rem] items-center justify-between gap-3 rounded-full border border-gray-100 bg-white px-[2rem]"
+          >
+            <img
+              src={GoogleLogo}
+              alt="구글 로고"
+              className="h-[2.435rem] w-[2.435rem]"
+            />
+            구글 계정으로 로그인/회원가입
+          </button>
+
+          <p className="text-font-gray-3 caption2-m mt-[2.4rem] text-center">
+            가입 시 pinback의{' '}
+            <Link
+              to="/terms"
+              className="underline underline-offset-2 hover:opacity-70"
+            >
+              이용 약관
+            </Link>{' '}
+            및{' '}
+            <Link
+              to="/privacy"
+              className="underline underline-offset-2 hover:opacity-70"
+            >
+              개인정보처리방침
+            </Link>
+            에 동의한 것으로 간주됩니다.
+          </p>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Login;

apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx

@@ -1,30 +1,11 @@
 import Chippi from '@assets/chippi_extension_popup.svg';
 import GoogleLogo from '/assets/onBoarding/icons/googleLogo.svg';
+import { Link } from 'react-router-dom';
+import { handleGoogleLogin } from '@shared/utils/handleGoogleLogin';
 
 const SocialLoginStep = () => {
-  const handleGoogleLogin = () => {
-    const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
-
-    const redirectUri = import.meta.env.PROD
-      ? import.meta.env.VITE_GOOGLE_REDIRECT_URI_PROD
-      : import.meta.env.VITE_GOOGLE_REDIRECT_URI_DEV;
-
-    if (!clientId || !redirectUri) {
-      alert('Google OAuth 설정이 누락되었습니다.');
-      return;
-    }
-    const googleAuthUrl =
-      `https://accounts.google.com/o/oauth2/v2/auth?` +
-      `client_id=${clientId}` +
-      `&redirect_uri=${redirectUri}` +
-      `&response_type=code` +
-      `&scope=email profile`;
-
-    window.location.href = googleAuthUrl;
-  };
-
   return (
-    <div className="flex flex-col items-center justify-center pt-6">
+    <div className="flex h-full flex-col items-center justify-center">
       <img
         src={Chippi}
         alt="치삐 이미지"
@@ -50,6 +31,24 @@ const SocialLoginStep = () => {
         />
         구글 계정으로 로그인
       </button>
+      {/*TODO: 개인정보처리방침 추가되면 링크 수정*/}
+      <p className="text-font-gray-3 caption2-m mt-[2.4rem] text-center">
+        가입 시 pinback의{' '}
+        <Link
+          to="/privacy"
+          className="underline underline-offset-2 hover:opacity-70"
+        >
+          이용 약관
+        </Link>{' '}
+        및{' '}
+        <Link
+          to="/privacy"
+          className="underline underline-offset-2 hover:opacity-70"
+        >
+          개인정보처리방침
+        </Link>
+        에 동의한 것으로 간주됩니다.
+      </p>
     </div>
   );
 };

apps/client/src/routes/router.tsx

@@ -1,5 +1,6 @@
 import Category from '@pages/category/Category';
 import Level from '@pages/level/Level';
+import Login from '@pages/login/Login';
 import MyBookmark from '@pages/myBookmark/MyBookmark';
 import GoogleCallback from '@pages/onBoarding/GoogleCallback';
 import OnBoarding from '@pages/onBoarding/OnBoarding';
@@ -37,6 +38,10 @@ export const router = createBrowserRouter([
         path: ROUTES_CONFIG.onBoardingCallback.path,
         element: <GoogleCallback />,
       },
+      {
+        path: ROUTES_CONFIG.login.path,
+        element: <Login />,
+      },
     ],
   },
 ]);

apps/client/src/routes/routesConfig.ts

@@ -23,4 +23,8 @@ export const ROUTES_CONFIG = {
     title: '구글 OAuth 콜백',
     path: '/onboarding/callback',
   },
+  login: {
+    title: '로그인',
+    path: '/login',
+  },
 };

apps/client/src/shared/apis/setting/axiosInstance.ts

@@ -35,11 +35,14 @@ apiRequest.interceptors.response.use(
       originalRequest.url?.includes(url)
     );
 
+    const isLoginPage = window.location.pathname.startsWith('/login');
+
     if (
       error.response &&
       (error.response.status === 401 || error.response.status === 403) &&
       !originalRequest._retry &&
-      !isNoAuth
+      !isNoAuth &&
+      !isLoginPage
     ) {
       originalRequest._retry = true;
 

apps/client/src/shared/components/profilePopup/ProfilePopup.tsx

@@ -42,7 +42,7 @@ export default function ProfilePopup({
   const handleLogout = () => {
     localStorage.removeItem('token');
     localStorage.removeItem('email');
-    navigate('/onboarding');
+    navigate('/login');
   };
 
   return (

apps/client/src/shared/utils/handleGoogleLogin.ts

@@ -0,0 +1,20 @@
+export const handleGoogleLogin = () => {
+  const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+
+  const redirectUri = import.meta.env.PROD
+    ? import.meta.env.VITE_GOOGLE_REDIRECT_URI_PROD
+    : import.meta.env.VITE_GOOGLE_REDIRECT_URI_DEV;
+
+  if (!clientId || !redirectUri) {
+    alert('Google OAuth 설정이 누락되었습니다.');
+    return;
+  }
+  const googleAuthUrl =
+    `https://accounts.google.com/o/oauth2/v2/auth?` +
+    `client_id=${clientId}` +
+    `&redirect_uri=${redirectUri}` +
+    `&response_type=code` +
+    `&scope=email profile`;
+
+  window.location.href = googleAuthUrl;
+};