feature: 모달 오픈시 첫번째 input에 focus

src/app/(protected)/_components/modal/word/ModalBody.tsx

@@ -12,7 +12,7 @@ type ModalBodyProps = {
       | "usage"
       | "memo"
       | "bookmarked",
-    value: string
+    value: string,
   ) => void;
 
   form: WordCreateInput | WordUpdateInput;
@@ -36,6 +36,7 @@ export default function ModalBody({
     <>
       <ModalField label="단어*">
         <Input
+          autoFocus
           name={form.expression || ""}
           value={form.expression || ""}
           onChange={(e) => updateField("expression", e.target.value)}

src/components/input/Input.tsx

@@ -12,6 +12,7 @@ type InputProps = {
   placeholder?: string;
   className?: string;
   errors?: string;
+  autoFocus?: boolean;
 };
 
 export default function Input({
@@ -25,11 +26,13 @@ export default function Input({
   onClick,
   errors,
   className,
+  autoFocus,
 }: InputProps) {
   return (
     <div className="w-full">
       <div className="relative">
         <input
+          autoFocus={autoFocus}
           id={id}
           name={name}
           type={type}
@@ -41,15 +44,15 @@ export default function Input({
             errors
               ? "border border-red-500 focus:ring-2 focus:ring-red-500"
               : "border border-gray-100 focus:ring-2 shadow-md focus:ring-gray-900",
-            className
+            className,
           )}
         />
         <button
           onClick={onClick}
           type="button"
           className={clsx(
             "absolute right-5 top-1/2 -translate-y-1/2",
-            errors ? "text-red-500" : "text-black"
+            errors ? "text-red-500" : "text-black",
           )}
         >
           {children}