team-bofit · minjeoong · Jan 24, 2026 · Oct 25, 2025 · Oct 25, 2025 · Oct 25, 2025
@@ -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,24 @@ 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';
+
+  const handleFocus = () => {
+    if (mode.type === 'reset') {
+      dispatch({ type: 'COMMENT_CREATE' });
+    }
+  };
+
+  useClickOutside(
+    wrapperRef,
+    () => dispatch({ type: 'RESET' }),
+    replyCreateMode,
+  );
+
   const modalType: 'create' | 'edit' =
     (mode.type === 'comment' || mode.type === 'reply') && mode.action === 'edit'
       ? 'edit'
@@ -105,7 +122,7 @@ const CommentInputBox = ({
     : previewUrl;
 
   return (
-    <section className={styles.commentWrapper}>
+    <section ref={wrapperRef} className={styles.commentWrapper}>
       {displayImage && (
         <div className={styles.imagePreviewWrapper}>
           <img
@@ -127,10 +144,11 @@ const CommentInputBox = ({
       <div className={styles.inputWrapper}>
         <Input
           key={focusKey}
-          autoFocus
+          autoFocus={mode.type === 'comment' || mode.type === 'reply'}
           value={value}
           onChange={onChange}
           onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
           bgColor="white"
           placeholder={PLACEHOLDER.COMMENT}
           errorState={errorState}

@@ -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<File | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const prevModeRef = useRef(mode);
 
   const queryClient = useQueryClient();
 
   useEffect(() => {
+    const prev = 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;
     }
 
+    const shouldPreserveImage =
+      (prev.type === 'reset' && mode.action === 'create') ||
+      (prev.action === 'create' && mode.type === 'reset') ||
+      (prev.action === 'create' && mode.action === 'create');
+
+    if (shouldPreserveImage) {
+      return;
+    }
+
     setImagePreview(null);
     setImageFile(null);
   }, [mode]);
@@ -325,7 +338,6 @@ const DetailSection = ({ postId }: DetailSectionProps) => {
     <>
       <FeedContent postId={postId} />
       <CommentInputBox
-        key={focusKey}
         value={content}
         onChange={handleChange}
         errorState={isErrorState}

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
 import { Chip, TextButton } from '@bds/ui';
@@ -34,7 +34,7 @@ const FeedList = () => {
   }, true);
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useInfiniteQuery({
+    useSuspenseInfiniteQuery({
       ...COMMUNITY_QUERY_OPTIONS.POSTS(sort.value, category),
     });
 

@@ -63,6 +63,12 @@ export const DropDownContent = style({
   zIndex: themeVars.zIndex.content,
 });
 
+export const DropDownItem = style({
+  padding: '0.6rem 0',
+  ...themeVars.fontStyles.title_sb_16,
+  color: themeVars.color.gray800,
+});
+
 export const isRotate = recipe({
   base: {
     transform: 'rotate(0deg)',

@@ -37,7 +37,9 @@ const FilterDropDown = ({
       {open && (
         <div className={styles.DropDownContent}>
           {Children.map(children, (child, idx) => (
-            <div key={idx}>{child}</div>
+            <div key={idx} className={styles.DropDownItem}>
+              {child}
+            </div>
           ))}
         </div>
       )}

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
 import { Carousel, Indicator, Title } from '@bds/ui';
@@ -17,7 +17,7 @@ const TOTAL_POPULAR_FEED = 3;
 const LivePopularFeed = () => {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(0);
-  const { data: popularFeedData } = useQuery({
+  const { data: popularFeedData } = useSuspenseQuery({
     ...COMMUNITY_QUERY_OPTIONS.POPULAR_FEED(TOTAL_POPULAR_FEED),
   });
   return (

@@ -78,7 +78,7 @@ const Search = () => {
     <section className={styles.searchAllContainer}>
       <Input
         value={inputValue}
-        placeholder="보험 추천을 입력해주세요"
+        placeholder={'"보험추천"을 입력해보세요'}
         onChange={handleChangeSearch}
         onKeyDown={handleKeyDown}
         bgColor="background"

@@ -35,6 +35,7 @@ export const leftContainer = style({
 export const userInfo = style({
   display: 'flex',
   gap: '1.2rem',
+  alignItems: 'center',
 });
 
 export const nickName = style({

@@ -80,7 +80,7 @@ const UserCommentReply = ({
     <div className={styles.container({ isEditingReply })}>
       <div className={styles.userInfoContainer}>
         <div className={styles.leftContainer}>
-          <Icon name="recomment_line" width="2rem" height="2rem" />
+          <Icon name="recomment_line" width="1.2rem" height="1.8rem" />
           <div className={styles.userInfo}>
             <Avatar size="sm" src={profileImage} />
             <div>

@@ -24,13 +24,13 @@ export const COMMENT_MODAL: Record<
   CREATE: {
     TITLE: '작성 내용을 삭제할까요?',
     CONTENT: '내용이 저장되지 않습니다.',
-    CANCEL: '계속 작성하기',
+    CANCEL: '취소',
     CONFIRM: '삭제',
   },
   EDIT: {
     TITLE: '수정 내용을 삭제할까요?',
     CONTENT: '내용이 저장되지 않습니다.',
-    CANCEL: '계속 수정하기',
+    CANCEL: '취소',
     CONFIRM: '삭제',
   },
 };
@@ -3,7 +3,6 @@ import {
   Dispatch,
   ReactNode,
   useContext,
-  useEffect,
   useMemo,
   useReducer,
 } from 'react';
@@ -36,14 +35,10 @@ export const InputModeContextProvider = ({
   };
 
   const [mode, dispatch] = useReducer(reducer, {
-    type: 'comment',
-    action: 'create',
-    postId,
+    type: 'reset',
+    action: 'reset',
   } as const);
 
-  useEffect(() => {
-    dispatch({ type: 'RESET' });
-  }, [postId]);
   const value = useMemo(() => ({ mode, dispatch }), [mode]);
   return (
     <InputModeContext.Provider value={value}>

@@ -15,6 +15,12 @@ export const createInputModeReducer = ({
   action,
 }: ComposeModeReducerType): InputBoxMode => {
   switch (action.type) {
+    case 'COMMENT_CREATE':
+      return {
+        type: 'comment',
+        action: 'create',
+        postId,
+      } as const;
     case 'COMMENT_EDIT':
       return {
         type: 'comment',
@@ -68,6 +74,6 @@ export const createInputModeReducer = ({
 
     case 'RESET':
     default:
-      return { type: 'comment', action: 'create', postId } as const;
+      return { type: 'reset', action: 'reset' } as const;
   }
 };
@@ -5,13 +5,15 @@ import { InputBoxMode } from '@widgets/community/types/input-box-type';
 import { LIMIT_SHORT_TEXT } from '@shared/constants/text-limits';
 
 export const useControlledInputBox = (mode: InputBoxMode) => {
-  const [content, setContent] = useState(
-    'initialContent' in mode ? mode.initialContent : '',
-  );
+  const [content, setContent] = useState('');
+
+  const initialContent = 'initialContent' in mode ? mode.initialContent : null;
 
   useEffect(() => {
-    setContent('initialContent' in mode ? mode.initialContent : '');
-  }, [mode]);
+    if (initialContent !== null) {
+      setContent(initialContent);
+    }
+  }, [initialContent]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const next = e.target.value;
@@ -21,7 +23,7 @@ export const useControlledInputBox = (mode: InputBoxMode) => {
   };
 
   const reset = () => {
-    setContent('initialContent' in mode ? mode.initialContent : '');
+    setContent('');
   };
 
   return { content, handleChange, reset };

@@ -1,6 +1,7 @@
 import { Image } from '@shared/types/type.ts';
 
 export type InputBoxMode =
+  | { type: 'reset'; action: 'reset' }
   | { type: 'comment'; action: 'create'; postId: string; images?: Image[] }
   | {
       type: 'comment';
@@ -24,6 +25,7 @@ export type InputBoxMode =
     };
 
 export type ReducerAction =
+  | { type: 'COMMENT_CREATE' }
   | {
       type: 'COMMENT_EDIT';
       commentId: number;

@@ -34,7 +34,7 @@ export const InfoSection = () => {
       </div>
       <Carousel slidesPerView={4.5} autoPlay className={styles.homeCardList}>
         {homeCardConfig.map((card, index) => (
-          <Carousel.Item key={index} style={{ width: 'auto' }}>
+          <Carousel.Item key={index}>
             <HomeCard
               icon={
                 <img