Merge pull request #271 from boostcampwm-2024/feature-fe-#270

로그인 기능 구현

Author: github-actions[bot]

apps/frontend/public/kakao.svg

@@ -1,33 +1,29 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
 import { useSyncedUsers } from "@/entities/user/model";
 import { SideWrapper } from "@/shared/ui";
 import { CanvasView } from "@/widgets/CanvasView";
 import { EditorView } from "@/widgets/EditorView";
 import { PageSideBarView } from "@/widgets/PageSideBarView";
 import { CanvasToolsView } from "@/widgets/CanvasToolsView";
-
-const queryClient = new QueryClient();
+import { useGetUser } from "@/features/auth/model/useAuth";
 
 function App() {
   useSyncedUsers();
+  useGetUser();
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <div className="fixed inset-0 bg-white">
-        <SideWrapper side="right" className="z-50">
-          <EditorView />
-        </SideWrapper>
-        <CanvasView />
-        <SideWrapper
-          side="left"
-          className="left-4 top-4 flex flex-row items-start gap-2"
-        >
-          <PageSideBarView />
-          <CanvasToolsView />
-        </SideWrapper>
-      </div>
-    </QueryClientProvider>
+    <div className="fixed inset-0 bg-white">
+      <SideWrapper side="right" className="z-50">
+        <EditorView />
+      </SideWrapper>
+      <CanvasView />
+      <SideWrapper
+        side="left"
+        className="left-4 top-4 flex flex-row items-start gap-2"
+      >
+        <PageSideBarView />
+        <CanvasToolsView />
+      </SideWrapper>
+    </div>
   );
 }
 

apps/frontend/public/naver.svg

@@ -1,10 +1,16 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import "../shared/index.css";
 import App from "./App.tsx";
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <StrictMode>
+      <App />
+    </StrictMode>
+  </QueryClientProvider>,
 );

apps/frontend/src/app/App.tsx

@@ -0,0 +1,24 @@
+import { Get, Post } from "@/shared/api";
+
+interface GetUserResponse {
+  message: string;
+  user: {
+    sub: number;
+    exp: number;
+    iat: number;
+    provider: "kakao" | "naver";
+  };
+}
+
+export const getUser = async () => {
+  const url = `/api/auth/profile`;
+
+  const res = await Get<GetUserResponse>(url);
+  return res.data;
+};
+
+export const logout = async () => {
+  const url = "/api/auth/logout";
+
+  await Post(url);
+};

apps/frontend/src/app/main.tsx

@@ -0,0 +1,4 @@
+export * from "./model/useAuth";
+
+export * from "./ui/LoginForm";
+export * from "./ui/UserInfo";

apps/frontend/src/features/auth/api/authApi.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { getUser, logout } from "../api/authApi";
+
+export const useGetUser = () => {
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: getUser,
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const useLogout = () => {
+  const queryClient = useQueryClient();
+
+  const logoutMutation = useMutation({
+    mutationFn: logout,
+    onSuccess: async () => {
+      queryClient.setQueryData(["user"], null);
+      await queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+
+  return logoutMutation;
+};

apps/frontend/src/features/auth/index.ts

@@ -0,0 +1,26 @@
+import KakaoLogo from "../../../../../public/kakao.svg";
+import NaverLogo from "../../../../../public/naver.svg";
+
+export function LoginForm() {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <div className="text-center text-lg font-semibold">간편 로그인</div>
+      <div className="flex flex-col items-center gap-2">
+        <a
+          className="flex h-12 w-64 items-center justify-center gap-2 rounded-lg bg-[#FEE500] bg-cover bg-no-repeat text-[rgba(0,0,0,0.85)]"
+          href="/api/auth/kakao"
+        >
+          <img className="w-4" src={KakaoLogo}></img>
+          카카오 로그인
+        </a>
+        <a
+          className="flex h-12 w-64 items-center justify-center gap-2 rounded-lg bg-[#03C75A] bg-cover bg-no-repeat text-[#ffffff]"
+          href="/api/auth/naver"
+        >
+          <img className="w-4" src={NaverLogo}></img>
+          네이버 로그인
+        </a>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/features/auth/model/useAuth.ts

@@ -0,0 +1,7 @@
+import { useLogout } from "../../model/useAuth";
+
+export function UserInfo() {
+  const logoutMutation = useLogout();
+
+  return <div onClick={() => logoutMutation.mutate()}>로그아웃</div>;
+}

apps/frontend/src/features/auth/ui/LoginForm/index.tsx

@@ -3,5 +3,4 @@ export * from "./NoteList";
 export * from "./ProfileModal";
 export * from "./RemoveNoteModal";
 export * from "./Tools";
-export * from "./TopNav";
 export * from "./WorkspaceNav";