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 = "검색하기" /> 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 = { + [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 = { , "readOnly" | "disabled">, Pick, "feedback" | "rootClassName" | "error" | "readOnly" | "disabled">, Pick { - formSubmitHandler?: (e: React.FormEvent) => void; + rounded: RoundedType; + formSubmitHandler?: (e: React.FormEvent) => void; } + +export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];