diff --git a/src/pages/Panel.tsx b/src/pages/Panel.tsx index 7e1340a3..858b50e2 100644 --- a/src/pages/Panel.tsx +++ b/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 }) => ( + + 질문 생성 모달 + + )); + } return (
+
); } diff --git a/src/pages/__tests__/Panel.test.tsx b/src/pages/__tests__/Panel.test.tsx index e2fd9c0a..407fb72b 100644 --- a/src/pages/__tests__/Panel.test.tsx +++ b/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( + + + , + ); + + const openButton = screen.getByRole('button', { + name: /질문 생성 모달 열기/, + }); + await userEvent.click(openButton); + + expect(screen.getByRole('dialog', { name: /질문 생성 모달/ })); + }); });