공지사항/FAQ 상세 페이지 HTML 콘텐츠 모바일 반응형 정제 기능 추가

- HTML 정제 유틸리티 함수 추가 (sanitizeHtmlContent)
- PC 웹용 인라인 스타일 제거 (color/background-color는 유지)
- 텍스트 기반 구분선(---, ===)을 HTML <hr> 태그로 자동 변환
- 이미지 및 링크 반응형 클래스 추가
- 연속된 공백/줄바꿈 정리
- 모바일 최적화 CSS 스타일 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/shared/lib/html-sanitize.ts

@@ -0,0 +1,104 @@
+/**
+ * HTML 콘텐츠를 모바일 반응형에 맞게 정제하는 함수
+ * - 불필요한 인라인 스타일 및 속성 제거
+ * - 이미지와 링크에 반응형 클래스 추가
+ * - 연속된 공백 및 줄바꿈 정리
+ *
+ * @param html - 정제할 HTML 문자열
+ * @param options - 정제 옵션
+ * @returns 정제된 HTML 문자열
+ */
+export const sanitizeHtmlContent = (
+  html: string,
+  options?: {
+    imageClass?: string;
+    linkClass?: string;
+  }
+): string => {
+  if (!html) return '';
+
+  const { imageClass = 'content-img', linkClass = 'content-link' } = options || {};
+
+  // DOMParser를 사용하여 HTML 파싱
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+
+  // 모든 요소에서 불필요한 style 속성 제거 (color는 유지)
+  doc.querySelectorAll('[style]').forEach(el => {
+    const htmlEl = el as HTMLElement;
+    const currentStyle = htmlEl.style;
+    const color = currentStyle.color;
+    const backgroundColor = currentStyle.backgroundColor;
+
+    // 기존 스타일 제거
+    htmlEl.removeAttribute('style');
+
+    // color와 background-color만 복원
+    if (color) {
+      htmlEl.style.color = color;
+    }
+    if (backgroundColor) {
+      htmlEl.style.backgroundColor = backgroundColor;
+    }
+  });
+
+  // 모든 요소에서 불필요한 속성 제거
+  doc.querySelectorAll('*').forEach(el => {
+    const attrsToRemove = ['class', 'align', 'lang'];
+    attrsToRemove.forEach(attr => {
+      if (el.hasAttribute(attr)) {
+        el.removeAttribute(attr);
+      }
+    });
+  });
+
+  // XML namespace 태그 제거
+  doc.querySelectorAll('o\\:p').forEach(el => el.remove());
+
+  // 이미지에 반응형 클래스 추가
+  doc.querySelectorAll('img').forEach(img => {
+    img.classList.add(imageClass);
+  });
+
+  // 링크에 클래스 추가
+  doc.querySelectorAll('a').forEach(link => {
+    link.classList.add(linkClass);
+    // 외부 링크는 새 탭에서 열기
+    if (!link.hasAttribute('target')) {
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
+    }
+  });
+
+  // body의 내용만 추출
+  let content = doc.body.innerHTML;
+
+  // 텍스트 기반 구분선을 HTML <hr> 태그로 변환
+  // 10개 이상의 연속된 -, =, _ 문자를 구분선으로 인식
+  content = content.replace(/[-]{10,}/g, '<hr class="text-divider">');
+  content = content.replace(/[=]{10,}/g, '<hr class="text-divider">');
+  content = content.replace(/[_]{10,}/g, '<hr class="text-divider">');
+
+  // 혼합된 패턴도 처리 (예: --=--=-)
+  content = content.replace(/[-=_\s]{10,}/g, (match) => {
+    // 공백만 있는 경우는 제외
+    if (match.trim().length >= 10) {
+      return '<hr class="text-divider">';
+    }
+    return match;
+  });
+
+  // 연속된 &nbsp; 제거 (최대 2개까지만 허용)
+  content = content.replace(/(&nbsp;){3,}/g, '&nbsp;&nbsp;');
+
+  // 연속된 <br> 태그 정리 (최대 2개까지만 허용)
+  content = content.replace(/(<br\s*\/?>){3,}/gi, '<br><br>');
+
+  // 빈 태그 제거
+  content = content.replace(/<(\w+)>(\s|&nbsp;)*<\/\1>/gi, '');
+
+  // 줄바꿈 정리
+  content = content.replace(/\r\n/g, '');
+
+  return content.trim();
+};

src/shared/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './error';
 export * from './toast';
 export * from './web-view-bridge';
-export * from './masking';
+export * from './masking';
+export * from './html-sanitize';

src/shared/ui/assets/css/style.css

@@ -2527,8 +2527,75 @@ div .credit-period {
     white-space: pre-line;
     font-size: var(--fs-17);
     line-height: 1.3;
-    color: var(--color-2D3436)
+    color: var(--color-2D3436);
+    overflow-x: hidden;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
 }
+
+.notice-detail__body * {
+    max-width: 100% !important;
+    box-sizing: border-box;
+}
+
+.notice-detail__body img {
+    height: auto !important;
+    width: auto !important;
+    max-width: 100% !important;
+}
+
+.notice-detail__body table {
+    display: block;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.notice-detail__body pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.notice-detail__body .notice-content-img {
+    display: block;
+    margin: 16px auto;
+    max-width: 100%;
+    height: auto;
+}
+
+.notice-detail__body .notice-content-link {
+    color: var(--color-0083FF);
+    text-decoration: underline;
+    word-break: break-all;
+    display: inline-block;
+    margin: 4px 0;
+}
+
+.notice-detail__body p {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.notice-detail__body strong {
+    font-weight: 600;
+    color: var(--color-2D3436);
+}
+
+.notice-detail__body br + br {
+    display: block;
+    margin-top: 8px;
+}
+
+.notice-detail__body .text-divider {
+    border: none;
+    border-top: 1px solid var(--color-EaEaEa);
+    margin: 20px 0;
+    height: 0;
+}
+
 .notice-alert {
     padding: 14px 16px;
     background: var(--color-F4F8FF);
@@ -5773,6 +5840,72 @@ ul.txn-amount-detail li span:last-child {
 .faq-detail__body {
     font-size: var(--fs-17);
     color: var(--color-2D3436);
+    overflow-x: hidden;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+}
+
+.faq-detail__body * {
+    max-width: 100% !important;
+    box-sizing: border-box;
+}
+
+.faq-detail__body img {
+    height: auto !important;
+    width: auto !important;
+    max-width: 100% !important;
+}
+
+.faq-detail__body table {
+    display: block;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.faq-detail__body pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+.faq-detail__body .faq-content-img {
+    display: block;
+    margin: 16px auto;
+    max-width: 100%;
+    height: auto;
+}
+
+.faq-detail__body .faq-content-link {
+    color: var(--color-0083FF);
+    text-decoration: underline;
+    word-break: break-all;
+    display: inline-block;
+    margin: 4px 0;
+}
+
+.faq-detail__body p {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.faq-detail__body strong {
+    font-weight: 600;
+    color: var(--color-2D3436);
+}
+
+.faq-detail__body br + br {
+    display: block;
+    margin-top: 8px;
+}
+
+.faq-detail__body .text-divider {
+    border: none;
+    border-top: 1px solid #EAEAEA;
+    margin: 20px 0;
+    height: 0;
 }
 
 /* 117 1:1 문의 */