design: 로그인 UI Popover로 변경

Author: yewonJin

apps/frontend/src/components/login/index.tsx

@@ -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=""
+        >
+          <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=""
+        >
+          <img className="w-4" src={NaverLogo}></img>
+          네이버 로그인
+        </a>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export * from "./LoginForm";

apps/frontend/src/features/login/ui/index.ts

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

apps/frontend/src/features/pageSidebar/ui/index.ts

@@ -0,0 +1 @@
+export { LogoBtnView } from "./ui";

apps/frontend/src/widgets/LogoBtnView/index.ts

@@ -0,0 +1,18 @@
+import { LoginForm } from "@/features/login/ui";
+import { LogoBtn } from "@/features/pageSidebar/ui";
+import { Popover } from "@/shared/ui";
+
+export function LogoBtnView() {
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <Popover align="start" offset={{ x: -7, y: 16 }}>
+        <Popover.Trigger>
+          <LogoBtn />
+        </Popover.Trigger>
+        <Popover.Content className="rounded-lg border border-neutral-200 bg-white p-8 shadow-md">
+          <LoginForm />
+        </Popover.Content>
+      </Popover>
+    </div>
+  );
+}

apps/frontend/src/widgets/LogoBtnView/ui/index.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 
-import { NoteList, Tools, TopNav } from "@/features/pageSidebar/ui";
+import { NoteList, Tools } from "@/features/pageSidebar/ui";
 import { ScrollWrapper } from "@/shared/ui";
+import { TopNavView } from "@/widgets/TopNavView";
 
 export function PageSideBarView() {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -13,7 +14,7 @@ export function PageSideBarView() {
   return (
     <div className="z-10 flex w-60 flex-col rounded-xl border-[1px] border-neutral-200 bg-white text-black shadow-md">
       <div className="p-2">
-        <TopNav onExpand={handleExpand} isExpanded={isExpanded} />
+        <TopNavView onExpand={handleExpand} isExpanded={isExpanded} />
       </div>
       <div className={`${isExpanded ? "flex flex-col" : "hidden"} gap-3 pb-4`}>
         <div className="w-full px-4">

apps/frontend/src/widgets/PageSideBarView/ui/index.tsx

@@ -0,0 +1 @@
+export { TopNavView } from "./ui";

apps/frontend/src/widgets/TopNavView/index.ts

@@ -1,29 +1,18 @@
-import { useState } from "react";
 import { Menu, X } from "lucide-react";
 
-import { WorkspaceNav } from "../WorkspaceNav";
-import { LogoBtn } from "../LogoBtn";
 import { Divider } from "@/shared/ui";
+import { WorkspaceNav } from "@/features/pageSidebar/ui";
+import { LogoBtnView } from "@/widgets/LogoBtnView/ui";
 
 interface TopNavProps {
   onExpand: () => void;
   isExpanded: boolean;
 }
-export function TopNav({ onExpand, isExpanded }: TopNavProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
+export function TopNavView({ onExpand, isExpanded }: TopNavProps) {
   return (
     <div className="flex w-full flex-row items-center justify-between">
       <div className="flex flex-row items-center gap-2">
-        <LogoBtn
-          onClick={() => {
-            setIsModalOpen(true);
-          }}
-        />
-        <Login
-          isOpen={isModalOpen}
-          onCloseModal={() => setIsModalOpen(false)}
-        />
+        <LogoBtnView />
         <Divider direction="vertical" className="h-3" />
         <WorkspaceNav workspaceTitle="프로젝트 Web15" />
       </div>