From f904b8e2b50309e23a6f3628a9a1b28c4a94e0a0 Mon Sep 17 00:00:00 2001
From: Choi Jeongmin <cjeongmin27@gmail.com>
Date: Thu, 13 Feb 2025 17:57:39 +0900
Subject: [PATCH] feat(fe): integrate improve reply api (#89)

* feat: add reply improvement and retry APIs

* feat: implement reply writing support with improvement and retry functionality

* feat: update Popover component text for markdown preview and content type switching
---
 .../src/features/ai-history/api/ai-history.ts |   2 +-
 .../model/useQuestionWritingSupport.ts        |   4 +-
 .../ui/CreateQuestionModalSide.tsx            |   2 +-
 .../api/improve-reply-retry.api.ts            |  26 +++
 .../api/improve-reply.api.ts                  |  24 +++
 .../model/useReplyWritingSupport.ts           |  74 ++++++++
 .../ui/CreateReplyModal.tsx                   |  61 ++++++-
 .../ui/CreateReplyModalFooter.tsx             | 164 ++++++++++++------
 .../ui/CreateReplyModalSide.tsx               |  30 ++--
 .../ui/ReplyContentView.tsx                   |  25 ++-
 10 files changed, 337 insertions(+), 75 deletions(-)
 create mode 100644 apps/client/src/features/create-update-reply/api/improve-reply-retry.api.ts
 create mode 100644 apps/client/src/features/create-update-reply/api/improve-reply.api.ts
 create mode 100644 apps/client/src/features/create-update-reply/model/useReplyWritingSupport.ts

diff --git a/apps/client/src/features/ai-history/api/ai-history.ts b/apps/client/src/features/ai-history/api/ai-history.ts
index 8decfb3..2a38989 100644
--- a/apps/client/src/features/ai-history/api/ai-history.ts
+++ b/apps/client/src/features/ai-history/api/ai-history.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { z } from 'zod';
 
-export const AIRequestTypeSchema = z.enum(['IMPROVE_QUESTION']);
+export const AIRequestTypeSchema = z.enum(['IMPROVE_QUESTION', 'IMPROVE_REPLY']);
 
 export const AIResultTypeSchema = z.enum(['ACCEPT', 'REJECT']);
 
diff --git a/apps/client/src/features/create-update-question/model/useQuestionWritingSupport.ts b/apps/client/src/features/create-update-question/model/useQuestionWritingSupport.ts
index af82528..16d1256 100644
--- a/apps/client/src/features/create-update-question/model/useQuestionWritingSupport.ts
+++ b/apps/client/src/features/create-update-question/model/useQuestionWritingSupport.ts
@@ -22,7 +22,7 @@ export const useQuestionWritingSupport = ({
     },
   });
 
