diff --git a/src/features/home/components/SearchResultGallery.test.tsx b/src/features/home/components/SearchResultGallery.test.tsx index 07119b2..5253104 100644 --- a/src/features/home/components/SearchResultGallery.test.tsx +++ b/src/features/home/components/SearchResultGallery.test.tsx @@ -151,5 +151,8 @@ describe('SearchResultGallery', () => { expect(gallery.scrollLeft).toBe(600); expect(scrollTo).toHaveBeenCalledWith({ left: 960, behavior: 'smooth' }); expect(onSelectRecord).not.toHaveBeenCalled(); + + act(() => firstCard.click()); + expect(onSelectRecord).toHaveBeenCalledWith(1); }); }); diff --git a/src/features/home/components/SearchResultGallery.tsx b/src/features/home/components/SearchResultGallery.tsx index c567c39..997b13e 100644 --- a/src/features/home/components/SearchResultGallery.tsx +++ b/src/features/home/components/SearchResultGallery.tsx @@ -12,7 +12,7 @@ interface SearchResultGalleryProps { } const SEARCH_RESULT_PAGE_SIZE = 6; -const DRAG_THRESHOLD_PX = 6; +const DRAG_THRESHOLD_PX = 10; const SEARCH_NOTE_METRICS = { bodyFontPx: 18, bodyLineHeightPx: 22, @@ -165,6 +165,9 @@ export function SearchResultGallery({ items, onSelectRecord }: SearchResultGalle onPointerCancel={finishDrag} onClickCapture={(event) => { if (didDragRef.current) { + // 포인터 드래그 직후 브라우저가 합성하는 click 한 번만 막는다. 여기서 소비하지 않으면 + // 이후 Record를 정상 클릭해도 상세 열기 콜백이 계속 차단된다(S15P11A705-440). + didDragRef.current = false; event.preventDefault(); event.stopPropagation(); } diff --git a/src/features/home/paperAperture.css b/src/features/home/paperAperture.css index 65c7511..7f9b105 100644 --- a/src/features/home/paperAperture.css +++ b/src/features/home/paperAperture.css @@ -1115,8 +1115,8 @@ min-height: 440px; overflow-x: auto; overflow-y: hidden; - padding: 10px 12px 8px; - scroll-padding-inline: 12px; + padding: 10px 0 8px; + scroll-padding-inline: 0; scroll-snap-type: x mandatory; scrollbar-color: theme('colors.log-mint') rgba(250, 247, 246, 0.82); cursor: grab; @@ -1144,7 +1144,9 @@ grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px 18px; min-width: 0; - padding: 4px 8px 8px; + /* gallery 바깥이 아니라 각 페이지 안에 여백을 둔다. gallery에 좌우 padding이 있으면 100%인 + 다음 페이지가 그 padding 틈으로 비쳐 한 페이지에 3열 + 흰 띠가 보인다(S15P11A705-440). */ + padding: 4px 20px 8px; scroll-snap-align: start; scroll-snap-stop: always; }