design(create-question-modal): 질문 생성 모달 디자인 적용한다 (#398)

src/components/panel/CreateQuestionModal.tsx

@@ -1,7 +1,11 @@
 import type { Panel } from '@/lib/api/panel';
+import type { ChangeEvent } from 'react';
 
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
+import { flushSync } from 'react-dom';
+
+import { Button } from '@/components/system/Button';
 import { useCreateQuestionMutation } from '@/hooks/queries/question';
 
 interface Props {
@@ -11,6 +15,16 @@ interface Props {
 export function CreateQuestionModal({ panelId, close }: Props): JSX.Element {
   const [content, setContent] = useState('');
   const createQuestionMutation = useCreateQuestionMutation(panelId);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const textareaRefCallback = useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      if (node) {
+        textareaRef.current = node;
+        textareaRef.current.focus();
+      }
+    },
+    [],
+  );
 
   function handleSubmit(): void {
     createQuestionMutation.mutate(
@@ -28,29 +42,48 @@ export function CreateQuestionModal({ panelId, close }: Props): JSX.Element {
     );
   }
 
+  function handleChange(e: ChangeEvent<HTMLTextAreaElement>): void {
+    flushSync(() => {
+      setContent(e.target.value);
+    });
+
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }
+
   return (
-    <div>
-      <span>{content.length}자</span>
-      <input
+    <div className="flex flex-col p-5">
+      <span className="ml-auto text-grey-dark">
+        <span className={content.length > 200 ? 'text-danger' : 'text-inherit'}>
+          {content.length}
+        </span>
+        /200자
+      </span>
+      <textarea
+        ref={textareaRefCallback}
+        className="rounded-md outline-none resize-none overflow-hidden focus:bg-off-white mt-2 mb-6 p-1"
+        placeholder="실시간으로 질문해보세요!"
         value={content}
-        onChange={(e) => {
-          setContent(e.target.value);
-        }}
+        onChange={handleChange}
       />
-      <button type="button" onClick={close}>
-        취소
-      </button>
-      <button
-        type="submit"
-        disabled={
-          content.length === 0 ||
-          content.length > 200 ||
-          createQuestionMutation.isLoading
-        }
-        onClick={handleSubmit}
-      >
-        질문 생성
-      </button>
+      <div className="flex gap-4 justify-end items-center">
+        <Button type="button" variant="secondary" onClick={close}>
+          취소
+        </Button>
+        <Button
+          type="submit"
+          disabled={
+            content.length === 0 ||
+            content.length > 200 ||
+            createQuestionMutation.isLoading
+          }
+          onClick={handleSubmit}
+        >
+          질문 생성
+        </Button>
+      </div>
     </div>
   );
 }

src/components/panel/__tests__/CreateQuestionModal.test.tsx

@@ -20,7 +20,7 @@ describe('CreatePanelModal', () => {
     const contentInput = screen.getByRole('textbox');
     fireEvent.change(contentInput, { target: { value: '안녕하세요' } });
 
-    expect(screen.getByText(/5자/)).toBeInTheDocument();
+    expect(screen.getByText(/5/)).toBeInTheDocument();
   });
 
   it('사용자가 0자 혹은 200자 초과로 입력하면 제출 버튼을 비활성화한다', () => {

src/pages/Panel.tsx

@@ -14,6 +14,7 @@ import {
   useLoaderData,
 } from 'react-router-dom';
 
+import { CreateQuestionModal } from '@/components/panel/CreateQuestionModal';
 import { InfiniteQuestionList } from '@/components/panel/InfiniteQuestionList';
 import { PanelHeader } from '@/components/panel/PanelHeader';
 import { ModalController } from '@/components/system/ModalController';
@@ -51,7 +52,7 @@ export function Panel(): JSX.Element {
   function handleOpenModal(): void {
     overlay.open(({ close }) => (
       <ModalController close={close} aria-label="질문 생성 모달">
-        질문 생성 모달
+        <CreateQuestionModal close={close} panelId={panel.id} />
       </ModalController>
     ));
   }