From 9ed8c15684ec84c11828df402601760b0131a35f Mon Sep 17 00:00:00 2001
From: "wkylin.w@gmail.com" <wkylin.w@gmail.com>
Date: Mon, 20 Jan 2025 09:53:57 +0800
Subject: [PATCH] feat: view img

---
 package-lock.json        | 17 +++++++++++++++++
 package.json             |  1 +
 src/pages/home/index.jsx |  6 +++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d279253a..a988eb26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,6 +85,7 @@
         "react-lazy-load-image-component": "^1.6.3",
         "react-loading-skeleton": "^3.5.0",
         "react-markdown": "^9.0.3",
+        "react-medium-image-zoom": "^5.2.13",
         "react-parallax-tilt": "^1.7.272",
         "react-pdf": "^9.2.1",
         "react-player": "^2.16.0",
@@ -34358,6 +34359,22 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-medium-image-zoom": {
+      "version": "5.2.13",
+      "resolved": "https://registry.npmmirror.com/react-medium-image-zoom/-/react-medium-image-zoom-5.2.13.tgz",
+      "integrity": "sha512-KcBL4OsoUQJgIFh6vQgt/6sRGqDy6bQBcsbhGD2tsy4B5Pw3dWrboocVOyIm76RRALEZ6Qwp3EDvIvfEv0m5sg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/rpearce"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-parallax-tilt": {
       "version": "1.7.272",
       "resolved": "https://registry.npmmirror.com/react-parallax-tilt/-/react-parallax-tilt-1.7.272.tgz",
diff --git a/package.json b/package.json
index 71ae6dfa..65891b9b 100644
--- a/package.json
+++ b/package.json
@@ -287,6 +287,7 @@
     "react-lazy-load-image-component": "^1.6.3",
     "react-loading-skeleton": "^3.5.0",
     "react-markdown": "^9.0.3",
+    "react-medium-image-zoom": "^5.2.13",
     "react-parallax-tilt": "^1.7.272",
     "react-pdf": "^9.2.1",
     "react-player": "^2.16.0",
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 1796c10b..d4d0c631 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -62,6 +62,8 @@ import {
   getDirection,
 } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
 import styles from './index.module.less'
 
 // const boxList = Array.apply(null, Array(10))
@@ -476,7 +478,9 @@ const Home = () => {
           to={{ opacity: 1, transform: 'translate(0, 0)' }}
           triggerOnce={true}
         >
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <Zoom>
+            <img src="https://picsum.photos/360/200.jpg" alt="" />
+          </Zoom>
         </AnimateOnScreen.DiyAnimation>
       </section>
       <section style={{ marginBottom: 40, display: 'flex' }}>