@xfilecom/xframe 0.1.29 → 0.1.32

package/bin/xframe.js

@@ -316,6 +316,70 @@ async function collectDatabaseConfig(fromCli, skipDbPrompt, wantDbPullFlag) {
   }
 }
 
+/** drizzle 루트 db:pull 과 Nest 런타임이 backend-core 로드 시 필요 (피어 미설치 시 모듈 누락) */
+const NEST_MICROSERVICES_SPEC = '^10.0.0';
+const REFLECT_METADATA_SPEC = '^0.2.0';
+
+/**
+ * 옛 템플릿·캐시된 npx 패키지에도 대응: 루트 devDeps + apps/api deps 에 보강.
+ * 이미 있으면 변경 없음.
+ */
+function ensureNestPeerDepsInPackageJsons(targetRoot) {
+  let touched = false;
+
+  const rootPkgPath = path.join(targetRoot, 'package.json');
+  if (fs.existsSync(rootPkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(rootPkgPath, 'utf8'));
+      pkg.devDependencies = pkg.devDependencies || {};
+      let rootChanged = false;
+      if (!pkg.devDependencies['@nestjs/microservices']) {
+        pkg.devDependencies['@nestjs/microservices'] = NEST_MICROSERVICES_SPEC;
+        rootChanged = true;
+      }
+      if (!pkg.devDependencies['reflect-metadata']) {
+        pkg.devDependencies['reflect-metadata'] = REFLECT_METADATA_SPEC;
+        rootChanged = true;
+      }
+      if (rootChanged) {
+        fs.writeFileSync(rootPkgPath, `${JSON.stringify(pkg, null, 2)}\n`, 'utf8');
+        touched = true;
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  const apiPkgPath = path.join(targetRoot, 'apps', 'api', 'package.json');
+  if (fs.existsSync(apiPkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(apiPkgPath, 'utf8'));
+      pkg.dependencies = pkg.dependencies || {};
+      let apiChanged = false;
+      if (!pkg.dependencies['@nestjs/microservices']) {
+        pkg.dependencies['@nestjs/microservices'] = NEST_MICROSERVICES_SPEC;
+        apiChanged = true;
+      }
+      if (!pkg.dependencies['reflect-metadata']) {
+        pkg.dependencies['reflect-metadata'] = REFLECT_METADATA_SPEC;
+        apiChanged = true;
+      }
+      if (apiChanged) {
+        fs.writeFileSync(apiPkgPath, `${JSON.stringify(pkg, null, 2)}\n`, 'utf8');
+        touched = true;
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  if (touched) {
+    console.log(
+      'xframe: package.json 에 @nestjs/microservices · reflect-metadata 를 보강했습니다 (db:pull / API).',
+    );
+  }
+}
+
 /** yarn 우선, 없거나 실패 시 npm (부모 셸 PATH 그대로 — shell:true 쓰면 sh라 yarn/nvm PATH가 빠지는 경우가 많음) */
 function installDependencies(cwd) {
   const publicNpm = 'https://registry.npmjs.org/';
@@ -544,6 +608,7 @@ async function main() {
   /** 템플릿은 모노레포 기준 front-core 소스를 가리키고, 생성 앱은 설치된 패키지로 바꿉니다. */
   patchWebTsconfigFrontCorePath(targetRoot);
   patchWebViteFrontCoreAlias(targetRoot);
+  ensureNestPeerDepsInPackageJsons(targetRoot);
 
   console.log(`Created ${packageName} at ${targetRoot}
 
@@ -577,7 +642,8 @@ Next:
   cd ${rel}
   yarn dev   # 또는 npm run dev
   → API :3000/health  ·  Client :3001  ·  Admin :3002
-  (설치 생략: npx @xfilecom/xframe <dir> --no-install)`);
+  (설치 생략: npx @xfilecom/xframe <dir> --no-install)
+  최신 스캐폴드: npx --yes @xfilecom/xframe@latest <dir>`);
 }
 
 main().catch((err) => {

package/defaults.json

@@ -1,4 +1,4 @@
 {
-  "backendCore": "^1.0.10",
-  "frontCore": "^0.2.16"
+  "backendCore": "^1.0.12",
+  "frontCore": "^0.2.18"
 }

package/package.json

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

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

@@ -1,9 +1,12 @@
 import { useCallback, useId, useRef, useState, type ReactNode } from 'react';
 import {
   Badge,
+  BottomSheet,
   Box,
   Button,
   Card,
+  ConfirmDialog,
+  Dialog,
   Input,
   InlineErrorList,
   LoadingOverlay,
@@ -32,6 +35,11 @@ export function FrontCoreShowcase() {
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
   const [errors, setErrors] = useState<InlineErrorEntry[]>([]);
   const [loading, setLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmDestructiveOpen, setConfirmDestructiveOpen] = useState(false);
+  const [confirmLoadingDemo, setConfirmLoadingDemo] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
 
   const pushToast = useCallback(
     (severity: ToastSeverity) => {
@@ -54,6 +62,59 @@ export function FrontCoreShowcase() {
       <ToastList toasts={toasts} onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))} />
       <LoadingOverlay active={loading} message="로딩 중…" />
 
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        title="Dialog"
+        description="title / description / children 조합. 배경 클릭·Escape 로 닫을 수 있습니다."
+      >
+        <Text variant="body">children 에 폼·리스트 등 자유롭게 넣을 수 있습니다.</Text>
+        <div className="xfc-dialog-footer">
+          <Button type="button" variant="muted" onClick={() => setDialogOpen(false)}>
+            취소
+          </Button>
+          <Button type="button" variant="primary" onClick={() => setDialogOpen(false)}>
+            확인
+          </Button>
+        </div>
+      </Dialog>
+
+      <ConfirmDialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title="ConfirmDialog"
+        message="일반 확인창입니다. 취소 시 onCancel 후 닫힙니다."
+        onConfirm={() => setConfirmOpen(false)}
+      />
+
+      <ConfirmDialog
+        open={confirmDestructiveOpen}
+        onOpenChange={setConfirmDestructiveOpen}
+        title="위험 작업"
+        message="destructive + 빨간 확인 버튼 예시입니다."
+        destructive
+        confirmLabel="삭제"
+        onConfirm={() => setConfirmDestructiveOpen(false)}
+      />
+
+      <ConfirmDialog
+        open={confirmLoadingDemo}
+        onOpenChange={setConfirmLoadingDemo}
+        title="로딩 중 확인"
+        message="confirmLoading 시 버튼이 잠깁니다."
+        confirmLoading
+        onConfirm={() => {}}
+      />
+
+      <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' }}>
+          <Button type="button" variant="primary" onClick={() => setSheetOpen(false)}>
+            닫기
+          </Button>
+        </Stack>
+      </BottomSheet>
+
       <Stack direction="column" gap="lg" align="stretch">
         <Card>
           <Stack direction="column" gap="md" align="stretch">
@@ -141,6 +202,33 @@ export function FrontCoreShowcase() {
           </Stack>
         </Card>
 
+        <Card>
+          <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-* 로 테마 조정.
+            </Text>
+            <Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
+              <Button type="button" variant="secondary" onClick={() => setDialogOpen(true)}>
+                Dialog 열기
+              </Button>
+              <Button type="button" variant="secondary" onClick={() => setConfirmOpen(true)}>
+                Confirm
+              </Button>
+              <Button type="button" variant="secondary" onClick={() => setConfirmDestructiveOpen(true)}>
+                Confirm (destructive)
+              </Button>
+              <Button type="button" variant="secondary" onClick={() => setConfirmLoadingDemo(true)}>
+                Confirm (loading)
+              </Button>
+              <Button type="button" variant="secondary" onClick={() => setSheetOpen(true)}>
+                BottomSheet
+              </Button>
+            </Stack>
+          </Stack>
+        </Card>
+
         <Card>
           <Stack direction="column" gap="md" align="stretch">
             <SectionTitle>ToastList · InlineErrorList · LoadingOverlay</SectionTitle>