diff --git a/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx b/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
index 2a94421..f0ec73e 100644
--- a/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
+++ b/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
diff --git a/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx b/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx
index 6c3af78..e514517 100644
--- a/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx
+++ b/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' && (
diff --git a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx b/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx
index 10fcd9b..e8e8518 100644
--- a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx
+++ b/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>
     );
   },
diff --git a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx b/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx
index 133f656..208e480 100644
--- a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx
+++ b/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>,
diff --git a/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx b/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
index 3a8dda9..9b617a8 100644
--- a/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
+++ b/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);
diff --git a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
index 4078b58..a12e4f5 100644
--- a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
+++ b/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');
diff --git a/apps/client/src/shared/hooks/css/useCssClassList.ts b/apps/client/src/shared/hooks/css/useCssClassList.ts
new file mode 100644
index 0000000..ab1baec
--- /dev/null
+++ b/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 };
+};
diff --git a/apps/client/src/shared/hooks/css/useCssOptionItem.ts b/apps/client/src/shared/hooks/css/useCssOptionItem.ts
index b211e2c..431fa38 100644
--- a/apps/client/src/shared/hooks/css/useCssOptionItem.ts
+++ b/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,
   };
 };
diff --git a/apps/client/src/shared/hooks/css/useCssOptions.ts b/apps/client/src/shared/hooks/css/useCssOptions.ts
index 3f80fcd..dfd31ee 100644
--- a/apps/client/src/shared/hooks/css/useCssOptions.ts
+++ b/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,
diff --git a/apps/client/src/shared/hooks/css/useCssTooltip.ts b/apps/client/src/shared/hooks/css/useCssTooltip.ts
index 3646e7e..f39235c 100644
--- a/apps/client/src/shared/hooks/css/useCssTooltip.ts
+++ b/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 };
 };
diff --git a/apps/client/src/shared/hooks/index.ts b/apps/client/src/shared/hooks/index.ts
index adaa1f7..4ec1df7 100644
--- a/apps/client/src/shared/hooks/index.ts
+++ b/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';
 
diff --git a/apps/client/src/shared/hooks/queries/useGetWorkspace.ts b/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
index f238d33..5ed6c9e 100644
--- a/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
+++ b/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 };
 };
diff --git a/apps/client/src/shared/store/index.ts b/apps/client/src/shared/store/index.ts
index d80a039..a9c3283 100644
--- a/apps/client/src/shared/store/index.ts
+++ b/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';
diff --git a/apps/client/src/shared/store/useCssPropsStore.ts b/apps/client/src/shared/store/useCssPropsStore.ts
index 4c1b667..b7cbce7 100644
--- a/apps/client/src/shared/store/useCssPropsStore.ts
+++ b/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;
diff --git a/apps/client/src/shared/store/useCssTooptipStore.ts b/apps/client/src/shared/store/useCssTooptipStore.ts
deleted file mode 100644
index 257cf98..0000000
--- a/apps/client/src/shared/store/useCssTooptipStore.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { create } from 'zustand';
-
-type TCssTooltip = {
-  offsetX: number;
-  offsetY: number;
-  leftX: number;
-  topY: number;
-
-  setOffsetX: (offsetX: number) => void;
-  setOffsetY: (offsetY: number) => void;
-  setLeftX: (leftX: number) => void;
-  setTopY: (topY: number) => void;
-};
-
-export const useCssTooltipStore = create<TCssTooltip>((set) => ({
-  offsetX: -1,
-  offsetY: -1,
-  leftX: 0,
-  topY: 0,
-  setOffsetX: (offsetX) => set({ offsetX }),
-  setOffsetY: (offsetY) => set({ offsetY }),
-  setLeftX: (leftX) => set({ leftX }),
-  setTopY: (topY) => set({ topY }),
-}));
diff --git a/apps/client/src/shared/types/customSelectType.ts b/apps/client/src/shared/types/customSelectType.ts
new file mode 100644
index 0000000..0e51260
--- /dev/null
+++ b/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;
+};
diff --git a/apps/client/src/shared/types/index.ts b/apps/client/src/shared/types/index.ts
index ad5afbc..a0d5a3e 100644
--- a/apps/client/src/shared/types/index.ts
+++ b/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';
diff --git a/apps/client/src/shared/ui/index.ts b/apps/client/src/shared/ui/index.ts
index 92d3cc6..03b9b6b 100644
--- a/apps/client/src/shared/ui/index.ts
+++ b/apps/client/src/shared/ui/index.ts
@@ -14,5 +14,4 @@ export { DelayedFallback } from './loading/DelayedFallback';
 export { SkeletonWorkspace } from './skeleton/SkeletonWorkspace';
 export { SkeletonWorkspaceList } from './skeleton/SkeletonWorkspaceList';
 
