Fix/design-system-build

packages/travelmakers-design-core/src/components/Accordion/AccordionItem/AccordionItem.style.ts

@@ -32,7 +32,11 @@ const getSpacing = (theme: TmTheme, type: AccordionType) => {
 export default createStyles(
   (
     theme,
-    { type, gap, isCollapse = true }: Props & { isCollapse: boolean }
+    {
+      type,
+      gap,
+      isCollapse = true,
+    }: Omit<Props, "items"> & { isCollapse: boolean }
   ) => {
     const { colors, radius, typography, spacing } = theme;
 

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

@@ -1,33 +1,31 @@
+import { useCalendar, useUpdateEffect } from "@travelmakers-design-v2/hooks";
 import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { addDays, differenceInDays, getMonth, isEqual } from "date-fns";
+import _ from "lodash";
 import React, {
   PropsWithChildren,
   forwardRef,
   useEffect,
   useState,
 } from "react";
-import { addDays, differenceInDays, getMonth, isEqual } from "date-fns";
+import { toast } from "react-hot-toast";
+import { Toast } from "../Toast";
 import { View } from "../View";
 import useStyles from "./Calendar.style";
 import {
-  CalendarProps,
   CalendarComponent,
+  CalendarProps,
   SelectedDays,
 } from "./Calendar.type";
-import {
-  useCalendar,
-  useToast,
-  useUpdateEffect,
-} from "@travelmakers-design-v2/hooks";
 import { DateCell } from "./_components/DateCell";
 import {
   DateCellDay,
   DateCellType,
 } from "./_components/DateCell/DateCell.type";
-import Indicator from "./_components/Indicator";
-import OptionBox from "./_components/OptionBox";
 import HeadMonthly from "./_components/HeadMonthly";
 import HeadTitle from "./_components/HeadTitle";
-import _ from "lodash";
+import Indicator from "./_components/Indicator";
+import OptionBox from "./_components/OptionBox";
 
 export interface Props {
   hotelName?: string;
@@ -86,7 +84,6 @@ export const Calendar: CalendarComponent & {
     }: PropsWithChildren<CalendarProps<C>>,
     ref: PolymorphicRef<C>
   ) => {
-    const { toast } = useToast();
     const { classes, cx } = useStyles();
     const [state, actions] = useCalendar(null);
     const [enabledDays, setEnabledDays] = useState<Date>();
@@ -156,9 +153,7 @@ export const Calendar: CalendarComponent & {
 
     const onClick = (day: DateCellDay) => {
       if (isDisabledDay(day)) {
-        toast({
-          text: notAllowedMessage,
-        });
+        toast(<Toast text={notAllowedMessage} />);
       } else if (type === "tour") {
         setChecked((prev) => {
           return { ...prev, from: day, to: day };
@@ -172,9 +167,7 @@ export const Calendar: CalendarComponent & {
         isBetweenNotSelectedDays(day) &&
         (isDisabledDay(day) || !isMinNightDays(day))
       ) {
-        toast({
-          text: notAllowedMessage,
-        });
+        toast(<Toast text={notAllowedMessage} />);
       } else if (isBetweenNotSelectedDays(day)) {
         setChecked((prev) => {
           return { ...prev, to: day };

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

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import { Toaster } from "../../Toast";
 import { Calendar } from "../Calendar";
 
 export default {
@@ -142,16 +143,19 @@ export default {
 
 export const Default = (props) => {
   return (
-    <Calendar {...props}>
-      <Calendar.OptionBox
-        title={"시간 선택하기"}
-        buttonTitle={"예약하기"}
-        onClick={() => {
-          console.log("OptionBox-log");
-        }}
-      >
-        1234
-      </Calendar.OptionBox>
-    </Calendar>
+    <>
+      <Toaster />
+      <Calendar {...props}>
+        <Calendar.OptionBox
+          title={"시간 선택하기"}
+          buttonTitle={"예약하기"}
+          onClick={() => {
+            console.log("OptionBox-log");
+          }}
+        >
+          1234
+        </Calendar.OptionBox>
+      </Calendar>
+    </>
   );
 };

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

@@ -78,21 +78,25 @@ export const HotelFeaturedCard: HotelFeaturedCardComponent & {
                 height={"100%"}
               />
               <div className={cx(classes.imageLabel)}>
-                <Tag type="fill">
-                  {labels?.map((label, index) => (
+                <Tag
+                  type="fill"
+                  items={labels?.map((label, index) => (
                     <Tag.Item label={label} colorIdx={index} />
                   ))}
-                </Tag>
+                />
               </div>
             </div>
 
             {/* SECTION: Content Section */}
             <div className={cx(classes.contentBox)}>
-              <Tag type="line" color="gray" roundness="half">
-                {timelineTags.map((timelineTag) => (
+              <Tag
+                type="line"
+                color="gray"
+                roundness="half"
+                items={timelineTags.map((timelineTag) => (
                   <Tag.Item label={timelineTag} />
                 ))}
-              </Tag>
+              />
               <div>
                 <Typography level="body2" color={"black"}>
                   {name}

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

@@ -60,11 +60,15 @@ export const HotelReviewCard: HotelReviewCardComponent & {
               <Icon src="IcAngleRight" width={16} height={16} />
             </div>
             {labels.length > 0 && (
-              <Tag type="fill" roundness="half" color="gray" gap={4}>
-                {labels?.map((label) => (
+              <Tag
+                type="fill"
+                roundness="half"
+                color="gray"
+                gap={4}
+                items={labels?.map((label) => (
                   <Tag.Item label={label} />
                 ))}
-              </Tag>
+              />
             )}
             <div className={classes.contentBox}>
               <Typography level="body2" color="primary1">

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

@@ -70,11 +70,15 @@ export const HotelTitleCard: HotelTitleCardComponent & {
           </div>
           {groupTags.length > 0 && (
             <div>
-              <Tag type="line" color="gray" roundness="half" gap={4}>
-                {groupTags.map((groupTag) => (
+              <Tag
+                type="line"
+                color="gray"
+                roundness="half"
+                gap={4}
+                items={groupTags.map((groupTag) => (
                   <Tag.Item label={groupTag} />
                 ))}
-              </Tag>
+              />
             </div>
           )}
         </div>
@@ -94,11 +98,15 @@ export const HotelTitleCard: HotelTitleCardComponent & {
             세금 및 봉사료 포함
           </Typography>
         </div>
-        <Tag type="fill" color="gray" roundness="half" gap={4}>
-          {tags.map((tag) => (
+        <Tag
+          type="fill"
+          color="gray"
+          roundness="half"
+          gap={4}
+          items={tags.map((tag) => (
             <Tag.Item label={tag} />
           ))}
-        </Tag>
+        />
       </View>
     );
   }

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

@@ -86,11 +86,13 @@ export const OptionCard: OptionCardComponent & {
         <div className={classes.container}>
           <div className={classes.headerGroup}>
             {labels.length > 0 && (
-              <Tag type="fill" style={{ marginBottom: 4 }}>
-                {labels?.map((label, index) => (
+              <Tag
+                type="fill"
+                style={{ marginBottom: 4 }}
+                items={labels?.map((label, index) => (
                   <Tag.Item label={label} colorIdx={index} />
                 ))}
-              </Tag>
+              />
             )}
             <div>
               <Typography level="display5" color="primary1" strong>

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

@@ -1,14 +1,14 @@
 import { PolymorphicRef, TmColor } from "@travelmakers-design-v2/styles";
 import { forwardRef } from "react";
+import { Tag } from "../../Tag";
+import { Typography } from "../../Typography";
 import { View } from "../../View";
 import useStyles from "./PriceCard.style";
 import {
-  PriceCardProps,
   PriceCardComponent,
+  PriceCardProps,
   StatusType,
 } from "./PriceCard.type";
-import { Typography } from "../../Typography";
-import { Tag } from "../../Tag";
 
 export interface Props {
   /** Hotel 타입을 정합니다. */
@@ -53,9 +53,12 @@ export const PriceCard: PriceCardComponent & {
         </Typography>
         <br />
         {status === "active" && (
-          <Tag type="fill" color="gray" roundness="half">
-            <Tag.Item label={description} />
-          </Tag>
+          <Tag
+            type="fill"
+            color="gray"
+            roundness="half"
+            items={[<Tag.Item label={description} />]}
+          />
         )}
       </View>
     );

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

@@ -1,2 +1,2 @@
 export { SkeletonTimeLineBanner } from "./SkeletonTimeLineBanner";
-export type { SkeletonTimeLineBannerProps } from "./SkeletonTimeLineBanner";
+export type { SkeletonTimeLineBannerProps } from "./SkeletonTimeLineBanner.type";

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

@@ -1,2 +1,2 @@
 export { TimeLineBanner } from "./TimeLineBanner";
-export type { TimeLineBannerProps } from "./TimeLineBanner";
+export type { TimeLineBannerProps } from "./TimeLineBanner.type";

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

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

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

@@ -3,6 +3,7 @@ import {
   PolymorphicComponentProps,
   TmComponentProps,
 } from "@travelmakers-design-v2/styles";
+import Link from "next/link";
 import { Props } from "./MenuItem";
 import useStyles from "./MenuItem.style";
 
@@ -15,6 +16,6 @@ interface SharedMenuItemProps
 export type MenuItemProps<C extends React.ElementType> =
   PolymorphicComponentProps<C, SharedMenuItemProps>;
 
-export type MenuItemComponent = <C extends React.ElementType = "a">(
+export type MenuItemComponent = <C extends React.ElementType = typeof Link>(
   props: MenuItemProps<C>
 ) => React.ReactElement;

packages/travelmakers-design-core/src/components/NavBar/NavLink/NavLink.tsx

@@ -1,6 +1,7 @@
 import { PolymorphicRef } from "@travelmakers-design-v2/styles";
 import Link, { LinkProps } from "next/link";
 import { forwardRef } from "react";
+import { View } from "../../View";
 import useStyles from "./NavLink.style";
 import { NavLinkComponent, NavLinkProps } from "./NavLink.type";
 
@@ -12,7 +13,7 @@ export interface Props extends LinkProps {
 export const NavLink: NavLinkComponent & {
   displayName?: string;
 } = forwardRef(
-  <C extends React.ElementType = "a">(
+  <C extends React.ElementType = typeof Link>(
     { label, isDisable = false, className, ...props }: NavLinkProps<C>,
     ref: PolymorphicRef<C>
   ) => {
@@ -25,7 +26,8 @@ export const NavLink: NavLinkComponent & {
     };
 
     return (
-      <Link
+      <View<React.ElementType>
+        component={Link}
         ref={ref}
         className={cx(classes.root, className)}
         onClick={onClickHandler}
@@ -34,7 +36,7 @@ export const NavLink: NavLinkComponent & {
         {...props}
       >
         {label}
-      </Link>
+      </View>
     );
   }
 );

packages/travelmakers-design-core/src/components/NavBar/NavLink/NavLink.type.ts

@@ -3,6 +3,7 @@ import {
   PolymorphicComponentProps,
   TmComponentProps,
 } from "@travelmakers-design-v2/styles";
+import Link from "next/link";
 import { Props } from "./NavLink";
 import useStyles from "./NavLink.style";
 
@@ -15,6 +16,6 @@ interface SharedNavLinkProps
 export type NavLinkProps<C extends React.ElementType> =
   PolymorphicComponentProps<C, SharedNavLinkProps>;
 
-export type NavLinkComponent = <C extends React.ElementType = "a">(
+export type NavLinkComponent = <C extends React.ElementType = typeof Link>(
   props: NavLinkProps<C>
 ) => React.ReactElement;