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/components/QuizButton/Thumbnail.tsx

@@ -1,6 +1,10 @@
+'use client';
+
 import Image from 'next/image';
+import { useState } from 'react';
 
 import { ICON_URL, bgColor, cn } from '@/common';
+import { Modal } from '@/common/components/Modal';
 
 import { QuizButtonProps } from './type';
 
@@ -14,9 +18,13 @@ export function Thumbnail({
   imageUrl,
   name = '퀴즈',
   className,
+  ...rest
 }: ThumbnailProps) {
+  const [isShow, setIsShow] = useState(false);
+
   return (
     <div
+      {...rest}
       className={cn(
         'relative flex aspect-square w-140px items-center justify-center overflow-hidden rounded-8px',
         OXType &&
@@ -25,16 +33,34 @@ export function Thumbnail({
       )}
     >
       {imageUrl && (
-        <img
-          src={imageUrl}
-          alt={`${name}사진`}
-          style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            objectPosition: 'center',
-          }}
-        />
+        <>
+          <img
+            onClick={() => setIsShow(true)}
+            src={imageUrl}
+            alt={`${name}사진`}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              objectPosition: 'center',
+            }}
+          />
+          <Modal isShow={isShow} onClose={() => setIsShow(false)}>
+            <img
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className="rounded-8px"
+              src={imageUrl}
+              alt={`${name}사진`}
+              style={{
+                width: '100%',
+                objectFit: 'cover',
+                objectPosition: 'center',
+              }}
+            />
+          </Modal>
+        </>
       )}
       {OXType && (
         <Image

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

@@ -21,11 +21,7 @@ export function QuizButton({
   ...rest
 }: QuizButtonProps) {
   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"
@@ -43,11 +39,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 +58,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

@@ -24,11 +24,11 @@ export const Appbar = () => {
         <div className="flex w-full items-center justify-between pb-[20px] pt-[16px]">
           <div className="flex items-center gap-4px" role="button">
             <Image
-              layout="fixed"
-              width={60}
-              height={20}
+              width="0"
+              height="0"
               src={ICON_URL.TOKS_LOGO}
               alt="toks 로고"
+              className="h-auto w-60px"
             />
           </div>
           <button className="flex items-center gap-[12px]">

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,67 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import Image from 'next/image';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { ICON_URL } from '@/common';
+
+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 backdropVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+const Dimmer = ({
+  isShow,
+  onClose,
+  children,
+}: {
+  isShow: boolean;
+  onClose: VoidFunction;
+  children: ReactNode;
+}) => {
+  return (
+    <AnimatePresence>
+      {isShow && (
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          exit="hidden"
+          variants={backdropVariants}
+          transition={{ duration: 0.3 }}
+          onClick={() => onClose()}
+          className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-120/80 p-20px"
+        >
+          <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>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};