모달 컴포넌트 작업 (#23)

* feat: 모달 관련 로직 구성

* feat: 예제 모달 구성

app/api/quiz-submission/route.ts

@@ -1,6 +1,6 @@
 import { cookies } from 'next/headers';
 import { createClient } from '@/utils/supabase/server';
-import { NextRequest } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
 
 export async function POST(request: NextRequest) {
@@ -17,7 +17,7 @@ export async function POST(request: NextRequest) {
   );
 
   if (!validateBody.success) {
-    return Response.json(
+    return NextResponse.json(
       { error: '필드가 올바르지 않습니다.' },
       { status: 400 }
     );
@@ -30,7 +30,10 @@ export async function POST(request: NextRequest) {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return Response.json({ error: '로그인이 필요합니다.' }, { status: 401 });
+    return NextResponse.json(
+      { error: '로그인이 필요합니다.' },
+      { status: 401 }
+    );
   }
 
   const { data: answerChoice } = await supabase
@@ -47,11 +50,11 @@ export async function POST(request: NextRequest) {
   });
 
   if (choiceId !== answerChoice?.id) {
-    return Response.json(
+    return NextResponse.json(
       { error: '틀렸어요! 다시 고민해주세요.' },
       { status: 400 }
     );
   }
 
-  return Response.json({ data: '정답!' });
+  return NextResponse.json({ data: '정답!' });
 }

app/layout.tsx

@@ -1,7 +1,8 @@
 import { GeistSans } from 'geist/font/sans';
 import './globals.css';
-import QueryProvider from '@/providers/QueryProvider';
+import QueryProvider from '@/providers/query-provider';
 import { PcScreen } from '@/components/pc-screen';
+import OverlayProvider from '@/providers/overlay-provider';
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
@@ -27,7 +28,8 @@ export default function RootLayout({
 
           <div id="app-background" />
           <div id="app-screen" className="bg-white">
-            {children}
+            {/* NOTE: OverlayProvider에 div가 감싸져야 한다. */}
+            <OverlayProvider>{children}</OverlayProvider>
           </div>
         </body>
       </QueryProvider>

app/quizzes/[id]/quiz.tsx

@@ -1,14 +1,19 @@
 'use client';
 
+import Button from '@/components/common/buttons/button';
 import { useGetQuiz } from '@/hooks/quiz';
 
 export function Quiz({ id }: { id: number }) {
   const { data: quiz } = useGetQuiz(id);
+  const openModal = () => {
+    open();
+  };
 
   return (
     <div>
-      <div>나는 클라이언트 컴포넌트에서 불러온 값!</div>
+      {/* <div>나는 클라이언트 컴포넌트에서 불러온 값!</div> */}
       {JSON.stringify(quiz)}
+      <Button onClick={openModal}>모달 테스트</Button>
     </div>
   );
 }

components/common/modals/dimmer.tsx

@@ -0,0 +1,21 @@
+import { type Ref, forwardRef } from 'react';
+
+type DimmerProps = {
+  children: React.ReactNode;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+export default forwardRef(function Dimmer(
+  { children, onClick }: DimmerProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      onClick={onClick}
+      className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center backdrop-brightness-75"
+    >
+      {children}
+    </div>
+  );
+});

components/common/modals/modal.tsx

@@ -0,0 +1,26 @@
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+export default function Modal({ open, onClose, onConfirm }: ModalProps) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-40 w-40 flex-col justify-end rounded bg-white">
+      <div className="mt-auto">나는 테스트 모달입니다.</div>
+
+      <div className="mt-auto flex gap-2">
+        <button onClick={onClose} className="w-full text-center">
+          나는 취소
+        </button>
+        <button onClick={onConfirm} className="w-full text-center">
+          나는 확인
+        </button>
+      </div>
+    </div>
+  );
+}

components/common/modals/use-temp-modal.tsx

@@ -0,0 +1,46 @@
+import { useOverlay } from '@toss/use-overlay';
+import { useRef } from 'react';
+import Modal from './modal';
+import Dimmer from './dimmer';
+
+export default function useTempModal() {
+  const overlay = useOverlay();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const openModal = () => {
+    return new Promise<boolean>((resolve) => {
+      overlay.open(({ isOpen, close }) => {
+        const onClickDimmer = (e: React.MouseEvent) => {
+          resolve(false);
+          e.target === ref.current ? close() : null;
+        };
+
+        const onCloseModal = () => {
+          resolve(false);
+          close();
+        };
+
+        const onConfirmModal = () => {
+          resolve(true);
+          close();
+        };
+
+        return (
+          <>
+            {isOpen && (
+              <Dimmer ref={ref} onClick={onClickDimmer}>
+                <Modal
+                  open={isOpen}
+                  onClose={onCloseModal}
+                  onConfirm={onConfirmModal}
+                />
+              </Dimmer>
+            )}
+          </>
+        );
+      });
+    });
+  };
+
+  return { open: openModal };
+}