공지사항/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/entities/support/ui/detail/faq-detail.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState, useMemo } from 'react';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { FaqItem } from '../../model/types';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { sanitizeHtmlContent } from '@/shared/lib';
 
 export interface FaqDetaillProps {
   detailOn: boolean;
@@ -16,6 +17,7 @@ export const FaqDetail = ({
   faqItem
 }: FaqDetaillProps) => {
   const { t } = useTranslation();
+  const modalRef = useRef<HTMLDivElement>(null);
 
   const [cursorId, setCursorId] = useState<number>();
   const [seq, setSeq] = useState<string>();
@@ -23,6 +25,14 @@ export const FaqDetail = ({
   const [title, setTitle] = useState<string>();
   const [contents, setContents] = useState<string>();
 
+  // HTML 콘텐츠 정제 (메모이제이션)
+  const sanitizedContent = useMemo(() => {
+    return sanitizeHtmlContent(contents || '', {
+      imageClass: 'faq-content-img',
+      linkClass: 'faq-content-link'
+    });
+  }, [contents]);
+
   const onClickToClose = () => {
     setDetailOn(false);
   };
@@ -33,11 +43,34 @@ export const FaqDetail = ({
     setCategory(faqItem?.category);
     setTitle(faqItem?.title);
     setContents(faqItem?.contents);
-  }, [faqItem]);
+
+    // Scroll to top when detail page opens with data
+    if (detailOn && faqItem && faqItem.contents) {
+      setTimeout(() => {
+        if (modalRef.current) {
+          modalRef.current.scrollTop = 0;
+        }
+        window.scrollTo(0, 0);
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+
+        const containerElement = document.querySelector('.full-menu-container');
+        if (containerElement) {
+          containerElement.scrollTop = 0;
+        }
+
+        const faqDetail = document.querySelector('.faq-detail');
+        if (faqDetail) {
+          faqDetail.scrollTop = 0;
+        }
+      }, 100);
+    }
+  }, [faqItem, detailOn]);
 
   return (
     <>
       <motion.div
+        ref={modalRef}
         className="full-menu-modal"
         initial="hidden"
         animate={ (detailOn)? 'visible': 'hidden' }
@@ -48,7 +81,7 @@ export const FaqDetail = ({
         { contents &&
           <div className="full-menu-container pdw-16">
             <div className="full-menu-header">
-              <div className="full-menu-title center">{ t('support.qna.title') }</div>
+              <div className="full-menu-title center">{ t('support.faq.title') }</div>
               <div className="full-menu-actions">
                 <FullMenuClose
                   addClass="full-menu-close"
@@ -61,7 +94,7 @@ export const FaqDetail = ({
               <div className="faq-detail__divider"></div>
               <div
                 className="faq-detail__body"
-                dangerouslySetInnerHTML={{ __html: contents || '' }}
+                dangerouslySetInnerHTML={{ __html: sanitizedContent }}
               ></div>
             </div>
           </div>

src/entities/support/ui/detail/notice-detail.tsx

@@ -2,13 +2,13 @@ import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { useLocation } from 'react-router';
 import { NoticeDetailParams, NoticeDetailResponse, NoticeItem } from '../../model/types';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { useNoticeDetailMutation } from '../../api/use-notice-detail-mutation';
 import moment from 'moment';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
-import { snackBar } from '@/shared/lib';
+import { snackBar, sanitizeHtmlContent } from '@/shared/lib';
 
 export interface NoticeDetaillProps {
   detailOn: boolean;
@@ -23,15 +23,47 @@ export const NoticeDetail = ({
   const { t } = useTranslation();
   const [result, setResult] = useState<NoticeItem>({});
   const { mutateAsync: noticeDetail } = useNoticeDetailMutation();
+  const modalRef = useRef<HTMLDivElement>(null);
 
-  const callDetail = () => {
-    if(!!seq){
+  // HTML 콘텐츠 정제 (메모이제이션)
+  const sanitizedContent = useMemo(() => {
+    return sanitizeHtmlContent(result.contents || '', {
+      imageClass: 'notice-content-img',
+      linkClass: 'notice-content-link'
+    });
+  }, [result.contents]);
+
+  const onClickToClose = useCallback(() => {
+    setDetailOn(false);
+  }, [setDetailOn]);
+
+  const callDetail = useCallback(() => {
+    if(seq){
       let detailParams: NoticeDetailParams = {
         seq: seq,
       };
       noticeDetail(detailParams).then((rs: NoticeDetailResponse) => {
-        if(!!rs.seq){
+        if(rs.seq){
           setResult(rs);
+          // Scroll reset after data load
+          setTimeout(() => {
+            if (modalRef.current) {
+              modalRef.current.scrollTop = 0;
+            }
+            window.scrollTo(0, 0);
+            document.body.scrollTop = 0;
+            document.documentElement.scrollTop = 0;
+
+            const containerElement = document.querySelector('.full-menu-container');
+            if (containerElement) {
+              containerElement.scrollTop = 0;
+            }
+
+            const optionList = document.querySelector('.option-list');
+            if (optionList) {
+              optionList.scrollTop = 0;
+            }
+          }, 100);
         }
         else{
           snackBar(t('common.noData'));
@@ -44,19 +76,18 @@ export const NoticeDetail = ({
         }
       });
     }
-  };
-
-  const onClickToClose = () => {
-    setDetailOn(false);
-  };
+  }, [seq, noticeDetail, t, onClickToClose]);
 
   useEffect(() => {
+    if (detailOn && seq) {
       callDetail();
-  }, [seq]);
+    }
+  }, [seq, detailOn, callDetail]);
 
   return (
     <>
       <motion.div
+        ref={modalRef}
         className="full-menu-modal"
         initial="hidden"
         animate={ (detailOn)? 'visible': 'hidden' }
@@ -82,11 +113,8 @@ export const NoticeDetail = ({
                 <div className="notice-detail__divider"></div>
                 <div
                   className="notice-detail__body"
-                  dangerouslySetInnerHTML={{ __html: result.contents || '' }}
+                  dangerouslySetInnerHTML={{ __html: sanitizedContent }}
                 ></div>
-                {/*
-                <div className="notice-detail__body">{ result.contents }</div>
-                */}
               </div>
             </div>
           </div>

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

@@ -2,3 +2,4 @@ export * from './error';
 export * from './toast';
 export * from './web-view-bridge';
 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 문의 */