refactor: header 컴포넌트 리팩토링

boostcampwm-2024 · Dec 2, 2024 · e346d84 · e346d84
1 parent 946b68e
commit e346d84
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 148 deletions.
diff --git a/apps/client/src/components/Header.tsx b/apps/client/src/components/Header.tsx
@@ -1,74 +1,22 @@
-import { useEffect, useState } from 'react';
-import { Link, useRouterState } from '@tanstack/react-router';
-import { Harmony } from '@/components/logo';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-interface HeaderProps {
-  className?: string;
-}
-
-function Header({ className }: HeaderProps) {
-  const router = useRouterState();
-  const { pathname } = router.location;
-  const [isTop, setIsTop] = useState(true);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      setIsTop(currentScrollY <= 10);
-    };
-
-    handleScroll();
-    window.addEventListener('scroll', handleScroll, { passive: true });
-
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  const isLoginPage = pathname === '/login';
-  const isSignupPage = pathname === '/signup';
-
-  const headerClasses = cn(
-    'fixed top-0 w-full h-16',
-    'flex items-center justify-between',
-    'px-6 bg-white dark:bg-black',
-    'text-black dark:text-white',
-    'transition-all duration-200',
-    {
-      'border-b border-gray-200 dark:border-gray-800 shadow-sm': !isTop,
-    },
-    className
-  );
+import { ReactNode } from 'react';
 
+function Header({ children }: { children: ReactNode }) {
   return (
-    <header className={headerClasses}>
-      {/* Logo Section */}
-      <div className="flex items-center space-x-4">
-        <Link to="/" className="transition-opacity hover:opacity-80">
-          <Harmony size={32} />
-        </Link>
-      </div>
-
-      {/* Navigation Buttons */}
-      <nav className="flex items-center space-x-3">
-        {!isLoginPage && (
-          <Button variant={isSignupPage ? 'outline' : 'ghost'} asChild>
-            <Link to="/login" className="hover:text-primary font-medium transition-colors">
-              로그인
-            </Link>
-          </Button>
-        )}
-
-        {!isSignupPage && (
-          <Button variant="outline" asChild>
-            <Link to="/signup" className="hover:text-primary font-medium transition-colors">
-              회원가입
-            </Link>
-          </Button>
-        )}
-      </nav>
+    <header className="px-6">
+      <nav className="flex h-16 items-center justify-between">{children}</nav>
     </header>
   );
 }
 
+function Left({ children }: { children: ReactNode }) {
+  return <div className="flex items-center gap-4">{children}</div>;
+}
+
+function Right({ children }: { children: ReactNode }) {
+  return <div className="flex items-center gap-2">{children}</div>;
+}
+
+Header.Left = Left;
+Header.Right = Right;
+
 export default Header;
diff --git a/apps/client/src/components/navigation/topbar.tsx b/apps/client/src/components/navigation/topbar.tsx
diff --git a/apps/client/src/pages/Home.tsx b/apps/client/src/pages/Home.tsx
@@ -1,28 +1,26 @@
 import { Link } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { Github, HarmonyWithText } from '@/components/logo';
