diff --git a/package.json b/package.json
index 609f2cc..4c141ba 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,9 @@
     "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
+    "react-hook-form": "^7.54.2",
     "react-node-to-string": "^0.1.2",
+    "react-select": "^5.10.0",
     "zustand": "^4.4.3"
   },
   "peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9a0812..2358ef0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,9 +41,15 @@ dependencies:
   react-feather:
     specifier: ^2.0.10
     version: 2.0.10(react@18.2.0)
+  react-hook-form:
+    specifier: ^7.54.2
+    version: 7.54.2(react@18.2.0)
   react-node-to-string:
     specifier: ^0.1.2
     version: 0.1.2(react@18.2.0)
+  react-select:
+    specifier: ^5.10.0
+    version: 5.10.0(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
   zustand:
     specifier: ^4.4.3
     version: 4.4.7(@types/react@18.2.45)(react@18.2.0)
@@ -2085,14 +2091,12 @@ packages:
     resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
     dependencies:
       '@floating-ui/utils': 0.1.6
-    dev: true
 
   /@floating-ui/dom@1.5.3:
     resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
     dependencies:
       '@floating-ui/core': 1.5.2
       '@floating-ui/utils': 0.1.6
-    dev: true
 
   /@floating-ui/react-dom@2.0.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==}
@@ -2107,7 +2111,6 @@ packages:
 
   /@floating-ui/utils@0.1.6:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
-    dev: true
 
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
@@ -9058,6 +9061,10 @@ packages:
       mimic-fn: 3.1.0
     dev: false
 
+  /memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: false
+
   /memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
     dependencies:
@@ -10310,6 +10317,15 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-hook-form@7.54.2(react@18.2.0):
+    resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -10377,6 +10393,27 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.45)(react@18.2.0)
     dev: true
 
+  /react-select@5.10.0(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k96gw+i6N3ExgDwPIg0lUPmexl1ygPe6u5BdQFNBhkpbwroIgCNXdubtIzHfThYXYYTubwOBafoMnn7ruEP1xA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      '@babel/runtime': 7.26.7
+      '@emotion/cache': 11.14.0
+      '@emotion/react': 11.14.0(@types/react@18.2.45)(react@18.2.0)
+      '@floating-ui/dom': 1.5.3
+      '@types/react-transition-group': 4.4.12(@types/react@18.2.45)
+      memoize-one: 6.0.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
+      use-isomorphic-layout-effect: 1.2.0(@types/react@18.2.45)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-style-singleton@2.2.1(@types/react@18.2.45)(react@18.2.0):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -11782,6 +11819,19 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /use-isomorphic-layout-effect@1.2.0(@types/react@18.2.45)(react@18.2.0):
+    resolution: {integrity: sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.45
+      react: 18.2.0
+    dev: false
+
   /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==}
     peerDependencies:
diff --git a/src/components/atoms/NewSelect/index.stories.tsx b/src/components/atoms/NewSelect/index.stories.tsx
new file mode 100644
index 0000000..862bcbf
--- /dev/null
+++ b/src/components/atoms/NewSelect/index.stories.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { NewSelect } from "@/components/atoms/NewSelect";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof NewSelect> = {
+  title: "molecules/NewSelect",
+  component: NewSelect,
+  argTypes: {},
+  decorators: [(Story) => <Story />],
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof NewSelect>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <>
+        <div
+          style={{
+            height: "500px",
+          }}
+        >
+          <NewSelect
+            options={[
+              { value: "chocolate", label: "Chocolate" },
+              { value: "strawberry", label: "Strawberry" },
+              { value: "vanilla", label: "Vanilla" },
+            ]}
+          />
+        </div>
+      </>
+    );
+  },
+};
diff --git a/src/components/atoms/NewSelect/index.tsx b/src/components/atoms/NewSelect/index.tsx
new file mode 100644
index 0000000..9a5654c
--- /dev/null
+++ b/src/components/atoms/NewSelect/index.tsx
@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import Select, { Props } from "react-select";
+import makeAnimated from "react-select/animated";
+
+export type NewSelectProps = Props & {
+  isAnimation?: boolean;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const NewSelect = forwardRef<any, NewSelectProps>(
+  ({ isAnimation = true, ...props }, ref) => {
+    const animatedComponents = makeAnimated();
+
+    return (
+      <Select
+        ref={ref}
+        components={isAnimation ? animatedComponents : undefined}
+        {...props}
+      />
+    );
+  },
+);
diff --git a/src/components/molecules/Table/HoverTableCell.tsx b/src/components/molecules/Table/HoverTableCell.tsx
index 6582a2a..8ce6161 100644
--- a/src/components/molecules/Table/HoverTableCell.tsx
+++ b/src/components/molecules/Table/HoverTableCell.tsx
@@ -1,4 +1,10 @@
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
+import {
+  CSSProperties,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import styles from "./HoverTableCell.module.scss";
 import { useToast } from "@/index";
 import nodeToString from "react-node-to-string";
@@ -6,7 +12,7 @@ import { Copy } from "react-feather";
 import { CopyMessageType } from "@/components/molecules/Table/TableCell";
 
 export interface HoverTableCellProps extends PropsWithChildren {
-  maxWidth?: number;
+  maxWidth?: CSSProperties["maxWidth"];
   copyMessage?: CopyMessageType;
 }
 
@@ -31,7 +37,7 @@ export const HoverTableCell = ({
 
   const handleCopy = async (
     text: string,
-    toastMessage?: { success: string; fail?: string }
+    toastMessage?: { success: string; fail?: string },
   ) => {
     await navigator.clipboard
       .writeText(text)
@@ -47,7 +53,7 @@ export const HoverTableCell = ({
           type: "fail",
           children: toastMessage?.fail || "복사에 실패했습니다.",
           holdTime: 3000,
-        })
+        }),
       );
   };
 
diff --git a/src/components/molecules/Table/TableCell.tsx b/src/components/molecules/Table/TableCell.tsx
index a9843b7..162fc31 100644
--- a/src/components/molecules/Table/TableCell.tsx
+++ b/src/components/molecules/Table/TableCell.tsx
@@ -27,11 +27,7 @@ export const TableCell = ({
   const classes = `${className} ${maxWidth ? "max-w-" + maxWidth : ""} ${
     hoveredColumn === columnIndex ? styles.hovered : ""
   }`;
-  console.log(
-    COLUMN_INDEX.CAPYABLE,
-    columnIndex,
-    COLUMN_INDEX.CAPYABLE === columnIndex
-  );
+
   return (
     <td className={`${cleanClassName(classes)}`}>
       {maxWidth || copyMessage ? (
@@ -49,8 +45,3 @@ export const TableCell = ({
     </td>
   );
 };
-const COLUMN_INDEX = {
-  CAPYABLE: 2,
-  LONG_TEXT: 6,
-  LONG_TEXT_COPYABLE: 7,
-};