diff --git a/README.md b/README.md
index 49433bb3..996b615a 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@
   
 <p>  
   <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
-  <a href="https://github.com/boostcampwm-2024/web28-DDara/wiki">팀 위키</a> |
+  <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a>   |   
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
 <!--   <br />
diff --git a/docs/docusaurus/README.md b/docs/docusaurus/README.md
index 353673bd..ea5251a2 100644
--- a/docs/docusaurus/README.md
+++ b/docs/docusaurus/README.md
@@ -21,7 +21,7 @@
 
 <p>  
   <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
-  <a href="https://github.com/boostcampwm-2024/web28-DDara/wiki">팀 위키</a> |
+  <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a>   |   
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
 <!--   <br />
diff --git a/docs/docusaurus/package.json b/docs/docusaurus/package.json
index 9ebc7e6a..8ff7468c 100644
--- a/docs/docusaurus/package.json
+++ b/docs/docusaurus/package.json
@@ -27,7 +27,8 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-player": "^2.16.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.6.1",
diff --git a/docs/docusaurus/tsconfig.json b/docs/docusaurus/tsconfig.json
index 314eab8a..48d1f346 100644
--- a/docs/docusaurus/tsconfig.json
+++ b/docs/docusaurus/tsconfig.json
@@ -2,6 +2,12 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@site/*": ["src/*"],
+      "@theme/*": ["src/theme/*"],
+      "@component/*": ["src/components/*"],
+      "@markdown/*": ["src/components/markdown/*"],
+    }
   }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 458e9340..d78b7999 100644
--- 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>
-);
\ No newline at end of file
+);
diff --git a/frontend/src/component/common/FloatingButton/FloatingButton.tsx b/frontend/src/component/common/FloatingButton/FloatingButton.tsx
new file mode 100644
index 00000000..a4fb5916
--- /dev/null
+++ b/frontend/src/component/common/FloatingButton/FloatingButton.tsx
@@ -0,0 +1,118 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { ButtonState } from '../enums';
+import { IconType, ToolCategory } from '../types';
+
+/**
+ * FloatingButton 컴포넌트는 도구 선택 및 메뉴 토글 기능을 제공하는 플로팅 버튼을 렌더링합니다.
+ * @remarks
+ * 메뉴가 열리면 툴 선택과 설명 표시가 가능하며, 메뉴를 닫을 때 버튼 아이콘이 변경됩니다.
+ * @example
+ * return (
+ *   <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);
+  };
+
+  return (
+    <div
+      className={classNames('absolute', 'bottom-5', 'right-10', 'flex', 'flex-col', 'items-center')}
+    >
+      <button
+        type="button"
+        onClick={toggleMenu}
+        className={classNames(
+          'absolute',
+          'bottom-0',
+          'bg-blueGray-800',
+          'w-12',
+          'h-12',
+          'rounded-full',
+          'flex',
+          'justify-center',
+          'items-center',
+          'text-white',
+          'shadow-floatMenuButton',
+          'z-10',
+        )}
+      >
+        {React.createElement(IconType[toolType], { className: 'w-6 h-6' })}
+      </button>
+
+      {ToolCategory.map(({ type, description, icon }, index) => (
+        <button
+          type="button"
+          onClick={() => handleMenuClick(type)}
+          key={type}
+          className={classNames(
+            'w-10',
+            'h-10',
+            'bg-blueGray-200',
+            'text-white',
+            'rounded-full',
+            'flex',
+            'items-center',
+            'justify-center',
+            'absolute',
+            'transition-all',
+            'duration-300',
+            'shadow-floatButton',
+            {
+              'shadow-none': !isMenuOpen,
+            },
+          )}
+          style={{ bottom: toolType === ButtonState.OPEN ? `${48 * index + 64}px` : '0px' }}
+        >
+          <div className={classNames('flex', 'items-center')}>
+            {React.createElement(icon, { className: 'w-5 h-5' })}
+            {isMenuOpen && (
+              <div
+                className={classNames(
+                  'w-20',
+                  'h-8',
+                  'bg-blueGray-200',
+                  'absolute',
+                  'right-12',
+                  'text-white',
+                  'text-xs',
+                  'flex',
+                  'items-center',
+                  'justify-center',
+                  'rounded-md',
+                  'opacity-[0.5]',
+                )}
+              >
+                {description}
+              </div>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/frontend/src/component/common/enums.ts b/frontend/src/component/common/enums.ts
new file mode 100644
index 00000000..ea8edf75
--- /dev/null
+++ b/frontend/src/component/common/enums.ts
@@ -0,0 +1,13 @@
+/**
+ * @remarks
+ * ButtonState Enum은 버튼이 가질 수 있는 모든 종류를 정의합니다.
+ * @example
+ * const buttonState = ButtonState.OPEN;
+ */
+export enum ButtonState {
+  CLOSE = 'CLOSE', // 메뉴 닫기 버튼
+  OPEN = 'OPEN', // 메뉴 열기 버튼
+  START_MARKER = 'START_MARKER', // 출발지 설정 버튼
+  DESTINATION_MARKER = 'DESTINATION_MARKER', // 도착지 설정 버튼
+  LINE_DRAWING = 'LINE_DRAWING', // 경로 그리기 버튼
+}
diff --git a/frontend/src/component/common/types.ts b/frontend/src/component/common/types.ts
new file mode 100644
index 00000000..33627b47
--- /dev/null
+++ b/frontend/src/component/common/types.ts
@@ -0,0 +1,42 @@
+import { FaPaintBrush } from 'react-icons/fa';
+import { HiLocationMarker, HiOutlineDotsHorizontal, HiOutlineLocationMarker } from 'react-icons/hi';
+import { SlLayers } from 'react-icons/sl';
+import { ButtonState } from './enums';
+
+/**
+ * IconType 객체는 각 버튼 타입에 해당하는 아이콘 컴포넌트를 매핑합니다.
+ * @type {Record<ButtonState, React.ComponentType>}
+ */
+export const IconType = {
+  CLOSE: SlLayers, // 닫기 버튼 아이콘
+  OPEN: HiOutlineDotsHorizontal, // 열기 버튼 아이콘
+  START_MARKER: HiLocationMarker, // 출발지 설정 아이콘
+  DESTINATION_MARKER: HiOutlineLocationMarker, // 도착지 설정 아이콘
+  LINE_DRAWING: FaPaintBrush, // 경로 그리기 아이콘
+};
+/**
+ * @remarks
+ * ToolCategory 배열은 각 저작도구에 대한 정보를 담고 있습니다.
+ * 각 툴은 버튼 타입, 설명, 아이콘을 포함합니다.
+ * 이 배열은 버튼의 목록을 정의하고, 이후 툴을 확장할 때 유용합니다.
+ * 또한, OPEN과 CLOSE 등 저작 도구가 아닌 종류는 제외합니다.
+ * @example
+ * const tool = ToolCategory[0];
+ */
+export const ToolCategory = [
+  {
+    type: ButtonState.LINE_DRAWING, // 경로 그리기 툴
+    description: '경로 그리기', // 툴 설명
+    icon: IconType.LINE_DRAWING, // 툴 아이콘
+  },
+  {
+    type: ButtonState.START_MARKER, // 출발지 설정 툴
+    description: '출발지 설정', // 툴 설명
+    icon: IconType.START_MARKER, // 툴 아이콘
+  },
+  {
+    type: ButtonState.DESTINATION_MARKER, // 도착지 설정 툴
+    description: '도착지 설정', // 툴 설명
+    icon: IconType.DESTINATION_MARKER, // 툴 아이콘
+  },
+];
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 95613736..03a7c0aa 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -44,6 +44,8 @@ module.exports = {
         '6xl': '4rem',
       },
       boxShadow: {
+        floatButton: '0 5px 10px rgba(0,0,0,0.3)',
+        floatMenuButton: '0 4px 4px rgba(0,0,0,0.25)',
         float: '0 4px 20px rgba(0, 0, 0, 0.13)',
         basic: 'inset 0 0 3px rgba(0, 0, 0, 0.11)',
       },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b4d00a8..a16330d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -177,6 +177,9 @@ importers:
       react-dom:
         specifier: ^18.0.0
         version: 18.3.1(react@18.3.1)
