1. 소유와 경계

export const WgProductToolbarDeleteButton = () => {
	const navigate = useNavigate();

	/**
	 * 삭제 후 목록으로 이동
	 */
	const handleDeleteButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
		void navigate("/products");
	};

	return <UiButton onClick={handleDeleteButtonClick}>삭제</UiButton>;
};

export const PgDeleteProductButton = () => {
	const navigate = useNavigate();

	/**
	 * 삭제 후 목록으로 이동
	 */
	const handleDeleteButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
		void navigate("/products");
	};

	return <UiButton onClick={handleDeleteButtonClick}>삭제</UiButton>;
};

/**
 * 상품 상태 배지 계약
 */
export interface PgProductStatusBadgeProps {
	/**
	 * 배지 색을 정하는 상품 상태
	 */
	status: ProductStatus;
	children: ReactNode;
}

// 도메인 타입 하나만 알고 화면 타입과 훅은 모름. 이 화면에서만 쓴다는 이유로 page에 남아 있음
export const PgProductStatusBadge = (props: PgProductStatusBadgeProps) => {
	return (
		<span
			className={clsx(
				"pg_productDetail__statusBadge",
				props.status === "hidden" && "pg_productDetail__statusBadge--hidden",
			)}
		>
			{props.children}
		</span>
	);
};

/**
 * 상품 상태 배지 계약
 */
export interface WgProductStatusBadgeProps {
	/**
	 * 배지 색을 정하는 상품 상태
	 */
	status: ProductStatus;
	children: ReactNode;
}

export const WgProductStatusBadge = (props: WgProductStatusBadgeProps) => {
	return (
		<span
			className={clsx(
				"wg_productTable__statusBadge",
				props.status === "hidden" && "wg_productTable__statusBadge--hidden",
			)}
		>
			{props.children}
		</span>
	);
};

/**
 * 꺾은선 그래프 계약
 */
export interface WgLineChartProps {
	/**
	 * 그래프의 접근 가능한 이름
	 */
	title: string;
	/**
	 * 그릴 좌표. 어느 도메인의 값인지 모름
	 */
	points: ChartPoint[];
}

// 좌표 배열만 받고 도메인 타입을 모름. 조립 규모만 보고 widget에 둠
export const WgLineChart = (props: WgLineChartProps) => {
	return (
		<svg className={clsx("wg_lineChart__root")} viewBox="0 0 100 40">
			<title>{props.title}</title>
			<polyline points={props.points.map((point) => `${point.x},${point.y}`).join(" ")} />
		</svg>
	);
};

/**
 * 꺾은선 그래프 계약
 */
export interface UiLineChartProps {
	/**
	 * 그래프의 접근 가능한 이름
	 */
	title: string;
	/**
	 * 그릴 좌표. 어느 도메인의 값인지 모름
	 */
	points: ChartPoint[];
}

export const UiLineChart = (props: UiLineChartProps) => {
	return (
		<svg className={clsx("ui_lineChart__root")} viewBox="0 0 100 40">
			<title>{props.title}</title>
			<polyline points={props.points.map((point) => `${point.x},${point.y}`).join(" ")} />
		</svg>
	);
};

import {UiLineChart} from "@/component/ui/line-chart/ui-line-chart";

export const WgChartCard = (props: WgChartCardProps) => {
	return <UiLineChart title="일별 주문 수" points={toChartPoints(props.dailyCounts)} />;
};

export const ProductTable = (props: ProductTableProps) => {
	return <section className={clsx("pg_productTableSection__root")}>{props.children}</section>;
};

export const PgProductTableSection = (props: PgProductTableSectionProps) => {
	return <section className={clsx("pg_productTableSection__root")}>{props.children}</section>;
};

export const UiButtonButton = (props: UiButtonButtonProps) => {
	return <button type="button">{props.children}</button>;
};

export const UiButton = (props: UiButtonProps) => {
	return <button type="button">{props.children}</button>;
};

import {PgSectionHeading} from "@/page/product-detail/_pg-section-heading";

import {PgSectionHeading} from "@/page/product-detail/_pg-section-heading";
import {PgProductTableSection} from "@/page/product-detail/product-table-section/pg-product-table-section";
import {PgProductSummary} from "@/page/product-detail/product-summary/pg-product-summary";

export const PgProductDetail = () => {
	return (
		<main className={clsx("pg_productDetail__root")}>
			<PgProductTableSection heading={<PgSectionHeading title="최근 주문" />} />
			<PgProductSummary heading={<PgSectionHeading title="요약" />} />
		</main>
	);
};

import {PgProductTableSection} from "@/page/product-detail/product-table-section/pg-product-table-section";

