fix: Lock background scroll when image viewer and setting is open

Preserve scroll position while preventing background scroll on image viewer and setting open

Author: PresentKim

src/components/ImageViewer.tsx

@@ -16,6 +16,7 @@ import {cn, createRawImageUrl, getMcmetaPath} from '@/utils'
 import {saveAs} from 'file-saver'
 import type {GithubRepo} from '@/utils'
 import {useSettingStore} from '@/stores/settingStore'
+import {useScrollLock} from '@/hooks/useScrollLock'
 
 // Format file size to human-readable format
 function formatFileSize(bytes: number): string {
@@ -83,6 +84,8 @@ export function ImageViewer({
     ? currentImage.substring(0, currentImage.lastIndexOf('/'))
     : null
 
+  useScrollLock(open)
+
   const handleDownloadCurrent = useCallback(async () => {
     try {
       const url = createRawImageUrl(repo, currentImage)
@@ -731,7 +734,7 @@ export function ImageViewer({
                     <Button
                       variant="outline"
                       size="icon"
-                      className="size-14 min-w-14 flex-shrink-0"
+                      className="size-14 min-w-14 shrink-0"
                       onClick={handlePrevious}
                       aria-label="Previous image">
                       <ChevronLeft className="size-10" />
@@ -749,7 +752,7 @@ export function ImageViewer({
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="size-14 min-w-14 overlay-button flex-shrink-0"
+                      className="size-14 min-w-14 overlay-button shrink-0"
                       onClick={handleNext}
                       aria-label="Next image">
                       <ChevronRight className="size-10" />
@@ -797,7 +800,7 @@ export function ImageViewer({
                     type="button"
                     size="sm"
                     variant="outline"
-                    className="h-8 px-3 py-1 text-sm font-semibold flex-shrink-0"
+                    className="h-8 px-3 py-1 text-sm font-semibold shrink-0"
                     onClick={handleDownloadCurrent}
                     aria-label="Download current image">
                     <Download className="size-4" />

src/components/SettingButton.tsx

@@ -22,10 +22,12 @@ import {
 } from '@/stores/settingStore'
 import {useGithubRateLimitStore} from '@/stores/githubApiStore'
 import {useState, useMemo} from 'react'
+import {useScrollLock} from '@/hooks/useScrollLock'
 
 export function SettingButton() {
   const settings = useSettingStore()
   const rateLimit = useGithubRateLimitStore()
+  const [isOpen, setIsOpen] = useState(false)
   const [githubToken, setGithubToken] = useState('')
   const [columnCount, setColumnCount] = useState(0)
   const [pixelated, setPixelated] = useState(true)
@@ -79,6 +81,7 @@ export function SettingButton() {
   }
 
   const handleOpenChange = (open: boolean) => {
+    setIsOpen(open)
     // Reset the values if the dialog is opened
     if (open) {
       const initial = {
@@ -99,8 +102,11 @@ export function SettingButton() {
     }
   }
 
+  // 배경 스크롤 잠금 (설정 다이얼로그 열릴 때)
+  useScrollLock(isOpen)
+
   return (
-    <Dialog onOpenChange={handleOpenChange}>
+    <Dialog onOpenChange={handleOpenChange} modal={false}>
       <DialogTrigger asChild>
         <Button
           aria-label="Settings"

src/hooks/useScrollLock.ts

@@ -0,0 +1,38 @@
+import {useEffect, useRef} from 'react'
+
+/**
+ * Lock background scroll while preserving current scroll position.
+ */
+export function useScrollLock(active: boolean) {
+  const scrollYRef = useRef(0)
+
+  useEffect(() => {
+    if (!active) return
+
+    const scrollY =
+      window.scrollY ||
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop ||
+      0
+    scrollYRef.current = scrollY
+
+    const originalBodyPosition = document.body.style.position
+    const originalBodyTop = document.body.style.top
+    const originalBodyWidth = document.body.style.width
+    const originalBodyOverflowY = document.body.style.overflowY
+
+    document.body.style.position = 'fixed'
+    document.body.style.top = `-${scrollY}px`
+    document.body.style.width = '100%'
+    document.body.style.overflowY = 'hidden'
+
+    return () => {
+      document.body.style.position = originalBodyPosition
+      document.body.style.top = originalBodyTop
+      document.body.style.width = originalBodyWidth
+      document.body.style.overflowY = originalBodyOverflowY
+      window.scrollTo(0, scrollYRef.current)
+    }
+  }, [active])
+}