invyone/frontend/lib/registry/hoc/withContainerQuery.tsx

"use client";

import React from "react";

/**
 * withContainerQuery HOC (2026-04-10, Phase 1 Step 6 경량 부착)
 *
 * 래핑된 컴포넌트를 `container-type: inline-size` 속성을 가진 div 로 감싸서,
 * 카드 컨테이너 너비 기반 @container 쿼리가 자식 CSS 에서 작동할 수 있게 한다.
 *
 * 이 HOC 는 "반응형 준비" 용이다. 실제 wide/narrow 모드 분기는 개별 컴포넌트의
 * CSS 또는 Phase 2 재작성 때 추가한다. 지금 시점에서는 container query 진입점만
 * 확보해 둔다.
 */
export function withContainerQuery<P extends object>(
  Wrapped: React.ComponentType<P>,
  containerName?: string,
): React.FC<P> {
  const Hoc: React.FC<P> = (props) => (
    <div
      className="v2-container-query-root"
      style={{
        containerType: "inline-size",
        containerName,
        width: "100%",
        height: "100%",
        minWidth: 0,
      }}
    >
      <Wrapped {...props} />
    </div>
  );
  Hoc.displayName = `withContainerQuery(${Wrapped.displayName || Wrapped.name || "Component"})`;
  return Hoc;
}