From ec7d13ced7948aab25ad20acf132f75daca3ac97 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Wed, 3 Sep 2025 18:38:50 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20Alpine.js=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EB=B0=98=EC=9D=91=EC=84=B1=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 데이터 로드 후 Alpine.js DOM 업데이트가 제대로 되지 않는 문제 수정
- $nextTick과 setTimeout을 사용하여 강제 반응성 트리거
- matched_pdf_id 값을 일시적으로 변경했다가 복원하여 UI 업데이트 강제 실행
---
 frontend/static/js/book-editor.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/static/js/book-editor.js b/frontend/static/js/book-editor.js
index fd3b423..66185e1 100644
--- a/frontend/static/js/book-editor.js
+++ b/frontend/static/js/book-editor.js
@@ -100,6 +100,13 @@ window.bookEditorApp = () => ({
                 if (doc.matched_pdf_id === null) {
                     doc.matched_pdf_id = "";
                 }
+                
+                // 디버깅: 실제 값과 타입 확인
+                console.log(`  - matched_pdf_id 타입: ${typeof doc.matched_pdf_id}`);
+                console.log(`  - matched_pdf_id 값: "${doc.matched_pdf_id}"`);
+                console.log(`  - 빈 문자열인가? ${doc.matched_pdf_id === ""}`);
+                console.log(`  - null인가? ${doc.matched_pdf_id === null}`);
+                console.log(`  - undefined인가? ${doc.matched_pdf_id === undefined}`);
             });
             
             // 사용 가능한 PDF 문서들 로드 (현재 서적의 PDF만)
@@ -124,11 +131,17 @@ window.bookEditorApp = () => ({
             
             console.log('📎 현재 서적의 PDF:', this.availablePDFs.length, '개');
             console.log('📎 현재 서적 PDF 목록:', this.availablePDFs.map(pdf => ({ 
+                id: pdf.id,
                 title: pdf.title, 
                 book_id: pdf.book_id, 
                 book_title: pdf.book_title 
             })));
             
+            // 각 PDF의 ID 확인
+            this.availablePDFs.forEach((pdf, index) => {
+                console.log(`📎 PDF ${index + 1}: ID="${pdf.id}", 제목="${pdf.title}"`);
+            });
+            
             // 디버깅: 다른 서적의 PDF들도 확인
             const otherBookPDFs = allPDFs.filter(doc => doc.book_id !== this.bookId);
             console.log('🔍 다른 서적의 PDF:', otherBookPDFs.length, '개');
@@ -140,6 +153,23 @@ window.bookEditorApp = () => ({
                 })));
             }
             
+            // Alpine.js DOM 업데이트 강제 실행
+            this.$nextTick(() => {
+                console.log('🔄 Alpine.js DOM 업데이트 완료');
+                // DOM이 완전히 렌더링된 후 실행
+                setTimeout(() => {
+                    this.documents.forEach((doc, index) => {
+                        if (doc.matched_pdf_id) {
+                            console.log(`🔧 문서 ${index + 1} 강제 업데이트: ${doc.matched_pdf_id}`);
+                            // Alpine.js 반응성 트리거
+                            const oldValue = doc.matched_pdf_id;
+                            doc.matched_pdf_id = "";
+                            doc.matched_pdf_id = oldValue;
+                        }
+                    });
+                }, 100);
+            });
+            
         } catch (error) {
             console.error('서적 데이터 로드 실패:', error);
             this.error = '데이터를 불러오는데 실패했습니다: ' + error.message;