feat: JCL-76 react-hook-form에서 쓸 수 있는 Selectbox

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": {

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>
+      </>
+    );
+  },
+};

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}
+      />
+    );
+  },
+);

src/components/molecules/Table/HoverTableCell.tsx

@@ -1,12 +1,18 @@
-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";
 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,
-        })
+        }),
       );
   };
 

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,
-};