Refactor/#247: GNB와 SideDrawer의 HTML구조, 컨벤션, 접근성 리팩토링

src/app/layout.tsx

@@ -3,11 +3,12 @@ import { Hanuman } from 'next/font/google';
 import type { Metadata, Viewport } from 'next';
 import '@/styles/globals.css';
 import QueryProviders from '@/providers/queryProviders';
-import { GNB } from '@/components/layout/GNB/GNB';
+import GNB from '@/components/layout/GNB/GNB';
 import LayoutWrapper from '@/components/layout/LayoutWrapper';
 import AuthProvider from '@/providers/auth-provider/AuthProvider';
 import { ReactNode } from 'react';
 import { ToastProvider } from '@/providers/ToastProvider';
+import SideDrawer from '@/components/layout/SideDrawer/SideDrawer';
 
 const pretendard = localFont({
   src: '../fonts/PretendardVariable.woff2',
@@ -45,13 +46,14 @@ const RootLayout = ({
         <ToastProvider>
           <QueryProviders>
             <AuthProvider>
-              <header>
+              <header className="fixed z-40 h-15 w-full">
                 <GNB />
               </header>
 
               <main>
                 <LayoutWrapper>{children}</LayoutWrapper>
               </main>
+              <SideDrawer />
             </AuthProvider>
           </QueryProviders>
         </ToastProvider>

src/components/common/Dropdown/Dropdown.tsx

@@ -22,9 +22,14 @@ export const DropdownContent = ({
 export const DropdownContainer = ({
   children,
   className = '',
+  ...rest
 }: DropdownContainerProps) => {
   const defaultOptionContainerStyle = `overflow-hidden rounded-md bg-white mt-2 ${className}`;
-  return <ul className={defaultOptionContainerStyle}>{children}</ul>;
+  return (
+    <ul className={defaultOptionContainerStyle} {...rest}>
+      {children}
+    </ul>
+  );
 };
 
 const Dropdown = ({
@@ -34,7 +39,7 @@ const Dropdown = ({
   className = '',
   onClose,
 }: DropdownProps) => {
-  const outSideRef = useClickOutside(() => {
+  const outSideRef = useClickOutside<HTMLDivElement>(() => {
     if (isOpen && onClose) {
       onClose();
     }

src/components/common/Dropdown/type.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { MouseEventHandler, ReactNode, HTMLAttributes } from 'react';
 
 export interface DropdownProps {
   trigger?: ReactNode;
@@ -14,7 +14,6 @@ export interface DropdownContentProps {
   className?: string;
 }
 
-export interface DropdownContainerProps {
-  className?: string;
+export type DropdownContainerProps = HTMLAttributes<HTMLUListElement> & {
   children: ReactNode;
-}
+};

src/components/layout/GNB/GNB.tsx

@@ -1,65 +1,15 @@
-'use client';
-
-import LoginSection from './LoginSection';
-import SideDrawer from '../SideDrawer/SideDrawer';
 import LogoButton from '@/components/layout/GNB/LogoButton';
 import MenuGroups from '@/components/layout/GNB/MenuGroups';
-import { APP_ROUTES, APP_ROUTES_LABEL } from '@/constants/appRoutes';
-import useBoolean from '@/hooks/useBoolean';
-import { Hamburger } from '@public/assets/icons';
-
-// 메뉴 항목
-const MENU_ITEMS = [
-  { label: APP_ROUTES_LABEL.mypage, href: APP_ROUTES.mypage },
-  { label: APP_ROUTES_LABEL.social, href: APP_ROUTES.social },
-  { label: APP_ROUTES_LABEL.library, href: APP_ROUTES.library },
-];
-
-export const GNB = () => {
-  const {
-    value: isDrawerOpen,
-    setTrue: setIsDrawerOpen,
-    setFalse: setIsDrawerClose,
-  } = useBoolean();
 
+const GNB = () => {
   return (
-    <>
-      <nav className="fixed top-0 z-50 h-15 w-full border-b border-gray-200 bg-white">
-        <div className="flex-center mx-auto h-full w-full max-w-300 px-4 md:justify-between md:pr-6 md:pl-7 lg:px-1">
-          {/* Logo */}
-          <div className="flex items-center gap-5 truncate lg:gap-10">
-            <LogoButton />
-            {/* 데스크탑 메뉴 */}
-            <MenuGroups />
-          </div>
-          {/* 데스크탑 로그인 영역*/}
-          <LoginSection />
-          {/* 모바일 햄버거 */}
-          <button
-            className="absolute top-5 right-5 md:hidden"
-            onClick={() => setIsDrawerOpen()}
-          >
-            <Hamburger
-              className="h-6 w-6 text-gray-500"
-              fill="currentColor"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </nav>
-      {/* 오버레이 */}
-      {isDrawerOpen && (
-        <div
-          className="fixed inset-0 z-50 h-screen bg-black/50 md:hidden"
-          onClick={() => setIsDrawerClose()}
-        />
-      )}
-      {/* 시아드 드로어 (모바일 화면에 표시) */}
-      <SideDrawer
-        isOpen={isDrawerOpen}
-        closeDrawer={() => setIsDrawerClose()}
-        menuItems={MENU_ITEMS}
-      />
-    </>
+    <nav className="flex-center h-full w-full border-b border-gray-200 bg-white">
+      <div className="flex w-full max-w-300 gap-6 px-4 md:pr-6 md:pl-7 lg:gap-10 xl:px-1">
+        <LogoButton />
+        <MenuGroups />
+      </div>
+    </nav>
   );
 };
+
+export default GNB;

src/components/layout/GNB/LogoButton.tsx

@@ -4,11 +4,15 @@ import Link from 'next/link';
 
 const LogoButton = ({ onClick }: LogoButtonProps) => {
   return (
-    <h1 className="text-write-main font-hanuman pt-1.5 text-lg font-black lg:text-2xl lg:font-bold">
-      <Link href={APP_ROUTES.home} onClick={onClick}>
+    <Link
+      href={APP_ROUTES.home}
+      onClick={onClick}
+      className="mx-auto flex items-center"
+    >
+      <div className="text-write-main font-hanuman pt-1.5 text-lg font-black lg:text-2xl lg:font-bold">
         WeWrite
-      </Link>
-    </h1>
+      </div>
+    </Link>
   );
 };
 export default LogoButton;

src/components/layout/GNB/MenuGroups.tsx

@@ -1,44 +1,98 @@
+'use client';
+
 import { APP_ROUTES, APP_ROUTES_LABEL } from '@/constants/appRoutes';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Users, BookOpen } from 'lucide-react';
+import useClickOutside from '@/hooks/useClickOutside';
+import useBoolean from '@/hooks/useBoolean';
+import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
+import useReferer from '@/hooks/useReferer';
+import UserProfileDropdown from '@/components/layout/GNB/UserProfileDropdown';
+import { Hamburger } from '@public/assets/icons';
+import { useSideDrawerStore } from '@/lib/store/useSideDrawerStore';
 
 const MenuGroups = () => {
   const pathname = usePathname();
+  const { refererParam } = useReferer();
+  const { isSignIn, myInfo } = useAuth();
+  const { openDrawer } = useSideDrawerStore();
+
+  const {
+    value: isDropdownOpen,
+    toggle: toggleDropDown,
+    setFalse: closeDropdown,
+  } = useBoolean();
+
+  const ref = useClickOutside<HTMLLIElement>(closeDropdown);
 
   return (
-    <ul className="hidden gap-6 font-semibold md:flex">
-      <li
-        className={`${
-          pathname === '/social'
-            ? 'text-write-main bg-gray-100'
-            : 'text-gray-500'
-        } hover:text-write-main inline-flex rounded-xl px-3 py-1.5 hover:bg-gray-100`}
-      >
-        <Link
-          href={APP_ROUTES.social}
-          className="inline-flex items-center gap-1.5"
+    <>
+      <ul className="hidden gap-6 font-semibold md:flex md:w-full md:items-center">
+        <li
+          className={`${
+            pathname === `${APP_ROUTES.social}`
+              ? 'text-write-main bg-gray-100'
+              : 'text-gray-500'
+          } hover:text-write-main inline-flex rounded-xl px-3 py-1.5 hover:bg-gray-100`}
         >
-          <Users className="h-5 w-5" aria-hidden="true" />
-          {APP_ROUTES_LABEL.social}
-        </Link>
-      </li>
-      <li
-        className={`${
-          pathname === '/library'
-            ? 'text-write-main bg-gray-100'
-            : 'text-gray-500'
-        } hover:text-write-main inline-flex rounded-xl px-2 py-1.5 hover:bg-gray-100`}
-      >
-        <Link
-          href={APP_ROUTES.library}
-          className="inline-flex items-center gap-1.5"
+          <Link
+            href={APP_ROUTES.social}
+            className="inline-flex items-center gap-1.5"
+          >
+            <Users className="h-5 w-5" aria-hidden="true" />
+            {APP_ROUTES_LABEL.social}
+          </Link>
+        </li>
+
+        <li
+          className={`${
+            pathname === `${APP_ROUTES.library}`
+              ? 'text-write-main bg-gray-100'
+              : 'text-gray-500'
+          } hover:text-write-main inline-flex rounded-xl px-2 py-1.5 hover:bg-gray-100`}
         >
-          <BookOpen className="h-5 w-5" aria-hidden="true" />
-          {APP_ROUTES_LABEL.library}
-        </Link>
-      </li>
-    </ul>
+          <Link
+            href={APP_ROUTES.library}
+            className="inline-flex items-center gap-1.5"
+          >
+            <BookOpen className="h-5 w-5" aria-hidden="true" />
+            {APP_ROUTES_LABEL.library}
+          </Link>
+        </li>
+
+        <li ref={ref} className="relative ml-auto hidden md:flex">
+          {myInfo && isSignIn ? (
+            <UserProfileDropdown
+              isDropdownOpen={isDropdownOpen}
+              toggleDropDown={toggleDropDown}
+              closeDropdown={closeDropdown}
+              userName={myInfo.name ?? null}
+              profileImage={myInfo.image ?? null}
+            />
+          ) : (
+            <Link
+              href={`${APP_ROUTES.signin}?${refererParam}`}
+              className="text-write-main text-base font-semibold"
+            >
+              로그인
+            </Link>
+          )}
+        </li>
+      </ul>
+      <button
+        type="button"
+        className="absolute top-5 right-5 md:hidden"
+        onClick={() => openDrawer()}
+        aria-label="사이드 드로어 열기"
+      >
+        <Hamburger
+          className="h-6 w-6 text-gray-500"
+          fill="currentColor"
+          aria-hidden="true"
+        />
+      </button>
+    </>
   );
 };