[#26] 워크스페이스 페이지의 불필요한 리렌더링 개선

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

@@ -1,6 +1,5 @@
 import { TCssCategory } from '@/shared/types';
 import { useCssPropsStore } from '@/shared/store';
-
 type CssCategoryButtonProps = {
   cssCategory: TCssCategory;
 };
@@ -11,7 +10,8 @@ type CssCategoryButtonProps = {
  * CSS 카테고리를 선택할 수 있는 버튼 컴포넌트
  */
 export const CssCategoryButton = ({ cssCategory }: CssCategoryButtonProps) => {
-  const { selectedCssCategory, setSelectedCssCategory } = useCssPropsStore();
+  const selectedCssCategory = useCssPropsStore((state) => state.selectedCssCategory);
+  const setSelectedCssCategory = useCssPropsStore((state) => state.setSelectedCssCategory);
 
   return (
     <button

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

@@ -1,9 +1,9 @@
-import { Select, SelectSize } from '@/shared/ui';
-import { useCssOptionItem, useCssOptions, useCssTooltip } from '@/shared/hooks';
+import { SelectSize, TCssCategoryItem } from '@/shared/types';
+import { useCssOptionItem, useCssOptions } from '@/shared/hooks';
 
 import { CssTooltip } from '@/entities';
 import Question from '@/shared/assets/question.svg?react';
-import { TCssCategoryItem } from '@/shared/types';
+import { Select } from '@/shared/ui';
 import { useCssPropsStore } from '@/shared/store';
 
 type CssOptionItemProps = {
@@ -17,7 +17,8 @@ type CssOptionItemProps = {
  * CSS 속성을 선택할 수 있는 컴포넌트
  */
 export const CssOptionItem = ({ cssItem, index }: CssOptionItemProps) => {
-  const { totalCssPropertyObj, currentCssClassName } = useCssPropsStore();
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
   const { handleCssPropertyCheckboxChange, handleCssOptionChange, handleColorChange } =
     useCssOptions();
 
@@ -31,10 +32,10 @@ export const CssOptionItem = ({ cssItem, index }: CssOptionItemProps) => {
     handleEnterKey,
     handleMouseLeave,
     handleChangeInputValue,
+    offsetX,
+    offsetY,
   } = useCssOptionItem(cssItem);
 
-  const { leftX, topY } = useCssTooltip();
-
   return (
     <div
       className={`flex h-[66px] w-full flex-shrink-0 items-center justify-between rounded-lg px-4 ${
@@ -61,12 +62,9 @@ export const CssOptionItem = ({ cssItem, index }: CssOptionItemProps) => {
             onMouseEnter={(e) => handleMouseEnter(e, index)}
             onMouseLeave={handleMouseLeave}
           />
-          <CssTooltip
-            description={cssItem.description}
-            isOpen={isHover && indexOfHover === index}
-            leftX={leftX}
-            topY={topY}
-          />
+          {isHover && indexOfHover === index && (
+            <CssTooltip description={cssItem.description} leftX={offsetX} topY={offsetY} />
+          )}
         </div>
       </div>
       {cssItem.type === 'select' && (

apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx

@@ -25,28 +25,23 @@ type Story = StoryObj<typeof CssTooltip>;
 export const Default: Story = {
   args: {
     description: 'css 툴팁입니다.',
-    isOpen: false,
     leftX: 0,
     topY: 0,
   },
   render: (args) => {
-    const [isOpen, setIsOpen] = useState(args.isOpen);
     const [leftX, setLeftX] = useState(0);
     const [topY, setTopY] = useState(0);
 
     const handleMouseEnter = (e: React.MouseEvent) => {
-      setIsOpen(true);
       setLeftX(e.currentTarget.getBoundingClientRect().x + 8);
       setTopY(e.currentTarget.getBoundingClientRect().y + 8);
     };
 
-    const handleMouseLeave = () => {
-      setIsOpen(false);
-    };
+    const handleMouseLeave = () => {};
     return (
       <div>
         <QuestionIcon onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />
-        <CssTooltip description={args.description} leftX={leftX} topY={topY} isOpen={isOpen} />
+        <CssTooltip description={args.description} leftX={leftX} topY={topY} />
       </div>
     );
   },
@@ -55,28 +50,23 @@ export const Default: Story = {
 export const ScreenOverflow: Story = {
   args: {
     description: 'css 툴팁입니다.',
-    isOpen: false,
     leftX: 0,
     topY: 0,
   },
   render: (args) => {
-    const [isOpen, setIsOpen] = useState(args.isOpen);
     const [leftX, setLeftX] = useState(0);
     const [topY, setTopY] = useState(0);
 
     const handleMouseEnter = (e: React.MouseEvent) => {
-      setIsOpen(true);
       setLeftX(e.currentTarget.getBoundingClientRect().x + 8);
       setTopY(-e.currentTarget.getBoundingClientRect().y + 40);
     };
 
-    const handleMouseLeave = () => {
-      setIsOpen(false);
-    };
+    const handleMouseLeave = () => {};
     return (
       <div>
         <QuestionIcon onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />
-        <CssTooltip description={args.description} leftX={leftX} topY={topY} isOpen={isOpen} />
+        <CssTooltip description={args.description} leftX={leftX} topY={topY} />
       </div>
     );
   },

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

@@ -1,20 +1,22 @@
 import { createPortal } from 'react-dom';
+import { useCssTooltip } from '@/shared/hooks';
 
 type CssTooltipProps = {
   description: string;
-  isOpen: boolean;
   leftX: number;
   topY: number;
 };
 
-export const CssTooltip = ({ description, isOpen, leftX, topY }: CssTooltipProps) => {
-  if (!isOpen) {
-    return null;
-  }
+export const CssTooltip = ({ description, leftX, topY }: CssTooltipProps) => {
+  const { tooltipX, tooltipY, tooltipRef } = useCssTooltip(leftX, topY);
   return createPortal(
     <div
-      className={`text-gray-white text-tooltip-sm fixed left-0 top-0 z-[9999] rounded-3xl ${topY >= 0 ? 'rounded-tl-none' : 'rounded-bl-none'} bg-green-500 px-3 py-2`}
-      style={{ left: `${leftX + 18}px`, top: topY >= 0 ? `${topY + 8}px` : `${-topY}px` }}
+      className={`text-gray-white text-tooltip-sm fixed z-[9999] rounded-3xl ${tooltipY >= 0 ? 'rounded-tl-none' : 'rounded-bl-none'} bg-green-500 px-3 py-2`}
+      style={{
+        left: `${tooltipX + 18}px`,
+        top: tooltipY >= 0 ? `${tooltipY + 8}px` : `${-tooltipY}px`,
+      }}
+      ref={tooltipRef}
     >
       <p>{description}</p>
     </div>,

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

@@ -1,9 +1,9 @@
 import * as Blockly from 'blockly/core';
 
+import { capturePreview, trackEvent } from '@/shared/utils';
 import { useCssPropsStore, useResetCssStore, useWorkspaceStore } from '@/shared/store';
 
 import { Spinner } from '@/shared/ui';
-import { capturePreview, trackEvent } from '@/shared/utils';
 import { cssStyleToolboxConfig } from '@/shared/blockly';
 import toast from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
@@ -19,7 +19,7 @@ import { useState } from 'react';
 export const SaveButton = () => {
   const workspaceId = useParams().workspaceId as string;
   const { mutate: saveWorkspace, isPending } = useSaveWorkspace(workspaceId);
-  const { totalCssPropertyObj } = useCssPropsStore();
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
   const { workspace } = useWorkspaceStore();
   const { isResetCssChecked } = useResetCssStore();
   const [isCapture, setIsCapture] = useState<boolean>(false);

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

@@ -11,8 +11,8 @@ import { useParams } from 'react-router-dom';
  * 워크스페이스 페이지 컴포넌트
  */
 export const WorkspacePage = () => {
-  const { workspaceId } = useParams();
-  useGetWorkspace(workspaceId as string);
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  useGetWorkspace(workspaceId!);
   usePreventLeaveWorkspacePage();
   const { currentStep, isCoachMarkOpen, openCoachMark } = useCoachMarkStore();
   const toolboxDiv = document.querySelector('.blocklyToolboxDiv');

apps/client/src/shared/hooks/css/useCssClassList.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+import { TOption } from '@/shared/types';
+import { useClassBlockStore } from '@/shared/store';
+
+export const useCssClassList = () => {
+  const { classBlockList } = useClassBlockStore();
+  const [cssClassList, setCssClassList] = useState<string[]>([]);
+
+  useEffect(() => {
+    setCssClassList(classBlockList);
+  }, [classBlockList]);
+
+  const selectOptions: TOption[] = [
+    { value: '', label: '클래스를 선택해주세요' },
+    ...cssClassList.map((cssClass) => ({
+      value: cssClass,
+      label: cssClass,
+    })),
+  ];
+
+  return { selectOptions };
+};

apps/client/src/shared/hooks/css/useCssOptionItem.ts

@@ -1,13 +1,14 @@
-import { useCssPropsStore, useCssTooltipStore } from '@/shared/store';
 import { useEffect, useState } from 'react';
 
 import { TCssCategoryItem } from '@/shared/types';
 import { useCssOptions } from '@/shared/hooks';
+import { useCssPropsStore } from '@/shared/store';
 
 export const useCssOptionItem = (cssItem: TCssCategoryItem) => {
   const { handleCssOptionChange } = useCssOptions();
-  const { setOffsetX, setOffsetY } = useCssTooltipStore();
-  const { currentCssClassName, totalCssPropertyObj, selectedCssCategory } = useCssPropsStore();
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
+  const selectedCssCategory = useCssPropsStore((state) => state.selectedCssCategory);
 
   const [cssOptionValue, setCssOptionValue] = useState<string>('');
   const [isHover, setIsHover] = useState<boolean>(false);
@@ -18,6 +19,9 @@ export const useCssOptionItem = (cssItem: TCssCategoryItem) => {
     cssItem.type === 'select' && cssItem.option!.length > 0 ? cssItem.option![0] : ''
   );
 
+  const [offsetX, setOffsetX] = useState<number>(0);
+  const [offsetY, setOffsetY] = useState<number>(0);
+
   useEffect(() => {
     if (totalCssPropertyObj[currentCssClassName]) {
       setCssOptionValue(totalCssPropertyObj[currentCssClassName].cssOptionObj[cssItem.label] || '');
@@ -84,5 +88,7 @@ export const useCssOptionItem = (cssItem: TCssCategoryItem) => {
     handleMouseEnter,
     handleMouseLeave,
     handleChangeInputValue,
+    offsetX,
+    offsetY,
   };
 };

apps/client/src/shared/hooks/css/useCssOptions.ts

@@ -4,7 +4,10 @@ import { debounce } from '@/shared/utils';
 import { useCallback } from 'react';
 
 export const useCssOptions = () => {
-  const { setCheckedCssPropertyObj, setCssOptionObj, currentCssClassName } = useCssPropsStore();
+  const setCheckedCssPropertyObj = useCssPropsStore((state) => state.setCheckedCssPropertyObj);
+  const setCssOptionObj = useCssPropsStore((state) => state.setCssOptionObj);
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
+
   const { setIsCssChanged } = useWorkspaceChangeStatusStore();
   const handleCssPropertyCheckboxChange = (
     property: string,

apps/client/src/shared/hooks/css/useCssTooltip.ts

@@ -1,21 +1,27 @@
-import { useCssTooltipStore } from '@/shared/store';
-import { useEffect } from 'react';
-import { useWindowSize } from '@/shared/hooks';
+import { useLayoutEffect, useRef, useState } from 'react';
 
-export const useCssTooltip = () => {
-  const { leftX, topY, offsetX, offsetY, setLeftX, setTopY } = useCssTooltipStore();
+import { useWindowSize } from '@/shared/hooks';
 
-  const { screenWidth, screenHeight } = useWindowSize();
+export const useCssTooltip = (leftX: number, topY: number) => {
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const [tooltipHeight, setTooltipHeight] = useState<number>(0);
+  const { screenHeight } = useWindowSize();
 
-  useEffect(() => {
-    const tooltipHeight = 40;
-    setLeftX(offsetX);
-    if (offsetY + tooltipHeight > screenHeight) {
-      setTopY(-offsetY + tooltipHeight); // 높이를 벗어나는 것임
-    } else {
-      setTopY(offsetY);
+  useLayoutEffect(() => {
+    if (tooltipRef.current) {
+      setTooltipHeight(tooltipRef.current.getBoundingClientRect().height);
     }
-  }, [offsetX, offsetY, screenWidth, screenHeight]);
+    return () => setTooltipHeight(0);
+  }, [tooltipRef.current]);
+
+  let tooltipX = leftX;
+  let tooltipY = 0;
+
+  if (topY + tooltipHeight > screenHeight) {
+    tooltipY = -topY + tooltipHeight;
+  } else {
+    tooltipY = topY;
+  }
 
-  return { leftX, topY };
+  return { tooltipX, tooltipY, tooltipRef };
 };

apps/client/src/shared/hooks/index.ts

@@ -10,6 +10,7 @@ export { useDeleteImage } from './queries/useDeleteImage';
 export { useCssTooltip } from './css/useCssTooltip';
 export { useCssOptions } from './css/useCssOptions';
 export { useCssOptionItem } from './css/useCssOptionItem';
+export { useCssClassList } from './css/useCssClassList';
 
 export { workspaceKeys } from './query-key/workspaceKeys';
 

apps/client/src/shared/hooks/queries/useGetWorkspace.ts

@@ -17,13 +17,13 @@ import { workspaceKeys } from '@/shared/hooks';
 export const useGetWorkspace = (workspaceId: string) => {
   const workspaceApi = WorkspaceApi();
   const userId = getUserId() || createUserId();
-  const { initCssPropertyObj } = useCssPropsStore();
+  const initCssPropertyObj = useCssPropsStore((state) => state.initCssPropertyObj);
   const { initClassBlockList } = useClassBlockStore();
   const { setCanvasInfo, setName } = useWorkspaceStore();
   const { resetChangedStatusState } = useWorkspaceChangeStatusStore();
   const { setIsResetCssChecked } = useResetCssStore();
   const { setInitialImageMap, setInitialImageList } = useImageModalStore();
-  const { data, isPending, isError } = useSuspenseQuery({
+  const { data, isError } = useSuspenseQuery({
     queryKey: workspaceKeys.detail(workspaceId),
     queryFn: () => {
       resetChangedStatusState();
@@ -55,5 +55,4 @@ export const useGetWorkspace = (workspaceId: string) => {
     setInitialImageMap(data.workspaceDto.imageMap);
     setInitialImageList(data.workspaceDto.imageList);
   }, [isError, data]);
-  return { data, isPending, isError };
 };

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

@@ -1,7 +1,6 @@
 export { useLoadingStore } from './useLoadingStore';
 export { useModalStore } from './useModalStore';
 export { useCssPropsStore } from './useCssPropsStore';
-export { useCssTooltipStore } from './useCssTooptipStore';
 export { useClassBlockStore } from './useClassBlockStore';
 export { useWorkspaceChangeStatusStore } from './useWorkspaceChangeStatusStore';
 export { useBlocklyWorkspaceStore } from './useBlocklyWorkspaceStore';

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

@@ -1,6 +1,7 @@
+import { removeCssClassNamePrefix, trackEvent } from '../utils';
+
 import { TTotalCssPropertyObj } from '@/shared/types';
 import { create } from 'zustand';
-import { removeCssClassNamePrefix, trackEvent } from '../utils';
 
 type TcssProps = {
   currentCssClassName: string;

apps/client/src/shared/types/customSelectType.ts

@@ -0,0 +1,10 @@
+export enum SelectSize {
+  SMALL = 'SMALL',
+
+  MEDIUM = 'MEDIUM',
+}
+
+export type TOption = {
+  value: string;
+  label: string;
+};

apps/client/src/shared/types/index.ts

@@ -18,3 +18,5 @@ export type { TTabConfig, TTabsConfig, TTabToolboxConfig } from './tabType';
 export type { TBlock, TToolboxConfig } from './styleToolboxType';
 export type { TButtonContent } from './modalButtonType';
 export type { TImage } from './imageTagType';
+export type { TOption } from './customSelectType';
+export { SelectSize } from './customSelectType';