ANTOOZA-FRONTEND/app/(main)/_components/DomesticSummary.tsx

import './domestic-summary.scss';
import { moveDir, formatFlucRate, formatIndexClose } from '@/types/worldIndex';
import { type DomesticIndexRow, formatIndexChange, formatNet, formatCount, netDir } from '@/types/domesticSummary';

// 국내 증시 요약 — 코스피/코스닥/KOSPI200 카드. 지수·등락 + 투자자별 순매수(Phase 2 "–") + 등락종목수(코스피/코스닥) / 베이시스(KOSPI200).
type Props = {
	rows: DomesticIndexRow[];
};

const ARROW = { up: '▲', down: '▼', flat: '–' } as const;

export default function DomesticSummary({ rows }: Props)
{
	if (rows.length === 0) {
		return null;
	}

	return (
		<section className='dsum' aria-label='국내 증시 요약'>
			<div className='dsum__grid'>
				{rows.map((row) => {
					const dir = moveDir(row.flucRateBp);
					const isKospi200 = row.key === 'kospi200';
					return (
						<div key={row.key} className='dsum__card'>
							<div className='dsum__name'>{row.name}</div>

							<div className='dsum__price'>
								<span className={`dsum__value dsum__value--${dir}`}>{formatIndexClose(row.close)}</span>
								<span className={`dsum__chg dsum__chg--${dir}`}>
									<i className='dsum__arrow' aria-hidden='true'>{ARROW[dir]}</i>
									{formatIndexChange(row.changeVal)}
									<em className='dsum__rate'>{formatFlucRate(row.flucRateBp)}</em>
								</span>
							</div>

							<div className='dsum__investors'>
								<div className='dsum__inv'>
									<span className='dsum__inv-k'>개인</span>
									<span className={`dsum__inv-v dsum__inv-v--${netDir(row.individualNet)}`}>{formatNet(row.individualNet)}</span>
								</div>
								<div className='dsum__inv'>
									<span className='dsum__inv-k'>외국인</span>
									<span className={`dsum__inv-v dsum__inv-v--${netDir(row.foreignNet)}`}>{formatNet(row.foreignNet)}</span>
								</div>
								<div className='dsum__inv'>
									<span className='dsum__inv-k'>기관</span>
									<span className={`dsum__inv-v dsum__inv-v--${netDir(row.institutionNet)}`}>{formatNet(row.institutionNet)}</span>
								</div>
								<div className='dsum__inv'>
									<span className='dsum__inv-k'>프로그램</span>
									<span className={`dsum__inv-v dsum__inv-v--${netDir(row.programNet)}`}>{formatNet(row.programNet)}</span>
								</div>
							</div>

							{isKospi200 ? (
								<div className='dsum__foot'>
									<span className='dsum__basis-k'>베이시스</span>
									<span className='dsum__basis-v'>{row.basis !== null && row.basis !== undefined ? row.basis.toFixed(2) : '–'}</span>
								</div>
							) : (
								<div className='dsum__breadth'>
									<span className='dsum__b'>상한 <em className='dsum__b--up'>{formatCount(row.limitUp)}</em></span>
									<span className='dsum__b'>상승 <em className='dsum__b--up'>{formatCount(row.advances)}</em></span>
									<span className='dsum__b'>보합 <em>{formatCount(row.unchanged)}</em></span>
									<span className='dsum__b'>하락 <em className='dsum__b--down'>{formatCount(row.declines)}</em></span>
									<span className='dsum__b'>하한 <em className='dsum__b--down'>{formatCount(row.limitDown)}</em></span>
								</div>
							)}
						</div>
					);
				})}
			</div>
		</section>
	);
}