byuckchon-frontend-cli 1.0.1 → 1.0.3

package/README.md

@@ -1,2 +1,26 @@
 # byuckchon-frontend-cli
-byuckchon frontend CLI for creating React and Next.js projects
+
+[byuckchon](https://www.byuckchon.com) 컨벤션에 맞게 React(Vite) 또는 Next.js(App Router) TypeScript 프로젝트를 생성하는 CLI.
+
+## 요구 사항
+
+- [Node.js](https://nodejs.org/) (LTS 권장)
+
+## 사용법
+
+```bash
+npx byuckchon-frontend-cli
+```
+
+프로젝트 이름과 프레임워크를 묻는 프롬프트에 따라 답하면, 현재 디렉터리에 새 폴더가 만들어집니다.
+
+생성이 끝나면 안내에 따라 다음을 실행하세요.
+
+```bash
+cd <프로젝트-이름>
+npm run dev
+```
+
+## 라이선스
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byuckchon-frontend-cli",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "byuckchon frontend CLI for creating React and Next.js projects",
   "type": "module",
   "bin": {

package/src/generators/createBaseFiles.js

@@ -342,7 +342,7 @@ StyleDictionary.registerTransform({
       .toLowerCase(),
 });
 
-// Tailwind v4 @theme 변수 생성
+// color는 Tailwind 유틸리티로, typography는 .text-* 클래스로 생성
 StyleDictionary.registerFormat({
   name: "css/tailwind-theme",
   format: ({ dictionary }) => {
@@ -357,23 +357,33 @@ StyleDictionary.registerFormat({
       if (token.$type === "color") {
         css += \`  --color-\${token.name}: \${token.$value};\\n\`;
       }
+    });
+    css += "}\\n\\n";
+
+    css += "@layer components {\\n";
+    dictionary.allTokens.forEach((token) => {
       if (token.$type === "typography" && token.$value) {
         const typo = token.$value;
-        if (typo.fontFamily) {
-          css += \`  --font-family-\${token.name}: \${typo.fontFamily};\\n\`;
-        }
-        if (typo.fontWeight) {
-          css += \`  --font-weight-\${token.name}: \${typo.fontWeight};\\n\`;
-        }
+        css += \`  .text-\${token.name} {\\n\`;
         if (typo.fontSize) {
-          css += \`  --font-size-\${token.name}: \${withPx(typo.fontSize)};\\n\`;
+          css += \`    font-size: \${withPx(typo.fontSize)};\\n\`;
         }
         if (typo.lineHeight) {
-          css += \`  --line-height-\${token.name}: \${withPx(typo.lineHeight)};\\n\`;
+          css += \`    line-height: \${withPx(typo.lineHeight)};\\n\`;
+        }
+        if (typo.letterSpacing) {
+          css += \`    letter-spacing: \${typo.letterSpacing};\\n\`;
+        }
+        if (typo.fontWeight) {
+          css += \`    font-weight: \${typo.fontWeight};\\n\`;
         }
+        if (typo.fontFamily) {
+          css += \`    font-family: \${typo.fontFamily};\\n\`;
+        }
+        css += "  }\\n";
       }
     });
-    css += "}\\n\\n";
+    css += "}\\n";
 
     return css;
   },