-  const { mutate: retryQuestionImprovement, isPending: isRetryQuestionImprovement } = useMutation({
+  const { mutate: retryQuestionImprovement, isPending: isRetryQuestionImprovementInProgress } = useMutation({
     mutationFn: postRetryQuestionImprovement,
     onSuccess: (data) => {
       setSupportResult(data.result.question);
@@ -54,7 +54,7 @@ export const useQuestionWritingSupport = ({
     }
   };
 
-  const requestEnable = !isQuestionImprovementInProgress && !isRetryQuestionImprovement;
+  const requestEnable = !isQuestionImprovementInProgress && !isRetryQuestionImprovementInProgress;
 
   return {
     questionImprovement,
diff --git a/apps/client/src/features/create-update-question/ui/CreateQuestionModalSide.tsx b/apps/client/src/features/create-update-question/ui/CreateQuestionModalSide.tsx
index b024fa7..43ee2f8 100644
--- a/apps/client/src/features/create-update-question/ui/CreateQuestionModalSide.tsx
+++ b/apps/client/src/features/create-update-question/ui/CreateQuestionModalSide.tsx
@@ -24,7 +24,7 @@ export default function CreateQuestionModalSide({
 }: Readonly<CreateQuestionModalSideProps>) {
   return (
     <div className='absolute right-8 flex h-[calc(100%-5rem)] w-12 flex-col items-center justify-between py-4'>
-      <Popover text={openPreview ? '마크다운 미리보기 끄기' : '마크다운 미리보기'} position='right'>
+      <Popover text={openPreview ? '마크다운 편집' : '마크다운 미리보기'} position='right'>
         <button
           className='flex h-10 w-10 items-center justify-center rounded-full border p-2 shadow-md'
           onClick={() => setOpenPreview(!openPreview)}
diff --git a/apps/client/src/features/create-update-reply/api/improve-reply-retry.api.ts b/apps/client/src/features/create-update-reply/api/improve-reply-retry.api.ts
new file mode 100644
index 0000000..10c8b2c
--- /dev/null
+++ b/apps/client/src/features/create-update-reply/api/improve-reply-retry.api.ts
@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const RetryReplyImprovementRequestSchema = z.object({
+  token: z.string(),
+  sessionId: z.string(),
+  originalQuestion: z.string(),
+  original: z.string(),
+  received: z.string(),
+  retryMessage: z.string(),
+});
+
+export const RetryReplyImprovementResponseSchema = z.object({
+  result: z.object({
+    reply: z.string(),
+  }),
+});
+
+export type RetryReplyImprovementRequest = z.infer<typeof RetryReplyImprovementRequestSchema>;
+
+export type RetryReplyImprovementResponse = z.infer<typeof RetryReplyImprovementResponseSchema>;
+
+export const postRetryReplyImprovement = (body: RetryReplyImprovementRequest) =>
+  axios
+    .post<RetryReplyImprovementResponse>('/api/ai/reply-improve-retry', RetryReplyImprovementRequestSchema.parse(body))
+    .then((res) => RetryReplyImprovementResponseSchema.parse(res.data));
diff --git a/apps/client/src/features/create-update-reply/api/improve-reply.api.ts b/apps/client/src/features/create-update-reply/api/improve-reply.api.ts
new file mode 100644
index 0000000..6475d4c
--- /dev/null
+++ b/apps/client/src/features/create-update-reply/api/improve-reply.api.ts
@@ -0,0 +1,24 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const ReplyImprovementRequestSchema = z.object({
+  token: z.string(),
+  sessionId: z.string(),
+  body: z.string(),
+  originalQuestion: z.string(),
+});
+
+export const ReplyImprovementResponseSchema = z.object({
+  result: z.object({
+    reply: z.string(),
+  }),
+});
+
+export type ReplyImprovementRequest = z.infer<typeof ReplyImprovementRequestSchema>;
+
+export type ReplyImprovementResponse = z.infer<typeof ReplyImprovementResponseSchema>;
+
+export const postReplyImprovement = (body: ReplyImprovementRequest) =>
+  axios
+    .post<ReplyImprovementResponse>('/api/ai/reply-improve', ReplyImprovementRequestSchema.parse(body))
+    .then((res) => ReplyImprovementResponseSchema.parse(res.data));
diff --git a/apps/client/src/features/create-update-reply/model/useReplyWritingSupport.ts b/apps/client/src/features/create-update-reply/model/useReplyWritingSupport.ts
new file mode 100644
index 0000000..e4dd91c
--- /dev/null
+++ b/apps/client/src/features/create-update-reply/model/useReplyWritingSupport.ts
@@ -0,0 +1,74 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { AIRequestType, postAIHistory } from '@/features/ai-history';
+import { postRetryReplyImprovement } from '@/features/create-update-reply/api/improve-reply-retry.api';
+import { postReplyImprovement } from '@/features/create-update-reply/api/improve-reply.api';
+
+export const useReplyWritingSupport = ({
+  questionBody,
+  body,
+  handleAccept,
+}: {
+  questionBody: string;
+  body: string;
+  handleAccept: (body: string) => void;
+}) => {
+  const [supportResult, setSupportResult] = useState<string | null>(null);
+  const [supportType, setSupportType] = useState<AIRequestType | null>(null);
+
+  const { mutate: replyImprovement, isPending: isReplyImprovementInProgress } = useMutation({
+    mutationFn: postReplyImprovement,
+    onSuccess: (data) => {
+      setSupportResult(data.result.reply);
+    },
+  });
+
+  const { mutate: retryReplyImprovement, isPending: isRetryReplyImprovementInProgress } = useMutation({
+    mutationFn: postRetryReplyImprovement,
+    onSuccess: (data) => {
+      setSupportResult(data.result.reply);
+    },
+  });
+
+  const request = `# Q)\n${questionBody}\n\n# A)\n${body}`;
+
+  const accept = () => {
+    if (supportResult && supportType) {
+      handleAccept(supportResult);
+      postAIHistory({
+        promptName: supportType,
+        request,
+        response: supportResult,
+        result: 'ACCEPT',
+      });
+      setSupportResult(null);
+    }
+  };
+
+  const reject = () => {
+    if (supportResult && supportType) {
+      postAIHistory({
+        promptName: supportType,
+        request,
+        response: supportResult,
+        result: 'REJECT',
+      });
+      setSupportResult(null);
+    }
+  };
+
+  const requestEnable = !isReplyImprovementInProgress && !isRetryReplyImprovementInProgress;
+
+  return {
+    replyImprovement,
+    retryReplyImprovement,
+    supportResult,
+    setSupportResult,
+    supportType,
+    setSupportType,
+    accept,
+    reject,
+    requestEnable,
+  };
+};
diff --git a/apps/client/src/features/create-update-reply/ui/CreateReplyModal.tsx b/apps/client/src/features/create-update-reply/ui/CreateReplyModal.tsx
index 0574f03..aa07e25 100644
--- a/apps/client/src/features/create-update-reply/ui/CreateReplyModal.tsx
+++ b/apps/client/src/features/create-update-reply/ui/CreateReplyModal.tsx
@@ -2,11 +2,12 @@ import { useState } from 'react';
 
 import { ContentType } from '@/features/create-update-reply/model/reply-modal.type';
 import { useReplyMutation } from '@/features/create-update-reply/model/useReplyMutation';
+import { useReplyWritingSupport } from '@/features/create-update-reply/model/useReplyWritingSupport';
 import CreateReplyModalFooter from '@/features/create-update-reply/ui/CreateReplyModalFooter';
 import CreateReplyModalSide from '@/features/create-update-reply/ui/CreateReplyModalSide';
 import ReplyContentView from '@/features/create-update-reply/ui/ReplyContentView';
 
-import { Question, Reply } from '@/entities/session';
+import { Question, Reply, useSessionStore } from '@/entities/session';
 import { getContentBodyLength, isValidBodyLength } from '@/entities/session/model/qna.util';
 
 interface CreateReplyModalProps {
@@ -15,13 +16,51 @@ interface CreateReplyModalProps {
 }
 
 function CreateReplyModal({ question, reply }: Readonly<CreateReplyModalProps>) {
+  const token = useSessionStore((state) => state.sessionToken);
+  const sessionId = useSessionStore((state) => state.sessionId);
+
   const { body, setBody, handleSubmit, submitDisabled } = useReplyMutation(question, reply);
+  const {
+    supportType,
+    supportResult,
+    requestEnable,
+    setSupportType,
+    replyImprovement,
+    retryReplyImprovement,
+    accept,
+    reject,
+  } = useReplyWritingSupport({ questionBody: question?.body ?? '', body, handleAccept: setBody });
 
   const [contentType, setContentType] = useState<ContentType>('reply');
 
-  const bodyLength = getContentBodyLength(body);
+  const bodyLength = getContentBodyLength(supportResult ?? body);
+  const isValidLength = isValidBodyLength(bodyLength);
+
+  const buttonEnabled = !submitDisabled && isValidLength && contentType !== 'question';
+
+  const handleCreateOrUpdate = () => {
+    if (buttonEnabled && isValidLength) handleSubmit();
+  };
+
+  const handleReplyImprovement = () => {
+    if (buttonEnabled && isValidLength && question && sessionId && token) {
+      setSupportType('IMPROVE_REPLY');
+      replyImprovement({ token, sessionId, body, originalQuestion: question.body });
+    }
+  };
 
-  const buttonEnabled = !submitDisabled && isValidBodyLength(bodyLength) && contentType !== 'question';
+  const handleRetry = (requirements: string) => {
+    if (sessionId && token && question && supportResult && supportType) {
+      retryReplyImprovement({
+        token,
+        sessionId,
+        originalQuestion: question.body,
+        original: body,
+        received: supportResult,
+        retryMessage: requirements,
+      });
+    }
+  };
 
   return (
     <div className='relative flex h-[20rem] w-[40rem] flex-col rounded-lg bg-gray-50 p-4'>
@@ -30,11 +69,23 @@ function CreateReplyModal({ question, reply }: Readonly<CreateReplyModalProps>)
           contentType={contentType}
           questionBody={question?.body ?? '질문을 찾을 수 없습니다.'}
           replyBody={body}
-          onChange={setBody}
+          onReplyBodyChange={setBody}
+          supportResult={supportResult}
+          isWritingPending={!requestEnable}
         />
         <CreateReplyModalSide bodyLength={bodyLength} contentType={contentType} setContentType={setContentType} />
       </div>
-      <CreateReplyModalFooter reply={reply} buttonEnabled={buttonEnabled} handleSubmit={handleSubmit} />
+      <CreateReplyModalFooter
+        question={question}
+        reply={reply}
+        buttonEnabled={buttonEnabled}
+        supportResult={supportResult}
+        handleCreateOrUpdate={handleCreateOrUpdate}
+        handleReplyImprovement={handleReplyImprovement}
+        handleRetry={handleRetry}
+        accept={accept}
+        reject={reject}
+      />
     </div>
   );
 }
diff --git a/apps/client/src/features/create-update-reply/ui/CreateReplyModalFooter.tsx b/apps/client/src/features/create-update-reply/ui/CreateReplyModalFooter.tsx
index 300e0ed..088a722 100644
--- a/apps/client/src/features/create-update-reply/ui/CreateReplyModalFooter.tsx
+++ b/apps/client/src/features/create-update-reply/ui/CreateReplyModalFooter.tsx
@@ -1,69 +1,135 @@
-import { Reply } from '@/entities/session';
+import { useState } from 'react';
+
+import { Question, Reply } from '@/entities/session';
 
 import { Button } from '@/shared/ui/button';
 import { useModalContext } from '@/shared/ui/modal';
-import { useToastStore } from '@/shared/ui/toast';
+import { Popover } from '@/shared/ui/popover';
 
 interface CreateReplyModalFooterProps {
+  supportResult: string | null;
+  question?: Question;
   reply?: Reply;
   buttonEnabled: boolean;
-  handleSubmit: () => void;
+  handleReplyImprovement: () => void;
+  handleRetry: (requirements: string) => void;
+  handleCreateOrUpdate: () => void;
+  accept: () => void;
+  reject: () => void;
+}
+
+function RetryActions({
+  handleRetry,
+  reject,
+  accept,
+}: Readonly<{
+  handleRetry: (requirements: string) => void;
+  reject: () => void;
+  accept: () => void;
+}>) {
+  const [retryEnabled, setRetryEnabled] = useState<boolean>(false);
+  const [retryRequirements, setRetryRequirements] = useState<string>('');
+  const [isRetryRequirementsTooLong, setIsRetryRequirementsTooLong] = useState<boolean>(false);
+
+  const handleChangeRetryRequirements = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (value.length <= 150) {
+      setRetryRequirements(value);
+      setIsRetryRequirementsTooLong(false);
+    } else {
+      setIsRetryRequirementsTooLong(true);
+    }
+  };
+
+  const handleCancelRetry = () => {
+    setRetryEnabled(false);
+    setRetryRequirements('');
+  };
+
+  const handleRetryRequest = () => {
+    handleRetry(retryRequirements);
+    setRetryEnabled(false);
+    setRetryRequirements('');
+  };
+
+  if (retryEnabled) {
+    return (
+      <div className='flex w-full flex-row gap-2'>
+        <Popover
+          className='w-full flex-1'
+          text='요청 사항은 150자를 넘을 수 없습니다.'
+          enabled={isRetryRequirementsTooLong}
+          position='top-right'
+        >
+          <input
+            className={`h-full w-full resize-none overflow-auto rounded-sm border bg-white px-4 ${retryRequirements ? 'text-base' : 'text-sm'} focus:outline-none`}
+            placeholder='추가 요청 내용을 입력해주세요.'
+            value={retryRequirements}
+            onChange={handleChangeRetryRequirements}
+          />
+        </Popover>
+        <Button className='shrink-0 bg-gray-500' onClick={handleCancelRetry}>
+          <div className='text-sm font-bold text-white'>취소하기</div>
+        </Button>
+        <Button className='shrink-0 bg-indigo-600' onClick={handleRetryRequest}>
+          <div className='text-sm font-bold text-white'>요청하기</div>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-row gap-2'>
+      <Button className='bg-gray-500' onClick={reject}>
+        <div className='text-sm font-bold text-white'>취소하기</div>
+      </Button>
+      <Button className='bg-gray-500' onClick={() => setRetryEnabled(true)}>
+        <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>
+      </Button>
+    </div>
+  );
 }
 
 export default function CreateReplyModalFooter({
+  supportResult,
   reply,
   buttonEnabled,
-  handleSubmit,
+  handleReplyImprovement,
+  handleRetry,
+  handleCreateOrUpdate,
+  accept,
+  reject,
 }: Readonly<CreateReplyModalFooterProps>) {
   const { closeModal } = useModalContext();
 
-  const addToast = useToastStore((state) => state.addToast);
-
   return (
     <footer className='flex h-[3rem] flex-row items-end justify-between'>
-      <div className='flex flex-row gap-2'>
-        <Button
-          className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
-          onClick={() => {
-            if (buttonEnabled) {
-              addToast({
-                type: 'INFO',
-                message: '추후 업데이트 예정입니다.',
-                duration: 3000,
-              });
-            }
-          }}
-        >
-          <div className='text-sm font-bold text-white'>답변 개선하기</div>
-        </Button>
-        <Button
-          className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
-          onClick={() => {
-            if (buttonEnabled) {
-              addToast({
-                type: 'INFO',
-                message: '추후 업데이트 예정입니다.',
-                duration: 3000,
-              });
-            }
-          }}
-        >
-          <div className='text-sm font-bold text-white'>답변 축약하기</div>
-        </Button>
-      </div>
-      <div className='flex flex-row gap-2'>
-        <Button className='bg-gray-500' onClick={closeModal}>
-          <div className='text-sm font-bold text-white'>취소하기</div>
-        </Button>
-        <Button
-          className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
-          onClick={() => {
-            if (buttonEnabled) handleSubmit();
-          }}
-        >
-          <div className='text-sm font-bold text-white'>{reply ? '수정하기' : '생성하기'}</div>
-        </Button>
-      </div>
+      {supportResult === null ? (
+        <>
+          <Button
+            className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
+            onClick={handleReplyImprovement}
+          >
+            <div className='text-sm font-bold text-white'>답변 개선하기</div>
+          </Button>
+          <div className='flex flex-row gap-2'>
+            <Button className='bg-gray-500' onClick={closeModal}>
+              <div className='text-sm font-bold text-white'>취소하기</div>
+            </Button>
+            <Button
+              className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
+              onClick={handleCreateOrUpdate}
+            >
+              <div className='text-sm font-bold text-white'>{reply ? '수정하기' : '생성하기'}</div>
+            </Button>
+          </div>
+        </>
+      ) : (
+        <RetryActions handleRetry={handleRetry} reject={reject} accept={accept} />
+      )}
     </footer>
   );
 }
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 3fb1956..d3f7cc2 100644
--- a/apps/client/src/features/create-update-reply/ui/CreateReplyModalSide.tsx
+++ b/apps/client/src/features/create-update-reply/ui/CreateReplyModalSide.tsx
@@ -4,6 +4,8 @@ import { VscEdit, VscMarkdown } from 'react-icons/vsc';
 
 import { ContentType } from '@/features/create-update-reply/model/reply-modal.type';
 
+import { Popover } from '@/shared/ui/popover';
+
 interface CreateReplyModalSideProps {
   bodyLength: number;
   contentType: ContentType;
@@ -28,20 +30,24 @@ export default function CreateReplyModalSide({
     <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
-            className='flex h-10 w-10 items-center justify-center rounded-full border p-2 shadow-md'
-            onClick={() => setContentType(contentType === 'reply' ? 'question' : 'reply')}
-          >
-            {contentType === 'question' ? <RiQuestionAnswerLine size={32} /> : <MdQuestionMark size={32} />}
-          </button>
+          <Popover text={contentType === 'question' ? '답변으로 전환' : '질문으로 전환'} position='right'>
+            <button
+              className='flex h-10 w-10 items-center justify-center rounded-full border p-2 shadow-md'
+              onClick={() => setContentType(contentType === 'reply' ? 'question' : 'reply')}
+            >
+              {contentType === 'question' ? <RiQuestionAnswerLine size={32} /> : <MdQuestionMark size={32} />}
+            </button>
+          </Popover>
         )}
         {(contentType === 'reply' || contentType === 'preview') && (
-          <button
-            className='flex h-10 w-10 items-center justify-center rounded-full border p-2 shadow-md'
-            onClick={() => setContentType(contentType === 'reply' ? 'preview' : 'reply')}
-          >
-            {contentType === 'reply' ? <VscMarkdown size={32} /> : <VscEdit size={32} />}
-          </button>
+          <Popover text={contentType === 'preview' ? '마크다운 편집' : '마크다운 미리보기'} position='right'>
+            <button
+              className='flex h-10 w-10 items-center justify-center rounded-full border p-2 shadow-md'
+              onClick={() => setContentType(contentType === 'reply' ? 'preview' : 'reply')}
+            >
+              {contentType === 'reply' ? <VscMarkdown size={32} /> : <VscEdit size={32} />}
+            </button>
+          </Popover>
         )}
       </div>
       <span className={`${bodyLength > 500 ? 'text-red-600' : 'text-slate-400'} ${textSize(bodyLength)}`}>
diff --git a/apps/client/src/features/create-update-reply/ui/ReplyContentView.tsx b/apps/client/src/features/create-update-reply/ui/ReplyContentView.tsx
index d4db024..d5657c4 100644
--- a/apps/client/src/features/create-update-reply/ui/ReplyContentView.tsx
+++ b/apps/client/src/features/create-update-reply/ui/ReplyContentView.tsx
@@ -5,22 +5,36 @@ import { ContentType } from '@/features/create-update-reply/model/reply-modal.ty
 import { Question, Reply } from '@/entities/session';
 
 interface ReplyContentViewProps {
+  supportResult: string | null;
   contentType: ContentType;
   questionBody: Question['body'];
   replyBody: Reply['body'];
-  onChange: (body: string) => void;
+  isWritingPending: boolean;
+  onReplyBodyChange: (body: string) => void;
 }
 
 export default function ReplyContentView({
+  supportResult,
   contentType,
   questionBody,
   replyBody,
-  onChange,
+  isWritingPending,
+  onReplyBodyChange,
 }: Readonly<ReplyContentViewProps>) {
+  if (isWritingPending) {
+    return (
+      <div className='flex flex-1 items-center justify-center overflow-y-auto rounded border bg-white p-4'>
+        <div className='h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-500' />
+      </div>
+    );
+  }
+
   if (contentType === 'preview') {
     return (
       <div className='flex-1 overflow-auto p-4'>
-        <Markdown className='w-[calc(100%-3rem] prose prose-stone h-full break-words pr-[3rem]'>{replyBody}</Markdown>
+        <Markdown className='w-[calc(100%-3rem] prose prose-stone h-full break-words pr-[3rem]'>
+          {supportResult === null ? replyBody : supportResult}
+        </Markdown>
       </div>
     );
   }
@@ -38,8 +52,9 @@ export default function ReplyContentView({
   return (
     <textarea
       className='flex-1 resize-none overflow-auto p-4 pr-[4rem] focus:outline-none'
-      value={replyBody}
-      onChange={(e) => onChange(e.target.value)}
+      value={supportResult === null ? replyBody : supportResult}
+      readOnly={supportResult !== null}
+      onChange={(e) => onReplyBodyChange(e.target.value)}
       placeholder='답변을 남겨주세요.'
     />
   );