fix(fe): add error handling and toast notifications for question and reply improvements (#118)

feat: add error handling and toast notifications for question and reply improvements

Author: cjeongmin

apps/client/src/features/create-update-question/api/improve-question-retry.api.ts

@@ -21,6 +21,12 @@ export const postRetryQuestionImprovement = async (
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(RetryImproveQuestionRequestSchema.parse(body)),
   });
+
+  if (response.status === 403) {
+    if (onError) onError(new Error('Forbidden'));
+    return;
+  }
+
   if (!response.body) throw new Error('ReadableStream not supported');
 
   const reader = response.body.getReader();

apps/client/src/features/create-update-question/api/improve-question.api.ts

@@ -19,6 +19,12 @@ export const postQuestionImprovementStream = async (
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(QuestionImprovementRequestSchema.parse(body)),
   });
+
+  if (response.status === 403) {
+    if (onError) onError(new Error('Forbidden'));
+    return;
+  }
+
   if (!response.body) throw new Error('ReadableStream not supported');
 
   const reader = response.body.getReader();

apps/client/src/features/create-update-question/model/useQuestionWritingSupport.ts

@@ -10,6 +10,8 @@ import {
   QuestionImprovementRequest,
 } from '@/features/create-update-question/api/improve-question.api';
 
+import { useToastStore } from '@/shared/ui/toast';
+
 export const useQuestionWritingSupport = ({
   body,
   handleAccept,
@@ -22,20 +24,32 @@ export const useQuestionWritingSupport = ({
 
   const [isPending, setIsPending] = useState(false);
 
-  const questionImprovement = (body: QuestionImprovementRequest) => {
+  const addToast = useToastStore((state) => state.addToast);
+
+  const questionImprovement = (body: QuestionImprovementRequest, onComplete: () => void) => {
     setIsPending(true);
     postQuestionImprovementStream(
       body,
       ({ content }) => {
         setSupportResult((prev) => (prev ?? '') + content);
       },
       () => {
+        onComplete();
+        setIsPending(false);
+      },
+      () => {
+        onComplete();
         setIsPending(false);
+        addToast({
+          type: 'ERROR',
+          message: '3초 뒤에 다시 시도해주세요.',
+          duration: 3000,
+        });
       },
     );
   };
 
-  const retryQuestionImprovement = (body: RetryImproveQuestionRequest) => {
+  const retryQuestionImprovement = (body: RetryImproveQuestionRequest, onComplete: () => void) => {
     setSupportResult(null);
     setIsPending(true);
     postRetryQuestionImprovement(
@@ -44,7 +58,17 @@ export const useQuestionWritingSupport = ({
         setSupportResult((prev) => (prev ?? '') + content);
       },
       () => {
+        onComplete();
+        setIsPending(false);
+      },
+      () => {
+        onComplete();
         setIsPending(false);
+        addToast({
+          type: 'ERROR',
+          message: '3초 뒤에 다시 시도해주세요.',
+          duration: 3000,
+        });
       },
     );
   };

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

@@ -50,20 +50,23 @@ function CreateQuestionModal({ question }: Readonly<CreateQuestionModalProps>) {
     if (buttonEnabled && isValidLength && sessionId && token) {
       setSupportType('IMPROVE_QUESTION');
       setIsAnimationComplete(false);
-      questionImprovement({ token, sessionId, body });
+      questionImprovement({ token, sessionId, body }, () => setIsAnimationComplete(true));
     }
   };
 
   const handleRetry = (requirements: string) => {
     if (sessionId && token && supportResult && supportType) {
       setIsAnimationComplete(false);
-      retryQuestionImprovement({
-        token,
-        sessionId,
-        original: body,
-        received: supportResult,
-        retryMessage: requirements,
-      });
+      retryQuestionImprovement(
+        {
+          token,
+          sessionId,
+          original: body,
+          received: supportResult,
+          retryMessage: requirements,
+        },
+        () => setIsAnimationComplete(true),
+      );
     }
   };
 

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

@@ -131,7 +131,11 @@ export default function CreateQuestionModalFooter({
             <div className='text-sm font-bold text-white'>질문 개선하기</div>
           </Button>
           <div className='flex flex-row gap-2'>
-            <Button className='bg-gray-500' onClick={closeModal}>
+            <Button
+              className={`${buttonEnabled ? 'bg-gray-500' : 'cursor-not-allowed bg-gray-300'}`}
+              onClick={closeModal}
+              disabled={!buttonEnabled}
+            >
               <div className='text-sm font-bold text-white'>취소하기</div>
             </Button>
             <Button

apps/client/src/features/create-update-reply/api/improve-reply-retry.api.ts

@@ -22,6 +22,12 @@ export const postRetryReplyImprovement = async (
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(RetryReplyImprovementRequestSchema.parse(body)),
   });
+
+  if (response.status === 403) {
+    if (onError) onError(new Error('Forbidden'));
+    return;
+  }
+
   if (!response.body) throw new Error('ReadableStream not supported');
 
   const reader = response.body.getReader();

apps/client/src/features/create-update-reply/api/improve-reply.api.ts

@@ -20,6 +20,12 @@ export const postReplyImprovementStream = async (
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(ReplyImprovementRequestSchema.parse(body)),
   });
+
+  if (response.status === 403) {
+    if (onError) onError(new Error('Forbidden'));
+    return;
+  }
+
   if (!response.body) throw new Error('ReadableStream not supported');
 
   const reader = response.body.getReader();

apps/client/src/features/create-update-reply/model/useReplyWritingSupport.ts

@@ -10,6 +10,8 @@ import {
   ReplyImprovementRequest,
 } from '@/features/create-update-reply/api/improve-reply.api';
 
+import { useToastStore } from '@/shared/ui/toast';
+
 export const useReplyWritingSupport = ({
   questionBody,
   body,
@@ -24,20 +26,32 @@ export const useReplyWritingSupport = ({
 
   const [isPending, setIsPending] = useState(false);
 
-  const replyImprovement = (body: ReplyImprovementRequest) => {
+  const addToast = useToastStore((state) => state.addToast);
+
+  const replyImprovement = (body: ReplyImprovementRequest, onComplete: () => void) => {
     setIsPending(true);
     postReplyImprovementStream(
       body,
       ({ content }) => {
         setSupportResult((prev) => (prev ?? '') + content);
       },
       () => {
+        onComplete();
+        setIsPending(false);
+      },
+      () => {
+        onComplete();
         setIsPending(false);
+        addToast({
+          type: 'ERROR',
+          message: '3초 뒤에 다시 시도해주세요.',
+          duration: 3000,
+        });
       },
     );
   };
 
-  const retryReplyImprovement = (body: RetryReplyImprovementRequest) => {
+  const retryReplyImprovement = (body: RetryReplyImprovementRequest, onComplete: () => void) => {
     setSupportResult(null);
     setIsPending(true);
     postRetryReplyImprovement(
@@ -46,7 +60,17 @@ export const useReplyWritingSupport = ({
         setSupportResult((prev) => (prev ?? '') + content);
       },
       () => {
+        onComplete();
+        setIsPending(false);
+      },
+      () => {
+        onComplete();
         setIsPending(false);
+        addToast({
+          type: 'ERROR',
+          message: '3초 뒤에 다시 시도해주세요.',
+          duration: 3000,
+        });
       },
     );
   };

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

@@ -49,21 +49,24 @@ function CreateReplyModal({ question, reply }: Readonly<CreateReplyModalProps>)
     if (buttonEnabled && isValidLength && question && sessionId && token) {
       setSupportType('IMPROVE_REPLY');
       setIsAnimationComplete(false);
-      replyImprovement({ token, sessionId, body, originalQuestion: question.body });
+      replyImprovement({ token, sessionId, body, originalQuestion: question.body }, () => setIsAnimationComplete(true));
     }
   };
 
   const handleRetry = (requirements: string) => {
     if (sessionId && token && question && supportResult && supportType) {
       setIsAnimationComplete(false);
-      retryReplyImprovement({
-        token,
-        sessionId,
-        originalQuestion: question.body,
-        original: body,
-        received: supportResult,
-        retryMessage: requirements,
-      });
+      retryReplyImprovement(
+        {
+          token,
+          sessionId,
+          originalQuestion: question.body,
+          original: body,
+          received: supportResult,
+          retryMessage: requirements,
+        },
+        () => setIsAnimationComplete(true),
+      );
     }
   };
 

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

@@ -116,7 +116,11 @@ export default function CreateReplyModalFooter({
             <div className='text-sm font-bold text-white'>답변 개선하기</div>
           </Button>
           <div className='flex flex-row gap-2'>
-            <Button className='bg-gray-500' onClick={closeModal}>
+            <Button
+              className={`${buttonEnabled ? 'bg-gray-500' : 'cursor-not-allowed bg-gray-300'}`}
+              onClick={closeModal}
+              disabled={!buttonEnabled}
+            >
               <div className='text-sm font-bold text-white'>취소하기</div>
             </Button>
             <Button