feat(about): Add image modal

src/app/about/page.tsx

@@ -4,8 +4,10 @@ import { NextPage } from 'next';
 
 import AboutContainer from '~/about/Container';
 import Footer from '~/shared/components/Footer';
+import ImageModal from '~/shared/components/modal/ImageModal';
 import Navbar from '~/shared/components/nav/Navbar';
 import usePrint from '~/shared/hooks/usePrint';
+import { Portal } from '~/shared/portal/Container';
 
 const About: NextPage = () => {
   const { print } = usePrint();
@@ -14,6 +16,9 @@ const About: NextPage = () => {
       {!print && <Navbar />}
       <AboutContainer />
       {!print && <Footer />}
+      <Portal>
+        <ImageModal />
+      </Portal>
     </main>
   );
 };

src/features/about/work/card/content/ProjectDetail.tsx

@@ -1,14 +1,22 @@
-import { FunctionComponent, memo } from 'react';
+import { useAtom } from 'jotai';
+import { type FunctionComponent, type MouseEventHandler, memo } from 'react';
 
 import { Project } from '~/about/work/models';
 import DynamicImage from '~/shared/components/DynamicImage';
+import { imageSrcAtom } from '~/shared/components/modal/atoms';
 import usePrint from '~/shared/hooks/usePrint';
 
 type ProjectDetailProps = Project;
 
 const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
   ({ summary, body, img }) => {
     const { print } = usePrint();
+    const [, setImageSrc] = useAtom(imageSrcAtom);
+
+    const handleImageClick: MouseEventHandler<HTMLImageElement> = (e) => {
+      if (!(e.target instanceof HTMLImageElement)) return;
+      setImageSrc(e.target.src);
+    };
 
     return (
       <>
@@ -18,6 +26,7 @@ const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
             width={img.width}
             src={img.url}
             alt={img.alt}
+            onClick={handleImageClick}
           />
         )}
         <div className="text">

src/features/shared/components/DynamicImage.tsx

@@ -1,5 +1,9 @@
 import classNames from 'classnames';
-import { FunctionComponent, useState } from 'react';
+import {
+  type FunctionComponent,
+  type MouseEventHandler,
+  useState,
+} from 'react';
 
 type DynamicImageProps = {
   src: string;
@@ -8,6 +12,7 @@ type DynamicImageProps = {
   loading?: boolean;
   width?: number;
   height?: number;
+  onClick?: MouseEventHandler<HTMLImageElement>;
 };
 
 const DynamicImage: FunctionComponent<DynamicImageProps> = ({
@@ -17,6 +22,7 @@ const DynamicImage: FunctionComponent<DynamicImageProps> = ({
   src,
   alt,
   loading = false,
+  onClick,
 }) => {
   const [min, setMin] = useState(true);
   const handleMinClick = () => setMin(!min);
@@ -30,7 +36,14 @@ const DynamicImage: FunctionComponent<DynamicImageProps> = ({
       style={{ width, height }}
     >
       <button className={min ? 'min' : 'max'} onClick={handleMinClick} />
-      <img src={src} alt={alt} width={width} height={height} />
+      <img
+        className={onClick ? 'zoom' : undefined}
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        onClick={onClick}
+      />
     </div>
   );
 };

src/features/styles/common.scss

@@ -75,6 +75,10 @@ $target: #e73c7e;
       font-size: 3rem;
     }
   }
+
+  .zoom {
+    cursor: zoom-in;
+  }
 }
 
 .dynamic-image.min {

tsconfig.json

@@ -2,7 +2,11 @@
   "display": "blog",
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": false,
@@ -17,8 +21,12 @@
     "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
-      "~/*": ["src/features/*"],
-      "~/app/*": ["src/app/*"]
+      "~/*": [
+        "src/features/*"
+      ],
+      "~/app/*": [
+        "src/app/*"
+      ]
     },
     "plugins": [
       {
@@ -33,5 +41,7 @@
     "e2e/**/*.ts",
     ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }