diff --git a/src/frontend/apps/web/app/(main)/layout.tsx b/src/frontend/apps/web/app/(main)/layout.tsx index 3e7fc59f..a4ac6147 100644 --- 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,6 +9,7 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const user = null; return (
-
+
: } />
-
{children}
+
+ {children} +
); diff --git a/src/frontend/apps/web/src/features/auth/index.ts b/src/frontend/apps/web/src/features/auth/index.ts new file mode 100644 index 00000000..76d11bda --- /dev/null +++ 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 new file mode 100644 index 00000000..27ba598a --- /dev/null +++ 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 new file mode 100644 index 00000000..d494e92a --- /dev/null +++ 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 new file mode 100644 index 00000000..3c831b7b --- /dev/null +++ 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 ( + + ); +}; +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 new file mode 100644 index 00000000..c9cf3329 --- /dev/null +++ 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 ( + + ); +}; +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 new file mode 100644 index 00000000..a467180e --- /dev/null +++ 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 new file mode 100644 index 00000000..71e3f08b --- /dev/null +++ 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/frontend/apps/web/src/shared/components/header/nickname.tsx b/src/frontend/apps/web/src/features/user/ui/profile-nickname.tsx similarity index 90% rename from src/frontend/apps/web/src/shared/components/header/nickname.tsx rename to src/frontend/apps/web/src/features/user/ui/profile-nickname.tsx index b9b8487e..0dfae0c7 100644 --- a/src/frontend/apps/web/src/shared/components/header/nickname.tsx +++ b/src/frontend/apps/web/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 = () => { ); }; -export default Nickname; +export default ProfileNickname; diff --git a/src/frontend/apps/web/src/shared/components/header/profile-picture.tsx b/src/frontend/apps/web/src/features/user/ui/profile-picture.tsx similarity index 100% rename from src/frontend/apps/web/src/shared/components/header/profile-picture.tsx rename to src/frontend/apps/web/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 new file mode 100644 index 00000000..d51aaaed --- /dev/null +++ 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 ( +
+

My Account

+
+ + +
+ +
+ ); +}; +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 new file mode 100644 index 00000000..fc54377b --- /dev/null +++ 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 ( + + + + + + + + + + + + + + ); +}; +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 index 244cbb49..c2d2ab98 100644 --- 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 ( <> @@ -24,26 +15,7 @@ const Header = () => { - - - - - - - - - - - - - - + {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 deleted file mode 100644 index d86482ce..00000000 --- a/src/frontend/apps/web/src/shared/components/header/profile-container.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Button } from '@workspace/ui/components'; -import ProfilePicture from './profile-picture'; -import Nickname from './nickname'; - -const ProfileContainer = () => { - return ( -
-

My Account

-
- - -
- -
- ); -}; -export default ProfileContainer;