fix(fe): enhance UX by adding new features during question/reply creation (#66)

* feat: add preventCloseFromBackground option to modal context

* feat: enable modal to prevent closing from background in question and reply components

* feat: enhance body length display and update button labels in question/reply modals

Author: cjeongmin

apps/client/src/features/create-update-question/ui/CreateQuestionModal.tsx

@@ -28,7 +28,7 @@ function CreateQuestionModal({ question }: Readonly<CreateQuestionModalProps>) {
 
   const [openPreview, setOpenPreview] = useState(false);
 
-  const bodyLength = getContentBodyLength(body);
+  const bodyLength = getContentBodyLength(supportResult ?? body);
 
   const buttonEnabled = !submitDisabled && requestEnable && isValidBodyLength(body);
 

apps/client/src/features/create-update-question/ui/CreateQuestionModalFooter.tsx

@@ -65,7 +65,7 @@ export default function CreateQuestionModalFooter({
               <div className='text-sm font-bold text-white'>취소하기</div>
             </Button>
             <Button className='bg-gray-500' onClick={handleRetry}>
-              <div className='text-sm font-bold text-white'>다시 작성하기</div>
+              <div className='text-sm font-bold text-white'>다시 요청하기</div>
             </Button>
             <Button className='bg-indigo-600' onClick={accept}>
               <div className='text-sm font-bold text-white'>사용하기</div>

apps/client/src/features/create-update-question/ui/CreateQuestionModalSide.tsx

@@ -6,20 +6,31 @@ interface CreateQuestionModalSideProps {
   setOpenPreview: (openPreview: boolean) => void;
 }
 
+const textSize = (bodyLength: number) => {
+  if (bodyLength >= 10000) {
+    return 'text-[0.5rem] leading-3';
+  } else if (bodyLength >= 1000) {
+    return 'text-xs';
+  }
+  return 'text-sm';
+};
+
 export default function CreateQuestionModalSide({
   bodyLength,
   openPreview,
   setOpenPreview,
 }: Readonly<CreateQuestionModalSideProps>) {
   return (
-    <div className='absolute right-8 flex h-[calc(100%-5rem)] flex-col items-center justify-between py-4'>
+    <div className='absolute right-8 flex h-[calc(100%-5rem)] w-12 flex-col items-center justify-between py-4'>
       <button
         className='flex h-10 w-10 items-center justify-center rounded-full border p-2 shadow-md'
         onClick={() => setOpenPreview(!openPreview)}
       >
         {openPreview ? <VscEdit size={32} /> : <VscMarkdown size={32} />}
       </button>
-      <span className={`text-xs ${bodyLength > 500 ? 'text-red-600' : 'text-slate-400'}`}>{bodyLength}/500</span>
+      <span className={`${bodyLength > 500 ? 'text-red-600' : 'text-slate-400'} ${textSize(bodyLength)}`}>
+        {bodyLength}/500
+      </span>
     </div>
   );
 }

apps/client/src/features/create-update-reply/ui/CreateReplyModalSide.tsx

@@ -10,13 +10,22 @@ interface CreateReplyModalSideProps {
   setContentType: (contentType: ContentType) => void;
 }
 
+const textSize = (bodyLength: number) => {
+  if (bodyLength >= 10000) {
+    return 'text-[0.5rem] leading-3';
+  } else if (bodyLength >= 1000) {
+    return 'text-xs';
+  }
+  return 'text-sm';
+};
+
 export default function CreateReplyModalSide({
   bodyLength,
   contentType,
   setContentType,
 }: Readonly<CreateReplyModalSideProps>) {
   return (
-    <div className='absolute right-8 flex h-[calc(100%-5rem)] flex-col items-center justify-between py-4'>
+    <div className='absolute right-8 flex h-[calc(100%-5rem)] w-12 flex-col items-center justify-between py-4'>
       <div className='flex flex-col items-center gap-2'>
         {(contentType === 'reply' || contentType === 'question') && (
           <button
@@ -35,7 +44,9 @@ export default function CreateReplyModalSide({
           </button>
         )}
       </div>
-      <span className={`text-xs ${bodyLength > 500 ? 'text-red-600' : 'text-slate-400'}`}>{bodyLength}/500</span>
+      <span className={`${bodyLength > 500 ? 'text-red-600' : 'text-slate-400'} ${textSize(bodyLength)}`}>
+        {bodyLength}/500
+      </span>
     </div>
   );
 }

apps/client/src/shared/ui/modal/useModal.tsx

@@ -11,14 +11,15 @@ import {
 import { createPortal } from 'react-dom';
 
 export interface ModalContextProps {
+  preventCloseFromBackground: boolean;
   openModal: () => void;
   closeModal: () => void;
 }
 
 export const ModalContext = createContext<ModalContextProps | undefined>(undefined);
 
 function Background({ children }: Readonly<PropsWithChildren>) {
-  const { closeModal } = useModalContext();
+  const { closeModal, preventCloseFromBackground } = useModalContext();
 
   useEffect(() => {
     const handleEsc = (e: KeyboardEvent) => {
@@ -37,6 +38,7 @@ function Background({ children }: Readonly<PropsWithChildren>) {
       role='dialog'
       onClick={(e) => {
         e.stopPropagation();
+        if (window.getSelection()?.toString() || preventCloseFromBackground) return;
         if (e.target === e.currentTarget) closeModal();
       }}
       onKeyDown={(e) => e.stopPropagation()}
@@ -49,7 +51,7 @@ function Background({ children }: Readonly<PropsWithChildren>) {
   );
 }
 
-export const useModal = (children: ReactNode) => {
+export const useModal = (children: ReactNode, preventCloseFromBackground: boolean = false) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
 
@@ -66,14 +68,14 @@ export const useModal = (children: ReactNode) => {
   const Modal = useMemo(() => {
     if (!isOpen) return null;
     return createPortal(
-      <ModalContext.Provider value={{ openModal, closeModal }}>
+      <ModalContext.Provider value={{ openModal, closeModal, preventCloseFromBackground }}>
         <Background>
           <div className={`modal-content ${isClosing ? 'animate-modalClose' : 'animate-modalOpen'}`}>{children}</div>
         </Background>
       </ModalContext.Provider>,
       document.body,
     );
-  }, [isOpen, openModal, closeModal, isClosing, children]);
+  }, [isOpen, openModal, closeModal, preventCloseFromBackground, isClosing, children]);
 
   return useMemo(
     () => ({

apps/client/src/widgets/question-list/ui/QuestionItem.tsx

@@ -20,6 +20,7 @@ function QuestionItem({ question, onQuestionSelect }: Readonly<QuestionItemProps
 
   const { Modal: CreateQuestion, openModal: openCreateQuestionModal } = useModal(
     <CreateQuestionModal question={question} />,
+    true,
   );
 
   const { Modal: DeleteConfirm, openModal: openDeleteConfirmModal } = useModal(

apps/client/src/widgets/question-list/ui/QuestionList.tsx

@@ -39,7 +39,7 @@ function QuestionList() {
 
   const socket = useSocket();
 
-  const { Modal: CreateQuestion, openModal: openCreateQuestionModal } = useModal(<CreateQuestionModal />);
+  const { Modal: CreateQuestion, openModal: openCreateQuestionModal } = useModal(<CreateQuestionModal />, true);
 
   const { Modal: SessionParticipants, openModal: openSessionParticipantsModal } = useModal(
     <SessionParticipantsModal />,

apps/client/src/widgets/reply-list/ui/ReplyItem.tsx

@@ -20,6 +20,7 @@ function ReplyItem({ question, reply }: Readonly<ReplyItemProps>) {
 
   const { Modal: CreateReply, openModal: openCreateReplyModal } = useModal(
     <CreateReplyModal question={question} reply={reply} />,
+    true,
   );
 
   const { Modal: DeleteModal, openModal: openDeleteModal } = useModal(<DeleteConfirmModal onConfirm={handleDelete} />);

apps/client/src/widgets/reply-list/ui/ReplyList.tsx

@@ -26,7 +26,7 @@ function QuestionDetail() {
 
   const question = questions.find((q) => q.questionId === selectedQuestionId);
 
-  const { Modal, openModal } = useModal(<CreateReplyModal question={question} />);
+  const { Modal, openModal } = useModal(<CreateReplyModal question={question} />, true);
 
   if (!question) {
     return null;