[패널 페이지] 질문 생성 모달 여는 버튼 #396

src/components/vectors/Send.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react';
+
+import React from 'react';
+
+export const Send = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    viewBox="0 -960 960 960"
+    width="48"
+    {...props}
+  >
+    <path d="M120-160v-640l760 320-760 320Zm60-93 544-227-544-230v168l242 62-242 60v167Zm0 0v-457 457Z" />
+  </svg>
+);

src/components/vectors/index.tsx

@@ -5,3 +5,4 @@ export { Account } from './Account';
 export { Add } from './Add';
 export { Menu } from './Menu';
 export { Clipboard } from './Clipboard';
+export { Send } from './Send';

src/pages/Panel.tsx

@@ -16,7 +16,9 @@ import {
 
 import { InfiniteQuestionList } from '@/components/panel/InfiniteQuestionList';
 import { PanelHeader } from '@/components/panel/PanelHeader';
-import { Logo } from '@/components/vectors';
+import { ModalController } from '@/components/system/ModalController';
+import { Send, Logo } from '@/components/vectors';
+import { useOverlay } from '@/hooks/useOverlay';
 import { getPanel } from '@/lib/api/panel';
 import { ApiError } from '@/lib/apiClient';
 // [NOTE] 로더 성공 반환값은 any 혹은 null로 고정한다
@@ -44,13 +46,33 @@ export const panelLoader: LoaderFunction = async ({ params }) => {
 
 export function Panel(): JSX.Element {
   const panel = useLoaderData() as PanelData;
+  const overlay = useOverlay();
 
+  function handleOpenModal(): void {
+    overlay.open(({ close }) => (
+      <ModalController close={close} aria-label="질문 생성 모달">
+        질문 생성 모달
+      </ModalController>
+    ));
+  }
   return (
     <main>
       <PanelHeader panel={panel} />
       <div className="container flex flex-col h-full max-w-2xl px-5 py-7">
         <InfiniteQuestionList panelId={panel.id} />
       </div>
+      <button
+        className={clsx(
+          'fixed bottom-0 right-0 m-7 p-3',
+          'rounded-full bg-primary shadow-3xl',
+          'hover:bg-primary-hover',
+        )}
+        type="button"
+        onClick={handleOpenModal}
+      >
+        <Send className="w-9 h-9 fill-white" />
+        <span className="sr-only">질문 생성 모달 열기</span>
+      </button>
     </main>
   );
 }

src/pages/__tests__/Panel.test.tsx

@@ -3,6 +3,7 @@ import type { Panel as PanelData } from '@/lib/api/panel';
 import React from 'react';
 
 import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { OverlayProvider } from '@/contexts/OverlayContext';
 import { renderWithQueryClient } from '@/lib/test-utils';
@@ -41,4 +42,19 @@ describe('패널 페이지', () => {
       ).toBeInTheDocument();
     });
   });
+
+  it('질문 생성 모달 열기 버튼을 누르면 질문 생성 모달을 보여준다', async () => {
+    renderWithQueryClient(
+      <OverlayProvider>
+        <Panel />
+      </OverlayProvider>,
+    );
+
+    const openButton = screen.getByRole('button', {
+      name: /질문 생성 모달 열기/,
+    });
+    await userEvent.click(openButton);
+
+    expect(screen.getByRole('dialog', { name: /질문 생성 모달/ }));
+  });
 });