feat(fe): Integrate question improvement API and enhance question/answer writing UI (#64)

* feat: add API for question improvement

* refactor: remove unused question improvement API and related exports

* feat: add API for question improvement with request and response schemas

* feat: add utility functions for content body length validation

* feat: add CreateQuestionModal components for improved question creation flow

* feat: enhance CreateReplyModal with new footer and side components for improved user interaction

* feat: enhance typography styles in index.css for improved readability

* feat: update CreateReplyModalSide component to swap icon display based on content type

* feat: update CreateQuestionModal and CreateQuestionModalFooter to use Question type for improved type safety

* refactor: change getContentBodyLength function for improved readability

Author: cjeongmin

apps/client/src/entities/session/model/qna.util.ts

@@ -0,0 +1,13 @@
+export const getContentBodyLength = (body: string) => {
+  const regex = /!?\[(\w+)\]\([^)]+\)/g;
+  const matches = body.match(regex) || [];
+
+  return matches.reduce((length, match) => {
+    const textContent = /\[(\w+)\]/.exec(match)?.[1] || '';
+    return length - match.trim().length + textContent.trim().length;
+  }, body.trim().length);
+};
+
+export const isValidBodyLength = (body: string) => {
+  return body.trim().length > 0 && body.trim().length <= 500;
+};

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

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const QuestionImprovementRequestSchema = z.object({
+  token: z.string(),
+  sessionId: z.string(),
+  body: z.string().min(0),
+});
+
+export const QuestionImprovementResponseSchema = z.object({
+  result: z.object({
+    question: z.string(),
+  }),
+});
+
+export type QuestionImprovementRequest = z.infer<typeof QuestionImprovementRequestSchema>;
+
+export type QuestionImprovementResponse = z.infer<typeof QuestionImprovementResponseSchema>;
+
+export const postQuestionImprovement = (body: QuestionImprovementRequest) =>
+  axios
+    .post<QuestionImprovementResponse>('/api/ai/question-improve', QuestionImprovementRequestSchema.parse(body))
+    .then((res) => QuestionImprovementResponseSchema.parse(res.data));

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

@@ -0,0 +1,42 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import {
+  postQuestionImprovement,
+  QuestionImprovementRequest,
+} from '@/features/create-update-question/api/improve-question.api';
+
+export const useQuestionWritingSupport = ({ handleAccept }: { handleAccept: (body: string) => void }) => {
+  const { mutate: questionImprovement, isPending: isQuestionImprovementInProgress } = useMutation({
+    mutationFn: (request: QuestionImprovementRequest) => {
+      return postQuestionImprovement(request);
+    },
+    onSuccess: (data) => {
+      setSupportResult(data.result.question);
+    },
+  });
+
+  const [supportResult, setSupportResult] = useState<string | null>(null);
+
+  const accept = () => {
+    if (supportResult) {
+      handleAccept(supportResult);
+      setSupportResult(null);
+    }
+  };
+
+  const reject = () => {
+    setSupportResult(null);
+  };
+
+  const requestEnable = !isQuestionImprovementInProgress;
+
+  return {
+    questionImprovement,
+    isQuestionImprovementInProgress,
+    requestEnable,
+    supportResult,
+    accept,
+    reject,
+  };
+};

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

@@ -1,61 +1,78 @@
 import { useState } from 'react';
-import Markdown from 'react-markdown';
 
 import { useQuestionMutation } from '@/features/create-update-question/model/useQuestionMutation';
+import { useQuestionWritingSupport } from '@/features/create-update-question/model/useQuestionWritingSupport';
+import CreateQuestionModalFooter from '@/features/create-update-question/ui/CreateQuestionModalFooter';
+import CreateQuestionModalSide from '@/features/create-update-question/ui/CreateQuestionModalSide';
+import QuestionContentView from '@/features/create-update-question/ui/QuestionContentView';
 
