diff --git a/apps/client/src/features/create-update-question/ui/CreateQuestionModal.tsx b/apps/client/src/features/create-update-question/ui/CreateQuestionModal.tsx index 396a83f..8d2e365 100644 --- a/apps/client/src/features/create-update-question/ui/CreateQuestionModal.tsx +++ b/apps/client/src/features/create-update-question/ui/CreateQuestionModal.tsx @@ -28,7 +28,7 @@ function CreateQuestionModal({ question }: Readonly) { const [openPreview, setOpenPreview] = useState(false); - const bodyLength = getContentBodyLength(body); + const bodyLength = getContentBodyLength(supportResult ?? body); const buttonEnabled = !submitDisabled && requestEnable && isValidBodyLength(body); diff --git a/apps/client/src/features/create-update-question/ui/CreateQuestionModalFooter.tsx b/apps/client/src/features/create-update-question/ui/CreateQuestionModalFooter.tsx index ea721eb..1bf7a6a 100644 --- a/apps/client/src/features/create-update-question/ui/CreateQuestionModalFooter.tsx +++ b/apps/client/src/features/create-update-question/ui/CreateQuestionModalFooter.tsx @@ -65,7 +65,7 @@ export default function CreateQuestionModalFooter({
취소하기
- 500 ? 'text-red-600' : 'text-slate-400'}`}>{bodyLength}/500 + 500 ? 'text-red-600' : 'text-slate-400'} ${textSize(bodyLength)}`}> + {bodyLength}/500 + ); } diff --git a/apps/client/src/features/create-update-reply/ui/CreateReplyModalSide.tsx b/apps/client/src/features/create-update-reply/ui/CreateReplyModalSide.tsx index a55957c..3fb1956 100644 --- a/apps/client/src/features/create-update-reply/ui/CreateReplyModalSide.tsx +++ b/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) { return ( -
+
{(contentType === 'reply' || contentType === 'question') && (
- 500 ? 'text-red-600' : 'text-slate-400'}`}>{bodyLength}/500 + 500 ? 'text-red-600' : 'text-slate-400'} ${textSize(bodyLength)}`}> + {bodyLength}/500 +
); } diff --git a/apps/client/src/shared/ui/modal/useModal.tsx b/apps/client/src/shared/ui/modal/useModal.tsx index 531284a..a11bdc8 100644 --- a/apps/client/src/shared/ui/modal/useModal.tsx +++ b/apps/client/src/shared/ui/modal/useModal.tsx @@ -11,6 +11,7 @@ import { import { createPortal } from 'react-dom'; export interface ModalContextProps { + preventCloseFromBackground: boolean; openModal: () => void; closeModal: () => void; } @@ -18,7 +19,7 @@ export interface ModalContextProps { export const ModalContext = createContext(undefined); function Background({ children }: Readonly) { - const { closeModal } = useModalContext(); + const { closeModal, preventCloseFromBackground } = useModalContext(); useEffect(() => { const handleEsc = (e: KeyboardEvent) => { @@ -37,6 +38,7 @@ function Background({ children }: Readonly) { 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) { ); } -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( - +
{children}
, document.body, ); - }, [isOpen, openModal, closeModal, isClosing, children]); + }, [isOpen, openModal, closeModal, preventCloseFromBackground, isClosing, children]); return useMemo( () => ({ diff --git a/apps/client/src/widgets/question-list/ui/QuestionItem.tsx b/apps/client/src/widgets/question-list/ui/QuestionItem.tsx index 0f0e518..4a73c16 100644 --- a/apps/client/src/widgets/question-list/ui/QuestionItem.tsx +++ b/apps/client/src/widgets/question-list/ui/QuestionItem.tsx @@ -20,6 +20,7 @@ function QuestionItem({ question, onQuestionSelect }: Readonly, + true, ); const { Modal: DeleteConfirm, openModal: openDeleteConfirmModal } = useModal( diff --git a/apps/client/src/widgets/question-list/ui/QuestionList.tsx b/apps/client/src/widgets/question-list/ui/QuestionList.tsx index b08a375..0dbfd4a 100644 --- a/apps/client/src/widgets/question-list/ui/QuestionList.tsx +++ b/apps/client/src/widgets/question-list/ui/QuestionList.tsx @@ -39,7 +39,7 @@ function QuestionList() { const socket = useSocket(); - const { Modal: CreateQuestion, openModal: openCreateQuestionModal } = useModal(); + const { Modal: CreateQuestion, openModal: openCreateQuestionModal } = useModal(, true); const { Modal: SessionParticipants, openModal: openSessionParticipantsModal } = useModal( , diff --git a/apps/client/src/widgets/reply-list/ui/ReplyItem.tsx b/apps/client/src/widgets/reply-list/ui/ReplyItem.tsx index 0081e27..649d775 100644 --- a/apps/client/src/widgets/reply-list/ui/ReplyItem.tsx +++ b/apps/client/src/widgets/reply-list/ui/ReplyItem.tsx @@ -20,6 +20,7 @@ function ReplyItem({ question, reply }: Readonly) { const { Modal: CreateReply, openModal: openCreateReplyModal } = useModal( , + true, ); const { Modal: DeleteModal, openModal: openDeleteModal } = useModal(); diff --git a/apps/client/src/widgets/reply-list/ui/ReplyList.tsx b/apps/client/src/widgets/reply-list/ui/ReplyList.tsx index 90b9b05..31646bf 100644 --- a/apps/client/src/widgets/reply-list/ui/ReplyList.tsx +++ b/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(); + const { Modal, openModal } = useModal(, true); if (!question) { return null;