-import { Topbar } from '@/components/navigation/topbar';
+import Header from '@/components/Header';
 
 function Home() {
   return (
     <div className="flex min-h-screen flex-col">
-      <Topbar
-        leftContent={
+      <Header>
+        <Header.Left>
           <Link to="/">
             <HarmonyWithText />
           </Link>
-        }
-        rightContent={
-          <>
-            <Button variant="ghost" asChild>
-              <Link to="/login">Login</Link>
-            </Button>
-            <Button asChild>
-              <Link to="/signup">Register</Link>
-            </Button>
-          </>
-        }
-      />
+        </Header.Left>
+        <Header.Right>
+          <Button variant="ghost" className="hover:text-primary hover:bg-white" asChild>
+            <Link to="/login">Login</Link>
+          </Button>
+          <Button asChild>
+            <Link to="/signup">Register</Link>
+          </Button>
+        </Header.Right>
+      </Header>
 
       <main className="mt-16 flex-grow bg-white text-black dark:bg-black dark:text-white">
         <section className="container mx-auto max-w-6xl from-pink-500 via-red-500 to-yellow-500 px-6 py-20 text-center">

diff --git a/apps/client/src/pages/Login.tsx b/apps/client/src/pages/Login.tsx
@@ -1,26 +1,26 @@
 import { Link } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button.tsx';
 import { HarmonyWithText } from '@/components/logo';
-import { Topbar } from '@/components/navigation/topbar';
+import Header from '@/components/Header';
 import Footer from '@/components/Footer.tsx';
 import { LoginForm } from '@/features/auth/components/LoginForm.tsx';
 
 function Login() {
   return (
     <>
       <div className="flex h-screen flex-col">
-        <Topbar
-          leftContent={
+        <Header>
+          <Header.Left>
             <Link to="/">
               <HarmonyWithText />
             </Link>
-          }
-          rightContent={
-            <Button variant="outline" asChild>
+          </Header.Left>
+          <Header.Right>
+            <Button variant="outline" className="hover:bg-primary hover:text-white" asChild>
               <Link to="/signup">Register</Link>
             </Button>
-          }
-        />
+          </Header.Right>
+        </Header>
 
         <main className="flex h-full items-center justify-center">
           <div className="w-full max-w-md">

diff --git a/apps/client/src/pages/Signup.tsx b/apps/client/src/pages/Signup.tsx
@@ -1,25 +1,26 @@
 import { Link } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { HarmonyWithText } from '@/components/logo';
-import { Topbar } from '@/components/navigation/topbar';
+import Header from '@/components/Header';
 import Footer from '@/components/Footer.tsx';
 import { SignupForm } from '@/features/auth/components/SignupForm.tsx';
 
 export function Signup() {
   return (
     <div className="flex h-screen flex-col">
-      <Topbar
-        leftContent={
+      <Header>
+        <Header.Left>
           <Link to="/">
             <HarmonyWithText />
           </Link>
-        }
-        rightContent={
-          <Button variant="outline" asChild>
+        </Header.Left>
+        <Header.Right>
+          <Button variant="outline" className="hover:bg-primary hover:text-white" asChild>
             <Link to="/login">Login</Link>
           </Button>
-        }
-      />
+        </Header.Right>
+      </Header>
+
       <main className="flex h-full items-center justify-center">
         <div className="w-full max-w-md rounded-2xl border">
           <div className="mb-8 pt-12 text-center">

diff --git a/apps/client/src/routes/_auth.tsx b/apps/client/src/routes/_auth.tsx
@@ -5,7 +5,7 @@ import { SlashIcon } from '@radix-ui/react-icons';
 import { ChangeEvent, useState } from 'react';
 import axios from 'axios';
 import { Harmony } from '@/components/logo';
-import { Topbar } from '@/components/navigation/topbar';
+import Header from '@/components/Header';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -220,43 +220,41 @@ function AuthLayout() {
 
   return (
     <div>
-      <Topbar
-        leftContent={
-          <>
-            <Link to={params.project === undefined ? '/account' : '/$project'}>
-              <Harmony />
-            </Link>
-            <SlashIcon className="h-5 text-gray-300" />
-            <div className="flex items-center gap-2">
-              <h2>{(params.project && currentProject?.title) ?? 'My Account'}</h2>
-              <DropdownMenu>
-                <DropdownMenuTrigger className="h-8">
-                  <ChevronsUpDownIcon className="h-4 w-4" />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="bg-white">
+      <Header>
+        <Header.Left>
+          <Link to={params.project === undefined ? '/account' : '/$project'}>
+            <Harmony />
+          </Link>
+          <SlashIcon className="h-5 text-gray-300" />
+          <div className="flex items-center gap-2">
+            <h2>{(params.project && currentProject?.title) ?? 'My Account'}</h2>
+            <DropdownMenu>
+              <DropdownMenuTrigger className="h-8">
+                <ChevronsUpDownIcon className="h-4 w-4" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="bg-white">
+                <DropdownMenuItem
+                  asChild
+                  className="hover:cursor-pointer focus:bg-[#f2f2f2] focus:text-black"
+                >
+                  <Link to="/account">My Account</Link>
+                </DropdownMenuItem>
+                {projects.map((project) => (
                   <DropdownMenuItem
+                    key={project.id}
                     asChild
                     className="hover:cursor-pointer focus:bg-[#f2f2f2] focus:text-black"
                   >
-                    <Link to="/account">My Account</Link>
+                    <Link to="/$project/board" params={{ project: String(project.id) }}>
+                      {project.title}
+                    </Link>
                   </DropdownMenuItem>
-                  {projects.map((project) => (
-                    <DropdownMenuItem
-                      key={project.id}
-                      asChild
-                      className="hover:cursor-pointer focus:bg-[#f2f2f2] focus:text-black"
-                    >
-                      <Link to="/$project/board" params={{ project: String(project.id) }}>
-                        {project.title}
-                      </Link>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </>
-        }
-        rightContent={
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </Header.Left>
+        <Header.Right>
           <DropdownMenu>
             <DropdownMenuTrigger>
               <Avatar className="h-8 w-8 border">
@@ -283,8 +281,8 @@ function AuthLayout() {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-        }
-      />
+        </Header.Right>
+      </Header>
       <Dialog
         open={isProfileOpen}
         onOpenChange={(isProfileOpen) => {