-import { Question } from '@/entities/session';
+import { Question, useSessionStore } from '@/entities/session';
+import { getContentBodyLength, isValidBodyLength } from '@/entities/session/model/qna.util';
 
-import { Button } from '@/shared/ui/button';
-import { useModalContext } from '@/shared/ui/modal';
+import { useToastStore } from '@/shared/ui/toast';
 
 interface CreateQuestionModalProps {
   question?: Question;
 }
 
 function CreateQuestionModal({ question }: Readonly<CreateQuestionModalProps>) {
-  const { closeModal } = useModalContext();
+  const addToast = useToastStore((state) => state.addToast);
+
+  const token = useSessionStore((state) => state.sessionToken);
+  const sessionId = useSessionStore((state) => state.sessionId);
+
   const { body, setBody, handleSubmit, submitDisabled } = useQuestionMutation(question);
+  const { questionImprovement, requestEnable, supportResult, accept, reject } = useQuestionWritingSupport({
+    handleAccept: setBody,
+  });
 
   const [openPreview, setOpenPreview] = useState(false);
 
+  const bodyLength = getContentBodyLength(body);
+
+  const buttonEnabled = !submitDisabled && requestEnable && isValidBodyLength(body);
+
+  const handleCreateOrUpdate = () => {
+    if (buttonEnabled) handleSubmit();
+  };
+
+  const handleQuestionImprovement = () => {
+    if (buttonEnabled && sessionId && token) {
+      questionImprovement({ token, sessionId, body });
+    }
+  };
+
+  const handleQuestionSummary = () => {
+    if (buttonEnabled) addToast({ type: 'INFO', message: '추후 업데이트 예정입니다.', duration: 3000 });
+  };
+
+  const handleRetry = () => {
+    if (sessionId && token) questionImprovement({ token, sessionId, body });
+  };
+
   return (
-    <div className='flex h-[20rem] w-[40rem] flex-col gap-2 rounded-lg bg-gray-50 p-4'>
-      {openPreview ? (
-        <div className='flex-1 overflow-y-auto rounded border bg-white p-4'>
-          <Markdown className='prose prose-stone'>{body}</Markdown>
-        </div>
-      ) : (
-        <textarea
-          className='flex-1 resize-none rounded border p-4 focus:outline-none'
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          placeholder='질문을 남겨주세요.'
+    <div className='relative flex h-[20rem] w-[40rem] flex-col rounded-lg bg-gray-50 p-4'>
+      <div className='flex h-[15rem] flex-1 rounded border bg-white'>
+        <QuestionContentView
+          supportResult={supportResult}
+          questionBody={body}
+          openPreview={openPreview}
+          isWritingPending={!requestEnable}
+          onQuestionBodyChange={setBody}
         />
-      )}
-      <footer className='flex h-[3rem] flex-row items-end justify-between'>
-        <div className='flex flex-row gap-2'>
-          <Button className='bg-indigo-600'>
-            <div className='text-sm font-bold text-white'>질문 개선하기</div>
-          </Button>
-          <Button className='bg-indigo-600'>
-            <div className='text-sm font-bold text-white'>질문 축약하기</div>
-          </Button>
-          <Button className='bg-gray-500' onClick={() => setOpenPreview(!openPreview)}>
-            <div className='text-sm font-bold text-white'>{openPreview ? '작성하기' : '미리보기'}</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={`${!submitDisabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
-            onClick={handleSubmit}
-          >
-            <div className='text-sm font-bold text-white'>{question ? '수정하기' : '생성하기'}</div>
-          </Button>
-        </div>
-      </footer>
+        <CreateQuestionModalSide bodyLength={bodyLength} openPreview={openPreview} setOpenPreview={setOpenPreview} />
+      </div>
+      <CreateQuestionModalFooter
+        supportResult={supportResult}
+        question={question}
+        buttonEnabled={buttonEnabled}
+        handleQuestionImprovement={handleQuestionImprovement}
+        handleQuestionSummary={handleQuestionSummary}
+        handleCreateOrUpdate={handleCreateOrUpdate}
+        handleRetry={handleRetry}
+        accept={accept}
+        reject={reject}
+      />
     </div>
   );
 }

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

@@ -0,0 +1,78 @@
+import { Question } from '@/entities/session';
+
+import { Button } from '@/shared/ui/button';
+import { useModalContext } from '@/shared/ui/modal';
+
+interface CreateQuestionModalFooterProps {
+  supportResult: string | null;
+  question?: Question;
+  buttonEnabled: boolean;
+  handleQuestionImprovement: () => void;
+  handleQuestionSummary: () => void;
+  handleCreateOrUpdate: () => void;
+  handleRetry: () => void;
+  accept: () => void;
+  reject: () => void;
+}
+
+export default function CreateQuestionModalFooter({
+  supportResult,
+  question,
+  buttonEnabled,
+  handleQuestionImprovement,
+  handleQuestionSummary,
+  handleCreateOrUpdate,
+  handleRetry,
+  accept,
+  reject,
+}: Readonly<CreateQuestionModalFooterProps>) {
+  const { closeModal } = useModalContext();
+
+  return (
+    <footer className='flex h-[3rem] flex-row items-end justify-between'>
+      {supportResult === null ? (
+        <>
+          <div className='flex flex-row gap-2'>
+            <Button
+              className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
+              onClick={handleQuestionImprovement}
+            >
+              <div className='text-sm font-bold text-white'>질문 개선하기</div>
+            </Button>
+            <Button
+              className={`${buttonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
+              onClick={handleQuestionSummary}
+            >
+              <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={handleCreateOrUpdate}
+            >
+              <div className='text-sm font-bold text-white'>{question ? '수정하기' : '생성하기'}</div>
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <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={handleRetry}>
+              <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>
+        </>
+      )}
+    </footer>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { VscEdit, VscMarkdown } from 'react-icons/vsc';
+
+interface CreateQuestionModalSideProps {
+  bodyLength: number;
+  openPreview: boolean;
+  setOpenPreview: (openPreview: boolean) => void;
+}
+
+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'>
+      <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import Markdown from 'react-markdown';
+
+interface QuestionContentViewProps {
+  supportResult: string | null;
+  questionBody: string;
+  openPreview: boolean;
+  isWritingPending: boolean;
+  onQuestionBodyChange: (body: string) => void;
+}
+
+export default function QuestionContentView({
+  supportResult,
+  questionBody,
+  openPreview,
+  isWritingPending,
+  onQuestionBodyChange,
+}: Readonly<QuestionContentViewProps>) {
+  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 (supportResult !== null) {
+    if (openPreview) {
+      return (
+        <div className='flex-1 overflow-auto p-4'>
+          <Markdown className='w-[calc(100%-3rem] prose prose-stone h-full break-words pr-[3rem]'>
+            {supportResult}
+          </Markdown>
+        </div>
+      );
+    }
+    return (
+      <textarea
+        className='flex-1 resize-none overflow-auto p-4 pr-[4rem] focus:outline-none'
+        value={supportResult}
+        readOnly={true}
+      />
+    );
+  }
+
+  if (openPreview) {
+    return (
+      <div className='h-full flex-1 overflow-auto p-4'>
+        <Markdown className='w-[calc(100%-3rem] prose prose-stone h-full max-h-full break-words pr-[3rem]'>
+          {questionBody}
+        </Markdown>
+      </div>
+    );
+  }
+
+  return (
+    <textarea
+      className='flex-1 resize-none overflow-auto p-4 pr-[4rem] focus:outline-none'
+      value={questionBody}
+      onChange={(e) => onQuestionBodyChange(e.target.value)}
+      placeholder='질문을 남겨주세요.'
+    />
+  );
+}