From 6dcbd6d05e9756495dce666900b1afd39f1129a7 Mon Sep 17 00:00:00 2001
From: jongse7 <mmssjj72@naver.com>
Date: Wed, 16 Oct 2024 13:50:31 +0900
Subject: [PATCH] =?UTF-8?q?fix:=EB=B0=B0=ED=8F=AC=20=EC=8B=9C=20edit?=
 =?UTF-8?q?=EC=B0=BD=20inpu=EB=91=90=EB=B2=88=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../container/noticeEditTitleSection.tsx      | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx b/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx
index 04567d45..eeb9dab2 100644
--- a/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx
+++ b/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx
@@ -13,15 +13,27 @@ export function NoticeEditTitleSection({
 }: NoticeEditTitleSectionProps) {
   const [title, setTitle] = useState<string>(initialTitle);
   const [isUrgent, setIsUrgent] = useState<boolean>(false);
+  const [isComposing, setIsComposing] = useState<boolean>(false);
 
   const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newTitle = event.target.value;
-    if (newTitle.length <= 50) {
-      setTitle(newTitle);
-      onTitleChange(newTitle);
+    if (!isComposing) {
+      const newTitle = event.target.value;
+      if (newTitle.length <= 50) {
+        setTitle(newTitle);
+        onTitleChange(newTitle);
+      }
     }
   };
 
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = (event: React.CompositionEvent<HTMLInputElement>) => {
+    setIsComposing(false);
+    handleTitleChange(event as unknown as React.ChangeEvent<HTMLInputElement>); // composition 끝난 후 onChange 처리
+  };
+
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.checked;
     setIsUrgent(newValue);
@@ -38,6 +50,8 @@ export function NoticeEditTitleSection({
           id="title"
           value={title}
           onChange={handleTitleChange}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
           className="w-full flex-1 rounded-xs border-[0.125rem] border-gray-300 px-3 py-[0.4rem] shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm"
           placeholder="제목을 입력하세요"
         />