feat: 브릿지 캘린더 문의 버튼 및 액션 추가

travelmakers · Nov 14, 2024 · 3bc9e0f · 3bc9e0f
1 parent 1a93274
commit 3bc9e0f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/packages/travelmakers-design-core/src/components/CalendarSecond/Calendar.tsx b/packages/travelmakers-design-core/src/components/CalendarSecond/Calendar.tsx
@@ -61,6 +61,10 @@ export interface Props {
   };
 
   locale?: "ko" | "en";
+
+  /** 브릿지 스케줄러 가능 여부 */
+  isBridgeCalender?: boolean;
+  onContractUsClick?: () => void;
 }
 
 /**
@@ -92,6 +96,8 @@ export const CalendarSecond = forwardRef(
       loadingImageSrc,
       indicatorText,
       locale = "ko",
+        isBridgeCalender,
+        onContractUsClick,
       children,
       className,
       ...props
@@ -165,6 +171,8 @@ export const CalendarSecond = forwardRef(
               topIndicatorPosition={topIndicatorPosition}
               text={indicatorText}
               locale={locale}
+              isBridgeCalender={isBridgeCalender}
+              onBridgeCalenderClick={onContractUsClick}
             />
           )}
           <div className={classes.calendar}>

diff --git a/...makers-design-core/src/components/CalendarSecond/_components/Indicator/Indicator.style.ts b/...makers-design-core/src/components/CalendarSecond/_components/Indicator/Indicator.style.ts
@@ -53,6 +53,18 @@ export default createStyles(
           textAlign: "center",
         },
       },
+      indicatorContractUsBox: {
+        margin: "auto 0",
+        ["& > div"]: {
+          minWidth: "56px",
+          height: "28px",
+          padding: `0 ${theme.spacing.spacing10}`,
+          border: `1px solid ${theme.colors.primary1}`,
+          borderRadius: theme.radius.radius100,
+          textAlign: "center",
+          cursor: "pointer"
+        },
+      },
       indicatorNight: {
         display: "flex",
         justifyContent: "center",

diff --git a/...ravelmakers-design-core/src/components/CalendarSecond/_components/Indicator/Indicator.tsx b/...ravelmakers-design-core/src/components/CalendarSecond/_components/Indicator/Indicator.tsx
@@ -17,6 +17,8 @@ export interface Props {
   };
   topIndicatorPosition?: string;
   locale?: "ko" | "en";
+  isBridgeCalender?: boolean;
+  onBridgeCalenderClick?: () => void;
 }
 
 export const Indicator: React.FC<Props> = ({
@@ -25,6 +27,8 @@ export const Indicator: React.FC<Props> = ({
   topIndicatorPosition,
   text,
   locale = "ko",
+                                             isBridgeCalender,
+  onBridgeCalenderClick
 }) => {
   const { classes } = useStyles({ topIndicatorPosition });
   const isTour = type === "tour";
@@ -105,17 +109,30 @@ export const Indicator: React.FC<Props> = ({
           {generateToHeadlineText()}
         </div>
       </div>
+      {isBridgeCalender && !isTour && !selected.to && (
+          <div className={classes.indicatorContractUsBox} onClick={onBridgeCalenderClick}>
+            <div>
+              <Typography
+                  className={classes.indicatorNight}
+                  level="subhead2"
+                  color="primary1"
+              >
+                {locale === "ko" ? "문의" : " Contact Us"}
+              </Typography>
+            </div>
+          </div>
+      )}
       {selected.from && selected.to && !isTour && (
-        <div className={classes.indicatorDateCountBox}>
-          <div>
-            <Typography
-              className={classes.indicatorNight}
-              level="subhead2"
-              color="primary1"
-            >
-              {differenceInDays(selected.to.date, selected.from.date)}
-              {locale === "ko" ? "박" : " nights"}
-            </Typography>
+          <div className={classes.indicatorDateCountBox}>
+            <div>
+              <Typography
+                  className={classes.indicatorNight}
+                  level="subhead2"
+                  color="primary1"
+              >
+                {differenceInDays(selected.to.date, selected.from.date)}
+                {locale === "ko" ? "박" : " nights"}
+              </Typography>
           </div>
         </div>
       )}

diff --git a/packages/travelmakers-design-core/src/components/CalendarSecond/stories/Calendar.stories.tsx b/packages/travelmakers-design-core/src/components/CalendarSecond/stories/Calendar.stories.tsx
@@ -158,6 +158,17 @@ export default {
       },
       control: { type: "text" },
     },
+    isBridgeCalender:{
+      defaultValue: true,
+      description: "브릿지 스케줄러 가능 여부",
+      options: [true, false],
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+      control: { type: "inline-radio" },
+    }
   },
 } as Meta;