Merge pull request #10 from yoouung/jamie/menu-bar

[기능] 메뉴바 UI 구현

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.5.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",

src/app/components/HamburgerMenu.tsx

@@ -4,10 +4,20 @@ import { Squash as Hamburger } from 'hamburger-react'
 import { Dispatch, SetStateAction } from 'react'
 
 interface HamburgerMenuProps {
-  // menuOpen: boolean
-  // setMenuOpen: Dispatch<SetStateAction<boolean>>
+  menuOpen: boolean
+  setMenuOpen: Dispatch<SetStateAction<boolean>>
 }
 
-export default function HamburgerMenu() {
-  return <Hamburger color='black' size={20} />
+export default function HamburgerMenu({
+  menuOpen,
+  setMenuOpen,
+}: HamburgerMenuProps) {
+  return (
+    <Hamburger
+      toggled={menuOpen}
+      toggle={setMenuOpen}
+      color='black'
+      size={20}
+    />
+  )
 }

src/app/components/Header.tsx

@@ -1,17 +1,39 @@
+'use client'
+
 import noti from '@images/noti.png'
 import Image from 'next/image'
 import HamburgerMenu from '@components/HamburgerMenu'
+import { useState } from 'react'
+import Menu from './Menu'
 
 export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
   return (
-    <header className='max-w-[375px] bg-white w-full h-50 flex justify-between items-center  px-4'>
-      <p className='text-blue-800 text-3xl font-bold'>WOOCO</p>
-      <div className='flex justify-between items-center'>
-        <button>
-          <Image alt='notification' src={noti} className='w-24 h-auto' />
-        </button>
-        <HamburgerMenu />
-      </div>
-    </header>
+    <>
+      <header className='max-w-[375px] bg-white w-full h-[50px] min-h-[50px] flex justify-between items-center px-4'>
+        <p className='text-blue-800 text-3xl font-bold'>WOOCO</p>
+        <div className='flex items-center right-[10px]'>
+          <button>
+            <Image alt='notification' src={noti} className='w-24 h-auto' />
+          </button>
+          <div
+            className={`z-[100] ${isMenuOpen && 'fixed top-0 right-[10px]'}`}
+          >
+            <HamburgerMenu menuOpen={isMenuOpen} setMenuOpen={setIsMenuOpen} />
+          </div>
+        </div>
+      </header>
+
+      {isMenuOpen && (
+        <>
+          <Menu setIsOpen={setIsMenuOpen} />
+          <div
+            className='fixed top-0 right-0 w-full h-full bg-black bg-opacity-50 z-40 '
+            onClick={() => setIsMenuOpen(false)}
+          />
+        </>
+      )}
+    </>
   )
 }

src/app/components/Menu.tsx

@@ -0,0 +1,132 @@
+import Image from 'next/image'
+import getData from '../users/[id]/getData'
+import {
+  HeartFilled,
+  FlagFilled,
+  MessageFilled,
+  CalendarFilled,
+  ThunderboltFilled,
+  NotificationFilled,
+} from '@ant-design/icons'
+import { useRouter } from 'next/navigation'
+
+interface MenuItemsProps {
+  id: number
+  name: string
+  to: string
+  icon: JSX.Element
+}
+
+interface MenuProps {
+  id: number
+  name: string
+  items: MenuItemsProps[]
+}
+
+export default function Menu({
+  setIsOpen,
+}: {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+}) {
+  const router = useRouter()
+  const userInfo = getData().user_info
+  const menuList: MenuProps[] = [
+    {
+      id: 1,
+      name: '나의 활동',
+      items: [
+        {
+          id: 1,
+          name: '관심 목록',
+          to: '/users/1/like',
+          icon: <HeartFilled />,
+        },
+        {
+          id: 2,
+          name: '내가 작성한 코스',
+          to: '/users/1',
+          icon: <FlagFilled />,
+        },
+        {
+          id: 3,
+          name: '내가 작성한 댓글',
+          to: '/',
+          icon: <MessageFilled />,
+        },
+        {
+          id: 4,
+          name: '나의 일정',
+          to: '/schedules',
+          icon: <CalendarFilled />,
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: '우코 소식',
+      items: [
+        {
+          id: 1,
+          name: '진행 중인 이벤트',
+          to: '/',
+          icon: <ThunderboltFilled />,
+        },
+        {
+          id: 2,
+          name: '공지사항',
+          to: '/',
+          icon: <NotificationFilled />,
+        },
+      ],
+    },
+  ]
+
+  return (
+    <div className='fixed top-0 right-0 w-[80vw] max-w-[300px] h-full bg-white z-50'>
+      <div className='flex flex-col items-start justify-start h-full py-[50px] px-[25px]'>
+        <div className='flex flex-row px-[10px]'>
+          <div className='w-[42px] h-[42px] rounded-full overflow-hidden relative'>
+            <Image
+              src={userInfo.profile_url}
+              alt='profile'
+              layout='fill'
+              className='object-cover'
+            />
+          </div>
+          <div className='flex flex-col ml-[20px] gap-[5px]'>
+            <div className='text-[14px] font-bold text-black-500'>
+              {userInfo.name}
+            </div>
+            <div
+              className='text-[10px] text-gray-400 underline cursor-pointer'
+              onClick={() => router.push('/users/1/setting')}
+            >
+              수정하기
+            </div>
+          </div>
+        </div>
+
+        <div className='flex flex-col gap-[50px] mt-[50px] pl-[10px]'>
+          {menuList.map((menu) => (
+            <div className='flex flex-col gap-[15px]' key={menu.id}>
+              <span className='font-bold text-[14px]'>{menu.name}</span>
+              {menu.items.map((item) => (
+                <ul
+                  key={item.id}
+                  className='flex flex-row items-center gap-[10px] text-[13px] cursor-pointer'
+                  onClick={() => {
+                    setIsOpen(false)
+                    router.push(item.to)
+                  }}
+                >
+                  <li>{item.icon}</li>
+                  <li>{item.name}</li>
+                </ul>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/globals.css

@@ -6,7 +6,7 @@
   --background: #ffffff;
   --white: #ffffff;
   --foreground: #171717;
-  --black: #17171717;
+  --black: #171717;
 }
 
 html {

src/app/layout.tsx

@@ -15,7 +15,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='kr' className='h-full'>
-      <body className='h-full flex items-center flex-col'>
+      <body className='h-full flex items-center flex-col overflow-y-scroll'>
         <Header />
         <div className='mx-auto flex-1 text-black w-full max-w-[375px]'>
           {children}

src/app/users/[id]/components/PlaceComponent.tsx

@@ -36,7 +36,7 @@ export default function PlaceComponent({ data }: PlaceData) {
           </span>
         ))}
       </div>
-      <div className='rounded-[20px] mt-[10px] flex gap-[4px] overflow-auto'>
+      <div className='rounded-[20px] mt-[10px] flex gap-[4px] overflow-x-hidden'>
         {data.images.map((image, index) => {
           return (
             <Image

src/app/users/[id]/like/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}