feat: CSS Variable로 반응형 구현 (#39)

* feat: 데스크탑 및 모바일 뷰 CSS Variable 추가

* chore: 파일 끝 빈 줄 추가

* fix: 컴포넌트 상대 경로 수정

* chore: 컴포넌트 주석 처리

---------

Co-authored-by: solar3070 <>

packages/ui/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/dist
+.DS_Store
+/*.css

packages/ui/.npmignore

@@ -0,0 +1,4 @@
+/src/
+/scripts/
+.gitignore
+tsconfig.json

packages/ui/Toast/parts/style.css.ts

@@ -2,7 +2,7 @@ import { keyframes, style } from "@vanilla-extract/css";
 import theme from "../../theme.css";
 
 const toastAnimation = keyframes({
-  "0%, 100%": { transform: "translate(-50%, calc(-100% - 36px))" },
+  "0%, 100%": { transform: "translate(-50%, calc(-100% - var(--mds-toast-top, 36px)))" },
   "10%, 90%": { transform: "translate(-50%, 0)" },
 });
 
@@ -14,12 +14,12 @@ export const root = style({
   gap: "8px",
 
   position: "fixed",
-  top: "36px",
+  top: "var(--mds-toast-top, 36px)",
   left: "50%",
   transform: "translateX(-50%)",
   transition: "transform .2s linear",
 
-  width: "380px",
+  width: "var(--mds-toast-width, 380px)",
   padding: "14px 16px",
   borderRadius: "18px",
   backgroundColor: theme.colors.gray10,

packages/ui/cssVariables.ts

@@ -15,16 +15,16 @@ export const desktopVariables = `:root {
   --mds-dialog-title-font-weight:600;
   --mds-dialog-title-font-line-height:30px;
   --mds-dialog-title-font-letter-spacing:-2%;
-
+  
   --mds-dialog-title-margin-bottom:12;
 
-  
   --mds-dialog-description-font-family: SUIT;
   --mds-dialog-description-font-size:16px;
   --mds-dialog-description-font-style:normal;
   --mds-dialog-description-font-weight:400;
   --mds-dialog-description-font-line-height:26px;
   --mds-dialog-description-font-letter-spacing:-1.5%;
+
 }`;
 
 export const mobileVariables = `:root {

packages/ui/index.ts

@@ -0,0 +1,8 @@
+export * from "./cssVariables";
+
+// component exports
+// export { default as Button } from "./Button";
+// export { ToastProvider, useToast } from "./Toast";
+// export type { ToastOptionType } from "./Toast";
+// export { default as Test } from "./Test";
+// export { default as Dialog } from "./Dialog";

packages/ui/package.json

@@ -1,10 +1,13 @@
 {
   "name": "ui",
   "version": "0.0.0",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "license": "MIT",
   "scripts": {
+    "build": "tsup index.ts cssVariables.ts --format cjs,esm --dts && yarn build-css-modules",
+    "build-css-modules": "node ./scripts/build-css-modules.js",
     "lint": "eslint .",
     "generate:component": "turbo gen react-component"
   },
@@ -17,6 +20,7 @@
     "eslint-config-custom": "*",
     "react": "^18.2.0",
     "tsconfig": "*",
+    "tsup": "^8.0.1",
     "typescript": "^4.5.2"
   },
   "dependencies": {

packages/ui/scripts/build-css-modules.js

@@ -0,0 +1,26 @@
+const fs = require("fs");
+const path = require("path");
+const allVariables = require("../dist/cssVariables");
+const outputDir = require("../tsconfig.json").compilerOptions.outDir;
+
+Object.keys(allVariables).forEach((key) => {
+  const variableValues = Object.entries(allVariables).find(
+    ([name]) => name === key
+  )[1];
+
+  fs.writeFileSync(
+    path.join(outputDir, toFileName(key) + ".css"),
+    `${variableValues}`
+  );
+});
+
+function toCssCasing(str) {
+  return str
+    .replace(/([a-z])/, "$1")
+    .replace(/([A-Z])/g, "-$1")
+    .toLowerCase();
+}
+
+function toFileName(str) {
+  return toCssCasing(str);
+}

packages/ui/tsconfig.json

@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
-      "jsx": "react"
+    "jsx": "react-jsx",
+    "outDir": ".",
+    "allowSyntheticDefaultImports": true
   },
   "extends": "tsconfig/react-library.json",
-  "include": ["."],
+  "include": ["index.ts", "cssVariables.ts"],
   "exclude": ["dist", "build", "node_modules"]
 }

yarn.lock

@@ -10276,6 +10276,26 @@ tsup@^7.2.0:
     sucrase "^3.20.3"
     tree-kill "^1.2.2"
 
+tsup@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmjs.org/tsup/-/tsup-8.0.1.tgz#04a0170f7bbe77e81da3b53006b0a40282291833"
+  integrity sha512-hvW7gUSG96j53ZTSlT4j/KL0q1Q2l6TqGBFc6/mu/L46IoNWqLLUzLRLP1R8Q7xrJTmkDxxDoojV5uCVs1sVOg==
+  dependencies:
+    bundle-require "^4.0.0"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.19.2"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^4.0.1"
+    resolve-from "^5.0.0"
+    rollup "^4.0.2"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"