From 640880eea7b83cfe77bdfd37f50240af00784774 Mon Sep 17 00:00:00 2001 From: "sehoon.kim" Date: Tue, 14 Apr 2026 14:00:54 +0900 Subject: [PATCH 1/8] =?UTF-8?q?[#214]=20react-pdf=20a=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=B6=80=EB=AA=A8=20=EC=9A=94=EC=86=8C=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-pdf/src/components/layer/Annotation.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 0ca72c86..2cd1ce79 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -76,6 +76,8 @@ export const AnnotationLayer = memo(function AnnotationLayer() { if (children.length > 0 && children?.[0]) { const firstChildren = children[0] as HTMLElement firstChildren.style.position = 'absolute' + firstChildren.style.width = viewport.width + 'px' + firstChildren.style.height = viewport.height + 'px' const aTags = firstChildren.getElementsByTagName('a') as unknown as HTMLAnchorElement[] @@ -86,6 +88,7 @@ export const AnnotationLayer = memo(function AnnotationLayer() { elem.style.left = '0' elem.style.width = '100%' elem.style.height = '100%' + elem.style.cursor = 'pointer' } } } From 55a947d1f456f56de37987516b05810a18665aad Mon Sep 17 00:00:00 2001 From: "sehoon.kim" Date: Tue, 14 Apr 2026 14:00:54 +0900 Subject: [PATCH 2/8] =?UTF-8?q?[#214]=20react-pdf=20a=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=B6=80=EB=AA=A8=20=EC=9A=94=EC=86=8C=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-pdf/src/components/layer/Annotation.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 0ca72c86..2cd1ce79 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -76,6 +76,8 @@ export const AnnotationLayer = memo(function AnnotationLayer() { if (children.length > 0 && children?.[0]) { const firstChildren = children[0] as HTMLElement firstChildren.style.position = 'absolute' + firstChildren.style.width = viewport.width + 'px' + firstChildren.style.height = viewport.height + 'px' const aTags = firstChildren.getElementsByTagName('a') as unknown as HTMLAnchorElement[] @@ -86,6 +88,7 @@ export const AnnotationLayer = memo(function AnnotationLayer() { elem.style.left = '0' elem.style.width = '100%' elem.style.height = '100%' + elem.style.cursor = 'pointer' } } } From 83f3fa0afbd265f36b81d32e97c544ce79e106fc Mon Sep 17 00:00:00 2001 From: Sehoon <46037493+ttppggnnss@users.noreply.github.com> Date: Tue, 14 Apr 2026 14:03:47 +0900 Subject: [PATCH 3/8] Create hip-dancers-trade.md --- .changeset/hip-dancers-trade.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/hip-dancers-trade.md diff --git a/.changeset/hip-dancers-trade.md b/.changeset/hip-dancers-trade.md new file mode 100644 index 00000000..580a5a0b --- /dev/null +++ b/.changeset/hip-dancers-trade.md @@ -0,0 +1,7 @@ +--- +"@naverpay/react-pdf": patch +--- + +[#214] react-pdf a태그 부모 요소 크기 설정 + +PR: [[#214] react-pdf a태그 부모 요소 크기 설정](https://github.com/NaverPayDev/pie/pull/215) From d90d6cb7aa45759aa5aeae0670b516260405757b Mon Sep 17 00:00:00 2001 From: "sehoon.kim" Date: Tue, 14 Apr 2026 14:16:52 +0900 Subject: [PATCH 4/8] =?UTF-8?q?[#214]=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20Math.floor=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-pdf/src/components/layer/Annotation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 2cd1ce79..18a1f125 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -76,8 +76,8 @@ export const AnnotationLayer = memo(function AnnotationLayer() { if (children.length > 0 && children?.[0]) { const firstChildren = children[0] as HTMLElement firstChildren.style.position = 'absolute' - firstChildren.style.width = viewport.width + 'px' - firstChildren.style.height = viewport.height + 'px' + firstChildren.style.width = Math.floor(viewport.width) + 'px' + firstChildren.style.height = Math.floor(viewport.height) + 'px' const aTags = firstChildren.getElementsByTagName('a') as unknown as HTMLAnchorElement[] From 8801e03270bb58e0841ef707f30f234882547c16 Mon Sep 17 00:00:00 2001 From: "sehoon.kim" Date: Tue, 14 Apr 2026 15:22:33 +0900 Subject: [PATCH 5/8] =?UTF-8?q?[#214]=20fix:=20react-pdf=20PDF=20annotatio?= =?UTF-8?q?n=20a=ED=83=9C=EA=B7=B8=20=ED=81=B4=EB=A6=AD=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 부모 요소(element)에 viewport 크기를 설정하여 모든 annotation의 a 태그가 올바른 클릭 영역을 가지도록 개선했습니다. 변경사항: - annotation layer 컨테이너에 viewport 기반 크기 설정 - 첫 번째 annotation만이 아닌 모든 a 태그에 스타일 적용 - cursor: pointer 스타일 추가로 링크 UX 개선 - unused variable 제거 및 타입 캐스팅 간소화 - 코드 의도를 명확히 하는 주석 추가 이전 코드는 children[0](첫 번째 annotation section)에만 크기를 설정했지만, 이제는 element 자체에 설정하여 모든 annotation의 a 태그가 올바르게 처리됩니다. --- .../components/layer/Annotation.module.scss | 1 + .../src/components/layer/Annotation.tsx | 36 +++++++++---------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/react-pdf/src/components/layer/Annotation.module.scss b/packages/react-pdf/src/components/layer/Annotation.module.scss index 2d1d31c1..66728bbe 100644 --- a/packages/react-pdf/src/components/layer/Annotation.module.scss +++ b/packages/react-pdf/src/components/layer/Annotation.module.scss @@ -26,6 +26,7 @@ left: 0; width: 100%; height: 100%; + cursor: pointer; } .linkAnnotation > a, diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 18a1f125..722c260d 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -42,8 +42,7 @@ export const AnnotationLayer = memo(function AnnotationLayer() { /** * rerender 전에 해당 layer를 초기화합니다. */ - const children = element.children - Array.from(children).map((el) => el.remove()) + Array.from(element.children).forEach((el) => el.remove()) const viewport = page.getViewport({scale}).clone({dontFlip: true}) @@ -73,23 +72,22 @@ export const AnnotationLayer = memo(function AnnotationLayer() { // Do nothing }) - if (children.length > 0 && children?.[0]) { - const firstChildren = children[0] as HTMLElement - firstChildren.style.position = 'absolute' - firstChildren.style.width = Math.floor(viewport.width) + 'px' - firstChildren.style.height = Math.floor(viewport.height) + 'px' - - const aTags = firstChildren.getElementsByTagName('a') as unknown as HTMLAnchorElement[] - - if (aTags.length > 0) { - for (const elem of aTags) { - elem.style.position = 'absolute' - elem.style.top = '0' - elem.style.left = '0' - elem.style.width = '100%' - elem.style.height = '100%' - elem.style.cursor = 'pointer' - } + // element 크기 설정: SCSS에서 width: 100% / height: 100%는 부모 크기 기준 + // 실제 픽셀 크기를 명시해야 a 태그 크기가 결정됨 + // annotation layer 컨테이너의 크기를 viewport에 맞춰 설정하여 내부의 모든 a 태그가 올바른 클릭 영역을 가지도록 함 + element.style.width = Math.floor(viewport.width) + 'px' + element.style.height = Math.floor(viewport.height) + 'px' + + const aTags = Array.from(element.getElementsByTagName('a')) + + if (aTags.length > 0) { + for (const elem of aTags as HTMLAnchorElement[]) { + elem.style.position = 'absolute' + elem.style.top = '0' + elem.style.left = '0' + elem.style.width = '100%' + elem.style.height = '100%' + elem.style.cursor = 'pointer' } } }) From 0c8f2ffafd7e48811ecac614df1e07b7045f0220 Mon Sep 17 00:00:00 2001 From: sehoon-kim Date: Tue, 14 Apr 2026 19:50:46 +0900 Subject: [PATCH 6/8] =?UTF-8?q?[#214]=20fix:=20annotation=20layer=20?= =?UTF-8?q?=EC=A0=88=EB=8C=80=20=EC=9C=84=EC=B9=98=20=EC=A7=80=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20SCSS=20?= =?UTF-8?q?=EA=B7=9C=EC=B9=99=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit annotation layer 컨테이너에 position: absolute를 적용하여 TextLayer와 동일한 패턴으로 normal flow에서 제거. 명시적 width/height 설정 시 페이지 높이가 2배로 늘어나는 문제 방지. CSS Module 스코핑으로 동작하지 않는 cursor: pointer 규칙 제거. --- packages/react-pdf/src/components/layer/Annotation.module.scss | 1 - packages/react-pdf/src/components/layer/Annotation.tsx | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-pdf/src/components/layer/Annotation.module.scss b/packages/react-pdf/src/components/layer/Annotation.module.scss index 66728bbe..2d1d31c1 100644 --- a/packages/react-pdf/src/components/layer/Annotation.module.scss +++ b/packages/react-pdf/src/components/layer/Annotation.module.scss @@ -26,7 +26,6 @@ left: 0; width: 100%; height: 100%; - cursor: pointer; } .linkAnnotation > a, diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 722c260d..82716fe9 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -75,6 +75,9 @@ export const AnnotationLayer = memo(function AnnotationLayer() { // element 크기 설정: SCSS에서 width: 100% / height: 100%는 부모 크기 기준 // 실제 픽셀 크기를 명시해야 a 태그 크기가 결정됨 // annotation layer 컨테이너의 크기를 viewport에 맞춰 설정하여 내부의 모든 a 태그가 올바른 클릭 영역을 가지도록 함 + element.style.position = 'absolute' + element.style.top = '0' + element.style.left = '0' element.style.width = Math.floor(viewport.width) + 'px' element.style.height = Math.floor(viewport.height) + 'px' From 095ead4030f66714e4cb209aa0e5de6e5116f9f9 Mon Sep 17 00:00:00 2001 From: "sehoon.kim" Date: Wed, 15 Apr 2026 17:38:52 +0900 Subject: [PATCH 7/8] =?UTF-8?q?[#214]=20fix:=20react-pdf=20annotation=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=98=81=EC=97=AD=20=EC=A0=95=ED=99=95?= =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EC=95=88=EC=A0=95=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit viewport 크기 동기화 방식을 TextLayer와 동일하게 inline style로 변경하여 클릭 영역 정확성을 보장하고, 불필요한 스타일을 제거하여 안정성을 높였습니다. 변경사항: - annotation layer 크기 설정을 return 문 inline style로 이동 - SCSS에서 width/height 100% 제거 (동적 viewport 동기화 불가) - a 태그 스타일 간소화 (cursor: pointer만 유지) - annotation layer 구조 개선 (position: relative 명시) 이전 방식은 CSS 100%로 인한 viewport 불일치와 스케일 변경 시 클릭 영역 버그가 있었으나, 이제 TextLayer와 동일한 패턴으로 안정적인 동작을 보장합니다. --- .../components/layer/Annotation.module.scss | 9 ++++--- .../src/components/layer/Annotation.tsx | 25 ++++++++----------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/react-pdf/src/components/layer/Annotation.module.scss b/packages/react-pdf/src/components/layer/Annotation.module.scss index 2d1d31c1..5e03fd21 100644 --- a/packages/react-pdf/src/components/layer/Annotation.module.scss +++ b/packages/react-pdf/src/components/layer/Annotation.module.scss @@ -14,9 +14,12 @@ */ .annotationLayer { - section { - position: absolute; - } + position: relative; +} + +.annotationLayer section { + position: absolute; +} .linkAnnotation > a, .buttonWidgetAnnotation.pushButton > a { diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 82716fe9..623d1b1e 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -72,24 +72,10 @@ export const AnnotationLayer = memo(function AnnotationLayer() { // Do nothing }) - // element 크기 설정: SCSS에서 width: 100% / height: 100%는 부모 크기 기준 - // 실제 픽셀 크기를 명시해야 a 태그 크기가 결정됨 - // annotation layer 컨테이너의 크기를 viewport에 맞춰 설정하여 내부의 모든 a 태그가 올바른 클릭 영역을 가지도록 함 - element.style.position = 'absolute' - element.style.top = '0' - element.style.left = '0' - element.style.width = Math.floor(viewport.width) + 'px' - element.style.height = Math.floor(viewport.height) + 'px' - const aTags = Array.from(element.getElementsByTagName('a')) if (aTags.length > 0) { for (const elem of aTags as HTMLAnchorElement[]) { - elem.style.position = 'absolute' - elem.style.top = '0' - elem.style.left = '0' - elem.style.width = '100%' - elem.style.height = '100%' elem.style.cursor = 'pointer' } } @@ -102,5 +88,14 @@ export const AnnotationLayer = memo(function AnnotationLayer() { return null } - return
+ return ( +
+ ) }) From 36661c875dea9f737d2d23bef0b34296fa24b0e6 Mon Sep 17 00:00:00 2001 From: "sehoon.kim" Date: Wed, 15 Apr 2026 18:00:52 +0900 Subject: [PATCH 8/8] =?UTF-8?q?[#214]=20fix:=20react-pdf=20annotation=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20?= =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SCSS와 inline style 간 충돌을 제거하고 스타일을 정리하여 코드 일관성과 유지보수성을 개선했습니다. 변경사항: - SCSS에서 width/height 100% 제거 (inline style과 충돌 방지) - cursor: pointer를 SCSS로 통합 (스타일 일관성) - 불필요한 a 태그 처리 코드 제거 - error handling 주석 개선 이제 annotation layer는 TextLayer와 동일한 패턴으로 viewport 크기를 동기화하고, 스타일은 SCSS에서 일관되게 관리됩니다. --- .../src/components/layer/Annotation.module.scss | 3 +-- packages/react-pdf/src/components/layer/Annotation.tsx | 10 ++-------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/react-pdf/src/components/layer/Annotation.module.scss b/packages/react-pdf/src/components/layer/Annotation.module.scss index 5e03fd21..8aadce86 100644 --- a/packages/react-pdf/src/components/layer/Annotation.module.scss +++ b/packages/react-pdf/src/components/layer/Annotation.module.scss @@ -27,8 +27,7 @@ font-size: 1em; top: 0; left: 0; - width: 100%; - height: 100%; + cursor: pointer; } .linkAnnotation > a, diff --git a/packages/react-pdf/src/components/layer/Annotation.tsx b/packages/react-pdf/src/components/layer/Annotation.tsx index 623d1b1e..814c7880 100644 --- a/packages/react-pdf/src/components/layer/Annotation.tsx +++ b/packages/react-pdf/src/components/layer/Annotation.tsx @@ -69,16 +69,10 @@ export const AnnotationLayer = memo(function AnnotationLayer() { } await new PdfAnnotationLayer(annotationLayerParameters).render(parameters).catch(() => { - // Do nothing + // PDF annotation rendering failed - silently ignore for now }) - const aTags = Array.from(element.getElementsByTagName('a')) - - if (aTags.length > 0) { - for (const elem of aTags as HTMLAnchorElement[]) { - elem.style.cursor = 'pointer' - } - } + // cursor: pointer는 SCSS에서 처리됨 }) }, [annotations, pdfLinkService, page, scale],