@xfilecom/xframe 0.1.33 → 0.1.34

package/defaults.json

@@ -1,4 +1,4 @@
 {
-  "backendCore": "^1.0.13",
-  "frontCore": "^0.2.19"
+  "backendCore": "^1.0.14",
+  "frontCore": "^0.2.20"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/xframe",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "Scaffold full-stack app: Nest + @xfilecom/backend-core, Vite/React + @xfilecom/front-core",
   "license": "UNLICENSED",
   "bin": {

package/template/web/client/src/FrontCoreShowcase.tsx

@@ -28,6 +28,32 @@ function SectionTitle({ children }: { children: ReactNode }) {
   );
 }
 
+function StarIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden style={{ display: 'block' }}>
+      <path
+        fill="currentColor"
+        d="m8 1.3 1.9 4.2 4.6.4-3.5 3.1 1 4.5L8 11.5l-4 2 1-4.5-3.5-3.1 4.6-.4L8 1.3z"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden style={{ display: 'block' }}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.5 8.5l3 3 6-7"
+      />
+    </svg>
+  );
+}
+
 export function FrontCoreShowcase() {
   const uid = useId();
   const toastSeq = useRef(0);
@@ -35,11 +61,16 @@ export function FrontCoreShowcase() {
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
   const [errors, setErrors] = useState<InlineErrorEntry[]>([]);
   const [loading, setLoading] = useState(false);
+  const [badgeClicks, setBadgeClicks] = useState(0);
+  const [btnLoading, setBtnLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogRichOpen, setDialogRichOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [confirmDestructiveOpen, setConfirmDestructiveOpen] = useState(false);
   const [confirmLoadingDemo, setConfirmLoadingDemo] = useState(false);
+  const [confirmCustomOpen, setConfirmCustomOpen] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
+  const [sheetRichOpen, setSheetRichOpen] = useState(false);
 
   const pushToast = useCallback(
     (severity: ToastSeverity) => {
@@ -50,17 +81,56 @@ export function FrontCoreShowcase() {
     [uid],
   );
 
+  const pushToastCustomIcon = useCallback(() => {
+    toastSeq.current += 1;
+    const id = `${uid}-t-${toastSeq.current}`;
+    setToasts((prev) => [
+      ...prev,
+      {
+        id,
+        severity: 'success',
+        message: 'ToastEntry.icon 으로 별 아이콘',
+        icon: <StarIcon />,
+      },
+    ]);
+  }, [uid]);
+
   const addError = useCallback(() => {
     errorSeq.current += 1;
     const id = `${uid}-e-${errorSeq.current}`;
     setErrors((prev) => [...prev, { id, message: `샘플 에러 #${errorSeq.current}` }]);
   }, [uid]);
 
+  const addErrorRich = useCallback(() => {
+    errorSeq.current += 1;
+    const id = `${uid}-e-${errorSeq.current}`;
+    setErrors((prev) => [
+      ...prev,
+      {
+        id,
+        message: '아이콘 + 행 클릭(콘솔)',
+        icon: <ToastSeverityIcon severity="error" />,
+        onClick: () => {
+          console.info('[FrontCoreShowcase] inline error row click', id);
+        },
+      },
+    ]);
+  }, [uid]);
+
   return (
     <>
-      <InlineErrorList errors={errors} onDismiss={(id) => setErrors((e) => e.filter((x) => x.id !== id))} />
+      <InlineErrorList
+        errors={errors}
+        onDismiss={(id) => setErrors((e) => e.filter((x) => x.id !== id))}
+        dismissAriaLabel="배너 닫기"
+      />
       <ToastList toasts={toasts} onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))} />
-      <LoadingOverlay active={loading} message="로딩 중…" />
+      <LoadingOverlay
+        active={loading}
+        title="처리 중"
+        message="데이터를 가져옵니다…"
+        ariaLabel="데이터 로딩 중"
+      />
 
       <Dialog
         open={dialogOpen}
@@ -79,6 +149,26 @@ export function FrontCoreShowcase() {
         </div>
       </Dialog>
 
+      <Dialog
+        open={dialogRichOpen}
+        onOpenChange={setDialogRichOpen}
+        title="헤더 커스텀"
+        titleAdornment={<ToastSeverityIcon severity="info" />}
+        headerExtra={
+          <Button variant="ghost" type="button" onClick={() => setDialogRichOpen(false)} aria-label="닫기">
+            ✕
+          </Button>
+        }
+        description="titleAdornment · headerExtra — Dialog props 로 조합"
+      >
+        <Text variant="body">bodyClassName · descriptionClassName 으로 패널 영역 클래스도 조정 가능합니다.</Text>
+        <div className="xfc-dialog-footer">
+          <Button type="button" variant="primary" onClick={() => setDialogRichOpen(false)}>
+            OK
+          </Button>
+        </div>
+      </Dialog>
+
       <ConfirmDialog
         open={confirmOpen}
         onOpenChange={setConfirmOpen}
@@ -106,6 +196,24 @@ export function FrontCoreShowcase() {
         onConfirm={() => {}}
       />
 
+      <ConfirmDialog
+        open={confirmCustomOpen}
+        onOpenChange={setConfirmCustomOpen}
+        title="버튼 props 확장"
+        message="confirmButtonProps / cancelButtonProps 로 icon·className 등 전달"
+        confirmLabel="저장"
+        cancelLabel="닫기"
+        onConfirm={() => setConfirmCustomOpen(false)}
+        confirmButtonProps={{
+          icon: <CheckIcon />,
+          iconPosition: 'start',
+        }}
+        cancelButtonProps={{
+          icon: <span aria-hidden>←</span>,
+          iconPosition: 'start',
+        }}
+      />
+
       <BottomSheet open={sheetOpen} onOpenChange={setSheetOpen} title="BottomSheet" showHandle>
         <Text variant="body">화면 하단에서 올라오는 패널입니다.</Text>
         <Stack direction="row" gap="sm" align="center" style={{ marginTop: 'var(--xfc-space-md)', flexWrap: 'wrap' }}>
@@ -115,6 +223,21 @@ export function FrontCoreShowcase() {
         </Stack>
       </BottomSheet>
 
+      <BottomSheet
+        open={sheetRichOpen}
+        onOpenChange={setSheetRichOpen}
+        title="액션 시트"
+        subtitle="subtitle · headerExtra 로 상단 구성"
+        headerExtra={
+          <Button variant="ghost" type="button" onClick={() => setSheetRichOpen(false)} aria-label="닫기">
+            완료
+          </Button>
+        }
+        showHandle
+      >
+        <Text variant="body">BottomSheet bodyClassName 등으로 본문 영역도 조정할 수 있습니다.</Text>
+      </BottomSheet>
+
       <Stack direction="column" gap="lg" align="stretch">
         <Card>
           <Stack direction="column" gap="md" align="stretch">
@@ -125,24 +248,41 @@ export function FrontCoreShowcase() {
             <Text variant="muted">muted</Text>
             <Text variant="small">small</Text>
             <Text variant="accent">accent</Text>
+            <Text variant="small" style={{ color: 'var(--xfc-fg-muted)' }}>
+              truncate (좁은 영역)
+            </Text>
+            <div style={{ maxWidth: 200 }}>
+              <Text variant="body" truncate title="말줄임 전체 텍스트은 title 속성으로 툴팁">
+                아주 긴 한 줄 텍스트는 truncate prop 으로 말줄임 처리합니다.
+              </Text>
+            </div>
           </Stack>
         </Card>
 
         <Card>
           <Stack direction="column" gap="md" align="stretch">
-            <SectionTitle>Badge</SectionTitle>
-            <Stack direction="row" gap="sm" align="center">
+            <SectionTitle>Badge · icon · enabled · onClick</SectionTitle>
+            <Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
               <Badge tone="neutral">neutral</Badge>
               <Badge tone="accent">accent</Badge>
               <Badge tone="success">success</Badge>
               <Badge tone="danger">danger</Badge>
+              <Badge tone="accent" icon={<StarIcon />}>
+                icon
+              </Badge>
+              <Badge tone="neutral" enabled={false}>
+                enabled=false
+              </Badge>
+              <Badge tone="accent" icon={<CheckIcon />} onClick={() => setBadgeClicks((c) => c + 1)}>
+                클릭 {badgeClicks}
+              </Badge>
             </Stack>
           </Stack>
         </Card>
 
         <Card>
           <Stack direction="column" gap="md" align="stretch">
-            <SectionTitle>Button</SectionTitle>
+            <SectionTitle>Button · enabled · loading · icon</SectionTitle>
             <Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
               <Button variant="primary">primary</Button>
               <Button variant="secondary">secondary</Button>
@@ -152,26 +292,85 @@ export function FrontCoreShowcase() {
               <Button variant="primary" disabled>
                 disabled
               </Button>
+              <Button variant="primary" enabled={false}>
+                enabled=false
+              </Button>
+              <Button variant="primary" icon={<StarIcon />} iconPosition="start">
+                아이콘 앞
+              </Button>
+              <Button variant="outline" icon={<CheckIcon />} iconPosition="end">
+                아이콘 뒤
+              </Button>
+              <Button
+                variant="secondary"
+                loading={btnLoading}
+                onClick={() => {
+                  setBtnLoading(true);
+                  window.setTimeout(() => setBtnLoading(false), 1200);
+                }}
+              >
+                loading 데모
+              </Button>
             </Stack>
           </Stack>
         </Card>
 
+        <Card
+          title="Card · title / footer"
+          footer={
+            <Stack direction="row" justify="end" gap="sm" align="center">
+              <Button variant="ghost" type="button">
+                보조
+              </Button>
+              <Button variant="primary" type="button">
+                주 액션
+              </Button>
+            </Stack>
+          }
+        >
+          <Text variant="body">
+            Card 의 title·footer 가 있으면 본문이 .xfc-card__body 로 감싸져 패딩이 맞춰집니다. 루트에 onClick 등
+            HTML 속성을 그대로 넘길 수 있습니다.
+          </Text>
+        </Card>
+
         <Card>
           <Stack direction="column" gap="md" align="stretch">
-            <SectionTitle>Input</SectionTitle>
+            <SectionTitle>Input · description · invalid · enabled</SectionTitle>
             <label htmlFor={`${uid}-email`}>
               <Text as="span" variant="labelBlock">
                 이메일
               </Text>
             </label>
             <Input id={`${uid}-email`} type="email" placeholder="you@example.com" autoComplete="email" />
-            <Input placeholder="비활성" disabled />
+            <Input
+              placeholder="형식 오류 예시"
+              invalid
+              description="invalid + description (aria-describedby 자동)"
+              defaultValue="not-an-email"
+            />
+            <Input placeholder="enabled=false" enabled={false} />
+            <Input placeholder="비활성(disabled)" disabled />
           </Stack>
         </Card>
 
         <Card>
           <Stack direction="column" gap="md" align="stretch">
-            <SectionTitle>Box · Stack · Card</SectionTitle>
+            <SectionTitle>Box · Stack · 레이아웃 props</SectionTitle>
+            <Box
+              as="section"
+              padding="md"
+              style={{ border: '1px dashed var(--xfc-border-strong)', borderRadius: 'var(--xfc-radius-xs)' }}
+              aria-label="섹션 박스 예시"
+            >
+              <Text variant="small">Box as=&quot;section&quot; + padding</Text>
+            </Box>
+            <Stack direction="row" justify="between" align="center" wrap={false} gap="md">
+              <Text variant="small">justify=&quot;between&quot;</Text>
+              <Button variant="ghost" type="button">
+                오른쪽
+              </Button>
+            </Stack>
             <Stack direction="row" gap="md" align="stretch" style={{ flexWrap: 'wrap' }}>
               <Box padding="md" style={{ border: '1px dashed var(--xfc-border-strong)', borderRadius: 'var(--xfc-radius-xs)' }}>
                 <Text variant="small">Box padding md</Text>
@@ -185,20 +384,29 @@ export function FrontCoreShowcase() {
 
         <Card>
           <Stack direction="column" gap="md" align="stretch">
-            <SectionTitle>ToastSeverityIcon</SectionTitle>
+            <SectionTitle>ToastSeverityIcon · className / style</SectionTitle>
             <Stack direction="row" gap="lg" align="center" style={{ color: 'var(--xfc-fg)' }}>
               <ToastSeverityIcon severity="info" />
               <ToastSeverityIcon severity="success" />
               <ToastSeverityIcon severity="warn" />
               <ToastSeverityIcon severity="error" />
+              <ToastSeverityIcon severity="info" style={{ opacity: 0.45 }} />
             </Stack>
           </Stack>
         </Card>
 
         <Card>
           <Stack direction="column" gap="md" align="stretch">
-            <SectionTitle>Toast (단일)</SectionTitle>
-            <Toast severity="info" message="인라인 Toast 한 줄" onDismiss={() => {}} />
+            <SectionTitle>Toast (단일) · icon · dismissible</SectionTitle>
+            <Toast severity="info" message="기본 닫기 버튼" onDismiss={() => {}} />
+            <Toast severity="warn" message="아이콘 숨김 (icon=null)" icon={null} onDismiss={() => {}} />
+            <Toast
+              severity="success"
+              message="커스텀 dismiss 라벨"
+              dismissAriaLabel="토스트 제거"
+              onDismiss={() => {}}
+            />
+            <Toast severity="error" message="닫기 없음" dismissible={false} />
           </Stack>
         </Card>
 
@@ -206,12 +414,14 @@ export function FrontCoreShowcase() {
           <Stack direction="column" gap="md" align="stretch">
             <SectionTitle>Dialog · ConfirmDialog · BottomSheet</SectionTitle>
             <Text variant="small" style={{ color: 'var(--xfc-fg-muted)' }}>
-              document.body 포털 · z-index 10050 (토스트·로딩보다 위). base.css 의 .xfc-dialog-* /
-              .xfc-bottom-sheet-* 로 테마 조정.
+              document.body 포털 · z-index 10050. base.css 의 .xfc-dialog-* / .xfc-bottom-sheet-* 로 테마 조정.
             </Text>
             <Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
               <Button type="button" variant="secondary" onClick={() => setDialogOpen(true)}>
-                Dialog 열기
+                Dialog
+              </Button>
+              <Button type="button" variant="secondary" onClick={() => setDialogRichOpen(true)}>
+                Dialog (헤더 커스텀)
               </Button>
               <Button type="button" variant="secondary" onClick={() => setConfirmOpen(true)}>
                 Confirm
@@ -222,9 +432,15 @@ export function FrontCoreShowcase() {
               <Button type="button" variant="secondary" onClick={() => setConfirmLoadingDemo(true)}>
                 Confirm (loading)
               </Button>
+              <Button type="button" variant="secondary" onClick={() => setConfirmCustomOpen(true)}>
+                Confirm (버튼 props)
+              </Button>
               <Button type="button" variant="secondary" onClick={() => setSheetOpen(true)}>
                 BottomSheet
               </Button>
+              <Button type="button" variant="secondary" onClick={() => setSheetRichOpen(true)}>
+                BottomSheet (subtitle·extra)
+              </Button>
             </Stack>
           </Stack>
         </Card>
@@ -233,7 +449,7 @@ export function FrontCoreShowcase() {
           <Stack direction="column" gap="md" align="stretch">
             <SectionTitle>ToastList · InlineErrorList · LoadingOverlay</SectionTitle>
             <Text variant="small" style={{ color: 'var(--xfc-fg-muted)' }}>
-              ToastList / InlineErrorList / LoadingOverlay 는 화면 고정 레이어입니다. 아래 버튼으로 띄워 보세요.
+              ToastList / InlineErrorList / LoadingOverlay 는 화면 고정 레이어입니다.
             </Text>
             <Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
               <Button type="button" variant="secondary" onClick={() => pushToast('info')}>
@@ -248,15 +464,24 @@ export function FrontCoreShowcase() {
               <Button type="button" variant="secondary" onClick={() => pushToast('error')}>
                 toast error
               </Button>
+              <Button type="button" variant="secondary" onClick={pushToastCustomIcon}>
+                toast 커스텀 icon
+              </Button>
             </Stack>
             <Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
               <Button type="button" variant="outline" onClick={addError}>
                 에러 배너 추가
               </Button>
+              <Button type="button" variant="outline" onClick={addErrorRich}>
+                에러 (icon·onClick)
+              </Button>
               <Button type="button" variant="outline" onClick={() => setLoading((v) => !v)}>
                 로딩 오버레이 {loading ? '끄기' : '켜기'}
               </Button>
             </Stack>
+            <Text variant="label">
+              LoadingOverlay: title · message · ariaLabel · spinner(null 로 숨김) · enabled
+            </Text>
           </Stack>
         </Card>
       </Stack>