[#240] 사용자 가이드 하이라이팅 컴포넌트가 모달에서도 하이라이팅 (#244)

* 🐛 fix: 사용자 가이드 도중에 닫는 경우 상태 초기화

* 🐛 fix: 툴박스 관련 로직 코치마크로 이동

* 🙀 chore: TODO 삭제

* 💄 design: 코드 내보내기 버튼 배경색 추가

* 💄 design: 도움말 버튼 hover시 색상 좀 더 진하게 적용

apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx

@@ -22,7 +22,7 @@ export const CodeExportButton = () => {
   return (
     <button
       onClick={handleClick}
-      className="text-bold-rg rounded-full border border-gray-100 px-4 py-2 text-gray-400 transition-colors ease-in-out hover:border-gray-300 hover:bg-gray-50 hover:text-gray-300"
+      className="text-bold-rg rounded-full border border-gray-100 bg-white px-4 py-2 text-gray-400 transition-colors ease-in-out hover:border-gray-300 hover:bg-gray-50 hover:text-gray-300"
       disabled={isLoading}
     >
       {isLoading ? (

apps/client/src/pages/Workspacepage/WorkspacePage.tsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet-async';
 import { Loading } from '@/shared/ui';
 import { NotFound } from '@/pages/NotFound/NotFound';
 import { useParams } from 'react-router-dom';
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect, useEffect } from 'react';
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
 
 /**
@@ -16,22 +16,31 @@ export const WorkspacePage = () => {
   const { workspaceId } = useParams();
   const { isPending, isError } = useGetWorkspace(workspaceId as string);
   usePreventLeaveWorkspacePage();
-  const { isCoachMarkOpen, openCoachMark, closeCoachMark } = useCoachMarkStore();
-
-  if (isError) {
-    return <NotFound />;
-  }
+  const { currentStep, isCoachMarkOpen, openCoachMark } = useCoachMarkStore();
+  const toolboxDiv = document.querySelector('.blocklyToolboxDiv');
 
   useLayoutEffect(() => {
     const isCoachMarkDismissed = localStorage.getItem('isCoachMarkDismissed');
 
     if (!isCoachMarkDismissed) {
       openCoachMark();
-    } else {
-      closeCoachMark();
     }
   }, []);
 
+  useEffect(() => {
+    if (!toolboxDiv) return;
+
+    if (currentStep <= 1) {
+      toolboxDiv.classList.add('coachMarkHighlight');
+    } else {
+      toolboxDiv.classList.remove('coachMarkHighlight');
+    }
+  }, [currentStep, toolboxDiv]);
+
+  if (isError) {
+    return <NotFound />;
+  }
+
   return (
     <>
       <Helmet>

apps/client/src/shared/store/useCoachMarkStore.ts

@@ -12,6 +12,6 @@ export const useCoachMarkStore = create<TCoachMarkStore>()((set) => ({
   isCoachMarkOpen: true,
   currentStep: 0,
   openCoachMark: () => set({ isCoachMarkOpen: true, currentStep: 0 }),
-  closeCoachMark: () => set({ isCoachMarkOpen: false }),
+  closeCoachMark: () => set({ isCoachMarkOpen: false, currentStep: 5 }),
   setCurrentStep: (step) => set({ currentStep: step }),
 }));

apps/client/src/shared/utils/tags.ts

@@ -1,5 +1,3 @@
-// TODO: 위치 논의 필요 (shared or core)
-
 export const container = ['div', 'span', 'header', 'section', 'nav', 'main', 'article', 'footer'];
 export const text = [
   'p',

apps/client/src/widgets/workspace/CoachMark/CoachMark.tsx

@@ -1,16 +1,13 @@
-import { useEffect } from 'react';
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
 import { CircleButton } from '@/shared/ui';
+import { coachMarkContent } from '@/shared/utils';
+import { useEffect } from 'react';
 import * as Blockly from 'blockly/core';
 import TabbedToolbox from '@/core/tabbedToolbox';
-import { coachMarkContent } from '@/shared/utils';
 
 export const CoachMark = () => {
   const { currentStep, setCurrentStep, closeCoachMark } = useCoachMarkStore();
   const stepsLength = coachMarkContent.length;
-  const toolboxDiv = document.querySelector('.blocklyToolboxDiv');
-  // const blockCanvas = document.querySelector('.blocklyBlockCanvas');
-  // TODO: 사용자가이드 - 블록 하이라이팅
 
   const nextStep = () => {
     if (currentStep < stepsLength - 1) {
@@ -36,7 +33,6 @@ export const CoachMark = () => {
     }
 
     const toolbox = workspace.getToolbox() as TabbedToolbox;
-
     if (!toolbox) return;
 
     switch (currentStep) {
@@ -49,17 +45,7 @@ export const CoachMark = () => {
       case 2:
         toolbox.clickTab('html');
     }
-
-    if (toolboxDiv) {
-      if (currentStep <= 1) {
-        toolboxDiv.classList.add('coachMarkHighlight');
-        // blockCanvas.classList.add('coachMarkHighlight');
-      } else {
-        toolboxDiv.classList.remove('coachMarkHighlight');
-        // blockCanvas.classList.remove('coachMarkHighlight');
-      }
-    }
-  }, [currentStep, toolboxDiv]);
+  }, [currentStep]);
 
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-70">
@@ -83,7 +69,6 @@ export const CoachMark = () => {
               그만 보기
             </CircleButton>
 
-            {/* TODO: 이전 버튼 - 기능 구현 후 삭제 */}
             <CircleButton
               className="text-bold-sm h-8 w-16"
               onClick={prevStep}

apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx

@@ -20,12 +20,11 @@ export const WorkspacePageHeader = () => {
       </div>
       <div className="flex gap-11">
         <button
-          className="text-medium-rg hover flex items-center gap-1 text-gray-300"
+          className="text-medium-rg hover flex items-center gap-1 text-gray-300 hover:text-gray-500"
           onClick={openCoachMark}
           aria-label="도움말 버튼"
         >
           도움말 <Question />
-          {/* TODO: hover시 효과 */}
         </button>
         <WorkspaceHeaderButtons />
       </div>