From 6dcbd6d05e9756495dce666900b1afd39f1129a7 Mon Sep 17 00:00:00 2001 From: jongse7 Date: Wed, 16 Oct 2024 13:50:31 +0900 Subject: [PATCH 1/3] =?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(initialTitle); const [isUrgent, setIsUrgent] = useState(false); + const [isComposing, setIsComposing] = useState(false); const handleTitleChange = (event: React.ChangeEvent) => { - 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) => { + setIsComposing(false); + handleTitleChange(event as unknown as React.ChangeEvent); // composition 끝난 후 onChange 처리 + }; + const handleCheckboxChange = (event: React.ChangeEvent) => { 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="제목을 입력하세요" /> From db0285b795dfcdc7a77cbf941af793fd6db5e745 Mon Sep 17 00:00:00 2001 From: jongse7 Date: Wed, 16 Oct 2024 13:56:36 +0900 Subject: [PATCH 2/3] =?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=20=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../container/auditEditTitleSection.tsx | 23 +++++++++++++++---- .../container/noticeEditTitleSection.tsx | 2 +- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx b/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx index 44d037f8..4bdb194c 100644 --- a/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx +++ b/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx @@ -19,17 +19,28 @@ export function AuditEditTitleSection({ }: AuditEditTitleSectionProps) { const [title, setTitle] = useState(initialTitle); const [category, setCategory] = useState(initialCategory); - + const [isComposing, setIsComposing] = useState(false); const truncatedTitle = useTruncateText(title, 50); const handleTitleChange = (event: React.ChangeEvent) => { - 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) => { + setIsComposing(false); + handleTitleChange(event as unknown as React.ChangeEvent); + }; + const handleCategoryChange = (value: string) => { setCategory(value); onCategoryChange(value); @@ -43,6 +54,8 @@ export function AuditEditTitleSection({ id="title" value={truncatedTitle} 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="제목을 입력하세요" /> diff --git a/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx b/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx index eeb9dab2..f19103c6 100644 --- a/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx +++ b/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx @@ -31,7 +31,7 @@ export function NoticeEditTitleSection({ const handleCompositionEnd = (event: React.CompositionEvent) => { setIsComposing(false); - handleTitleChange(event as unknown as React.ChangeEvent); // composition 끝난 후 onChange 처리 + handleTitleChange(event as unknown as React.ChangeEvent); }; const handleCheckboxChange = (event: React.ChangeEvent) => { From 5c3c19a05750058c6d420dc2210dfaf1debe35cb Mon Sep 17 00:00:00 2001 From: jongse7 Date: Wed, 16 Oct 2024 14:25:35 +0900 Subject: [PATCH 3/3] =?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=20=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../container/auditEditTitleSection.tsx | 26 ++++--------------- .../container/noticeEditTitleSection.tsx | 22 +++------------- 2 files changed, 9 insertions(+), 39 deletions(-) diff --git a/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx b/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx index 4bdb194c..d1da06ef 100644 --- a/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx +++ b/src/pages/audit/auditEdit/container/auditEditTitleSection.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import useTruncateText from '@/hooks/useTruncateText'; import { FilterDropDown } from '@/components/FilterDropDown/FilterDropDown'; interface AuditEditTitleSectionProps { @@ -19,28 +18,15 @@ export function AuditEditTitleSection({ }: AuditEditTitleSectionProps) { const [title, setTitle] = useState(initialTitle); const [category, setCategory] = useState(initialCategory); - const [isComposing, setIsComposing] = useState(false); - const truncatedTitle = useTruncateText(title, 50); const handleTitleChange = (event: React.ChangeEvent) => { - if (!isComposing) { - const newTitle = event.target.value; - if (newTitle.length <= 50) { - setTitle(newTitle); - onTitleChange(newTitle); - } + const newTitle = event.target.value; + if (newTitle.length <= 50) { + setTitle(newTitle); + onTitleChange(newTitle); } }; - const handleCompositionStart = () => { - setIsComposing(true); - }; - - const handleCompositionEnd = (event: React.CompositionEvent) => { - setIsComposing(false); - handleTitleChange(event as unknown as React.ChangeEvent); - }; - const handleCategoryChange = (value: string) => { setCategory(value); onCategoryChange(value); @@ -52,10 +38,8 @@ export function AuditEditTitleSection({ diff --git a/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx b/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx index f19103c6..04567d45 100644 --- a/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx +++ b/src/pages/notice/noticeEdit/container/noticeEditTitleSection.tsx @@ -13,27 +13,15 @@ export function NoticeEditTitleSection({ }: NoticeEditTitleSectionProps) { const [title, setTitle] = useState(initialTitle); const [isUrgent, setIsUrgent] = useState(false); - const [isComposing, setIsComposing] = useState(false); const handleTitleChange = (event: React.ChangeEvent) => { - if (!isComposing) { - const newTitle = event.target.value; - if (newTitle.length <= 50) { - setTitle(newTitle); - onTitleChange(newTitle); - } + const newTitle = event.target.value; + if (newTitle.length <= 50) { + setTitle(newTitle); + onTitleChange(newTitle); } }; - const handleCompositionStart = () => { - setIsComposing(true); - }; - - const handleCompositionEnd = (event: React.CompositionEvent) => { - setIsComposing(false); - handleTitleChange(event as unknown as React.ChangeEvent); - }; - const handleCheckboxChange = (event: React.ChangeEvent) => { const newValue = event.target.checked; setIsUrgent(newValue); @@ -50,8 +38,6 @@ 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="제목을 입력하세요" />