feat: 이미지 확대

.vitepress/theme/index.ts

@@ -2,7 +2,10 @@
 import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import mediumZoom from 'medium-zoom';
+import 'viewerjs/dist/viewer.min.css';
+import imageViewer from 'vitepress-plugin-image-viewer';
+import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue';
+import { useRoute } from 'vitepress';
 import './style.css'
 
 export default {
@@ -14,11 +17,12 @@ export default {
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-    router.onAfterRouteChanged = () => {
-      mediumZoom('.main img', {
-        margin: 100,  // 이미지와 화면의 여백 설정
-        background: '#000',  // 확대 시 배경색
-      });
-    };
+    app.component('vImageViewer', vImageViewer);
   },
+  setup() {
+    // Get route
+    const route = useRoute();
+    // Using
+    imageViewer(route);
+  }
 } satisfies Theme

01-architecture/part1-overview/ch01-prerequisite/index.md

@@ -464,7 +464,8 @@ npm install medium-zoom
 npm list
 ```
 
-- .vitepress\theme\index.ts
+- `.vitepress\theme\index.ts`
+
 ```ts
 import mediumZoom from 'medium-zoom';
 
@@ -482,7 +483,8 @@ export default {
 } satisfies Theme
 ```
 
-- .vitepress\theme\style.css
+- `.vitepress\theme\style.css`
+
 ```css
 .medium-zoom-overlay {
   z-index: 1000;
@@ -493,6 +495,41 @@ export default {
 }
 ```
 
+```shell
+# https://github.com/T-miracle/vitepress-plugin-image-viewer
+npm i vitepress-plugin-image-viewer
+
+# - `.vitepress\theme\index.ts`
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import 'viewerjs/dist/viewer.min.css';
+import imageViewer from 'vitepress-plugin-image-viewer';
+import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue';
+import { useRoute } from 'vitepress';
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+    app.component('vImageViewer', vImageViewer);
+  },
+  setup() {
+    // Get route
+    const route = useRoute();
+    // Using
+    imageViewer(route);
+  }
+} satisfies Theme
+```
+
 ## Chocolately 주요 명령
 ```shell
 #

03-tutorial/ddd-basic/ch01-exploring-a-complex-domain/index.md

@@ -2,4 +2,4 @@
 
 ## 도메인 불변 조건
 
-![](./.images/Invariants.png)
+![](./.images/Invariants.png){medium-zoom}

package.json

@@ -8,6 +8,6 @@
     "docs:preview": "vitepress preview"
   },
   "dependencies": {
-    "medium-zoom": "^1.1.0"
+    "vitepress-plugin-image-viewer": "^1.1.6"
   }
 }