sgdevcamp2025 · handje · Feb 11, 2025 · Feb 10, 2025 · Feb 10, 2025 · Feb 10, 2025
diff --git a/src/frontend/apps/web/app/(main)/layout.tsx b/src/frontend/apps/web/app/(main)/layout.tsx
@@ -1,3 +1,6 @@
+import { LoginButton } from '@/src/features/auth';
+import AuthWrapper from '@/src/features/auth/ui/auth-wrapper';
+import { ProfilePopover } from '@/src/features/user';
 import { Header } from '@/src/shared';
 import '@workspace/ui/globals.css';
 
@@ -6,16 +9,19 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const user = null;
   return (
     <html
       lang="en"
       suppressHydrationWarning
     >
       <body>
         <header className="h-[68px] w-full flex items-center justify-between px-4 py-1 bg-muted">
-          <Header />
+          <Header authContent={user ? <ProfilePopover /> : <LoginButton />} />
         </header>
-        <div className="flex flex-col h-[calc(100vh-68px)] overflow-hidden">{children}</div>
+        <div className="flex flex-col h-[calc(100vh-68px)] overflow-hidden">
+          <AuthWrapper> {children}</AuthWrapper>
+        </div>
       </body>
     </html>
   );

diff --git a/src/frontend/apps/web/src/features/auth/index.ts b/src/frontend/apps/web/src/features/auth/index.ts
@@ -0,0 +1 @@
+export { LoginButton, LogoutButton } from './ui';
diff --git a/src/frontend/apps/web/src/features/auth/ui/auth-wrapper.tsx b/src/frontend/apps/web/src/features/auth/ui/auth-wrapper.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+//로그인이 안 되었을 경우 리디렉트용 wrapper
+const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const router = useRouter();
+  const user = {};
+
+  useEffect(() => {
+    if (!user && pathname !== '/') {
+      router.push('/');
+    }
+  }, [user, pathname]);
+
+  return <>{children}</>;
+};
+export default AuthWrapper;
diff --git a/src/frontend/apps/web/src/features/auth/ui/index.ts b/src/frontend/apps/web/src/features/auth/ui/index.ts
@@ -0,0 +1,2 @@
+export { default as LoginButton } from './login-button';
+export { default as LogoutButton } from './logout-button';
diff --git a/src/frontend/apps/web/src/features/auth/ui/login-button.tsx b/src/frontend/apps/web/src/features/auth/ui/login-button.tsx
@@ -0,0 +1,13 @@
+import { Button } from '@workspace/ui/components';
+
+const LoginButton = () => {
+  return (
+    <Button
+      variant="ghost"
+      className="text-xl font-bold hover:text-primary"
+    >
+      Login
+    </Button>
+  );
+};
+export default LoginButton;
diff --git a/src/frontend/apps/web/src/features/auth/ui/logout-button.tsx b/src/frontend/apps/web/src/features/auth/ui/logout-button.tsx
@@ -0,0 +1,14 @@
+import { Button } from '@workspace/ui/components';
+
+const LogoutButton = () => {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="w-full text-xs"
+    >
+      LOGOUT
+    </Button>
+  );
+};
+export default LogoutButton;
diff --git a/src/frontend/apps/web/src/features/user/index.ts b/src/frontend/apps/web/src/features/user/index.ts
@@ -0,0 +1 @@
+export { ProfilePopover } from './ui';
diff --git a/src/frontend/apps/web/src/features/user/ui/index.ts b/src/frontend/apps/web/src/features/user/ui/index.ts
@@ -0,0 +1 @@
+export { default as ProfilePopover } from './profile-popover';
diff --git a/...src/shared/components/header/nickname.tsx → ...src/features/user/ui/profile-nickname.tsx b/...src/shared/components/header/nickname.tsx → ...src/features/user/ui/profile-nickname.tsx
@@ -3,7 +3,7 @@
 import { Button, Input, Label } from '@workspace/ui/components';
 import { Pencil } from 'lucide-react';
 
-const Nickname = () => {
+const ProfileNickname = () => {
   //임시변수
   const isNameEditMode = false;
   const name = '공작새';
@@ -26,4 +26,4 @@ const Nickname = () => {
     </div>
   );
 };
-export default Nickname;
+export default ProfileNickname;
diff --git a/...red/components/header/profile-picture.tsx → .../src/features/user/ui/profile-picture.tsx b/...red/components/header/profile-picture.tsx → .../src/features/user/ui/profile-picture.tsx
diff --git a/src/frontend/apps/web/src/features/user/ui/profile-popover-content.tsx b/src/frontend/apps/web/src/features/user/ui/profile-popover-content.tsx
@@ -0,0 +1,17 @@
+import ProfilePicture from './profile-picture';
+import ProfileNickname from './profile-nickname';
+import { LogoutButton } from '../../auth';
+
+const ProfilePopoverContent = () => {
+  return (
+    <div className="flex flex-col items-start space-y-4">
+      <h4 className="font-semibold leading-none">My Account</h4>
+      <div className="flex flex-col items-center space-y-4">
+        <ProfilePicture />
+        <ProfileNickname />
+      </div>
+      <LogoutButton />
+    </div>
+  );
+};
+export default ProfilePopoverContent;
diff --git a/src/frontend/apps/web/src/features/user/ui/profile-popover.tsx b/src/frontend/apps/web/src/features/user/ui/profile-popover.tsx
@@ -0,0 +1,35 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@workspace/ui/components';
+import { CircleUserRound } from 'lucide-react';
+import ProfilePopoverContent from './profile-popover-content';
+
+const ProfilePopover = () => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Avatar
+          variant="default"
+          className="cursor-pointer"
+        >
+          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarFallback>
+            <CircleUserRound size={40} />
+          </AvatarFallback>
+        </Avatar>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-72 "
+      >
+        <ProfilePopoverContent />
+      </PopoverContent>
+    </Popover>
+  );
+};
+export default ProfilePopover;
diff --git a/src/frontend/apps/web/src/shared/components/header/header.tsx b/src/frontend/apps/web/src/shared/components/header/header.tsx
@@ -1,19 +1,10 @@
 'use client';
 
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@workspace/ui/components';
-import ProfileContainer from './profile-container';
-import { CircleUserRound } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components';
 import Link from 'next/link';
 
 //로고 이미지 경로 변경 필요
-const Header = () => {
+const Header = ({ authContent }: { authContent: React.ReactNode }) => {
   return (
     <>
       <Link href={'/'}>
@@ -24,26 +15,7 @@ const Header = () => {
           </AvatarFallback>
         </Avatar>
       </Link>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Avatar
-            variant="default"
-            className="cursor-pointer"
-          >
-            <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>
-              <CircleUserRound size={40} />
-            </AvatarFallback>
-          </Avatar>
-        </PopoverTrigger>
-        <PopoverContent
-          align="end"
-          className="w-72 "
-        >
-          <ProfileContainer />
-        </PopoverContent>
-      </Popover>
+      {authContent}
     </>
   );
 };

diff --git a/src/frontend/apps/web/src/shared/components/header/profile-container.tsx b/src/frontend/apps/web/src/shared/components/header/profile-container.tsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { LoginButton, LogoutButton } from './ui';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as LoginButton } from './login-button';
		export { default as LogoutButton } from './logout-button';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as ProfilePopover } from './profile-popover';