feat: 공통 컴포넌트 gnb 컴포넌트 UI 작성

src/app/components/Gnb/Gnb.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { Logo } from '@/public/images';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import UserStatus from './UserStatus';
+
+//@todo pathname 정해질 시 추가 예정
+const navList = [
+  {
+    name: '모임 찾기',
+    link: '#',
+  },
+  {
+    name: '찜한 모임',
+    link: '#',
+  },
+  {
+    name: '모든 리뷰',
+    link: '#',
+  },
+];
+
+const Gnb = () => {
+  const pathname = usePathname();
+
+  return (
+    <header className='gap-0 bg-var-orange-600 py-16'>
+      <div className='mx-16 flex max-w-[1200px] items-center justify-between md:mx-24 lg:mx-auto'>
+        <nav className='flex items-center'>
+          <Link href='/'>
+            <Logo className='mr-20 h-40 w-72' />
+          </Link>
+          <ul className='flex gap-24'>
+            {navList.map((nav, index) => (
+              <li key={index}>
+                <Link
+                  className={`text-[16px] font-semibold ${pathname.includes(nav.link) ? 'text-black' : 'text-white'}`}
+                  href={nav.link}
+                >
+                  {nav.name}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <UserStatus />
+      </div>
+    </header>
+  );
+};
+
+export default Gnb;

src/app/components/Gnb/UserStatus.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Profile } from '@/public/images';
+import Link from 'next/link';
+import { useState, useRef, useEffect } from 'react';
+
+/* user을 null로 설정하면 로그아웃된 상황을 볼 수 있습니다. */
+const user = {
+  name: 'test name',
+};
+
+const options = [{ name: '마이페이지' }, { name: '로그아웃' }];
+
+const UserStatus = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropDownRef.current &&
+        !dropDownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <>
+      {user ? (
+        <div className='relative' ref={dropDownRef}>
+          <Profile
+            className='size-40 cursor-pointer'
+            onClick={() => setIsOpen((prev) => !prev)}
+          />
+          {isOpen && (
+            <ul className='absolute right-0 mt-8 max-h-240 w-120 overflow-y-auto rounded-xl bg-var-gray-50 lg:left-0'>
+              {options.map((option, index) => (
+                <li
+                  key={index}
+                  className='cursor-pointer px-16 py-12 text-[12px] font-medium text-var-black hover:bg-var-orange-100 md:px-16'
+                >
+                  {option.name}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ) : (
+        <Link href='/signin'>
+          {/* @todo 임시 경로입니다. */}
+          <div className='text-[16px] font-semibold text-white'>로그인</div>
+        </Link>
+      )}
+    </>
+  );
+};
+
+export default UserStatus;