(짜깁기 디버깅)       <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT Chatting Page Editor</title>
  <link rel="stylesheet" href="https://cdn.oaistatic.com/assets/root-f6p3uecq.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    textarea, iframe {
      width: 100%;
      margin-bottom: 20px;
    }
    textarea {
      height: 200px;
    }
    iframe {
      min-height: 300px;
      border: 1px solid #ccc;
      background: #f9f9f9;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin-right: 10px;
    }
    button:disabled {
      background-color: #f4f4f4;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>ChatGPT Chatting Page Editor</h1>

  <input type="file" id="fileInput" accept=".mht,.mhtml">
  <button id="convertButton" disabled>HTML 추출</button>
  <button id="downloadButton" disabled>HTML 다운로드</button>

  <h2>추출된 HTML:</h2>
  <textarea id="textPreview"></textarea>
  <iframe id="htmlPreview"></iframe>

  <script>
    // 추출 태그를 웹사이트(웹페이지)마다 다르게 설정
    const converters = {
      chatgpt: {
        htmlStartTag: '<html',
        articleStartTag: '<article',
        articleEndTag: '</article>',
        removeTags: [/script/] // 스타일은 유지
      },
      otherAI: {
        htmlStartTag: '<html',
        articleStartTag: '<div class="chat-content">',
        articleEndTag: '</div>',
        removeTags: [/script/] // 스타일은 유지
      }
    };

    // 재사용 가능한 HTML 생성 함수
    function generateHTMLDocument(articleContent) {
      document.getElementById('downloadButton').style.backgroundColor = '#d1d1d1';
      document.getElementById('downloadButton').style.border = '3px solid #ccc';
      return `<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>추출된 HTML</title>
  <link rel="stylesheet" href="https://cdn.oaistatic.com/assets/root-f6p3uecq.css">
  <!-- or -->
  <link rel="stylesheet" href="https://cdn.oaistatic.com/assets/root-l30curo7.css">
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
    @media print {
      pre, .\\!whitespace-pre, .whitespace-pre-wrap {
        white-space: pre-wrap !important; /* 줄바꿈 */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100%; /* 폭 제한 */
        box-sizing: border-box;
      }
    }
  </style>
</head>
<body>
  ${articleContent}
  <script>
    document.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', () => {
        let textToCopy = null; // 공통 변수 선언

        // 코드 복사 버튼 처리
        if (button.classList.contains('code-copy-btn')) {
          const codeElement = button.closest('pre')?.querySelector('code');
          if (codeElement) {
            textToCopy = codeElement.innerText;
          }
        }

        // 글 복사 버튼 처리
        if (button.classList.contains('copy-btn')) {
          // .prose 요소 탐색
          const proseElement = button.closest('article')?.querySelector('.prose');
          if (proseElement) {
            textToCopy = proseElement.innerText;
          } else {
            // .whitespace-pre-wrap 요소 탐색
            const preWrapElement = button.closest('article')?.querySelector('.whitespace-pre-wrap');
            if (preWrapElement) {
              textToCopy = preWrapElement.innerText;
            }
          }
        }

        // 공통 복사 로직
        if (textToCopy) {
          const textArea = document.createElement('textarea');
          textArea.value = textToCopy;
          document.body.appendChild(textArea);
          textArea.select();

          try {
            document.execCommand('copy');
            const originalHTML = button.innerHTML; // 버튼의 원래 HTML 저장
            button.innerHTML = '복사됨!'; // 버튼의 내용을 변경
            setTimeout(() => {
              button.innerHTML = originalHTML; // 버튼의 원래 HTML 복원
            }, 2000);
          } catch (err) {
            alert('복사 실패: ' + err);
          }
          document.body.removeChild(textArea);
        } else {
          alert('복사할 내용을 찾을 수 없습니다.');
        }
      });
    });
  <\/script>
</body>
</html>`;
    }

    document.getElementById('fileInput').addEventListener('change', (event) => {
      const file = event.target.files[0];
      uploadedFileName = file.name;
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const content = e.target.result;



          // <article> 태그 추가
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content;

// 모든 헤딩 요소 탐색 및 <article> 태그로 래핑
tempDiv.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((heading) => {
  const parent = heading.parentElement;
  if (parent && !parent.matches("article")) {
    const article = document.createElement("article");
    parent.replaceWith(article);
    article.appendChild(parent.cloneNode(true));
  }
});

// 업데이트된 HTML 반영
const updatedHTML = tempDiv.innerHTML;
document.getElementById('textPreview').value = updatedHTML;
document.getElementById('htmlPreview').srcdoc = updatedHTML;





          const selectedConverter = converters.chatgpt; // 웹사이트 선택은 ChatGPT로

          const htmlStartIndex = content.indexOf(selectedConverter.htmlStartTag); // 변수명 수정

          if (htmlStartIndex !== -1) {
            let htmlContent = content.slice(htmlStartIndex)
              .replace(/<script[\s\S]*?<\/script>/gi, '')  // <script> 제거
              .replace(/<link[\s\S]*?>/gi, '') // <link> 제거
              .replace(/py-1/gi, 'code-copy-btn py-1') // 코드_복사_버튼 클래스 추가
              .replace(/rounded-lg/gi, 'copy-btn rounded-lg'); // 복사_버튼 클래스 추가

            if (!htmlContent || htmlContent.trim() === "") {
              document.getElementById('textPreview').value = 'HTML 콘텐츠가 비어 있습니다.';
              return;
            }




          

            const articleStartIndex = htmlContent.indexOf(selectedConverter.articleStartTag);
            const articleEndIndex = htmlContent.lastIndexOf(selectedConverter.articleEndTag) + selectedConverter.articleEndTag.length;

            if (articleStartIndex !== -1 && articleEndIndex !== -1) {
              // <article>이 있는 경우
              let articleContent = htmlContent.slice(articleStartIndex, articleEndIndex);

              // 지정된 태그 제거 (script만 제거)
              selectedConverter.removeTags.forEach((regex) => {
                articleContent = articleContent.replace(regex, '');
              });

              // 텍스트 미리보기 설정
              document.getElementById('textPreview').value = articleContent + " "; // 빈문자 추가: 첫화면부터 미리보기 창 편집된 창으로 업데이트

              // 실시간 미리보기 업데이트
document.getElementById('htmlPreview').srcdoc = generateHTMLDocument(articleContent);
} else {
  // <article>이 없는 경우, 전체 내용을 출력
  let articleContent = htmlContent; // 전체 HTML 사용
  document.getElementById('textPreview').value = articleContent;
  document.getElementById('htmlPreview').srcdoc = generateHTMLDocument(articleContent);
}

              // 버튼 활성화
              document.getElementById('convertButton').disabled = false;
              document.getElementById('downloadButton').disabled = false;
            } else {
              document.getElementById('textPreview').value = 'Article 태그를 찾을 수 없습니다.';
              document.getElementById('htmlPreview').srcdoc = '<p>Article 태그를 찾을 수 없습니다.</p>';
            }
          } else {
            document.getElementById('textPreview').value = 'HTML 콘텐츠를 찾을 수 없습니다.';
            document.getElementById('htmlPreview').srcdoc = '<p>HTML 콘텐츠를 찾을 수 없습니다.</p>';
          }
        };
        reader.readAsText(file);
      }
    });

    // 실시간으로 텍스트 편집 후 HTML 미리보기 반영
    document.getElementById('textPreview').addEventListener('input', () => {
      const articleContent = document.getElementById('textPreview').value;
      document.getElementById('htmlPreview').srcdoc = generateHTMLDocument(articleContent);
    });

    // 다운로드 버튼 클릭 시 편집된 HTML 다운로드
    document.getElementById('downloadButton').addEventListener('click', () => {
      const articleContent = document.getElementById('textPreview').value.trim(); // 편집된 텍스트 가져오기
      const fullHTML = generateHTMLDocument(articleContent); // 문서 양식에 넣기

      const blob = new Blob([fullHTML], { type: 'text/html' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = uploadedFileName; // 다운로드할 파일 이름
      link.click();
    });
  </script>
</body>
</html>