feat: CoachTooltip 컴포넌트 구현

[#304]

packages/frontend/src/components/coachmark/CoachTooltip.css.ts

@@ -0,0 +1,86 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+
+import color from "../../design-system/tokens/color";
+import typography from "../../design-system/tokens/typography";
+import {
+  borderRadius,
+  flexAlignCenter,
+} from "../../design-system/tokens/utils.css";
+
+export const container = style([
+  borderRadius,
+  {
+    position: "relative",
+    width: 398,
+    padding: 16,
+    color: color.$scale.grey800,
+    backgroundColor: color.$semantic.bgWhite,
+  },
+]);
+
+export const header = style([flexAlignCenter, { gap: 5, marginBottom: 12 }]);
+
+export const title = style([typography.$semantic.title3Bold]);
+
+export const stepProgress = style([
+  typography.$semantic.caption2Regular,
+  { color: color.$scale.grey500 },
+]);
+
+export const closeButton = style({
+  position: "absolute",
+  top: 13,
+  right: 3,
+  border: 0,
+  color: color.$scale.grey700,
+  backgroundColor: "transparent",
+});
+
+export const content = style([
+  typography.$semantic.title3Regular,
+  { height: 53 },
+]);
+
+export const footer = style([
+  flexAlignCenter,
+  { justifyContent: "space-between" },
+]);
+
+const actionBaseButton = style([
+  typography.$semantic.body2Regular,
+  { border: 0 },
+]);
+
+export const actionButtonVariant = styleVariants({
+  skip: [
+    actionBaseButton,
+    {
+      padding: 0,
+      color: color.$scale.grey600,
+      backgroundColor: "transparent",
+    },
+  ],
+
+  back: [
+    actionBaseButton,
+    {
+      width: 67,
+      marginRight: 8,
+      borderRadius: 3,
+      padding: "7px 0",
+      color: color.$semantic.primary,
+      backgroundColor: color.$semantic.primaryLow,
+    },
+  ],
+
+  primary: [
+    actionBaseButton,
+    {
+      width: 67,
+      borderRadius: 3,
+      padding: "7px 0",
+      color: color.$semantic.textWhite,
+      backgroundColor: color.$semantic.primary,
+    },
+  ],
+});

packages/frontend/src/components/coachmark/CoachTooltip.tsx

@@ -0,0 +1,73 @@
+import { IoCloseOutline } from "react-icons/io5";
+import { TooltipRenderProps } from "react-joyride";
+
+import * as styles from "./CoachTooltip.css";
+
+export function CoachTooltip({
+  step: { content, showProgress, showSkipButton, title },
+  index: stepIndex,
+  size: stepSize,
+  isLastStep: lastStep,
+  continuous,
+  backProps,
+  closeProps,
+  primaryProps,
+  skipProps,
+  tooltipProps,
+}: TooltipRenderProps) {
+  const showBackButton = stepIndex > 0;
+  const showNextButton = continuous && !lastStep;
+
+  return (
+    <div {...tooltipProps} className={styles.container}>
+      <div className={styles.header}>
+        {title && <strong className={styles.title}>{title}</strong>}
+        {showProgress && <StepProgress cur={stepIndex + 1} size={stepSize} />}
+        <CloseButton {...closeProps} />
+      </div>
+
+      <div className={styles.content}>{content}</div>
+
+      <div className={styles.footer}>
+        {showSkipButton && <ActionButton type="skip" {...skipProps} />}
+        <div>
+          {showBackButton && <ActionButton type="back" {...backProps} />}
+          {showNextButton && <ActionButton type="primary" {...primaryProps} />}
+          {lastStep && <ActionButton type="primary" {...primaryProps} />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StepProgress({ cur, size }: { cur: number; size: number }) {
+  return (
+    <span className={styles.stepProgress}>
+      {cur} / {size}
+    </span>
+  );
+}
+
+function CloseButton(props: TooltipRenderProps["closeProps"]) {
+  return (
+    <button type="button" {...props} className={styles.closeButton}>
+      <IoCloseOutline size={27} />
+    </button>
+  );
+}
+
+type ActionButtonProps = TooltipRenderProps["backProps"] & {
+  type: "skip" | "back" | "primary";
+};
+
+function ActionButton({ type, title, ...props }: ActionButtonProps) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={styles.actionButtonVariant[type]}
+    >
+      {title}
+    </button>
+  );
+}