Fix(client): 대댓글 작성시 backdrop 클릭 시 작성 모드 해제되도록 수정

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<HTMLInputElement>(null);
+  const wrapperRef = useRef<HTMLElement>(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 (
-    <section className={styles.commentWrapper}>
+    <section ref={wrapperRef} className={styles.commentWrapper}>
       {displayImage && (
         <div className={styles.imagePreviewWrapper}>
           <img

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,17 @@ const DetailSection = ({ postId }: DetailSectionProps) => {
 
   const [imageFile, setImageFile] = useState<File | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const prevModeRef = useRef(mode);
 
   const queryClient = useQueryClient();
 
   useEffect(() => {
+    const isStillCreatingMode =
+      prevModeRef.current.action === 'create' && mode.action === 'create';
+    const typeChanged = prevModeRef.current.type !== mode.type;
+
+    prevModeRef.current = mode;
+
     if (mode.type === 'comment' && mode.action === 'edit') {
       const remaining = (mode.images ?? []).filter(
         (img) => !(mode.deleteImageIds ?? []).includes(img.imageId ?? -1),
@@ -65,6 +72,10 @@ const DetailSection = ({ postId }: DetailSectionProps) => {
       return;
     }
 
+    if (isStillCreatingMode && typeChanged) {
+      return;
+    }
+
     setImagePreview(null);
     setImageFile(null);
   }, [mode]);

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,19 @@ export const useControlledInputBox = (mode: InputBoxMode) => {
   const [content, setContent] = useState(
     'initialContent' in mode ? mode.initialContent : '',
   );
+  const prevModeRef = useRef(mode);
 
   useEffect(() => {
+    const isStillCreatingMode =
+      prevModeRef.current.action === 'create' && mode.action === 'create';
+    const typeChanged = prevModeRef.current.type !== mode.type;
+
+    prevModeRef.current = mode;
+
+    if (isStillCreatingMode && typeChanged) {
+      return;
+    }
+
     setContent('initialContent' in mode ? mode.initialContent : '');
   }, [mode]);