[#214] react-pdf a태그 부모 요소 크기 설정

.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)

packages/react-pdf/src/components/layer/Annotation.module.scss

@@ -14,18 +14,20 @@
  */
 
 .annotationLayer {
-    section {
-        position: absolute;
-    }
+    position: relative;
+}
+
+.annotationLayer section {
+    position: absolute;
+}
 
     .linkAnnotation > a,
     .buttonWidgetAnnotation.pushButton > a {
         position: absolute;
         font-size: 1em;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
+        cursor: pointer;
     }
 
     .linkAnnotation > a,

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})
 
@@ -70,25 +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
                 })
 
-                if (children.length > 0 && children?.[0]) {
-                    const firstChildren = children[0] as HTMLElement
-                    firstChildren.style.position = 'absolute'
-
-                    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%'
-                        }
-                    }
-                }
+                // cursor: pointer는 SCSS에서 처리됨
             })
         },
         [annotations, pdfLinkService, page, scale],
@@ -98,5 +82,14 @@ export const AnnotationLayer = memo(function AnnotationLayer() {
         return null
     }
 
-    return <div ref={drawAnnotation} className={cx('annotationLayer')} />
+    return (
+        <div
+            ref={drawAnnotation}
+            className={cx('annotationLayer')}
+            style={{
+                width: page ? `${Math.floor(page.getViewport({scale}).width)}px` : '100%',
+                height: page ? `${Math.floor(page.getViewport({scale}).height)}px` : '100%',
+            }}
+        />
+    )
 })