[FE][Fix] : ButtonState로 구체화

boostcampwm-2024 · Nov 13, 2024 · b667d1a · b667d1a
1 parent 4a0192d
commit b667d1a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -23,4 +23,4 @@ export const App = () => (
     <Route path="/add-channel/:user/draw" element={<DrawRoute />} />
     <Route path="/channel/:channelId/*" element={<ChannelRoutes />} />
   </Routes>
-);
+);
diff --git a/frontend/src/component/common/FloatingButton/FloatingButton.tsx b/frontend/src/component/common/FloatingButton/FloatingButton.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { ButtonType } from '../enums';
+import { ButtonState } from '../enums';
 import { IconType, ToolCategory } from '../types';
 
 /**
@@ -13,7 +13,7 @@ import { IconType, ToolCategory } from '../types';
  * )
  */
 export const FloatingButton = () => {
-  const [toolType, setToolType] = useState<ButtonType>(ButtonType.CLOSE);
+  const [toolType, setToolType] = useState<ButtonState>(ButtonState.CLOSE);
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
   /**
@@ -23,18 +23,18 @@ export const FloatingButton = () => {
   const toggleMenu = () => {
     setIsMenuOpen(prev => !prev);
     if (!isMenuOpen) {
-      setToolType(ButtonType.OPEN);
+      setToolType(ButtonState.OPEN);
     } else {
-      setToolType(ButtonType.CLOSE);
+      setToolType(ButtonState.CLOSE);
     }
   };
 
   /**
    * @remarks
    * 툴을 선택하고 메뉴를 닫는 함수입니다.
-   * @param {ButtonType} type - 선택된 툴 타입
+   * @param {ButtonState} type - 선택된 툴 타입
    */
-  const handleMenuClick = (type: ButtonType) => {
+  const handleMenuClick = (type: ButtonState) => {
     setToolType(type);
     setIsMenuOpen(!isMenuOpen);
   };
@@ -86,7 +86,7 @@ export const FloatingButton = () => {
               'shadow-none': !isMenuOpen,
             },
           )}
-          style={{ bottom: toolType === ButtonType.OPEN ? `${48 * index + 64}px` : '0px' }}
+          style={{ bottom: toolType === ButtonState.OPEN ? `${48 * index + 64}px` : '0px' }}
         >
           <div className={classNames('flex', 'items-center')}>
             {React.createElement(icon, { className: 'w-5 h-5' })}

diff --git a/frontend/src/component/common/enums.ts b/frontend/src/component/common/enums.ts
@@ -1,10 +1,10 @@
 /**
  * @remarks
- * ButtonType Enum은 버튼이 가질 수 있는 모든 종류를 정의합니다.
+ * ButtonState Enum은 버튼이 가질 수 있는 모든 종류를 정의합니다.
  * @example
- * const buttonType = ButtonType.OPEN;
+ * const buttonState = ButtonState.OPEN;
  */
-export enum ButtonType {
+export enum ButtonState {
   CLOSE = 'CLOSE', // 메뉴 닫기 버튼
   OPEN = 'OPEN', // 메뉴 열기 버튼
   START_MARKER = 'START_MARKER', // 출발지 설정 버튼

diff --git a/frontend/src/component/common/types.ts b/frontend/src/component/common/types.ts
@@ -1,11 +1,11 @@
 import { FaPaintBrush } from 'react-icons/fa';
 import { HiLocationMarker, HiOutlineDotsHorizontal, HiOutlineLocationMarker } from 'react-icons/hi';
 import { SlLayers } from 'react-icons/sl';
-import { ButtonType } from './enums';
+import { ButtonState } from './enums';
 
 /**
  * IconType 객체는 각 버튼 타입에 해당하는 아이콘 컴포넌트를 매핑합니다.
- * @type {Record<ButtonType, React.ComponentType>}
+ * @type {Record<ButtonState, React.ComponentType>}
  */
 export const IconType = {
   CLOSE: SlLayers, // 닫기 버튼 아이콘
@@ -25,17 +25,17 @@ export const IconType = {
  */
 export const ToolCategory = [
   {
-    type: ButtonType.LINE_DRAWING, // 경로 그리기 툴
+    type: ButtonState.LINE_DRAWING, // 경로 그리기 툴
     description: '경로 그리기', // 툴 설명
     icon: IconType.LINE_DRAWING, // 툴 아이콘
   },
   {
-    type: ButtonType.START_MARKER, // 출발지 설정 툴
+    type: ButtonState.START_MARKER, // 출발지 설정 툴
     description: '출발지 설정', // 툴 설명
     icon: IconType.START_MARKER, // 툴 아이콘
   },
   {
-    type: ButtonType.DESTINATION_MARKER, // 도착지 설정 툴
+    type: ButtonState.DESTINATION_MARKER, // 도착지 설정 툴
     description: '도착지 설정', // 툴 설명
     icon: IconType.DESTINATION_MARKER, // 툴 아이콘
   },