diff --git a/src/entities/support/ui/detail/faq-detail.tsx b/src/entities/support/ui/detail/faq-detail.tsx index cef13f4..c87b8f6 100644 --- a/src/entities/support/ui/detail/faq-detail.tsx +++ b/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(null); const [cursorId, setCursorId] = useState(); const [seq, setSeq] = useState(); @@ -23,6 +25,14 @@ export const FaqDetail = ({ const [title, setTitle] = useState(); const [contents, setContents] = useState(); + // HTML 콘텐츠 정제 (메모이제이션) + const sanitizedContent = useMemo(() => { + return sanitizeHtmlContent(contents || '', { + imageClass: 'faq-content-img', + linkClass: 'faq-content-link' + }); + }, [contents]); + const onClickToClose = () => { setDetailOn(false); }; @@ -33,12 +43,35 @@ 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 ( <> -
-
{ t('support.qna.title') }
+
{ t('support.faq.title') }
{ title }
-
diff --git a/src/entities/support/ui/detail/notice-detail.tsx b/src/entities/support/ui/detail/notice-detail.tsx index 4c88a3a..d3f5b82 100644 --- a/src/entities/support/ui/detail/notice-detail.tsx +++ b/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({}); const { mutateAsync: noticeDetail } = useNoticeDetailMutation(); + const modalRef = useRef(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,20 +76,19 @@ export const NoticeDetail = ({ } }); } - }; - - const onClickToClose = () => { - setDetailOn(false); - }; + }, [seq, noticeDetail, t, onClickToClose]); useEffect(() => { - callDetail(); - }, [seq]); + if (detailOn && seq) { + callDetail(); + } + }, [seq, detailOn, callDetail]); return ( <> - { result.title }
{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }
-
- {/* -
{ result.contents }
- */} diff --git a/src/shared/lib/html-sanitize.ts b/src/shared/lib/html-sanitize.ts new file mode 100644 index 0000000..4501ee8 --- /dev/null +++ b/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
태그로 변환 + // 10개 이상의 연속된 -, =, _ 문자를 구분선으로 인식 + content = content.replace(/[-]{10,}/g, '
'); + content = content.replace(/[=]{10,}/g, '
'); + content = content.replace(/[_]{10,}/g, '
'); + + // 혼합된 패턴도 처리 (예: --=--=-) + content = content.replace(/[-=_\s]{10,}/g, (match) => { + // 공백만 있는 경우는 제외 + if (match.trim().length >= 10) { + return '
'; + } + return match; + }); + + // 연속된   제거 (최대 2개까지만 허용) + content = content.replace(/( ){3,}/g, '  '); + + // 연속된
태그 정리 (최대 2개까지만 허용) + content = content.replace(/(){3,}/gi, '

'); + + // 빈 태그 제거 + content = content.replace(/<(\w+)>(\s| )*<\/\1>/gi, ''); + + // 줄바꿈 정리 + content = content.replace(/\r\n/g, ''); + + return content.trim(); +}; diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts index 03f9fff..28961cd 100644 --- a/src/shared/lib/index.ts +++ b/src/shared/lib/index.ts @@ -1,4 +1,5 @@ export * from './error'; export * from './toast'; export * from './web-view-bridge'; -export * from './masking'; \ No newline at end of file +export * from './masking'; +export * from './html-sanitize'; \ No newline at end of file diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index 4c195e2..cefd919 100644 --- a/src/shared/ui/assets/css/style.css +++ b/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 문의 */