From 97ef2023c51eccc3bef078ea0ecf379a18479646 Mon Sep 17 00:00:00 2001 From: jeonghoon11 Date: Sat, 20 Dec 2025 00:44:09 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EB=B0=95=EC=8A=A4=EC=97=90=20=EB=B0=B1=EB=93=9C?= =?UTF-8?q?=EB=A1=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment-input-box/comment-input-box.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx b/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx index 2d150dea..4d9998d5 100644 --- a/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx +++ b/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx @@ -6,6 +6,8 @@ import { Icon } from '@bds/ui/icons'; import { PLACEHOLDER } from '@widgets/community/constant/input-placeholder'; import { useChangeInputMode } from '@widgets/community/context/input-mode-context'; +import useClickOutside from '@shared/hooks/use-click-outside'; + import CommunityModal from '../community-modal/community-modal'; import * as styles from './comment-input-box.css'; @@ -34,9 +36,17 @@ const CommentInputBox = ({ onClearImage, }: CommentInputBoxProps) => { const fileInputRef = useRef(null); + const wrapperRef = useRef(null); const { mode, dispatch } = useChangeInputMode(); const { openModal, closeModal } = useModal(); + const replyCreateMode = mode.type === 'reply' && mode.action === 'create'; + useClickOutside( + wrapperRef, + () => dispatch({ type: 'RESET' }), + replyCreateMode, + ); + const modalType: 'create' | 'edit' = (mode.type === 'comment' || mode.type === 'reply') && mode.action === 'edit' ? 'edit' @@ -105,7 +115,7 @@ const CommentInputBox = ({ : previewUrl; return ( -
+
{displayImage && (
Date: Sat, 20 Dec 2025 00:44:35 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=ED=9B=84=20=EB=B0=B1=EB=93=9C=EB=A1=AD?= =?UTF-8?q?=EC=8B=9C=20=EB=8C=93=EA=B8=80,=20=EC=82=AC=EC=A7=84=20?= =?UTF-8?q?=EC=9C=A0=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/detail-section/detail-section.tsx | 15 ++++++++++++++- .../community/hooks/use-controll-input-box.ts | 15 ++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx index ed0071db..745712a5 100644 --- a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx +++ b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import CommentInputBox from '@widgets/community/components/comment-input-box/comment-input-box'; @@ -26,10 +26,14 @@ const DetailSection = ({ postId }: DetailSectionProps) => { const [imageFile, setImageFile] = useState(null); const [imagePreview, setImagePreview] = useState(null); + const prevModeRef = useRef(mode); const queryClient = useQueryClient(); useEffect(() => { + const prevMode = prevModeRef.current; + prevModeRef.current = mode; + if (mode.type === 'comment' && mode.action === 'edit') { const remaining = (mode.images ?? []).filter( (img) => !(mode.deleteImageIds ?? []).includes(img.imageId ?? -1), @@ -65,6 +69,15 @@ const DetailSection = ({ postId }: DetailSectionProps) => { return; } + if ( + prevMode.type === 'reply' && + prevMode.action === 'create' && + mode.type === 'comment' && + mode.action === 'create' + ) { + return; + } + setImagePreview(null); setImageFile(null); }, [mode]); diff --git a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts index 973324f8..707b0d89 100644 --- a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts +++ b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { InputBoxMode } from '@widgets/community/types/input-box-type'; @@ -8,8 +8,21 @@ export const useControlledInputBox = (mode: InputBoxMode) => { const [content, setContent] = useState( 'initialContent' in mode ? mode.initialContent : '', ); + const prevModeRef = useRef(mode); useEffect(() => { + const prevMode = prevModeRef.current; + prevModeRef.current = mode; + + if ( + prevMode.type === 'reply' && + prevMode.action === 'create' && + mode.type === 'comment' && + mode.action === 'create' + ) { + return; + } + setContent('initialContent' in mode ? mode.initialContent : ''); }, [mode]); From 38d96ec914a9b4c40497dab5518ce5b7c6f7af0a Mon Sep 17 00:00:00 2001 From: jeonghoon11 Date: Sat, 20 Dec 2025 00:58:08 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20inputBox=20=EA=B8=80=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EC=9C=A0=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/detail-section/detail-section.tsx | 11 +++++------ .../widgets/community/hooks/use-controll-input-box.ts | 11 +++++------ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx index 745712a5..3c9b195a 100644 --- a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx +++ b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx @@ -69,12 +69,11 @@ const DetailSection = ({ postId }: DetailSectionProps) => { return; } - if ( - prevMode.type === 'reply' && - prevMode.action === 'create' && - mode.type === 'comment' && - mode.action === 'create' - ) { + const isStillCreatingMode = + prevMode.action === 'create' && mode.action === 'create'; + const typeChanged = prevMode.type !== mode.type; + + if (isStillCreatingMode && typeChanged) { return; } diff --git a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts index 707b0d89..a47a56f1 100644 --- a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts +++ b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts @@ -14,12 +14,11 @@ export const useControlledInputBox = (mode: InputBoxMode) => { const prevMode = prevModeRef.current; prevModeRef.current = mode; - if ( - prevMode.type === 'reply' && - prevMode.action === 'create' && - mode.type === 'comment' && - mode.action === 'create' - ) { + const isStillCreatingMode = + prevMode.action === 'create' && mode.action === 'create'; + const typeChanged = prevMode.type !== mode.type; + + if (isStillCreatingMode && typeChanged) { return; } From 1c3aa06a10e0aca76294653d34c236a873b0aae8 Mon Sep 17 00:00:00 2001 From: jeonghoon11 Date: Sat, 20 Dec 2025 02:43:07 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20prevModeRef.current=20one-depth=20?= =?UTF-8?q?=EC=A4=84=EC=9D=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/detail-section/detail-section.tsx | 12 ++++++------ .../community/hooks/use-controll-input-box.ts | 9 ++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx index 3c9b195a..aa22e0c5 100644 --- a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx +++ b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx @@ -31,7 +31,11 @@ const DetailSection = ({ postId }: DetailSectionProps) => { const queryClient = useQueryClient(); useEffect(() => { - const prevMode = prevModeRef.current; + const isStillCreatingMode = + prevModeRef.current.action === 'create' && mode.action === 'create'; + const typeChanged = prevModeRef.current.type !== mode.type; + const shouldPreserveContent = isStillCreatingMode && typeChanged; + prevModeRef.current = mode; if (mode.type === 'comment' && mode.action === 'edit') { @@ -69,11 +73,7 @@ const DetailSection = ({ postId }: DetailSectionProps) => { return; } - const isStillCreatingMode = - prevMode.action === 'create' && mode.action === 'create'; - const typeChanged = prevMode.type !== mode.type; - - if (isStillCreatingMode && typeChanged) { + if (shouldPreserveContent) { return; } diff --git a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts index a47a56f1..8318b7f7 100644 --- a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts +++ b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts @@ -11,12 +11,11 @@ export const useControlledInputBox = (mode: InputBoxMode) => { const prevModeRef = useRef(mode); useEffect(() => { - const prevMode = prevModeRef.current; - prevModeRef.current = mode; - const isStillCreatingMode = - prevMode.action === 'create' && mode.action === 'create'; - const typeChanged = prevMode.type !== mode.type; + prevModeRef.current.action === 'create' && mode.action === 'create'; + const typeChanged = prevModeRef.current.type !== mode.type; + + prevModeRef.current = mode; if (isStillCreatingMode && typeChanged) { return; From d1f2627294965c002f0a26a7fc99d3af819988df Mon Sep 17 00:00:00 2001 From: jeonghoon11 Date: Sun, 21 Dec 2025 11:55:37 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20if=EB=AC=B8=20=EA=B0=84=EC=86=8C?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../community/components/detail-section/detail-section.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx index aa22e0c5..4c3c4f5e 100644 --- a/apps/client/src/widgets/community/components/detail-section/detail-section.tsx +++ b/apps/client/src/widgets/community/components/detail-section/detail-section.tsx @@ -34,7 +34,6 @@ const DetailSection = ({ postId }: DetailSectionProps) => { const isStillCreatingMode = prevModeRef.current.action === 'create' && mode.action === 'create'; const typeChanged = prevModeRef.current.type !== mode.type; - const shouldPreserveContent = isStillCreatingMode && typeChanged; prevModeRef.current = mode; @@ -73,7 +72,7 @@ const DetailSection = ({ postId }: DetailSectionProps) => { return; } - if (shouldPreserveContent) { + if (isStillCreatingMode && typeChanged) { return; }