✨ feat: 썸네일 image 모달 적용중 ...

depromeet · Feb 13, 2024 · 5259bd3 · 5259bd3
1 parent a0cc2ca
commit 5259bd3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/src/app/quiz/[quizId]/@detail/page.tsx b/src/app/quiz/[quizId]/@detail/page.tsx
@@ -15,6 +15,8 @@ import { OX, QuizButtonType } from '@/app/quiz/models/quiz';
 import { Text, bgColor } from '@/common';
 
 import { Comments } from '../../components/Comment/Comments';
+import { Modal } from '@/common/components/Modal';
+import { useState } from 'react';
 
 type Props = {
   params: {
@@ -54,6 +56,8 @@ function DetailPage({ params: { quizId } }: Props) {
   const checkSelectedAnswer = (buttonType: QuizButtonType) =>
     replyAnswer === buttonType;
 
+  const [isShow, setIsShow] = useState(false);
+
   return (
     <div>
       <section
@@ -75,11 +79,25 @@ function DetailPage({ params: { quizId } }: Props) {
         </Text>
         <div className="mt-48px">
           {isVisibleOXImage && (
-            <Thumbnail
-              className="mb-24px w-full"
-              imageUrl={oxImageUrl}
-              name="OX퀴즈 설명"
-            />
+            <>
+              <Thumbnail
+                className="mb-24px w-full"
+                imageUrl={oxImageUrl}
+                name="OX퀴즈 설명"
+                onClick={() => setIsShow(true)}
+              />
+              {/* <Modal isShow={isShow} onClose={() => setIsShow(false)}>
+                <img
+                  src={oxImageUrl}
+                  alt="OX퀴즈 설명"
+                  style={{
+                    width: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
+                  }}
+                />
+              </Modal> */}
+            </>
           )}
           <div className="flex gap-16px">
             {checkSameQuizType('A_B_') ? (

diff --git a/src/app/quiz/components/QuizButton/Thumbnail.tsx b/src/app/quiz/components/QuizButton/Thumbnail.tsx
@@ -5,23 +5,24 @@ import Image from 'next/image';
 import { ICON_URL, bgColor, cn } from '@/common';
 
 import { QuizButtonProps } from './type';
+import { HTMLAttributes } from 'react';
 
 interface ThumbnailProps
-  extends Pick<QuizButtonProps, 'OXType' | 'imageUrl' | 'className'> {
+  extends Pick<QuizButtonProps, 'OXType' | 'imageUrl' | 'className'>,
+    HTMLAttributes<HTMLDivElement> {
   name?: string;
-  onClick: () => void;
 }
 
 export function Thumbnail({
   OXType,
   imageUrl,
   name = '퀴즈',
   className,
-  onClick,
+  ...rest
 }: ThumbnailProps) {
   return (
     <div
-      onClick={() => onClick()}
+      {...rest}
       className={cn(
         'relative flex aspect-square w-140px items-center justify-center overflow-hidden rounded-8px',
         OXType &&

diff --git a/src/app/quiz/components/QuizButton/index.tsx b/src/app/quiz/components/QuizButton/index.tsx
@@ -33,7 +33,6 @@ export function QuizButton({
             imageUrl={imageUrl}
             name={name}
             onClick={() => {
-              console.log('hihi');
               setIsShow(true);
             }}
           />

diff --git a/src/common/components/Modal/index.tsx b/src/common/components/Modal/index.tsx
@@ -1,8 +1,11 @@
 'use client';
 
+import Image from 'next/image';
+
 import { cn } from '@/common/utils';
 import { GlobalPortal } from '../GlobalPortal';
 import { PropsWithChildren, ReactNode } from 'react';
+import { ICON_URL } from '@/common';
 
 type ModalProp = {
   isShow: boolean;
@@ -43,7 +46,12 @@ const Dimmer = ({
         }
       )}
     >
-      {children}
+      <div className="flex flex-col">
+        <button className="flex justify-end pb-16px" onClick={() => onClose()}>
+          <Image src={ICON_URL.CLOSE} alt="close" width={24} height={24} />
+        </button>
+        {children}
+      </div>
     </div>
   );
 };