-export { Select, SelectSize } from './select/Select';
-export type { TOption } from './select/Select';
+export { Select } from './select/Select';
diff --git a/apps/client/src/shared/ui/select/Select.tsx b/apps/client/src/shared/ui/select/Select.tsx
index 35f48a0..76fcd91 100644
--- a/apps/client/src/shared/ui/select/Select.tsx
+++ b/apps/client/src/shared/ui/select/Select.tsx
@@ -1,20 +1,10 @@
+import { SelectSize, TOption } from '@/shared/types';
 import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useWindowSize } from '@/shared/hooks';
+
 import ArrowDown from '@/shared/assets/arrow_down.svg?react';
 import ArrowUp from '@/shared/assets/arrow_up.svg?react';
-
-export enum SelectSize {
-  // eslint-disable-next-line no-unused-vars
-  SMALL = 'SMALL',
-  // eslint-disable-next-line no-unused-vars
-  MEDIUM = 'MEDIUM',
-}
-
-export type TOption = {
-  value: string;
-  label: string;
-};
+import { createPortal } from 'react-dom';
+import { useWindowSize } from '@/shared/hooks';
 
 interface SelectProps {
   id?: string;
diff --git a/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx b/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
index d030836..eb28933 100644
--- a/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
+++ b/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
@@ -17,6 +17,7 @@ import {
   removeBlockIdFromCode,
   tabToolboxConfig,
 } from '@/shared/blockly';
+import { removeCssClassNamePrefix, trackEvent } from '@/shared/utils';
 import {
   useClassBlockStore,
   useCssPropsStore,
@@ -31,7 +32,6 @@ import FixedFlyout from '@/core/fixedFlyout';
 import TabbedToolbox from '@/core/tabbedToolbox';
 import { customTooltip } from '@/core/customTooltip';
 import { registerCustomComponents } from '@/core/register';
-import { removeCssClassNamePrefix, trackEvent } from '@/shared/utils';
 
 for (const blockType in Blockly.Blocks) {
   if (Object.prototype.hasOwnProperty.call(Blockly.Blocks, blockType)) {
@@ -68,10 +68,10 @@ Blockly.WorkspaceSvg.prototype.addTrashcan = function () {
 export const WorkspaceContent = () => {
   const [htmlCode, setHtmlCode] = useState<string>('');
   const [cssCode, setCssCode] = useState<string>('');
-  const { totalCssPropertyObj } = useCssPropsStore();
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
+  const setCurrentCssClassName = useCssPropsStore((state) => state.setCurrentCssClassName);
   const { workspace, setWorkspace, canvasInfo } = useWorkspaceStore();
   const { setIsBlockChanged } = useWorkspaceChangeStatusStore();
-  const { setCurrentCssClassName } = useCssPropsStore();
   const { findClassBlock } = useClassBlockStore();
   const [selectedBlockStartLine, setSelectedBlockStartLine] = useState<number>(0);
   const [selectedBlockLength, setSelectedBlockLength] = useState<number>(0);
diff --git a/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx b/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
index f0faf47..2e170fa 100644
--- a/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
+++ b/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
@@ -8,7 +8,7 @@ import { useCssPropsStore } from '@/shared/store';
  * CSS 속성을 설정할 수 있는 컴포넌트의 목록을 보여주는 컴포넌트
  */
 export const CssOptionItemList = () => {
-  const { selectedCssCategory } = useCssPropsStore();
+  const selectedCssCategory = useCssPropsStore((state) => state.selectedCssCategory);
 
   return (
     <article className="flex h-full w-full flex-col gap-4 overflow-y-auto p-3">
diff --git a/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx b/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx
index 21a5826..6b29b2d 100644
--- a/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx
+++ b/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx
@@ -1,7 +1,8 @@
-import { Select, TOption } from '@/shared/ui';
 import { addPrefixToCssClassName, removeCssClassNamePrefix } from '@/shared/utils';
-import { useClassBlockStore, useCssPropsStore } from '@/shared/store';
-import { useEffect, useState } from 'react';
+
+import { Select } from '@/shared/ui';
+import { useCssClassList } from '@/shared/hooks';
+import { useCssPropsStore } from '@/shared/store';
 
 /**
  *
@@ -9,22 +10,9 @@ import { useEffect, useState } from 'react';
  * CSS 클래스를 선택할 수 있는 헤더 컴포넌트
  */
 export const CssPropsSelectBoxHeader = () => {
-  const { currentCssClassName, setCurrentCssClassName } = useCssPropsStore();
-  const { classBlockList } = useClassBlockStore();
-  const [cssClassList, setCssClassList] = useState<string[]>([]);
-
-  useEffect(() => {
-    setCssClassList(classBlockList);
-  }, [classBlockList]);
-
-  const selectOptions: TOption[] = [
-    { value: '', label: '클래스를 선택해주세요' },
-    ...cssClassList.map((cssClass) => ({
-      value: cssClass,
-      label: cssClass,
-    })),
-  ];
-
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
+  const setCurrentCssClassName = useCssPropsStore((state) => state.setCurrentCssClassName);
+  const { selectOptions } = useCssClassList();
   return (
     <header className="py-border flex h-12 items-center justify-between border-b-yellow-500 bg-yellow-200 px-4">
       <p className="text-semibold-md text-gray-black truncate">CSS 클래스 속성 편집</p>