From 6f7e87a864694ce1bd0ef3d5c2cc06b19644a594 Mon Sep 17 00:00:00 2001 From: starwook Date: Sat, 9 Nov 2024 03:57:14 +0900 Subject: [PATCH 1/3] =?UTF-8?q?style:=20View=20-=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20->=20HTML=20=EB=B3=80=ED=99=98=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #을 앞에 붙힐시 제목으로 인식됨 --- src/main/resources/static/js/translateTextForHtml.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/main/resources/static/js/translateTextForHtml.js b/src/main/resources/static/js/translateTextForHtml.js index 1b9fb8d0..6bc1265b 100644 --- a/src/main/resources/static/js/translateTextForHtml.js +++ b/src/main/resources/static/js/translateTextForHtml.js @@ -18,16 +18,15 @@ document.addEventListener("DOMContentLoaded", function () { mutationsList.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { if (node.nodeType === Node.ELEMENT_NODE) { - classesToFormat.some(classNames => { - if (node.classList.contains(...classNames.split(' '))) { + classesToFormat.forEach(classNames => { + const classList = classNames.split(' '); // 클래스 이름을 공백으로 나누어 배열로 만듭니다. + if (classList.every(className => node.classList.contains(className))) { // 모든 클래스를 체크합니다. if (classNames === 'message user') { formatTextWithLineBreakOnly(node); } else { formatElementText(node); } - return true; } - return false; }); } }); @@ -40,6 +39,7 @@ document.addEventListener("DOMContentLoaded", function () { // 포맷팅 함수 function formatElementText(element) { + console.log("in!!" + element) let formattedText = element.textContent.replace(/\n/g, '
'); // #으로 시작하는 텍스트를 대제목과 소제목으로 변환 @@ -53,6 +53,7 @@ function formatElementText(element) { element.innerHTML = formattedText; } + // message.user와 같이 줄바꿈만 적용 function formatTextWithLineBreakOnly(element) { element.innerHTML = element.textContent.replace(/\n/g, '
'); From 91e9b94151a2107c14d722173891ea5081b68b1e Mon Sep 17 00:00:00 2001 From: starwook Date: Sat, 9 Nov 2024 04:03:03 +0900 Subject: [PATCH 2/3] =?UTF-8?q?style:=20View=20-=20=EC=B1=97=EB=B4=87=20Fo?= =?UTF-8?q?nt=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit sonarcloud 제안 --- src/main/resources/static/css/question/chatbot.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main/resources/static/css/question/chatbot.css b/src/main/resources/static/css/question/chatbot.css index 5e0aee9b..b54d48d6 100644 --- a/src/main/resources/static/css/question/chatbot.css +++ b/src/main/resources/static/css/question/chatbot.css @@ -28,7 +28,6 @@ position: relative; width: fit-content; margin-top: -2px; - font-family: "NanumSquare Neo OTF-cBd", Helvetica; font-size: 20px; line-height: 40px; color: #000000; From 9776d67b04bbbdfc3fedb296438db442023daab2 Mon Sep 17 00:00:00 2001 From: starwook Date: Sat, 9 Nov 2024 04:42:17 +0900 Subject: [PATCH 3/3] =?UTF-8?q?style:=20View=20-=20=EC=A0=9C=EB=AA=A9=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=ED=91=9C=EC=8B=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/js/translateTextForHtml.js | 56 ++++++++++++------- 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/src/main/resources/static/js/translateTextForHtml.js b/src/main/resources/static/js/translateTextForHtml.js index 6bc1265b..d2213083 100644 --- a/src/main/resources/static/js/translateTextForHtml.js +++ b/src/main/resources/static/js/translateTextForHtml.js @@ -5,11 +5,7 @@ document.addEventListener("DOMContentLoaded", function () { // 초기 로딩된 요소에 대해 포맷팅 적용 classesToFormat.forEach(classNames => { document.querySelectorAll(`.${classNames.replace(' ', '.')}`).forEach(element => { - if (classNames === 'message user') { - formatTextWithLineBreakOnly(element); - } else { - formatElementText(element); - } + formatElement(element, classNames); }); }); @@ -19,13 +15,10 @@ document.addEventListener("DOMContentLoaded", function () { mutation.addedNodes.forEach(function (node) { if (node.nodeType === Node.ELEMENT_NODE) { classesToFormat.forEach(classNames => { - const classList = classNames.split(' '); // 클래스 이름을 공백으로 나누어 배열로 만듭니다. - if (classList.every(className => node.classList.contains(className))) { // 모든 클래스를 체크합니다. - if (classNames === 'message user') { - formatTextWithLineBreakOnly(node); - } else { - formatElementText(node); - } + const classList = classNames.split(' '); + // 모든 클래스가 있는지 확인 + if (classList.every(className => node.classList.contains(className))) { + formatElement(node, classNames); } }); } @@ -38,19 +31,40 @@ document.addEventListener("DOMContentLoaded", function () { }); // 포맷팅 함수 +function formatElement(element, classNames) { + + if (classNames === 'message user') { + formatTextWithLineBreakOnly(element); + } else { + formatElementText(element); + } +} + function formatElementText(element) { - console.log("in!!" + element) - let formattedText = element.textContent.replace(/\n/g, '
'); + // element의 텍스트를 줄바꿈으로 나누어 배열로 저장 + let lines = element.textContent.split('\n'); - // #으로 시작하는 텍스트를 대제목과 소제목으로 변환 - formattedText = formattedText.replace(/^### (.*?)(|$)/gm, '$1'); - formattedText = formattedText.replace(/^## (.*?)(|$)/gm, '$1'); - formattedText = formattedText.replace(/^# (.*?)(|$)/gm, '$1'); + // 각 줄을 처리하여 포맷팅 + let formattedLines = lines.map(line => { + let formattedLine = line; - // **로 둘러싸인 단어를 굵게 표시 - formattedText = formattedText.replace(/\*\*(.*?)\*\*/g, '$1'); + // 줄의 시작 부분에서 #을 확인하여 대제목과 소제목으로 변환 + if (formattedLine.startsWith('# ')) { + formattedLine = formattedLine.replace(/^# (.*)/, '$1'); + } else if (formattedLine.startsWith('## ')) { + formattedLine = formattedLine.replace(/^## (.*)/, '$1'); + } else if (formattedLine.startsWith('### ')) { + formattedLine = formattedLine.replace(/^### (.*)/, '$1'); + } + + // **로 둘러싸인 단어를 굵게 표시 + formattedLine = formattedLine.replace(/\*\*(.*?)\*\*/g, '$1'); + + return formattedLine; // 포맷팅된 줄 반환 + }); - element.innerHTML = formattedText; + // 포맷팅된 줄들을 다시 줄바꿈으로 연결 + element.innerHTML = formattedLines.join('
'); }