Code - nbnloper/edupay-admin

"use client"; import type { ReactNode, Ref } from "react"; import { FoxCaretRightIcon, FoxXIcon } from "../../icons"; import { cx } from "../../utils"; import { FoxTextButton } from "../fox-text-button"; /** 꼬리가 판의 위에 붙는지 아래에 붙는지. 판이 트리거의 아래/위 어느 쪽에 뜨는지가 따라온다. */ export type FoxPopoverDirection = "top" | "bottom"; /** 꼬리가 판의 가로 어디에 붙는지. */ export type FoxPopoverArrow = "left" | "center" | "right"; export interface FoxPopoverProps { /** * `top`이면 꼬리가 판 위에 붙는다 — 트리거 아래에 뜨는 말풍선이다. * `bottom`이면 꼬리가 판 아래에 붙는다 — 트리거 위에 뜨는 말풍선이다. */ direction?: FoxPopoverDirection; /** 꼬리의 가로 위치. 판 가장자리에서 24px 안쪽에 선다(가운데는 예외). */ arrow?: FoxPopoverArrow; /** 굵은 제목 줄. 넘기지 않으면 렌더링하지 않는다. */ title?: ReactNode; /** 제목 아래 본문. 넘기지 않으면 렌더링하지 않는다. */ message?: ReactNode; /** 아래쪽 글자 버튼의 문구(예: "바로가기"). 없으면 버튼을 그리지 않는다. */ actionLabel?: string; /** 글자 버튼을 눌렀을 때. `actionLabel`이 없으면 의미 없다. */ onAction?: () => void; /** 닫기(X)를 눌렀을 때. **필수다** — 시안이 닫기를 항상 그린다. */ onClose: () => void; /** 닫기 버튼을 읽어 줄 이름. X 아이콘은 장식이라 이 글자가 유일한 이름이다. */ closeLabel?: string; /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */ hidden?: boolean; id?: string; /** 배치 조정용. 트리거 옆에 놓는 위치와 시안의 폭(360px)을 여기로 덮는다. */ className?: string; ref?: Ref<HTMLDivElement>; } const DIRECTION_CLASS: Record<FoxPopoverDirection, string> = { top: "fox-popover--top", bottom: "fox-popover--bottom", }; const ARROW_CLASS: Record<FoxPopoverArrow, string> = { left: "fox-popover--arrow-left", center: "fox-popover--arrow-center", right: "fox-popover--arrow-right", }; /** * @fox 팝오버. 꼬리가 달린 말풍선 판이다. 제목·본문·글자 버튼을 담고 오른쪽 위에 닫기가 붙는다. * * **상태를 갖지 않고 스스로 자리를 잡지도 않는다.** 언제 열리고 닫힐지는 호출부가 정하고, * 트리거 옆 어디에 놓을지는 `className`으로 준다 — `direction`·`arrow`는 꼬리가 어디에 * 붙는지만 정한다(자리가 모자랄 때 위아래를 뒤집는 자동 배치는 없다. 시안이 방향을 값으로 * 주므로 그 판단은 호출부의 몫이다). * * ⚠️ 판을 띄우는 방식은 `FoxSelect`·`FoxChip`의 목록과 같다 — 감싼 요소 기준의 일반 흐름이라 * `overflow: hidden` 조상 안에서는 잘린다. HTML `popover` 속성으로 top layer에 올리는 방법이 * 있지만, 위치를 잡아 주는 CSS Anchor Positioning이 아직 크롬 계열에만 있어 미룬다 — 옮기게 * 되면 셀렉트·칩·툴팁까지 한 번에 옮긴다. * * 꼬리는 **CSS가 그린다** — 이 컴포넌트가 내보내는 것은 빈 요소 하나뿐이다. 시안이 준 SVG는 * 1px 흰 띠로 판의 1px 테두리를 지우는 구조라 소수 배율 화면에서 이음새에 실선이 비쳤고, * 회전한 정사각형을 판에 절반 걸치는 방식으로 바꿨다(까닭은 스타일 파일 상단 참고). * * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"` * (또는 개별 파티셜)로 한 번 불러와야 한다. */ export function FoxPopover({ direction = "top", arrow = "left", title, message, actionLabel, onAction, onClose, closeLabel = "닫기", hidden = false, id, className, ref, }: FoxPopoverProps) { if (hidden) { return null; } // 꼬리는 CSS가 그린다 — 이 요소는 자리만 잡는다(스타일 파일 참고). const arrowSlot = ( <div className="fox-popover__arrow-area" aria-hidden="true"> <span className="fox-popover__arrow" /> </div> ); return ( <div ref={ref} id={id} className={cx( "fox-popover", DIRECTION_CLASS[direction], ARROW_CLASS[arrow], className )} > {direction === "top" ? arrowSlot : null} <div className="fox-popover__content"> {title === undefined && message === undefined ? null : ( <div className="fox-popover__body"> {title === undefined ? null : ( <div className="fox-popover__title-row"> <strong className="fox-popover__title">{title}</strong> </div> )} {message === undefined ? null : ( <div className="fox-popover__message-row"> <span className="fox-popover__message">{message}</span> </div> )} </div> )} {actionLabel ? ( <FoxTextButton type="secondary" size="sm" label={actionLabel} trailingIcon={<FoxCaretRightIcon />} onAction={onAction} className="fox-popover__action" /> ) : null} <button type="button" className="fox-popover__close" aria-label={closeLabel} onClick={onClose} > <FoxXIcon /> </button> </div> {direction === "bottom" ? arrowSlot : null} </div> ); }