[Feat/#123] 이미지 전체보기 모달 구현 (#124)

* feat: 이미지 전체보기 모달 구현

* fix: routes/index.ts 읽히지 않은 import 삭제

src/assets/svgs/IcX.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+const SvgIcX = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 30 30"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m23.125 6.875-16.25 16.25M6.875 6.875l16.25 16.25"
+    />
+  </svg>
+);
+export default SvgIcX;

src/assets/svgs/index.ts

@@ -28,6 +28,7 @@ export { default as IcSearchCategoryCheerUnactivate } from './IcSearchCategoryCh
 export { default as IcSearchCategorySeasonUnactivate } from './IcSearchCategorySeasonUnactivate';
 export { default as IcToastCheck } from './IcToastCheck';
 export { default as IcToastError } from './IcToastError';
+export { default as IcX } from './IcX';
 export { default as ImgLogo } from './ImgLogo';
 export { default as ImgMypageProfileLogin } from './ImgMypageProfileLogin';
 export { default as ImgStore11Cm } from './ImgStore11Cm';

src/pages/store/components/ImageModal/ImageModal.css.ts

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+
+import { flexGenerator } from '@styles/generator.css';
+import { vars } from '@styles/theme.css';
+
+export const modalContainer = style([
+  flexGenerator('column', 'flex-start', 'flex-start'),
+  {
+    position: 'relative',
+    width: '100dvw',
+    maxWidth: 'var(--max-width)',
+    minWidth: 'var(--min-width)',
+    height: '100dvh',
+    backgroundColor: vars.colors.black,
+  },
+]);
+
+export const imageWrapper = style({
+  margin: 'auto 0',
+  width: '100%',
+});
+
+export const closeButton = style({
+  position: 'absolute',
+  top: '2rem',
+  right: '2rem',
+  cursor: 'pointer',
+});

src/pages/store/components/ImageModal/ImageModal.tsx

@@ -0,0 +1,19 @@
+import { IcX } from '@svgs';
+
+import { modalContainer, imageWrapper, closeButton } from './ImageModal.css';
+
+interface ImageModalProps {
+  imgUrl: string;
+  onClose: () => void;
+}
+
+const ImageModal = ({ imgUrl, onClose }: ImageModalProps) => {
+  return (
+    <div className={modalContainer}>
+      <img src={imgUrl} className={imageWrapper} />
+      <IcX width={30} height={30} className={closeButton} onClick={onClose} />
+    </div>
+  );
+};
+
+export default ImageModal;

src/pages/store/components/StoreDesign/StoreDesign.tsx

@@ -1,6 +1,9 @@
-import { Image } from '@components';
+import { useState } from 'react';
+
+import { Image, Modal } from '@components';
 
 import { gridStyle } from './StoreDesign.css';
+import ImageModal from '../ImageModal/ImageModal';
 
 interface DesignData {
   cakeId: number;
@@ -13,17 +16,39 @@ interface StoreDesignProps {
 }
 
 const StoreDesign = ({ designData = [] }: StoreDesignProps) => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const handleImageClick = (imageUrl: string) => {
+    setSelectedImage(imageUrl);
+  };
+
+  const closeImageModal = () => {
+    setSelectedImage(null);
+  };
+
   return (
-    <div className={gridStyle}>
-      {designData.map((design) => (
-        <Image
-          key={design.cakeId}
-          src={design.cakeImageUrl}
-          hasIcon
-          isActive={design.isLiked}
-        />
-      ))}
-    </div>
+    <>
+      <ul className={gridStyle}>
+        {designData.map((design) => (
+          <li
+            key={design.cakeId}
+            onClick={() => handleImageClick(design.cakeImageUrl)}
+          >
+            <Image
+              src={design.cakeImageUrl}
+              hasIcon
+              isActive={design.isLiked}
+            />
+          </li>
+        ))}
+      </ul>
+
+      {selectedImage && (
+        <Modal variant="center">
+          <ImageModal imgUrl={selectedImage} onClose={closeImageModal} />
+        </Modal>
+      )}
+    </>
   );
 };
 

src/routes/index.ts

@@ -2,7 +2,6 @@ import authRoutes from './authRoutes';
 import designListRoutes from './designListRoutes';
 import homeRoutes from './homeRoutes';
 import myPageRoutes from './myPageRoutes';
-import routePath from './routePath';
 import storeRoutes from './storeRoutes';
 import viewRoutes from './viewRoutes';