Skip to content

Commit

Permalink
feat: Coachmark 컴포넌트 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
YuHyun-P committed Feb 3, 2024
1 parent 2b1313c commit c41b6be
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 0 deletions.
60 changes: 60 additions & 0 deletions packages/frontend/src/components/coachmark/Coachmark.tsx
Original file line number Diff line number Diff line change
@@ -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" },
},
};
1 change: 1 addition & 0 deletions packages/frontend/src/components/coachmark/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { type CoachmarkProps, Coachmark } from "./Coachmark";

0 comments on commit c41b6be

Please sign in to comment.