LH-369/menu

packages/travelmakers-design-core/src/components/Menu/Menu/Menu.style.ts

@@ -0,0 +1,20 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+
+export default createStyles((theme) => {
+  const { colors, radius } = theme;
+
+  return {
+    root: {
+      display: "inline-flex",
+      flexDirection: "column",
+      rowGap: "1px",
+      minWidth: "328px",
+      margin: 0,
+      padding: 0,
+      backgroundColor: colors.outline,
+      border: `1px solid ${colors.outline}`,
+      borderRadius: radius.radius20,
+      overflow: "hidden",
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Menu/Menu/Menu.tsx

@@ -0,0 +1,29 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { forwardRef, PropsWithChildren } from "react";
+import { View } from "../../View";
+import useStyles from "./Menu.style";
+import { MenuComponent, MenuProps } from "./Menu.type";
+
+export const Menu: MenuComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "ul">(
+    { className, children, ...props }: PropsWithChildren<MenuProps<C>>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { classes, cx } = useStyles();
+
+    return (
+      <View<React.ElementType>
+        component={"ul"}
+        ref={ref}
+        className={cx(classes.root, className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+Menu.displayName = "Menu";

packages/travelmakers-design-core/src/components/Menu/Menu/Menu.type.ts

@@ -0,0 +1,19 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import useStyles from "./Menu.style";
+
+type MenuStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedMenuProps extends TmComponentProps<MenuStylesNames> {}
+
+export type MenuProps<C extends React.ElementType> = PolymorphicComponentProps<
+  C,
+  SharedMenuProps
+>;
+
+export type MenuComponent = <C extends React.ElementType = "ul">(
+  props: MenuProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Menu/Menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from "./Menu";
+export type { MenuProps } from "./Menu.type";

packages/travelmakers-design-core/src/components/Menu/Menu/stories/Menu.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta } from "@storybook/react";
+import { MenuItem } from "../../MenuItem";
+import { Menu } from "../Menu";
+
+const menus = [
+  { href: "#", name: "예약 내역" },
+  { href: "#", name: "회원 정보 변경" },
+  { href: "#", name: "알림 설정" },
+  { href: "#", name: "자주 묻는 질문" },
+  { href: "#", name: "고객센터" },
+];
+
+export default {
+  title: "@travelmakers-design-v2/core/General/Menu/Menu",
+  component: Menu,
+  argTypes: {
+    /**
+     * ex)
+     *    props: {
+     *      // type, control, etc.
+     *      defaultValue: "props의 defaultValue를 작성합니다.",
+     *      description: "props 각각의 description을 작성합니다.",
+     *
+     *    },
+     */
+  },
+} as Meta;
+
+export const Default = () => {
+  const items = menus.map((menu, idx) => {
+    const { href, name } = menu;
+
+    return <MenuItem key={idx} href={href} menu={name} />;
+  });
+
+  return <Menu>{items}</Menu>;
+};

packages/travelmakers-design-core/src/components/Menu/MenuItem/MenuItem.style.ts

@@ -0,0 +1,20 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+
+export default createStyles((theme) => {
+  const { colors, spacing, typography } = theme;
+
+  return {
+    root: {
+      listStyle: "none",
+    },
+    link: {
+      display: "inline-block",
+      width: "100%",
+      padding: spacing.spacing30,
+      ...typography.body2,
+      color: colors.primary,
+      textDecoration: "none",
+      backgroundColor: "#fff",
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Menu/MenuItem/MenuItem.tsx

@@ -0,0 +1,30 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import Link, { LinkProps } from "next/link";
+import { forwardRef, PropsWithChildren } from "react";
+import useStyles from "./MenuItem.style";
+import { MenuItemComponent, MenuItemProps } from "./MenuItem.type";
+
+export interface Props extends LinkProps {
+  menu: string;
+}
+
+export const MenuItem: MenuItemComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "a">(
+    { className, menu, ...props }: PropsWithChildren<MenuItemProps<C>>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { classes, cx } = useStyles();
+
+    return (
+      <li className={cx(classes.root, className)}>
+        <Link ref={ref} className={classes.link} {...props}>
+          {menu}
+        </Link>
+      </li>
+    );
+  }
+);
+
+MenuItem.displayName = "MenuItem";

packages/travelmakers-design-core/src/components/Menu/MenuItem/MenuItem.type.ts

@@ -0,0 +1,20 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import { Props } from "./MenuItem";
+import useStyles from "./MenuItem.style";
+
+type MenuItemStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedMenuItemProps
+  extends Props,
+    TmComponentProps<MenuItemStylesNames> {}
+
+export type MenuItemProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedMenuItemProps>;
+
+export type MenuItemComponent = <C extends React.ElementType = "a">(
+  props: MenuItemProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Menu/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem } from "./MenuItem";
+export type { MenuItemProps } from "./MenuItem.type";

packages/travelmakers-design-core/src/components/Menu/MenuItem/stories/MenuItem.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta } from "@storybook/react";
+import { Menu } from "../../Menu/Menu";
+import { MenuItem } from "../MenuItem";
+
+export default {
+  title: "@travelmakers-design-v2/core/General/Menu/MenuItem",
+  component: MenuItem,
+  argTypes: {
+    href: {
+      control: { type: "text" },
+      defaultValue: "#",
+      description: "메뉴의 링크 주소",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    menu: {
+      control: { type: "text", default: "메뉴 이름" },
+      defaultValue: "메뉴 이름",
+      description: "메뉴의 이름",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => {
+  return (
+    <Menu>
+      <MenuItem {...props} />
+    </Menu>
+  );
+};

packages/travelmakers-design-core/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export * from "./Menu";
+export * from "./MenuItem";