From ab476686fe617771cb9be98d09e0db26d7931518 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Mon, 2 Dec 2024 17:53:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B4=88=EB=8C=80=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=9D=B4=20=EC=BC=9C=EC=A7=80=EB=A9=B4,=20input=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20focus=EC=9D=B4=EB=8F=99=ED=95=98=EA=B2=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#260
---
 client/src/components/modal/InviteModal.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/modal/InviteModal.tsx b/client/src/components/modal/InviteModal.tsx
index e6779dc..9a116c9 100644
--- a/client/src/components/modal/InviteModal.tsx
+++ b/client/src/components/modal/InviteModal.tsx
@@ -1,5 +1,5 @@
 // InviteModal.tsx
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { modalContentContainer, titleText, descriptionText, emailInput } from "./InviteModal.style";
 import { Modal } from "./modal";
 
@@ -11,6 +11,13 @@ interface InviteModalProps {
 
 export const InviteModal = ({ isOpen, onClose, onInvite }: InviteModalProps) => {
   const [email, setEmail] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
 
   const handleInvite = () => {
     onInvite(email);
@@ -30,6 +37,7 @@ export const InviteModal = ({ isOpen, onClose, onInvite }: InviteModalProps) =>
         <h2 className={titleText}>워크스페이스 초대</h2>
         <p className={descriptionText}>초대할 사용자의 이메일을 입력해주세요</p>
         <input
+          ref={inputRef}
           className={emailInput}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="이메일 주소 입력"