export const WgProductTable = (props: WgProductTableProps) => {
	return <section className={clsx("wg_productTable__root")}>{props.children}</section>;
};

import {WgProductTable} from "@/component/widget/product-table/wg-product-table";

import {WgChartCard} from "@/component/widget/chart-card/wg-chart-card";

import {UiLineChart} from "@/component/ui/line-chart/ui-line-chart";

// component/ui/line-chart/_type에 있던 것을 page에서도 쓴다고 루트로 옮김
export interface ChartSeries {
	/**
	 * 선 하나가 그리는 좌표
	 */
	points: ChartPoint[];
}

// page/product-detail/product-table-section/_function/to-chart-option.ts
import type {ChartSeries} from "@/type/chart-series";

import type {ChartSeries} from "@/component/ui/line-chart/_type/chart-series";
import {chart_series_line} from "@/component/ui/line-chart/_constant/series";

import {PgOutlet} from "@/page/pg-outlet";
import {PgMainOutlet} from "@/page/(main)/pg-main-outlet";
import {PgOrders} from "@/page/(main)/orders/pg-orders";
import {PgProducts} from "@/page/(main)/products/pg-products";
import {PgProductDetail} from "@/page/product-detail/pg-product-detail";

export const AppRoutes = () => {
	return (
		<Routes>
			<Route path="/" element={<PgOutlet />}>
				<Route element={<PgMainOutlet />}>
					<Route path="products" element={<PgProducts />} />
					<Route path="orders" element={<PgOrders />} />
				</Route>
				<Route path="products/:productId" element={<PgProductDetail />} />
			</Route>
		</Routes>
	);
};

export const useMediaUploadPayload = (files: File[]) => {
	return files.map((file) => ({name: file.name, size: file.size}));
};

import {useMediaUploadPayload} from "@/page/products/_hook/use-media-upload-payload";

export const PgMediaUploadPanel = (props: PgMediaUploadPanelProps) => {
	const mediaUploadPayload = useMediaUploadPayload(props.files);

	/**
	 * 업로드를 확정할 때 이미 만들어 둔 값을 보냄
	 */
	const handleSaveButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
		mutationMediaSave.mutate({data: mediaUploadPayload});
	};

	return <UiButton onClick={handleSaveButtonClick}>저장</UiButton>;
};

/**
 * 업로드 파일 목록으로 저장 요청 본문을 조립
 */
export const toMediaUploadPayload = (files: File[]) => {
	return files.map((file) => ({name: file.name, size: file.size}));
};

import {toMediaUploadPayload} from "@/page/products/_function/to-media-upload-payload";

export const PgMediaUploadPanel = (props: PgMediaUploadPanelProps) => {
	/**
	 * 업로드를 확정할 때만 정규화해서 보냄. 렌더 중에는 계산 안 함
	 */
	const handleSaveButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
		mutationMediaSave.mutate({data: toMediaUploadPayload(props.files)});
	};

	return <UiButton onClick={handleSaveButtonClick}>저장</UiButton>;
};

// 생성, resize, 정리가 _hook/use-chart-instance.ts로 빠져 이 파일에서는 실행 흐름이 안 보임
export const WgChartCard = (props: WgChartCardProps) => {
	const containerRef = useRef<HTMLDivElement>(null);
	const chart = useChartInstance(containerRef);

	/**
	 * option이 바뀌면 기존 인스턴스에 다시 반영
	 */
	useEffect(() => {
		chart?.setOption(props.option);
	}, [chart, props.option]);

	return <div ref={containerRef} className={clsx("wg_chartCard__canvas")} />;
};

export const WgChartCard = (props: WgChartCardProps) => {
	const containerRef = useRef<HTMLDivElement>(null);
	const chartRef = useRef<ChartInstance | null>(null);

	/**
	 * 컨테이너 마운트 시 차트 인스턴스를 만들고 resize, dispose까지 소유
	 */
	useEffect(() => {
		if (!containerRef.current) {
			return;
		}

		// 외부 차트 라이브러리 인스턴스. 만든 컴포넌트가 resize와 dispose까지 책임
		const instance = mountChart(containerRef.current);
		const handleResize = () => {
			instance.resize();
		};

		window.addEventListener("resize", handleResize);
		chartRef.current = instance;

		return () => {
			chartRef.current = null;
			window.removeEventListener("resize", handleResize);
			instance.dispose();
		};
	}, []);

	/**
	 * option이 바뀌면 기존 인스턴스에 다시 반영
	 */
	useEffect(() => {
		chartRef.current?.setOption(props.option);
	}, [props.option]);

	return <div ref={containerRef} className={clsx("wg_chartCard__canvas")} />;
};