feat(toks-components, quiz): Image Preview 기능 구현

src/app/my-page/components/LogoutBar/index.tsx

@@ -23,10 +23,11 @@ export const LogoutBar = () => {
           로그아웃
         </Text>
         <Image
+          className="h-auto w-24px"
           src={ICON_URL.CHEVRON_RIGHT}
           alt="로그아웃 버튼"
-          width={24}
-          height={24}
+          width="0"
+          height="0"
         />
       </button>
       <LogoutBottomSheet onClose={() => setIsShow(false)} isShow={isShow} />

src/app/my-page/components/LogoutBottonSheet/index.tsx

@@ -18,11 +18,12 @@ export const LogoutBottomSheet = ({ onClose, isShow }: BottomSheetProps) => {
             로그아웃 하시겠어요?
           </Text>
           <Image
+            className="h-auto w-14px"
             onClick={() => onClose()}
             src={ICON_URL.SMALL_X}
             alt="바텀시트 닫기버튼"
-            width={14}
-            height={14}
+            width="0"
+            height="0"
           />
         </div>
         <div className="h-40px" />

src/app/my-page/components/UserInfo/index.tsx

@@ -28,7 +28,7 @@ export const UserInfo = () => {
           {user?.nickname}
         </Text>
         <Image
-          className="ml-4px"
+          className="ml-4px h-auto w-24px"
           src={ICON_URL.CHEVRON_RIGHT}
           alt="닉네임 수정 버튼"
           width={24}

src/app/my-page/page.tsx

@@ -45,10 +45,10 @@ const MyPage = () => {
           똑스에서 풀고 싶은 퀴즈가 있다면?
         </Text>
         <Image
-          className="mx-auto my-20px"
+          className="mx-auto my-20px h-auto w-160px"
           src={ICON_URL.EMOJI_ROCKET}
-          width={160}
-          height={160}
+          width="0"
+          height="0"
           alt="로켓 이미지"
         />
         <Button

src/app/nickname/components/NicknameBox.tsx

@@ -43,10 +43,11 @@ export const NicknameBox = ({
       )}
     >
       <Image
+        className="h-auto w-52px"
         src={ICON_URL.EMOJI_DROOLING}
         alt="똑스 아이콘"
-        width={52.5}
-        height={52.5}
+        width="0"
+        height="0"
       />
       <div className="mt-16px flex w-full flex-col items-center">
         <Text typo="headingM" color="white">

src/app/quiz/[quizId]/@detail/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { useState } from 'react';
 
 import {
   QuizButton,
@@ -13,6 +14,7 @@ import {
 } from '@/app/quiz/hooks/';
 import { OX, QuizButtonType } from '@/app/quiz/models/quiz';
 import { Text, bgColor } from '@/common';
+import { Modal } from '@/common/components/Modal';
 
 import { Comments } from '../../components/Comment/Comments';
 
@@ -25,6 +27,7 @@ type Props = {
 function DetailPage({ params: { quizId } }: Props) {
   const { submitQuiz } = useSubmitQuizMutation(quizId);
   const { data: quizDetail, isLoading } = useGetQuizDetailQuery(quizId);
+  const [isShow, setIsShow] = useState(false);
 
   if (quizDetail === undefined || isLoading) {
     return <SkeletonQuizDetail />;
@@ -75,11 +78,26 @@ 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
+                  className="rounded-16px"
+                  src={oxImageUrl}
+                  alt="OX퀴즈 설명"
+                  style={{
+                    width: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
+                  }}
+                />
+              </Modal>
+            </>
           )}
           <div className="flex gap-16px">
             {checkSameQuizType('A_B_') ? (

src/app/quiz/components/QuizButton/Thumbnail.tsx

@@ -1,11 +1,15 @@
+'use client';
+
 import Image from 'next/image';
+import { HTMLAttributes } from 'react';
 
 import { ICON_URL, bgColor, cn } from '@/common';
 
 import { QuizButtonProps } from './type';
 
 interface ThumbnailProps
-  extends Pick<QuizButtonProps, 'OXType' | 'imageUrl' | 'className'> {
+  extends Pick<QuizButtonProps, 'OXType' | 'imageUrl' | 'className'>,
+    HTMLAttributes<HTMLDivElement> {
   name?: string;
 }
 
@@ -14,9 +18,11 @@ export function Thumbnail({
   imageUrl,
   name = '퀴즈',
   className,
+  ...rest
 }: ThumbnailProps) {
   return (
     <div
+      {...rest}
       className={cn(
         'relative flex aspect-square w-140px items-center justify-center overflow-hidden rounded-8px',
         OXType &&

src/app/quiz/components/QuizButton/index.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import clsx from 'clsx';
+import { useState } from 'react';
 
 import { Text, bgColor } from '@/common';
+import { Modal } from '@/common/components/Modal';
 
 import { ProgressBar } from './ProgressBar';
 import { Thumbnail } from './Thumbnail';
@@ -20,19 +22,35 @@ export function QuizButton({
   name,
   ...rest
 }: QuizButtonProps) {
+  const [isShow, setIsShow] = useState(false);
   return (
-    <button
-      className={clsx(className, 'flex flex-1 flex-col items-center')}
-      disabled={isSubmitted}
-      {...rest}
-    >
+    <div className={clsx(className, 'flex flex-1 flex-col items-center')}>
       {(OXType || imageUrl) && (
-        <Thumbnail
-          className="mb-24px w-full"
-          OXType={OXType}
-          imageUrl={imageUrl}
-          name={name}
-        />
+        <>
+          <Thumbnail
+            className="mb-24px w-full"
+            OXType={OXType}
+            imageUrl={imageUrl}
+            name={name}
+            onClick={() => {
+              setIsShow(true);
+            }}
+          />
+          {!OXType && (
+            <Modal isShow={isShow} onClose={() => setIsShow(false)}>
+              <img
+                className="rounded-8px"
+                src={imageUrl}
+                alt={`${name}사진`}
+                style={{
+                  width: '100%',
+                  objectFit: 'cover',
+                  objectPosition: 'center',
+                }}
+              />
+            </Modal>
+          )}
+        </>
       )}
       <div
         className={clsx(
@@ -43,11 +61,15 @@ export function QuizButton({
         {isSubmitted && (
           <ProgressBar percentage={percentage} isSelected={isSelected} />
         )}
-        <div className="absolute z-10 flex h-full w-full items-center justify-center">
+        <button
+          className="absolute z-10 flex h-full w-full items-center justify-center"
+          disabled={isSubmitted}
+          {...rest}
+        >
           <Text typo="bodyBold" color="gray10">
             {name}
           </Text>
-        </div>
+        </button>
       </div>
       {isSubmitted && participationLabel && (
         <Text
@@ -58,6 +80,6 @@ export function QuizButton({
           {participationLabel}
         </Text>
       )}
-    </button>
+    </div>
   );
 }

src/app/quiz/components/ScrollToTopButton/index.tsx

@@ -46,9 +46,10 @@ export function ScrollToTopButton() {
       }}
     >
       <Image
+        className="h-auto w-16px"
         src={ICON_URL.CHEVRON_UP}
-        width={16}
-        height={9}
+        width="0"
+        height="0"
         alt="맨 위로가기 아이콘"
       />
     </button>

src/common/components/Appbar/index.tsx

@@ -57,11 +57,11 @@ export const Appbar = () => {
             }}
           >
             <Image
-              layout="fixed"
-              width={60}
-              height={20}
+              width="0"
+              height="0"
               src={ICON_URL.TOKS_LOGO}
               alt="toks 로고"
+              className="h-auto w-60px"
             />
             {/* TODO: POPOVER 구현 */}
             <Tooltip

src/common/components/BackHeader/index.tsx

@@ -14,10 +14,11 @@ export const BackHeader = () => {
         <div className="flex h-full w-full items-center justify-between">
           <button type="button" onClick={() => router.back()}>
             <Image
+              className="h-auto w-24px"
               src={ICON_URL.CHEVRON_LEFT_BIG}
               alt="뒤로가기 버튼"
-              width={24}
-              height={24}
+              width="0"
+              height="0"
             />
           </button>
         </div>

src/common/components/Modal/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import Image from 'next/image';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { ICON_URL } from '@/common';
+import { cn } from '@/common/utils';
+
+import { GlobalPortal } from '../GlobalPortal';
+
+type ModalProp = {
+  isShow: boolean;
+  onClose: VoidFunction;
+};
+
+export const Modal = ({
+  isShow,
+  onClose,
+  children,
+}: PropsWithChildren<ModalProp>) => {
+  return (
+    <GlobalPortal.Consumer>
+      <Dimmer isShow={isShow} onClose={onClose} children={children} />
+    </GlobalPortal.Consumer>
+  );
+};
+
+const Dimmer = ({
+  isShow,
+  onClose,
+  children,
+}: {
+  isShow: boolean;
+  onClose: VoidFunction;
+  children: ReactNode;
+}) => {
+  return (
+    <div
+      onClick={() => {
+        onClose();
+      }}
+      className={cn(
+        'fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-120/80 p-20px',
+        {
+          hidden: !isShow,
+          'animate-fade-in-back-drop': isShow,
+        }
+      )}
+    >
+      <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>
+  );
+};