From 84bcf5c0f908c7096ae01dc78953014a69c207ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Sun, 17 Nov 2024 19:37:31 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[FE][Feat]=20#145=20:=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/FloatingButton/FloatingButton.tsx  | 56 ++++++--------
 frontend/src/hooks/useFloatingButton.ts       | 23 ++++++
 .../FloatingButton/Floatingbutton.stories.tsx | 73 +++++++++++++++++++
 3 files changed, 118 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/hooks/useFloatingButton.ts
 create mode 100644 frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx

diff --git a/frontend/src/component/common/FloatingButton/FloatingButton.tsx b/frontend/src/component/common/FloatingButton/FloatingButton.tsx
index a4fb5916..127cbd9f 100644
--- a/frontend/src/component/common/FloatingButton/FloatingButton.tsx
+++ b/frontend/src/component/common/FloatingButton/FloatingButton.tsx
@@ -1,8 +1,19 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React from 'react';
 import { ButtonState } from '../enums';
 import { IconType, ToolCategory } from '../types';
 
+interface IFloatingButtonProps {
+  /** 메뉴가 열려있는지 여부를 나타냅니다. */
+  isMenuOpen?: boolean;
+  /** 메뉴를 토글할 수 있는 함수입니다. */
+  toggleMenu?: () => void;
+  /** 선택된 도구의 버튼 상태를 의미합니다. */
+  toolType: ButtonState;
+  /** 도구를 선택할 수 있는 함수입니다. */
+  handleMenuClick?: (type: ButtonState) => void;
+}
+
 /**
  * FloatingButton 컴포넌트는 도구 선택 및 메뉴 토글 기능을 제공하는 플로팅 버튼을 렌더링합니다.
  * @remarks
@@ -12,40 +23,14 @@ import { IconType, ToolCategory } from '../types';
  *   <FloatingButton />
  * )
  */
