From c41b6be1dc402efeb0f9018c9ce60c66bd59099b Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Fri, 29 Dec 2023 02:25:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Coachmark=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#304]
---
 .../src/components/coachmark/Coachmark.tsx    | 60 +++++++++++++++++++
 .../src/components/coachmark/index.ts         |  1 +
 2 files changed, 61 insertions(+)
 create mode 100644 packages/frontend/src/components/coachmark/Coachmark.tsx
 create mode 100644 packages/frontend/src/components/coachmark/index.ts

diff --git a/packages/frontend/src/components/coachmark/Coachmark.tsx b/packages/frontend/src/components/coachmark/Coachmark.tsx
new file mode 100644
index 00000000..b54024fd
--- /dev/null
+++ b/packages/frontend/src/components/coachmark/Coachmark.tsx
@@ -0,0 +1,60 @@
+import ReactJoyride, { type Props as JoyrideProps } from "react-joyride";
+
+import color from "../../design-system/tokens/color";
+import { coachmarkZIndex } from "../../design-system/tokens/utils.css";
+import useMount from "../../hooks/useMount";
+
+import { CoachTooltip } from "./CoachTooltip";
+
+export type CoachmarkProps = Partial<
+  Omit<
+    JoyrideProps,
+    | "locale"
+    | "styles"
+    | "tooltipComponent"
+    | "spotlightPadding"
+    | "floaterProps"
+  >
+>;
+
+export function Coachmark(props: CoachmarkProps) {
+  const { mounted } = useMount();
+
+  if (!mounted) return null;
+  return (
+    <ReactJoyride
+      {...props}
+      locale={LOCALE}
+      styles={STYLES}
+      tooltipComponent={CoachTooltip}
+      spotlightPadding={0}
+      floaterProps={FLOATER_PROPS}
+    />
+  );
+}
+
+type RequiredJoyrideProps = Required<JoyrideProps>;
+
+const LOCALE: RequiredJoyrideProps["locale"] = {
+  back: "이전",
+  next: "다음",
+  close: "닫기",
+  last: "종료",
+  skip: "건너뛰기",
+};
+
+const STYLES: RequiredJoyrideProps["styles"] = {
+  options: {
+    overlayColor: "rgba(0, 0, 0, 0.2)",
+    primaryColor: color.$semantic.primary,
+    zIndex: coachmarkZIndex,
+  },
+};
+
+const FLOATER_PROPS: RequiredJoyrideProps["floaterProps"] = {
+  offset: 25,
+  styles: {
+    arrow: { length: 15, spread: 18 },
+    floater: { filter: "none" },
+  },
+};
diff --git a/packages/frontend/src/components/coachmark/index.ts b/packages/frontend/src/components/coachmark/index.ts
new file mode 100644
index 00000000..ec1ddc43
--- /dev/null
+++ b/packages/frontend/src/components/coachmark/index.ts
@@ -0,0 +1 @@
+export { type CoachmarkProps, Coachmark } from "./Coachmark";