+      react-player:
+        specifier: ^2.16.0
+        version: 2.16.0(react@18.3.1)
     devDependencies:
       '@docusaurus/module-type-aliases':
         specifier: 3.6.1
@@ -5027,6 +5030,9 @@ packages:
     resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
     engines: {node: '>=18.0.0'}
 
+  load-script@1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+
   loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -5255,6 +5261,9 @@ packages:
     resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
 
+  memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
   memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
 
@@ -6412,6 +6421,11 @@ packages:
       react-loadable: '*'
       webpack: '>=4.41.1 || 5.x'
 
+  react-player@2.16.0:
+    resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+
   react-router-config@5.1.1:
     resolution: {integrity: sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==}
     peerDependencies:
@@ -13905,6 +13919,8 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.0
 
+  load-script@1.0.0: {}
+
   loader-runner@4.3.0: {}
 
   loader-utils@2.0.4:
@@ -14240,6 +14256,8 @@ snapshots:
     dependencies:
       fs-monkey: 1.0.6
 
+  memoize-one@5.2.1: {}
+
   memoizerific@1.11.3:
     dependencies:
       map-or-similar: 1.5.0
@@ -15485,6 +15503,15 @@ snapshots:
       react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.3.1)'
       webpack: 5.96.1
 
+  react-player@2.16.0(react@18.3.1):
+    dependencies:
+      deepmerge: 4.3.1
+      load-script: 1.0.0
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-fast-compare: 3.2.2
+
   react-router-config@5.1.1(react-router@5.3.4(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.0