feat(card): creating a card

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

@@ -12,7 +12,7 @@ export default createStyles(
       root: {
         width: fullWidth && "100%",
         height: TM_HEIGHTS[size],
-        padding: `0 ${spacing.spacing50}`,
+        padding: isNonBoxShadow ? 0 : `0 ${spacing.spacing50}`,
         borderRadius: roundness ? radius.radius100 : radius.radius20,
         cursor: "pointer",
       },

packages/travelmakers-design-core/src/components/Card/CouponCard/CouponCard.style.ts

@@ -0,0 +1,58 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+import { Props } from "./CouponCard";
+
+export default createStyles((theme, { type }: Pick<Props, "type">) => {
+  const getBackgroundColor = () => {
+    return {
+      week: {
+        backgroundColor: theme.colors.secondary,
+      },
+      month: {
+        backgroundColor: theme.colors.secondary20,
+      },
+      all: {
+        backgroundColor: theme.colors.primary,
+      },
+    };
+  };
+
+  return {
+    container: {
+      width: "296px",
+      height: "142px",
+      backgroundColor: theme.colors.primary99,
+      borderRadius: theme.radius.radius20,
+      overflow: "hidden",
+      display: "flex",
+    },
+    leftBox: {
+      ...getBackgroundColor()[type],
+      width: "80px",
+      display: "flex",
+      flexDirection: "column",
+      padding: theme.spacing.spacing10,
+    },
+    rightBox: {
+      width: "100%",
+      padding: theme.spacing.spacing20,
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.spacing.spacing5,
+    },
+    discountBox: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+    checkBox: {
+      backgroundColor: theme.colors.primaryContainer,
+      borderRadius: theme.radius.radius100,
+      width: 16,
+      height: 16,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Card/CouponCard/CouponCard.tsx

@@ -0,0 +1,143 @@
+import { PolymorphicRef, useTmTheme } from "@travelmakers-design-v2/styles";
+import { forwardRef } from "react";
+import { View } from "../../View";
+import useStyles from "./CouponCard.style";
+import { CouponCardProps, CouponCardComponent } from "./CouponCard.type";
+import { Typography } from "../../Typography";
+import { Icon } from "../../Icon";
+
+export interface Props {
+  /** CouponCard의 Type을 설정합니다. */
+  type: "week" | "month" | "all";
+
+  /** CouponCard의 상태를 설정합니다. */
+  state: "default" | "applied" | "checked";
+
+  /** CouponCard의 day를 설정합니다. */
+  day: number;
+
+  /** CouponCard의 타이틀을 설정합니다. */
+  title: string;
+
+  /** CouponCard의 서브 타이틀을 설정합니다. */
+  subTitle: string;
+
+  /** CouponCard의 적용상품 설정합니다. */
+  item?: string;
+
+  /** CouponCard의 잔여수량을 설정합니다. */
+  remainingQuantity?: number;
+
+  /** CouponCard의 내용을 설정합니다. */
+  content: string;
+}
+
+export const CouponCard: CouponCardComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "div">(
+    {
+      type,
+      state,
+      day,
+      title,
+      subTitle,
+      item,
+      remainingQuantity,
+      content,
+      className,
+      ...props
+    }: CouponCardProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const { classes, cx } = useStyles({ type });
+    const theme = useTmTheme();
+    const DAY_TYPE = {
+      week: "Week",
+      month: "Month",
+      all: "All",
+    };
+
+    const getItemText = (
+      item: Props["item"],
+      remainingQuantity: Props["remainingQuantity"]
+    ) => {
+      const firstText = item ?? "전체";
+      const secondText = ` | 잔여 ${remainingQuantity}개`;
+      if (remainingQuantity) {
+        return `${firstText} ${secondText}`;
+      } else {
+        return firstText;
+      }
+    };
+
+    const getStateIcon = (state: Props["state"]) => {
+      switch (state) {
+        case "applied":
+          return (
+            <Typography level="body3" color="primary3">
+              적용중
+            </Typography>
+          );
+
+        case "checked":
+          return (
+            <div className={classes.checkBox}>
+              <Icon
+                src="IcCheck"
+                width={12}
+                height={12}
+                color={theme.colors.white}
+              />
+            </div>
+          );
+
+        default:
+          return null;
+      }
+    };
+
+    return (
+      <View<React.ElementType>
+        component={"div"}
+        ref={ref}
+        className={cx(className, classes.container)}
+        {...props}
+      >
+        <div className={classes.leftBox}>
+          <Typography level="display2" color={"white"}>
+            {day}
+          </Typography>
+          <Typography family="Noto Serif KR" level="body1" color={"white"}>
+            {DAY_TYPE[type]}
+          </Typography>
+        </div>
+        <div className={classes.rightBox}>
+          <div className={classes.discountBox}>
+            <div>
+              <Typography level="display6" color="secondary">
+                {title}
+              </Typography>
+            </div>
+            <div>{getStateIcon(state)}</div>
+          </div>
+          <Typography level="body3" color="primary">
+            {subTitle}
+          </Typography>
+          <Typography level="caption" color="errorInteract">
+            {getItemText(item, remainingQuantity)}
+          </Typography>
+          <Typography
+            level="caption"
+            color="primary3"
+            style={{ whiteSpace: "pre-line" }}
+          >
+            {content}
+          </Typography>
+        </div>
+      </View>
+    );
+  }
+);
+
+CouponCard.displayName = "CouponCard";

packages/travelmakers-design-core/src/components/Card/CouponCard/CouponCard.type.ts

@@ -0,0 +1,20 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import { Props } from "./CouponCard";
+import useStyles from "./CouponCard.style";
+
+type CouponCardStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedCouponCardProps
+  extends Props,
+    TmComponentProps<CouponCardStylesNames> {}
+
+export type CouponCardProps<C extends React.ElementType> =
+  PolymorphicComponentProps<C, SharedCouponCardProps>;
+
+export type CouponCardComponent = <C extends React.ElementType = "div">(
+  props: CouponCardProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Card/CouponCard/index.ts

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

packages/travelmakers-design-core/src/components/Card/CouponCard/stories/CouponCard.stories.tsx

@@ -0,0 +1,86 @@
+import { Meta } from "@storybook/react";
+import { CouponCard } from "../CouponCard";
+
+export default {
+  title: "@travelmakers-design-v2/core/General/Card/CouponCard",
+  component: CouponCard,
+  argTypes: {
+    type: {
+      defaultValue: "week",
+      description: "CouponCard의 Type을 설정합니다.",
+      options: ["week", "month", "all"],
+      control: { type: "inline-radio" },
+    },
+    state: {
+      defaultValue: "default",
+      description: "CouponCard의 상태를 설정합니다.",
+      options: ["default", "applied", "checked"],
+      control: { type: "inline-radio" },
+    },
+    day: {
+      defaultValue: 1,
+      description: "CouponCard의 day를 설정합니다.",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+      control: { type: "number" },
+    },
+    title: {
+      defaultValue: "00%",
+      description: "CouponCard의 타이틀을 설정합니다.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      control: { type: "text" },
+    },
+    subTitle: {
+      defaultValue: "호텔에삶 특별 혜택",
+      description: "CouponCard의 서브 타이틀을 설정합니다.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      control: { type: "text" },
+    },
+    item: {
+      defaultValue: "적용 상품",
+      description: "CouponCard의 적용상품 설정합니다.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      control: { type: "text" },
+    },
+    remainingQuantity: {
+      defaultValue: 5,
+      description: "CouponCard의 잔여수량을 설정합니다.",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+      control: { type: "number" },
+    },
+    content: {
+      defaultValue:
+        "*쿠폰 사용 안내 문구\n *쿠폰 사용 안내 문구 안내 문구\n *쿠폰사용안내 문구 안내 문구",
+      description: "CouponCard의 내용을 설정합니다.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      control: { type: "text" },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => {
+  return <CouponCard {...props} />;
+};