AICC 주선사 프로젝트

import { Layout, Menu } from 'antd';
import { MENU_LIST } from '@/shared/constants/menu';
import { useState } from 'react';
import { ShipperList } from '@/features/tabs/ShipperList';
import { OrderList } from '@/features/tabs/OrderList';
import { PinList } from '@/features/tabs/PinList';
const { Header, Content } = Layout;

const menus = Array.from({ length: 3 }).map((_, index) => ({
  key: index + 1,
  label: MENU_LIST[index],
}));
export const MainPage = () => {
  const [selectedMenu, setSelectedMenu] = useState < number > 1;
  const handleMenuClick = (key: number) => {
    setSelectedMenu(key);
  };
  return (
    <Layout
      style={{
        width: '100%',
        height: '100vh',
        backgroundColor: '#f0f0f0',
      }}
    >
      <div className="w-full h-[0px] bg-[#fafafa]" />
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          width: '100%',
          height: 48,
          padding: '0',
        }}
      >
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['1']}
          items={menus}
          onClick={(info) => handleMenuClick(Number(info.key))}
          style={{ height: 48, maxHeight: 48, flex: 1, alignItems: 'center' }}
          className="[&_.ant-menu-item]:!leading-[48px]"
        />
      </Header>
      <Content
        style={{
          display: 'flex',
          padding: '10px 10px',
          width: '100%',
          height: '100%',
          minHeight: '934px',
        }}
      >
        {selectedMenu === 1 && <OrderList />}
        {selectedMenu === 2 && <ShipperList />}
        {selectedMenu === 3 && <PinList />}
      </Content>
    </Layout>
  );
};