DOGO PROJECT_005

### 주요 특징

1. **Props 사용**:
   - `role` prop을 받아서 사용자의 역할에 따라 다른 메뉴를 표시합니다. `role`은 `'business'` 또는 `'user'` 중 하나입니다.

2. **Router 사용**:
   - `next/router`를 사용하여 페이지 내비게이션을 처리합니다. 각 메뉴 항목을 클릭하면 해당 페이지로 이동합니다.

3. **메뉴 배열**:
   - `businessMenu`와 `userMenu` 두 개의 배열을 정의하여, 각 역할에 따른 메뉴를 관리합니다.
   - `businessMenu`는 호텔 관리, 정책 관리, 객실 관리, 예약 관리, 문의 관리 등이 포함됩니다.
   - `userMenu`는 내 정보, 예약 내역 등이 포함됩니다.

4. **동적 메뉴 렌더링**:
   - `role`에 따라 `menu` 변수에 해당 메뉴 배열을 할당하고, 이를 기반으로 메뉴를 렌더링합니다.

5. **스타일**:
   - Tailwind CSS 클래스를 사용하여 사이드바의 스타일을 정의합니다. `w-60`, `bg-gray-100`, `h-full`, `p-4` 등이 사용됩니다.

### 코드 설명

```jsx
import React from 'react';
import { useRouter } from 'next/router';

interface SidebarProps {
  role: 'business' | 'user';
}

const Sidebar: React.FC<SidebarProps> = ({ role }) => {
  const router = useRouter();

  const businessMenu = [
    { name: '호텔 관리', path: '/business/hotels' },
    { name: '정책 관리', path: '/business/policies' },
    { name: '객실 관리', path: '/business/rooms' },
    { name: '예약 관리', path: '/business/reservations' },
    { name: '문의 관리', path: '/business/inquiries' },
  ];

  const userMenu = [
    { name: '내 정보', path: '/user/profile' },
    { name: '예약 내역', path: '/user/reservations' },
  ];

  const menu = role === 'business' ? businessMenu : userMenu;

  return (
    <aside className="w-60 bg-gray-100 h-full p-4">
      <ul>
        {menu.map((item) => (
          <li
            key={item.name}
            onClick={() => router.push(item.path)}
            className="py-2 px-4 hover:bg-gray-200 cursor-pointer"
          >
            {item.name}
          </li>
        ))}
      </ul>
    </aside>
  );
};

export default Sidebar;
```

### 세부적인 설명

- **Props 타입 정의**:
  - `SidebarProps` 인터페이스를 통해 `role` prop의 타입을 지정합니다. `'business'` 또는 `'user'` 중 하나로 제한합니다.

- **Router 사용**:
  - `useRouter` 훅을 사용하여 `router` 객체를 가져오고, `router.push` 메서드를 사용하여 페이지 이동을 처리합니다.

- **메뉴 배열**:
  - `businessMenu`와 `userMenu`는 각각 비즈니스 사용자와 일반 사용자에 대한 메뉴 항목을 담고 있습니다.
  - 각 메뉴 항목은 `name`과 `path` 두 개의 속성을 가지며, `name`은 메뉴 이름, `path`는 이동할 페이지의 경로입니다.

- **동적 메뉴 렌더링**:
  - `role`에 따라 `menu` 변수에 해당 메뉴 배열을 할당합니다.
  - `menu.map`을 사용하여 메뉴 항목을 반복 렌더링합니다.
  - 각 `li` 요소는 클릭 시 `router.push`를 통해 해당 페이지로 이동합니다.

- **스타일**:
  - `aside` 요소에 Tailwind CSS 클래스를 사용하여 사이드바의 크기, 배경색, 패딩 등을 설정합니다.
  - `li` 요소에 `py-2`, `px-4`, `hover:bg-gray-200`, `cursor-pointer` 등으로 스타일을 지정하여 사용자가 클릭할 수 있는 메뉴 항목을 만들어줍니다.

### 사용 방법

이 컴포넌트는 다른 페이지나 컴포넌트에서 import하여 사용할 수 있습니다. 예를 들어:

```jsx
import Sidebar from './Sidebar';

const BusinessPage = () => {
  return (
    <div>
      <Sidebar role="business" />
      {/* 다른 컴포넌트 or 내용 */}
    </div>
  );
};

export default BusinessPage;
```

이렇게 하면, `role` prop을 `'business'`로 전달하여 비즈니스용 메뉴가 표시됩니다. `'user'`로 전달하면 사용자용 메뉴가 표시됩니다.

### 결론

이 컴포넌트는 역할(role)에 따라 다른 메뉴를 표시하는 간단한 사이드바를 구현한 예제입니다. Next.js의 useRouter 훅을 사용하여 페이지 내비게이션을 처리하고, Tailwind CSS를 사용하여 스타일을 지정했습니다. 이를 통해 다양한 페이지에서 재사용할 수 있는 유연한 사이드바 컴포넌트를 만들어냈습니다.