TADD(Test AI Driven Development), AI에 대한 통제권 가져오기

<Highlighter
	searchWords={keywords}
	textToHighlight={koreanText}
	highlightClassName={`${highlightVariants[isSelectedHighlight ? "selected" : "default"]} px-1 rounded cursor-pointer hover:bg-yellow-300 transition-colors`}
	highlightTag="mark"
	onClick={(e: React.MouseEvent<HTMLElement>) => {
		const target = e.target as HTMLElement;

		if (!target.textContent) {
			throw new Error("구문 강조 과정에서 에러 발생");
		}

		onLearningPointClick(sentenceOrder, target.textContent);
	}}
/>

"use client";

import type { Tables } from "@repo/typescript-config/supabase-types";
import Highlighter from "react-highlight-words";

type LearningPoint = Tables<"learning_points">;

interface KoreanSentenceHighlighterProps {
	sentenceOrder: number;
	koreanText: string;
	learningPoints: LearningPoint[];
	selectedPoints: Set<string>;
	onLearningPointClick: (sentenceOrder: number, text: string) => void;
}

export default function KoreanSentenceHighlighter({
	sentenceOrder,
	koreanText,
	learningPoints,
	selectedPoints,
	onLearningPointClick,
}: KoreanSentenceHighlighterProps) {
	const getLearningPointKeywords = () => {
		return learningPoints
			.map((point) => point.korean_phrase)
			.filter((phrase) => phrase !== null && phrase !== undefined) as string[];
	};

	const getLearningPointInfo = (highlightedText: string) => {
		return learningPoints.find(
			(point) => point.korean_phrase === highlightedText,
		);
	};

	const isSelectedLearningPoint = (text: string) => {
		const pointInfo = getLearningPointInfo(text);
		if (!pointInfo) return false;
		const pointKey = `${sentenceOrder}-${pointInfo.id}`;
		return selectedPoints.has(pointKey);
	};

	const keywords = getLearningPointKeywords();
	const isSelectedHighlight = keywords.some((keyword) =>
		isSelectedLearningPoint(keyword),
	);

	const highlightVariants = {
		default: "bg-yellow-200",
		selected: "bg-orange-200",
	};

	return (
		<div className="text-lg leading-relaxed">
			<Highlighter
				searchWords={keywords}
				textToHighlight={koreanText}
				highlightClassName={`${highlightVariants[isSelectedHighlight ? "selected" : "default"]} px-1 rounded cursor-pointer hover:bg-yellow-300 transition-colors`}
				highlightTag="mark"
				onClick={(e: React.MouseEvent<HTMLElement>) => {
					const target = e.target as HTMLElement;

					if (!target.textContent) {
						throw new Error("구문 강조 과정에서 에러 발생");
					}

					onLearningPointClick(sentenceOrder, target.textContent);
				}}
			/>
		</div>
	);
}

export const isSelectedLearningPoint = (
	pointInfo: LearningPoint,
	sentenceOrder: number,
	selectedPoints: Set<string>,
): boolean => {};

...

export const findKeywordAtPosition = (
	text: string,
	position: number,
	keywords: string[],
): string | undefined => {};

...

export const parseTextSegments = (
	text: string,
	sentenceOrder: number,
	learningPoints: LearningPoint[],
	selectedPoints: Set<string>,
): TextSegment[] => {}

describe("isSelectedLearningPoint", () => {
	it("요구사항에 대한 테스트 명세 작성...", () => { ... })
})

...

describe("findKeywordAtPosition", () => {
	it("요구사항에 대한 테스트 명세 작성...", () => { ... })
})

...

describe("parseTextSegments", () => {
	it("요구사항에 대한 테스트 명세 작성...", () => { ... })
})

/**
 * @description 텍스트 세그먼트 객체를 생성하는 팩토리 함수
 */

export const createTextSegment = (
	text: string,
	isKeyword: boolean,
	learningPoint?: LearningPoint,
	isSelected = false,
): TextSegment => {
	return {
		text,
		isKeyword,
		learningPoint,
		isSelected: isSelected ?? false,
	};
};

/**
 * @description 특정 위치에서 시작하는 키워드를 찾는 함수 (가장 긴 키워드 우선)
 */

export const findKeywordAtPosition = (
	text: string,
	position: number,
	keywords: string[],
): string | undefined => {
	const filteredKeywords = fx(keywords)
		.filter((keyword) => text.substring(position).startsWith(keyword))
		.toArray();

	return filteredKeywords.sort((a, b) => b.length - a.length)[0];
};

/**
 * @description 텍스트를 키워드와 일반 텍스트로 분리하여 세그먼트 배열을 생성하는 함수
 */

export const parseTextSegments = (
	text: string,
	sentenceOrder: number,
	learningPoints: LearningPoint[],
	selectedPoints: Set<string>,
): TextSegment[] => {
	const keywords = getLearningPointKeywords(learningPoints);

	if (keywords.length === 0) {
		return [createTextSegment(text, false)];
	}

	const segments: TextSegment[] = [];
	const processedKeywords = new Set<string>();
	let currentIndex = 0;

	while (currentIndex < text.length) {
		const foundKeyword = findKeywordAtPosition(text, currentIndex, keywords);

		if (foundKeyword && !processedKeywords.has(foundKeyword)) {
			const learningPoint = getLearningPointInfo(foundKeyword, learningPoints);
			const isSelected = isSelectedLearningPoint(
				learningPoint,
				sentenceOrder,
				selectedPoints,
			);

			segments.push(
				createTextSegment(foundKeyword, true, learningPoint, isSelected),
			);
			processedKeywords.add(foundKeyword);
			currentIndex += foundKeyword.length;
		} else {
			const nextChar = text[currentIndex];
			if (nextChar) {
				const lastSegment = segments[segments.length - 1];

				if (lastSegment && !lastSegment.isKeyword) {
					lastSegment.text += nextChar;
				} else {
					segments.push(createTextSegment(nextChar, false));
				}
			}
			currentIndex += 1;
		}
	}

	return segments;
};