From bc68819347bf7ee918e2e420b0c57b3165d5eb6a Mon Sep 17 00:00:00 2001
From: chichoc <61962901+chichoc@users.noreply.github.com>
Date: Fri, 6 Dec 2024 07:50:25 +0900
Subject: [PATCH] =?UTF-8?q?[#240]=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EA=B0=80=EC=9D=B4=EB=93=9C=20=ED=95=98=EC=9D=B4=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=ED=8C=85=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EA=B0=80=20=EB=AA=A8=EB=8B=AC=EC=97=90=EC=84=9C=EB=8F=84=20?=
 =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=8C=85=20(#244)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* 🙀 chore: TODO 삭제

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

* 💄 design: 도움말 버튼 hover시 색상 좀 더 진하게 적용
---
 .../CodeExportButton/CodeExportButton.tsx     |  2 +-
 .../src/pages/Workspacepage/WorkspacePage.tsx | 25 +++++++++++++------
 .../src/shared/store/useCoachMarkStore.ts     |  2 +-
 apps/client/src/shared/utils/tags.ts          |  2 --
 .../widgets/workspace/CoachMark/CoachMark.tsx | 21 +++-------------
 .../WorkspacePageHeader.tsx                   |  3 +--
 6 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx b/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx
index 88c337c..f407d8e 100644
--- a/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx
+++ b/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 ? (
diff --git a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
index 485ec6a..a58093b 100644
--- a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
+++ b/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>
diff --git a/apps/client/src/shared/store/useCoachMarkStore.ts b/apps/client/src/shared/store/useCoachMarkStore.ts
index 65d00e2..dbc2aaf 100644
--- a/apps/client/src/shared/store/useCoachMarkStore.ts
+++ b/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 }),
 }));
diff --git a/apps/client/src/shared/utils/tags.ts b/apps/client/src/shared/utils/tags.ts
index da2daed..d03f25e 100644
--- a/apps/client/src/shared/utils/tags.ts
+++ b/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',
diff --git a/apps/client/src/widgets/workspace/CoachMark/CoachMark.tsx b/apps/client/src/widgets/workspace/CoachMark/CoachMark.tsx
index 224626a..510d5a3 100644
--- a/apps/client/src/widgets/workspace/CoachMark/CoachMark.tsx
+++ b/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}
diff --git a/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx b/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx
index da1e057..56e070b 100644
--- a/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx
+++ b/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>