diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx b/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
index 7152f87..294743f 100644
--- a/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
+++ b/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
@@ -1,5 +1,6 @@
 import { ACTIONS, EVENTS } from "react-joyride";
 
+import { toClassSelector } from "../../../utils/cssSelector";
 import { Coachmark, type CoachmarkProps } from "../../coachmark";
 
 interface QuizCoachmarkProps {
@@ -60,7 +61,3 @@ const STEPS: CoachmarkProps["steps"] = [
     placement: "top",
   },
 ];
-
-function toClassSelector(className: string) {
-  return `.${className}`;
-}
diff --git a/packages/frontend/src/utils/cssSelector.ts b/packages/frontend/src/utils/cssSelector.ts
new file mode 100644
index 0000000..d74ee6f
--- /dev/null
+++ b/packages/frontend/src/utils/cssSelector.ts
@@ -0,0 +1,3 @@
+export function toClassSelector(className: string) {
+  return `.${className}`;
+}