refactor: input 컴포넌트 variant 스타일 추가

Author: sikkzz

src/components/ui/Input/Input.module.scss

@@ -5,14 +5,29 @@
   height: 3rem;
   border-radius: 0.875rem;
   box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.04);
-  background-color: var(--color-white);
   padding: 0.75rem 0.875rem;
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   gap: 0.625rem;
   z-index: 1;
 
+  &.style-primary {
+    background-color: var(--color-white);
+
+    & > input {
+      width: calc(100% - 2.25rem);
+    }
+  }
+
+  &.style-secondary {
+    background-color: var(--color-gray100);
+
+    & > input {
+      width: 100%;
+    }
+  }
+
   &.Focused {
     border-color: var(--color-purple);
   }
@@ -21,7 +36,6 @@
     @include bodyMd;
     color: var(--color-text-primary);
     line-height: 1.5rem;
-    width: calc(100% - 2.25rem);
 
     &::placeholder {
       color: var(--color-text-tertiary);

src/components/ui/Input/Input.tsx

@@ -5,25 +5,31 @@ import classNames from "classnames";
 import styles from "@/components/ui/Input/Input.module.scss";
 import type { InputProps } from "@/components/ui/Input/Input.types";
 
-const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  const [isFocused, setIsFocused] = useState(false);
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, variant = "primary", ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
 
-  const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
 
-  return (
-    <div className={classNames(styles.InputWrapper, { [styles.Focused]: isFocused })}>
-      <input
-        type={type}
-        ref={ref}
-        className={classNames(styles.Input, className)}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        {...props}
-      />
-      <button>수정</button>
-    </div>
-  );
-});
+    return (
+      <div
+        className={classNames(styles.InputWrapper, styles[`style-${variant}`], {
+          [styles.Focused]: isFocused,
+        })}
+      >
+        <input
+          type={type}
+          ref={ref}
+          className={classNames(styles.Input, className)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...props}
+        />
+        {variant === "primary" && <button>수정</button>}
+      </div>
+    );
+  },
+);
 
 export default Input;