dpot-frontend/app/(main)/support/faq/view.tsx

'use client';

import './style.scss';
import { useState, useEffect, useMemo, useCallback } from 'react';
import { FaqCategory, FaqItem } from '@/types/response/page/faq';
import { fetchApi } from '@/lib/utils/client';
import { FaqCategoryResponse, FaqItemsResponse } from '@/types/response/page/faq';
import NavTab from '@/app/(main)/support/navTab';
import Loading from '@/app/component/Loading';

// 텍스트에서 키워드를 <mark>로 감싸서 highlight
function highlightText(text: string, keyword: string): React.ReactNode {
	if (!keyword.trim()) {
		return text;
	}

	const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
	const regex = new RegExp(`(${escaped})`, 'gi');
	const parts = text.split(regex);

	return parts.map((part, i) =>
		regex.test(part) ? <mark key={i}>{part}</mark> : part
	);
}

// HTML 문자열에서 태그를 제거하고 텍스트만 추출
function stripHtml(html: string): string {
	return html.replace(/<[^>]*>/g, '');
}

// HTML 문자열 내에서 키워드를 highlight (태그 내부는 건드리지 않음)
function highlightHtml(html: string, keyword: string): string {
	if (!keyword.trim()) {
		return html;
	}

	const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
	const regex = new RegExp(`(${escaped})`, 'gi');

	// 태그 외부의 텍스트에만 <mark> 적용
	return html.replace(/(<[^>]*>)|([^<]+)/g, (_match, tag, text) => {
		if (tag) {
			return tag;
		}
		return text.replace(regex, '<mark>$1</mark>');
	});
}

export default function View() {
	const [loading, setLoading] = useState<boolean>(true);
	const [categories, setCategories] = useState<FaqCategory[]>([]);
	const [items, setItems] = useState<FaqItem[]>([]);
	const [activeCategory, setActiveCategory] = useState<string>('');
	const [keyword, setKeyword] = useState<string>('');
	const [searchKeyword, setSearchKeyword] = useState<string>('');

	// 초기 데이터 로드
	useEffect(() => {
		Promise.all([
			fetchApi<FaqCategoryResponse>('/api/faq/categories'),
			fetchApi<FaqItemsResponse>('/api/faq/items', {
				method: 'POST',
				body: { Code: '' }
			}),
		]).then(([catRes, itemRes]) => {
			if (catRes.success && catRes.data) {
				setCategories(catRes.data.list ?? []);
			}
			if (itemRes.success && itemRes.data) {
				setItems(itemRes.data.list ?? []);
			}
		}).finally(() => {
			setLoading(false);
		});
	}, []);

	const handleCategoryClick = useCallback((code: string) => {
		setActiveCategory(code);
	}, []);

	const handleSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		setSearchKeyword(keyword);
		setActiveCategory('');
	}, [keyword]);

	const handleReset = useCallback(() => {
		setKeyword('');
		setSearchKeyword('');
		setActiveCategory('');
	}, []);

	// 필터링된 FAQ 항목
	const filteredItems = useMemo(() => {
		let filtered = items;

		// 카테고리 필터
		if (activeCategory) {
			filtered = filtered.filter(item => item.categoryCode === activeCategory);
		}

		// 키워드 필터 (질문 + 답변 내용에서 검색)
		if (searchKeyword.trim()) {
			const lowerKeyword = searchKeyword.toLowerCase();
			filtered = filtered.filter(item => {
				const questionMatch = item.question.toLowerCase().includes(lowerKeyword);
				const answerMatch = item.answer ? stripHtml(item.answer).toLowerCase().includes(lowerKeyword) : false;
				return questionMatch || answerMatch;
			});
		}

		return filtered;
	}, [items, activeCategory, searchKeyword]);

	return (
		<>
			<NavTab currentTab='faq' />

			<section id='faq'>
				<p>자주 묻는 질문</p>

				{loading && <Loading />}

				{/* 검색 */}
				<form onSubmit={handleSubmit} autoComplete='off'>
					<dl>
						<dt>
							<input
								type='search'
								value={keyword}
								onChange={(e) => setKeyword(e.target.value)}
								placeholder='궁금한 점을 검색해 보세요.'
							/>
							<button type='submit' className='btn btn-default'>검색</button>
							{searchKeyword && (
								<button type='button' className='btn btn-default' onClick={handleReset}>초기화</button>
							)}
						</dt>
						<dd>
							<ul>
								<li className={!activeCategory ? 'active' : ''}>
									<button type='button' onClick={() => handleCategoryClick('')}>전체</button>
								</li>
								{categories.map((cat) => (
									<li key={cat.id} className={activeCategory === cat.code ? 'active' : ''}>
										<button type='button' onClick={() => handleCategoryClick(cat.code)}>
											{cat.subject}
										</button>
									</li>
								))}
							</ul>
						</dd>
					</dl>
				</form>

				<br />
				<hr />

				{/* 검색 결과 안내 */}
				{searchKeyword && (
					<p className='search-result'>
						<strong>&quot;{searchKeyword}&quot;</strong> 검색 결과 <strong>{filteredItems.length}</strong>건
					</p>
				)}

				{/* FAQ 목록 */}
				{!loading && (
					<div id='questions'>
						{filteredItems.length > 0 ? (
							filteredItems.map((item) => (
								<details key={item.id} className='faq-item'>
									<summary>
										<span className='faq-category'>{item.categorySubject}</span>
										<span className='faq-question'>
											{highlightText(item.question, searchKeyword)}
										</span>
									</summary>
									<div className='faq-answer'>
										{item.answer ? (
											<div dangerouslySetInnerHTML={{
												__html: highlightHtml(item.answer, searchKeyword)
											}} />
										) : (
											<p className='no-answer'>답변이 준비 중입니다.</p>
										)}
									</div>
								</details>
							))
						) : (
							<div className='no-results'>
								{searchKeyword
									? <p>검색 결과가 없습니다.</p>
									: <p>등록된 FAQ가 없습니다.</p>
								}
							</div>
						)}
					</div>
				)}
			</section>
		</>
	);
}