-export const FloatingButton = () => {
-  const [toolType, setToolType] = useState<ButtonState>(ButtonState.CLOSE);
-  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
-
-  /**
-   * @remarks
-   * - 메뉴를 토글하는 함수입니다.
-   */
-  const toggleMenu = () => {
-    setIsMenuOpen(prev => !prev);
-    if (!isMenuOpen) {
-      setToolType(ButtonState.OPEN);
-    } else {
-      setToolType(ButtonState.CLOSE);
-    }
-  };
-
-  /**
-   * @remarks
-   * 툴을 선택하고 메뉴를 닫는 함수입니다.
-   * @param {ButtonState} type - 선택된 툴 타입
-   */
-  const handleMenuClick = (type: ButtonState) => {
-    setToolType(type);
-    setIsMenuOpen(!isMenuOpen);
-  };
-
+export const FloatingButton = (props: IFloatingButtonProps) => {
   return (
     <div
       className={classNames('absolute', 'bottom-5', 'right-10', 'flex', 'flex-col', 'items-center')}
     >
       <button
         type="button"
-        onClick={toggleMenu}
+        onClick={props.toggleMenu}
         className={classNames(
           'absolute',
           'bottom-0',
@@ -61,13 +46,13 @@ export const FloatingButton = () => {
           'z-10',
         )}
       >
-        {React.createElement(IconType[toolType], { className: 'w-6 h-6' })}
+        {React.createElement(IconType[props.toolType], { className: 'w-6 h-6' })}
       </button>
 
       {ToolCategory.map(({ type, description, icon }, index) => (
         <button
           type="button"
-          onClick={() => handleMenuClick(type)}
+          onClick={() => props.handleMenuClick?.(type)}
           key={type}
           className={classNames(
             'w-10',
@@ -83,14 +68,17 @@ export const FloatingButton = () => {
             'duration-300',
             'shadow-floatButton',
             {
-              'shadow-none': !isMenuOpen,
+              'shadow-none': !props.isMenuOpen,
             },
           )}
-          style={{ bottom: toolType === ButtonState.OPEN ? `${48 * index + 64}px` : '0px' }}
+          style={{
+            bottom: props.isMenuOpen ? `${48 * index + 64}px` : '0px',
+            transition: 'bottom 0.3s ease',
+          }}
         >
           <div className={classNames('flex', 'items-center')}>
             {React.createElement(icon, { className: 'w-5 h-5' })}
-            {isMenuOpen && (
+            {props.isMenuOpen && (
               <div
                 className={classNames(
                   'w-20',
diff --git a/frontend/src/hooks/useFloatingButton.ts b/frontend/src/hooks/useFloatingButton.ts
new file mode 100644
index 00000000..b7a77acd
--- /dev/null
+++ b/frontend/src/hooks/useFloatingButton.ts
@@ -0,0 +1,23 @@
+import { ButtonState } from '@/component/common/enums';
+import { useState } from 'react';
+
+export const useFloatingButton = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  const [toolType, setToolType] = useState<ButtonState>(ButtonState.CLOSE);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(prev => !prev);
+    if (!isMenuOpen) {
+      setToolType(ButtonState.OPEN);
+    } else {
+      setToolType(ButtonState.CLOSE);
+    }
+  };
+
+  const handleMenuClick = (type: ButtonState) => {
+    setToolType(type);
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return { isMenuOpen, toolType, toggleMenu, handleMenuClick };
+};
diff --git a/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx b/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
new file mode 100644
index 00000000..e75160b7
--- /dev/null
+++ b/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
@@ -0,0 +1,73 @@
+import { Meta, Story } from '@storybook/react';
+import { FloatingButton } from '@/component/common/FloatingButton/FloatingButton'; // 경로에 맞게 수정하세요.
+import { ButtonState } from '@/component/common/enums';
+
+export default {
+  title: 'Components/FloatingButton',
+  component: FloatingButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FloatingButton은 열기와 닫기 상태를 관리하는 버튼입니다. 상태에 따라 버튼의 텍스트가 변경됩니다.',
+      },
+    },
+  },
+} as Meta<typeof FloatingButton>;
+
+// 기본 템플릿
+const Template: Story<typeof FloatingButton> = args => <FloatingButton {...args} />;
+
+export const CloseState = Template.bind({});
+CloseState.argTypes = {
+  isMenuOpen: { table: { disable: true } }, // isMenuOpen을 테이블에서 제외
+  toolType: { table: { disable: true } }, // toolType을 테이블에서 제외
+};
+CloseState.args = {
+  isMenuOpen: false, // 닫힘 상태
+  toolType: ButtonState.CLOSE, // 닫기 상태
+};
+CloseState.parameters = {
+  docs: {
+    description: {
+      story:
+        '이 버튼은 닫힌 상태를 나타냅니다. 메뉴는 열려 있지 않으며, 버튼은 "열기"로 변경됩니다.',
+    },
+  },
+};
+
+export const OpenState = Template.bind({});
+OpenState.argTypes = {
+  isMenuOpen: { table: { disable: true } }, // isMenuOpen을 테이블에서 제외
+  toolType: { table: { disable: true } }, // toolType을 테이블에서 제외
+};
+OpenState.args = {
+  isMenuOpen: true, // 열림 상태
+  toolType: ButtonState.OPEN, // 열기 상태
+};
+OpenState.parameters = {
+  docs: {
+    description: {
+      story: '이 버튼은 열린 상태를 나타냅니다. 메뉴는 열려 있으며, 버튼은 "닫기"로 변경됩니다.',
+    },
+  },
+};
+
+// ToggleState에서는 control을 사용 가능하게 설정
+export const ToggleState = Template.bind({});
+ToggleState.argTypes = {
+  isMenuOpen: { control: 'boolean' }, // isMenuOpen을 control로 사용 가능하게 설정
+  toolType: { control: 'select', options: Object.values(ButtonState) }, // toolType을 select로 사용 가능하게 설정
+};
+ToggleState.args = {
+  isMenuOpen: false, // 초기 상태는 닫힘
+  toolType: ButtonState.CLOSE, // 닫기 상태
+};
+ToggleState.parameters = {
+  docs: {
+    description: {
+      story:
+        '이 버튼은 상태를 토글할 수 있는 버튼입니다. 클릭하면 메뉴가 열리고 닫히며 버튼 상태도 변경됩니다.',
+    },
+  },
+};

From fd0f98df3781a906f40494cad97d67ce013c9017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Mon, 18 Nov 2024 16:45:03 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[FE][Feat]=20#145=20:=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FloatingButton/Floatingbutton.stories.tsx | 60 ++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx b/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
index e75160b7..b710df7a 100644
--- a/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
+++ b/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
@@ -1,10 +1,12 @@
 import { Meta, Story } from '@storybook/react';
 import { FloatingButton } from '@/component/common/FloatingButton/FloatingButton'; // 경로에 맞게 수정하세요.
 import { ButtonState } from '@/component/common/enums';
+import { useFloatingButton } from '@/hooks/useFloatingButton';
 
 export default {
   title: 'Components/FloatingButton',
   component: FloatingButton,
+  tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
@@ -13,12 +15,58 @@ export default {
       },
     },
   },
+  argTypes: {
+    isMenuOpen: {
+      control: 'boolean',
+      description: '메뉴가 열려 있는지 여부를 나타냅니다.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    toggleMenu: {
+      action: 'toggleMenu',
+      description: '메뉴를 토글하는 함수입니다.',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+    toolType: {
+      control: 'select',
+      options: Object.values(ButtonState),
+      description: '도구 버튼의 상태를 나타냅니다.',
+      table: {
+        type: { summary: 'ButtonState' },
+        defaultValue: { summary: 'CLOSE' },
+      },
+    },
+    handleMenuClick: {
+      action: 'handleMenuClick',
+      description: '도구를 선택할 수 있는 함수입니다.',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+  },
 } as Meta<typeof FloatingButton>;
 
-// 기본 템플릿
-const Template: Story<typeof FloatingButton> = args => <FloatingButton {...args} />;
+const Template2: Story<typeof FloatingButton> = args => <FloatingButton {...args} />;
 
-export const CloseState = Template.bind({});
+const Template: Story = () => {
+  const { isMenuOpen, toolType, toggleMenu, handleMenuClick } = useFloatingButton();
+
+  return (
+    <div>
+      <FloatingButton
+        isMenuOpen={isMenuOpen}
+        toolType={toolType}
+        toggleMenu={toggleMenu}
+        handleMenuClick={handleMenuClick}
+      />
+    </div>
+  );
+};
+export const CloseState = Template2.bind({});
 CloseState.argTypes = {
   isMenuOpen: { table: { disable: true } }, // isMenuOpen을 테이블에서 제외
   toolType: { table: { disable: true } }, // toolType을 테이블에서 제외
@@ -36,7 +84,7 @@ CloseState.parameters = {
   },
 };
 
-export const OpenState = Template.bind({});
+export const OpenState = Template2.bind({});
 OpenState.argTypes = {
   isMenuOpen: { table: { disable: true } }, // isMenuOpen을 테이블에서 제외
   toolType: { table: { disable: true } }, // toolType을 테이블에서 제외
@@ -55,10 +103,6 @@ OpenState.parameters = {
 
 // ToggleState에서는 control을 사용 가능하게 설정
 export const ToggleState = Template.bind({});
-ToggleState.argTypes = {
-  isMenuOpen: { control: 'boolean' }, // isMenuOpen을 control로 사용 가능하게 설정
-  toolType: { control: 'select', options: Object.values(ButtonState) }, // toolType을 select로 사용 가능하게 설정
-};
 ToggleState.args = {
   isMenuOpen: false, // 초기 상태는 닫힘
   toolType: ButtonState.CLOSE, // 닫기 상태

From 00e69b20c93c2f6934b7a97198b915eab1a5bedd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Mon, 18 Nov 2024 16:48:17 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[FE][Rename]=20#145=20:=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EB=AA=85=20=EC=B9=B4=EB=A9=9C=EC=BC=80=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=A4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Main.tsx                                    | 2 +-
 frontend/src/stories/BottomSheet.stories.tsx                   | 2 +-
 frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
index 42bd85bd..6dd41081 100644
--- a/frontend/src/pages/Main.tsx
+++ b/frontend/src/pages/Main.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { getUserLocation } from '@/hooks/getUserLocation';
 import { Map } from '@/component/maps/Map';
-import { BottomSheet } from '@/component/BottomSheet/BottomSheet';
+import { BottomSheet } from '@/component/bottomSheet/BottomSheet';
 import { Content } from '@/component/content/Content';
 import { MdFormatListBulleted } from 'react-icons/md';
 
diff --git a/frontend/src/stories/BottomSheet.stories.tsx b/frontend/src/stories/BottomSheet.stories.tsx
index 59fa16e2..fbff686a 100644
--- a/frontend/src/stories/BottomSheet.stories.tsx
+++ b/frontend/src/stories/BottomSheet.stories.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Meta, Story } from '@storybook/react';
-import { BottomSheet } from '@/component/BottomSheet/BottomSheet';
+import { BottomSheet } from '@/component/bottomSheet/BottomSheet';
 import { Content } from '@/component/content/Content';
 
 export default {
diff --git a/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx b/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
index b710df7a..fb17e40e 100644
--- a/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
+++ b/frontend/src/stories/FloatingButton/Floatingbutton.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { FloatingButton } from '@/component/common/FloatingButton/FloatingButton'; // 경로에 맞게 수정하세요.
+import { FloatingButton } from '@/component/common/floatingButton/FloatingButton'; // 경로에 맞게 수정하세요.
 import { ButtonState } from '@/component/common/enums';
 import { useFloatingButton } from '@/hooks/useFloatingButton';