ide-assi 0.329.0 → 0.330.0

package/dist/bundle.cjs.js

@@ -196896,26 +196896,59 @@ class IdeDiff extends HTMLElement
 {
 	#asisSrc;
 	#tobeSrc;
+	#asisPre; // <pre> 요소 참조 저장
+	#tobePre; // <pre> 요소 참조 저장
 
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-	
-	connectedCallback() {
 
+	connectedCallback() {
 		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-				${ninegrid.getCustomPath(this,"ideDiff.css")}
-			</style>
-
-			<div class="wrapper">
-				<div class="panel asis"><pre></pre></div>
-				<nx-splitter></nx-splitter>
-				<div class="panel tobe"><pre></pre></div>
-			</div>
-		`;
+          <style>
+             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
+             * {
+                box-sizing: border-box;
+             }
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+             ${ninegrid.getCustomPath(this,"ideDiff.css")}
+
+             /* 추가 CSS (필요 시) */
+             .wrapper {
+                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
+                 height: 100%; /* 부모의 높이를 채우도록 설정 */
+                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+             }
+             .panel {
+                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
+                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
+             }
+             .panel pre {
+                 margin: 0; /* pre 태그의 기본 마진 제거 */
+                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
+                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
+                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
+                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
+                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
+             }
+             ins {
+                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
+             }
+             del {
+                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 취소선 제거 (일반적으로) */
+             }
+          </style>
+
+          <div class="wrapper">
+             <div class="panel asis"><pre></pre></div>
+             <nx-splitter></nx-splitter>
+             <div class="panel tobe"><pre></pre></div>
+          </div>
+       `;
 
 		requestAnimationFrame(() => {
 			this.#init();
@@ -196923,38 +196956,71 @@ class IdeDiff extends HTMLElement
 	};
 
 	#init = () => {
+		// 패널 pre 요소에 대한 참조를 저장
+		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
+		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+
+		// 스크롤 동기화 이벤트 리스너 추가
+		this.#asisPre.addEventListener('scroll', this.#syncScroll);
+		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+	};
+
+	#syncScroll = (e) => {
+		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
+		// `e.target`이 스크롤 이벤트를 발생시킨 요소
+		if (e.target === this.#asisPre) {
+			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
+		} else if (e.target === this.#tobePre) {
+			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
+		}
 	};
 
 	#renderDiff = () => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
-		const diffs = dmp.diff_main(this.#asisSrc, this.#tobeSrc);
+		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
+		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
+		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
+
+		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisHtml = [];
 		const tobeHtml = [];
 
 		for (const [op, text] of diffs) {
+			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
+			const escapedText = text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
 			switch (op) {
 				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${text}</ins>`);
+					tobeHtml.push(`<ins>${escapedText}</ins>`);
+					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
+					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
 					break;
 				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${text}</del>`);
+					asisHtml.push(`<del>${escapedText}</del>`);
+					// 추가된 내용이 없으므로 tobe에는 공백을 유지
 					break;
 				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${text}</span>`);
-					tobeHtml.push(`<span>${text}</span>`);
+					asisHtml.push(`<span>${escapedText}</span>`);
+					tobeHtml.push(`<span>${escapedText}</span>`);
 					break;
 			}
 		}
 
-		this.shadowRoot.querySelector('.asis pre').innerHTML = asisHtml.join('');
-		this.shadowRoot.querySelector('.tobe pre').innerHTML = tobeHtml.join('');
+		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
+		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
+		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
+		this.#asisPre.innerHTML = asisHtml.join('');
+		this.#tobePre.innerHTML = tobeHtml.join('');
 	};
 
 
 	initialize = (src1, src2) => {
-		console.log(src1, src2);
+		console.log("Initializing IdeDiff with sources:", src1, src2);
 
 		this.#asisSrc = src1;
 		this.#tobeSrc = src2;

package/dist/bundle.esm.js

@@ -196892,26 +196892,59 @@ class IdeDiff extends HTMLElement
 {
 	#asisSrc;
 	#tobeSrc;
+	#asisPre; // <pre> 요소 참조 저장
+	#tobePre; // <pre> 요소 참조 저장
 
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-	
-	connectedCallback() {
 
+	connectedCallback() {
 		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-				${ninegrid.getCustomPath(this,"ideDiff.css")}
-			</style>
-
-			<div class="wrapper">
-				<div class="panel asis"><pre></pre></div>
-				<nx-splitter></nx-splitter>
-				<div class="panel tobe"><pre></pre></div>
-			</div>
-		`;
+          <style>
+             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
+             * {
+                box-sizing: border-box;
+             }
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+             ${ninegrid.getCustomPath(this,"ideDiff.css")}
+
+             /* 추가 CSS (필요 시) */
+             .wrapper {
+                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
+                 height: 100%; /* 부모의 높이를 채우도록 설정 */
+                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+             }
+             .panel {
+                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
+                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
+             }
+             .panel pre {
+                 margin: 0; /* pre 태그의 기본 마진 제거 */
+                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
+                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
+                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
+                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
+                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
+             }
+             ins {
+                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
+             }
+             del {
+                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 취소선 제거 (일반적으로) */
+             }
+          </style>
+
+          <div class="wrapper">
+             <div class="panel asis"><pre></pre></div>
+             <nx-splitter></nx-splitter>
+             <div class="panel tobe"><pre></pre></div>
+          </div>
+       `;
 
 		requestAnimationFrame(() => {
 			this.#init();
@@ -196919,38 +196952,71 @@ class IdeDiff extends HTMLElement
 	};
 
 	#init = () => {
+		// 패널 pre 요소에 대한 참조를 저장
+		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
+		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+
+		// 스크롤 동기화 이벤트 리스너 추가
+		this.#asisPre.addEventListener('scroll', this.#syncScroll);
+		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+	};
+
+	#syncScroll = (e) => {
+		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
+		// `e.target`이 스크롤 이벤트를 발생시킨 요소
+		if (e.target === this.#asisPre) {
+			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
+		} else if (e.target === this.#tobePre) {
+			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
+		}
 	};
 
 	#renderDiff = () => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
-		const diffs = dmp.diff_main(this.#asisSrc, this.#tobeSrc);
+		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
+		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
+		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
+
+		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisHtml = [];
 		const tobeHtml = [];
 
 		for (const [op, text] of diffs) {
+			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
+			const escapedText = text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
 			switch (op) {
 				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${text}</ins>`);
+					tobeHtml.push(`<ins>${escapedText}</ins>`);
+					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
+					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
 					break;
 				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${text}</del>`);
+					asisHtml.push(`<del>${escapedText}</del>`);
+					// 추가된 내용이 없으므로 tobe에는 공백을 유지
 					break;
 				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${text}</span>`);
-					tobeHtml.push(`<span>${text}</span>`);
+					asisHtml.push(`<span>${escapedText}</span>`);
+					tobeHtml.push(`<span>${escapedText}</span>`);
 					break;
 			}
 		}
 
