From baccb1d1c4796237c3ff82600b0097694a663a53 Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Mon, 22 Apr 2024 02:59:11 +0900
Subject: [PATCH] =?UTF-8?q?InputSearch=20rounded=20prop=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Input/InputSearch/InputSearch.stories.tsx     |  1 +
 .../Input/InputSearch/constants/index.ts          | 15 +++++++++++++++
 src/core/components/Input/InputSearch/index.tsx   |  7 ++++++-
 .../components/Input/InputSearch/types/index.ts   |  6 +++++-
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/core/components/Input/InputSearch/constants/index.ts

diff --git a/src/core/components/Input/InputSearch/InputSearch.stories.tsx b/src/core/components/Input/InputSearch/InputSearch.stories.tsx
index f87a0d4..719e23c 100644
--- a/src/core/components/Input/InputSearch/InputSearch.stories.tsx
+++ b/src/core/components/Input/InputSearch/InputSearch.stories.tsx
@@ -37,6 +37,7 @@ export const Default = () => {
         formSubmitHandler = {onSubmitHandler}
         onChange = {onChangeHandler}
         value = {currentValue}
+        rounded = "rounded-8"
         placeholder = "검색하기"
       />
     </div>
diff --git a/src/core/components/Input/InputSearch/constants/index.ts b/src/core/components/Input/InputSearch/constants/index.ts
new file mode 100644
index 0000000..8c92358
--- /dev/null
+++ b/src/core/components/Input/InputSearch/constants/index.ts
@@ -0,0 +1,15 @@
+import { RoundedType } from "../types";
+
+export const ROUNDED = {
+  FULL: "rounded-full",
+  ROUNDED_12: "rounded-12",
+  ROUNDED_8: "rounded-8",
+  ROUNDED_4: "rounded-4",
+} as const;
+
+export const INPUT_SEARCH_ROUNDED: Record<RoundedType, string> = {
+  [ROUNDED["FULL"]]: "rounded-full",
+  [ROUNDED["ROUNDED_12"]]: "rounded-xl",
+  [ROUNDED["ROUNDED_8"]]: "rounded-lg",
+  [ROUNDED["ROUNDED_4"]]: "rounded",
+};
diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
index b96eef4..95273da 100644
--- a/src/core/components/Input/InputSearch/index.tsx
+++ b/src/core/components/Input/InputSearch/index.tsx
@@ -4,6 +4,7 @@ import { forwardRef, useId, useRef } from "react";
 import { useInput } from "@/core/components/Input/hooks/useInput";
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import InputBase from "../InputBase";
+import { INPUT_SEARCH_ROUNDED } from "./constants";
 import { InputSearchProps } from "./types";
 
 const InputSearch = forwardRef((
@@ -11,6 +12,7 @@ const InputSearch = forwardRef((
       formSubmitHandler,
       regCallback,
       feedback,
+      rounded,
       ...props
     }: InputSearchProps,
     ref: React.ComponentPropsWithRef<"input">["ref"],
@@ -41,7 +43,10 @@ const InputSearch = forwardRef((
       readOnly = {readOnly}
       disabled = {disabled}
       rootClassName = {rootClassName}
-      inputRootClassName = {"flex items-center px-6 py-2 text-body-02-medium bg-white rounded-full overflow-hidden border border-gray-02"}
+      inputRootClassName = {clsx(
+        "flex items-center py-2 text-body-02-medium bg-white overflow-hidden border border-gray-02",
+        INPUT_SEARCH_ROUNDED[rounded],
+      )}
       onSubmit = {onSubmitHandler}
       inputComponent = {
         <input
diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts
index ccb325c..b017668 100644
--- a/src/core/components/Input/InputSearch/types/index.ts
+++ b/src/core/components/Input/InputSearch/types/index.ts
@@ -1,9 +1,13 @@
 import { InputBaseProps } from "../../InputBase/types";
 import { UseInputProps } from "../../hooks/useInput";
+import { ROUNDED } from "../constants";
 
 export interface InputSearchProps
     extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
             Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "error" | "readOnly" | "disabled">,
             Pick<UseInputProps, "regCallback"> {
-            formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
+                rounded: RoundedType;
+                formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
            }
+
+export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];