Feature/#52 - 로그인 api 연결 (#213)

packages/frontend/src/apis/queries/auth/index.ts

@@ -0,0 +1 @@
+export * from './useGetLoginStatus';

packages/frontend/src/apis/queries/auth/types.ts

@@ -0,0 +1,3 @@
+export interface GetLoginStatusResponse {
+  message: 'Authenticated' | 'Not Authenticated';
+}

packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetLoginStatusResponse } from './types';
+import { instance } from '@/apis/config';
+
+const getLoginStatus = async (): Promise<GetLoginStatusResponse> => {
+  const { data } = await instance.get('/api/auth/google/status');
+  return data;
+};
+
+export const useGetLoginStatus = () => {
+  return useQuery<GetLoginStatusResponse, Error>({
+    queryKey: ['login_status'],
+    queryFn: getLoginStatus,
+  });
+};

packages/frontend/src/components/layouts/Sidebar.tsx

@@ -63,7 +63,7 @@ export const Sidebar = () => {
       </nav>
       <div
         className={cn(
-          'fixed top-0 transition-all duration-300 ease-in-out',
+          'fixed top-0 z-10 transition-all duration-300 ease-in-out',
           isHovered ? 'left-60' : 'left-24',
         )}
       >

packages/frontend/src/pages/login/Login.tsx

@@ -1,7 +1,5 @@
 import { Link } from 'react-router-dom';
 import google from '@/assets/google.png';
-import kakao from '@/assets/kakao.png';
-import naver from '@/assets/naver.png';
 
 interface LoginButtonProps {
   to: string;
@@ -10,6 +8,8 @@ interface LoginButtonProps {
 }
 
 export const Login = () => {
+  const googleLoginUrl = '/api/auth/google/login';
+
   return (
     <div className="flex h-[calc(100vh-8rem)] flex-col items-center justify-center">
       <main className="relative flex flex-col gap-36 rounded-lg bg-gradient-to-br from-[#ffe259] to-[#ffa751] p-16 py-24 shadow-sm">
@@ -19,9 +19,11 @@ export const Login = () => {
           <p className="display-medium20">주춤주춤과 함께해요!</p>
         </section>
         <section className="relative z-10 flex flex-col gap-4">
-          <LoginButton to="/" src={google} alt="구글 로그인" />
-          <LoginButton to="/" src={kakao} alt="카카오 로그인" />
-          <LoginButton to="/" src={naver} alt="네이버 로그인" />
+          <LoginButton
+            to={`${import.meta.env.VITE_BASE_URL}${googleLoginUrl}`}
+            src={google}
+            alt="구글 로그인"
+          />
         </section>
       </main>
     </div>

packages/frontend/src/pages/my-page/MyPage.tsx

@@ -1,3 +1,34 @@
+import { Link } from 'react-router-dom';
+import { useGetLoginStatus } from '@/apis/queries/auth';
+
 export const MyPage = () => {
-  return <div>마이페이지</div>;
+  const { data: loginStatus } = useGetLoginStatus();
+
+  return (
+    <div>
+      <h1 className="display-bold24 mb-16">마이페이지</h1>
+      <article className="grid h-[40rem] grid-cols-[1.5fr_2.5fr] gap-5">
+        <section className="grid grid-rows-[1fr_2fr] gap-5">
+          <section className="display-medium20 rounded-md bg-white p-7">
+            {loginStatus?.message === 'Authenticated' ? (
+              '내정보'
+            ) : (
+              <Link
+                to="/login"
+                className="display-bold20 text-blue hover:underline"
+              >
+                로그인
+              </Link>
+            )}
+          </section>
+          <section className="display-medium20 rounded-md bg-white p-7">
+            알림
+          </section>
+        </section>
+        <section className="display-medium20 rounded-md bg-white p-7">
+          주식 정보
+        </section>
+      </article>
+    </div>
+  );
 };