Skip to content

fix: 기기 상세모달 스크롤 해결 #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
H-un1 merged 2 commits into from
Feb 12, 2026
Merged

fix: 기기 상세모달 스크롤 해결 #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6ed2ca
design: 기기 검색 페이지, 제품에 원화 기호 추가
Feb 12, 2026
48d6371
fix: 기기 상세모달에서 모달이 꺼질경우 스크롤 안 되는 이슈 해결
Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ProductCard/ProductCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {

{/* Price */}
<p className="font-body-1-sm text-gray-500">
{(product.price ?? 0).toLocaleString()}
₩ {(product.price ?? 0).toLocaleString()}
</p>

{/* Color Chips */}
Expand Down
35 changes: 22 additions & 13 deletions src/pages/devices/DeviceSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useRef } from 'react';
import { useRef, useLayoutEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import GNB from '@/components/Home/GNB';
import ProductCard from '@/components/ProductCard/ProductCard';
Expand All @@ -22,7 +22,6 @@ import { mapSearchDeviceToProduct } from '@/utils/mapSearchDevice';
import { useDeviceSearch } from '@/hooks/useDeviceSearch';
import { useScrollState } from '@/hooks/useScrollState';
import { useAddToCombination } from '@/hooks/useAddToCombination';
import { useEffect } from 'react';

const DeviceSearchPage = () => {
const [searchParams, setSearchParams] = useSearchParams();
Expand All @@ -46,27 +45,37 @@ const DeviceSearchPage = () => {
selectedDeviceType: selectedDevice?.deviceType ?? null,
selectedDeviceName: selectedDevice?.name ?? null,
onCloseModal: () => {
searchParams.delete('productId');
setSearchParams(searchParams);
// 새로운 URLSearchParams 객체 생성하여 React가 변경 감지하도록 함
setSearchParams((prev) => {
const newParams = new URLSearchParams(prev);
newParams.delete('productId');
return newParams;
});
},
});

/* 모달 열림 상태 확인 및 스크롤 잠금 (회색 배경이 보일 때와 동일한 조건) */
const isModalOpen = (!!selectedProduct && !combo.showSaveCompleteModal) || combo.showSaveCompleteModal;

useEffect(() => {
if (isModalOpen) {
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
} else {
/* selectedProductId가 null이 될 때 명시적으로 스크롤 unlock */
useLayoutEffect(() => {
if (selectedProductId === null) {
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
}
}, [selectedProductId]);

return () => {
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
};
/* 모달 열림 상태에 따른 스크롤 lock */
useLayoutEffect(() => {
if (isModalOpen) {
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';

return () => {
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
};
}
}, [isModalOpen]);

return (
Expand Down