@xfilecom/xframe 0.1.22 → 0.1.24

package/defaults.json

@@ -1,4 +1,4 @@
 {
-  "backendCore": "^1.0.3",
-  "frontCore": "^0.2.8"
+  "backendCore": "^1.0.5",
+  "frontCore": "^0.2.10"
 }

package/package.json

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

package/template/apps/api/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build": "nest build && tsc-alias -p tsconfig.build.json",
     "start": "npm run build && node --enable-source-maps dist/apps/api/src/main.js",
-    "start:dev": "tsc-watch -p tsconfig.build.json --onSuccess \"tsc-alias -p tsconfig.build.json && node --enable-source-maps dist/apps/api/src/main.js\" --noClear",
+    "start:dev:run": "tsc-alias -p tsconfig.build.json && node --enable-source-maps dist/apps/api/src/main.js",
+    "start:dev": "tsc-watch -p tsconfig.build.json --onSuccess \"npm run start:dev:run\" --noClear",
     "start:prod": "node --enable-source-maps dist/apps/api/src/main.js"
   },
   "dependencies": {

package/template/web/admin/src/main.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@xfilecom/front-core/tokens.css';
-import '__WEB_SHARED_WORKSPACE__/styles/xfc-theme.css';
 import '@xfilecom/front-core/base.css';
+import '__WEB_SHARED_WORKSPACE__/styles/xfc-theme.css';
 import '__WEB_SHARED_WORKSPACE__/styles/app.css';
 import { App } from './App';
 

package/template/web/admin/tsconfig.json

@@ -9,6 +9,7 @@
     "baseUrl": ".",
     "paths": {
       "__WEB_SHARED_WORKSPACE__": ["../shared/src/index.ts"],
+      "__WEB_SHARED_WORKSPACE__/*": ["../shared/src/*"],
       "@xfilecom/front-core": ["../../../../front-core/src/index.ts"]
     },
     "allowImportingTsExtensions": true,

package/template/web/admin/vite.config.ts

@@ -7,6 +7,11 @@ import react from '@vitejs/plugin-react';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/** xframe 모노레포 안: 로컬 front-core 소스 → Vite가 바로 번들 (npm dist 생략). */
+const frontCoreSrc = path.resolve(__dirname, '../../../../front-core/src');
+
+const webSharedSrc = path.resolve(__dirname, '../shared/src');
+
 function readYaml(file: string): Record<string, unknown> {
   if (!existsSync(file)) return {};
   const parsed = yaml.load(readFileSync(file, 'utf8'));
@@ -59,6 +64,12 @@ export default defineConfig(({ mode }) => {
     typeof cfg.app?.title === 'string' ? cfg.app.title : '__PACKAGE_NAME__ (admin)';
   return {
     plugins: [react()],
+    resolve: {
+      alias: {
+        '@xfilecom/front-core': frontCoreSrc,
+        '__WEB_SHARED_WORKSPACE__': webSharedSrc,
+      },
+    },
     define: {
       'import.meta.env.VITE_API_BASE_URL': JSON.stringify(apiBase),
       'import.meta.env.VITE_APP_TITLE': JSON.stringify(title),

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@xfilecom/front-core/tokens.css';
-import '__WEB_SHARED_WORKSPACE__/styles/xfc-theme.css';
 import '@xfilecom/front-core/base.css';
+import '__WEB_SHARED_WORKSPACE__/styles/xfc-theme.css';
 import '__WEB_SHARED_WORKSPACE__/styles/app.css';
 import { App } from './App';
 

package/template/web/client/tsconfig.json

@@ -9,6 +9,7 @@
     "baseUrl": ".",
     "paths": {
       "__WEB_SHARED_WORKSPACE__": ["../shared/src/index.ts"],
+      "__WEB_SHARED_WORKSPACE__/*": ["../shared/src/*"],
       "@xfilecom/front-core": ["../../../../front-core/src/index.ts"]
     },
     "allowImportingTsExtensions": true,

package/template/web/client/vite.config.ts

@@ -7,6 +7,12 @@ import react from '@vitejs/plugin-react';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/** xframe 모노레포 안: 로컬 front-core 소스 → Vite가 바로 번들 (npm dist 생략). */
+const frontCoreSrc = path.resolve(__dirname, '../../../../front-core/src');
+
+/** file:../shared 복사본이 아닌 워크스페이스 web/shared/src (플레이스홀더 패키지 이름과 동일 키) */
+const webSharedSrc = path.resolve(__dirname, '../shared/src');
+
 function readYaml(file: string): Record<string, unknown> {
   if (!existsSync(file)) return {};
   const parsed = yaml.load(readFileSync(file, 'utf8'));
@@ -59,6 +65,12 @@ export default defineConfig(({ mode }) => {
     typeof cfg.app?.title === 'string' ? cfg.app.title : '__PACKAGE_NAME__ (client)';
   return {
     plugins: [react()],
+    resolve: {
+      alias: {
+        '@xfilecom/front-core': frontCoreSrc,
+        '__WEB_SHARED_WORKSPACE__': webSharedSrc,
+      },
+    },
     define: {
       'import.meta.env.VITE_API_BASE_URL': JSON.stringify(apiBase),
       'import.meta.env.VITE_APP_TITLE': JSON.stringify(title),

package/template/web/shared/README.md

@@ -11,8 +11,8 @@ Vite 앱(`web/client`, `web/admin`)이 함께 쓰는 **React 컴포넌트, 스
 
 ```ts
 import '@xfilecom/front-core/tokens.css';
-import '__WEB_SHARED_WORKSPACE__/styles/xfc-theme.css';
 import '@xfilecom/front-core/base.css';
+import '__WEB_SHARED_WORKSPACE__/styles/xfc-theme.css';
 import '__WEB_SHARED_WORKSPACE__/styles/app.css';
 ```
 
@@ -23,3 +23,18 @@ import { Shell } from '__WEB_SHARED_WORKSPACE__';
 ```
 
 새 파일을 앱에서 가져오려면 `package.json`의 **`exports`**에 서브패스를 추가하세요.
+
+## `@xfilecom/front-core`를 모노레포에서 고치는 경우
+
+`web/client`·`web/admin`의 **Vite `resolve.alias`**가 형제 디렉터리의 `front-core/src`(xframe 모노레포 기준 `packages/front-core/src`)를 가리키도록 되어 있으면, npm `dist/`가 아니라 **로컬 소스**가 번들됩니다. dev 중 HMR로 반영되는 것이 정상입니다.
+
+스캐폴드만 복사한 프로젝트처럼 그 경로가 없으면 alias가 깨지므로, `package.json`의 `@xfilecom/front-core` 버전과 `npm run build`(해당 패키지)로 갱신하세요.
+
+### `web/shared/tsconfig.json`에는 `paths`로 front-core를 붙이지 마세요
+
+`rootDir`가 `src`인데 `@xfilecom/front-core`를 `../../../.../front-core/src`로 매핑하면, TypeScript가 **rootDir 밖 소스**를 끌어와 `File is not under 'rootDir'` 오류가 납니다.  
+`web/shared` 패키지 타입체크는 **`node_modules`의 `@xfilecom/front-core`**에 맡기고, 로컬 소스 번들은 위 **Vite alias**(client/admin)만 사용하면 됩니다.
+
+### `web/shared` CSS·TS가 수정해도 반영되지 않을 때
+
+`file:../shared` 가 `node_modules`에 **복사본**으로 설치되면 Vite는 낡은 파일을 씁니다. `web/client`·`web/admin`의 Vite 설정에 **`__WEB_SHARED_WORKSPACE__` → `../shared/src`** alias가 있어 워크스페이스 소스를 직접 가리킵니다.

package/template/web/shared/src/styles/app.css

@@ -1,8 +1,8 @@
 /**
  * 앱 레이아웃 — `html/html` 모바일 프레임(폭 480)에 맞춤.
  *
- * 엔트리에서 @xfilecom/front-core/base.css 다음에 로드하세요.
- * 이 파일은 tokens / xfc-theme / atoms 이후이므로
+ * 엔트리에서 xfc-theme.css 다음(마지막 레이아웃·오버라이드)에 로드하세요.
+ * 이 파일은 tokens → base → xfc-theme 이후이므로
  *   - 레이아웃(.xfc-page 등)과
  *   - 필요 시 atoms(.xfc-btn, .xfc-toast 등) 덮어쓰기
  * 를 같은 파일에 둘 수 있습니다.
@@ -67,9 +67,4 @@
   border-bottom: 1px solid var(--xfc-border-header);
 }
 
-/* —— optional: front-core atoms 오버라이드 (base.css 이후 로드됨) —— */
-/*
-.xfc-btn--primary {
-  border-radius: var(--xfc-radius-md);
-}
-*/
+/* —— front-core atoms 추가 오버라이드는 xfc-theme.css 또는 여기 (app이 마지막 로드) —— */

package/template/web/shared/src/styles/xfc-theme.css

@@ -1,18 +1,46 @@
 /**
- * 앱·브랜드별 디자인 토큰 덮어쓰기.
+ * 앱·브랜드별 토큰 + (선택) atoms 보강.
  *
- * 엔트리(main.tsx)에서 반드시 다음 순서로 넣으세요:
+ * 엔트리(main.tsx) 권장 순서:
  *   1. @xfilecom/front-core/tokens.css
- *   2. 이 파일 (xfc-theme.css)
- *   3. @xfilecom/front-core/base.css   ← atoms 가 var(--xfc-*) 를 참조
- *   4. app.css                         ← 레이아웃 + atoms(.xfc-*) 클래스 오버라이드
+ *   2. @xfilecom/front-core/base.css
+ *   3. 이 파일 (xfc-theme.css)  ← :root 덮어쓰기 + .xfc-* 가 base 보다 나중에 적용
+ *   4. app.css                  ← 레이아웃·추가 오버라이드
  *
- * 여기서 :root 의 --xfc-* 를 바꾸면 Button·Input·Toast 등 front-core atoms 스타일에 그대로 반영됩니다.
+ * :root 의 --xfc-* 는 어느 시점에 두어도 var() 해석 시 최종 값이 쓰이고,
+ * 아래 .xfc-btn 규칙은 base.css 다음에 로드되어야 덮어쓰기가 됩니다.
  */
 
-/* 예시 (필요할 때 주석 해제)
 :root {
-  --xfc-accent: #2a5bff;
-  --xfc-accent-hover: #2248e6;
+  --xfc-accent: #0d9488;
+  --xfc-accent-hover: #0f766e;
+  --xfc-accent-fg: #ffffff;
+  --xfc-bg-muted: #f0fdfa;
+  --xfc-radius-xs: 10px;
+  --xfc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--xfc-accent) 30%, transparent);
+  /* 버튼·인풋 등 padding 에 쓰이는 토큰 */
+  --xfc-space-lg: 18px;
+  --xfc-space-xl: 26px;
+}
+
+/* 스캐폴드 기본 예시 — primary 버튼 톤 (base.css 이후 로드 전제) */
+.xfc-btn {
+  min-height: 44px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 0.8125rem;
+}
+
+.xfc-btn--primary {
+  border: 2px solid color-mix(in srgb, var(--xfc-accent-fg) 35%, transparent);
+  box-shadow:
+    0 1px 0 color-mix(in srgb, #000 18%, transparent),
+    0 8px 24px color-mix(in srgb, var(--xfc-accent) 40%, transparent);
+}
+
+.xfc-btn--primary:hover:not(:disabled) {
+  box-shadow:
+    0 2px 0 color-mix(in srgb, #000 22%, transparent),
+    0 10px 28px color-mix(in srgb, var(--xfc-accent) 48%, transparent);
 }
-*/