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: /질문 생성 모달/ }));
+ });
});