-		this.shadowRoot.querySelector('.asis pre').innerHTML = asisHtml.join('');
-		this.shadowRoot.querySelector('.tobe pre').innerHTML = tobeHtml.join('');
+		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
+		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
+		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
+		this.#asisPre.innerHTML = asisHtml.join('');
+		this.#tobePre.innerHTML = tobeHtml.join('');
 	};
 
 
 	initialize = (src1, src2) => {
-		console.log(src1, src2);
+		console.log("Initializing IdeDiff with sources:", src1, src2);
 
 		this.#asisSrc = src1;
 		this.#tobeSrc = src2;

package/dist/components/ideDiff.js

@@ -1,31 +1,63 @@
 import ninegrid from "ninegrid2";
-//import { IdeAi } from "./ideAi.js";
 import {diff_match_patch} from 'diff-match-patch';
 
 export class IdeDiff extends HTMLElement
 {
 	#asisSrc;
 	#tobeSrc;
+	#asisPre; // <pre> 요소 참조 저장
+	#tobePre; // <pre> 요소 참조 저장
 
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-	
-	connectedCallback() {
 
+	connectedCallback() {
 		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-				${ninegrid.getCustomPath(this,"ideDiff.css")}
-			</style>
-
-			<div class="wrapper">
-				<div class="panel asis"><pre></pre></div>
-				<nx-splitter></nx-splitter>
-				<div class="panel tobe"><pre></pre></div>
-			</div>
-		`;
+          <style>
+             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
+             * {
+                box-sizing: border-box;
+             }
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+             ${ninegrid.getCustomPath(this,"ideDiff.css")}
+
+             /* 추가 CSS (필요 시) */
+             .wrapper {
+                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
+                 height: 100%; /* 부모의 높이를 채우도록 설정 */
+                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+             }
+             .panel {
+                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
+                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
+             }
+             .panel pre {
+                 margin: 0; /* pre 태그의 기본 마진 제거 */
+                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
+                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
+                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
+                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
+                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
+             }
+             ins {
+                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
+             }
+             del {
+                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 취소선 제거 (일반적으로) */
+             }
+          </style>
+
+          <div class="wrapper">
+             <div class="panel asis"><pre></pre></div>
+             <nx-splitter></nx-splitter>
+             <div class="panel tobe"><pre></pre></div>
+          </div>
+       `;
 
 		requestAnimationFrame(() => {
 			this.#init();
@@ -33,38 +65,71 @@ export class IdeDiff extends HTMLElement
 	};
 
 	#init = () => {
+		// 패널 pre 요소에 대한 참조를 저장
+		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
+		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+
+		// 스크롤 동기화 이벤트 리스너 추가
+		this.#asisPre.addEventListener('scroll', this.#syncScroll);
+		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+	};
+
+	#syncScroll = (e) => {
+		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
+		// `e.target`이 스크롤 이벤트를 발생시킨 요소
+		if (e.target === this.#asisPre) {
+			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
+		} else if (e.target === this.#tobePre) {
+			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
+		}
 	};
 
 	#renderDiff = () => {
 		const dmp = new diff_match_patch();
-		const diffs = dmp.diff_main(this.#asisSrc, this.#tobeSrc);
+		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
+		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
+		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
+
+		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisHtml = [];
 		const tobeHtml = [];
 
 		for (const [op, text] of diffs) {
+			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
+			const escapedText = text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${text}</ins>`);
+					tobeHtml.push(`<ins>${escapedText}</ins>`);
+					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
+					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
 					break;
 				case diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${text}</del>`);
+					asisHtml.push(`<del>${escapedText}</del>`);
+					// 추가된 내용이 없으므로 tobe에는 공백을 유지
 					break;
 				case diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${text}</span>`);
-					tobeHtml.push(`<span>${text}</span>`);
+					asisHtml.push(`<span>${escapedText}</span>`);
+					tobeHtml.push(`<span>${escapedText}</span>`);
 					break;
 			}
 		}
 
-		this.shadowRoot.querySelector('.asis pre').innerHTML = asisHtml.join('');
-		this.shadowRoot.querySelector('.tobe pre').innerHTML = tobeHtml.join('');
+		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
+		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
+		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
+		this.#asisPre.innerHTML = asisHtml.join('');
+		this.#tobePre.innerHTML = tobeHtml.join('');
 	};
 
 
 	initialize = (src1, src2) => {
-		console.log(src1, src2);
+		console.log("Initializing IdeDiff with sources:", src1, src2);
 
 		this.#asisSrc = src1;
 		this.#tobeSrc = src2;
@@ -73,4 +138,4 @@ export class IdeDiff extends HTMLElement
 	};
 }
 
-customElements.define("ide-diff", IdeDiff);
+customElements.define("ide-diff", IdeDiff);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.329.0",
+  "version": "0.330.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -1,31 +1,63 @@
 import ninegrid from "ninegrid2";
-//import { IdeAi } from "./ideAi.js";
 import {diff_match_patch} from 'diff-match-patch';
 
 export class IdeDiff extends HTMLElement
 {
 	#asisSrc;
 	#tobeSrc;
+	#asisPre; // <pre> 요소 참조 저장
+	#tobePre; // <pre> 요소 참조 저장
 
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-	
-	connectedCallback() {
 
+	connectedCallback() {
 		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-				${ninegrid.getCustomPath(this,"ideDiff.css")}
-			</style>
-
-			<div class="wrapper">
-				<div class="panel asis"><pre></pre></div>
-				<nx-splitter></nx-splitter>
-				<div class="panel tobe"><pre></pre></div>
-			</div>
-		`;
+          <style>
+             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
+             * {
+                box-sizing: border-box;
+             }
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+             ${ninegrid.getCustomPath(this,"ideDiff.css")}
+
+             /* 추가 CSS (필요 시) */
+             .wrapper {
+                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
+                 height: 100%; /* 부모의 높이를 채우도록 설정 */
+                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+             }
+             .panel {
+                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
+                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
+             }
+             .panel pre {
+                 margin: 0; /* pre 태그의 기본 마진 제거 */
+                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
+                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
+                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
+                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
+                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
+             }
+             ins {
+                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
+             }
+             del {
+                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 취소선 제거 (일반적으로) */
+             }
+          </style>
+
+          <div class="wrapper">
+             <div class="panel asis"><pre></pre></div>
+             <nx-splitter></nx-splitter>
+             <div class="panel tobe"><pre></pre></div>
+          </div>
+       `;
 
 		requestAnimationFrame(() => {
 			this.#init();
@@ -33,38 +65,71 @@ export class IdeDiff extends HTMLElement
 	};
 
 	#init = () => {
+		// 패널 pre 요소에 대한 참조를 저장
+		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
+		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+
+		// 스크롤 동기화 이벤트 리스너 추가
+		this.#asisPre.addEventListener('scroll', this.#syncScroll);
+		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+	};
+
+	#syncScroll = (e) => {
+		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
+		// `e.target`이 스크롤 이벤트를 발생시킨 요소
+		if (e.target === this.#asisPre) {
+			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
+		} else if (e.target === this.#tobePre) {
+			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
+		}
 	};
 
 	#renderDiff = () => {
 		const dmp = new diff_match_patch();
-		const diffs = dmp.diff_main(this.#asisSrc, this.#tobeSrc);
+		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
+		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
+		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
+
+		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisHtml = [];
 		const tobeHtml = [];
 
 		for (const [op, text] of diffs) {
+			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
+			const escapedText = text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${text}</ins>`);
+					tobeHtml.push(`<ins>${escapedText}</ins>`);
+					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
+					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
 					break;
 				case diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${text}</del>`);
+					asisHtml.push(`<del>${escapedText}</del>`);
+					// 추가된 내용이 없으므로 tobe에는 공백을 유지
 					break;
 				case diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${text}</span>`);
-					tobeHtml.push(`<span>${text}</span>`);
+					asisHtml.push(`<span>${escapedText}</span>`);
+					tobeHtml.push(`<span>${escapedText}</span>`);
 					break;
 			}
 		}
 
-		this.shadowRoot.querySelector('.asis pre').innerHTML = asisHtml.join('');
-		this.shadowRoot.querySelector('.tobe pre').innerHTML = tobeHtml.join('');
+		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
+		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
+		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
+		this.#asisPre.innerHTML = asisHtml.join('');
+		this.#tobePre.innerHTML = tobeHtml.join('');
 	};
 
 
 	initialize = (src1, src2) => {
-		console.log(src1, src2);
+		console.log("Initializing IdeDiff with sources:", src1, src2);
 
 		this.#asisSrc = src1;
 		this.#tobeSrc = src2;
@@ -73,4 +138,4 @@ export class IdeDiff extends HTMLElement
 	};
 }
 
-customElements.define("ide-diff", IdeDiff);
+customElements.define("ide-diff", IdeDiff);