From 831e6e4a0e96b0886258d801ff9bbbc106108ef1 Mon Sep 17 00:00:00 2001
From: Ye-Chan Kang <kyechan99@gmail.com>
Date: Mon, 11 Mar 2024 19:07:34 +0900
Subject: [PATCH] feat: css properties

---
 src/components/common/Card/index.tsx |  2 +-
 src/styles/GlobalStyle.tsx           |  4 ++++
 src/utils/css.ts                     | 21 +++++++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/css.ts

diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx
index fb2d7e4..f8dae25 100644
--- a/src/components/common/Card/index.tsx
+++ b/src/components/common/Card/index.tsx
@@ -13,7 +13,7 @@ const CardStyled = styled.div<CardProps>`
   border-radius: 0.5rem;
   background-color: ${({ theme }) => theme.colors.bg};
   box-shadow: 0 0 4px ${({ theme }) => theme.colors.gray['300']};
-  ${({ width }) => width && `width: ${width}`}px;
+  ${({ width }) => width && `width: ${width}px`};
 `;
 
 export const CardHead = styled.div`
diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx
index 67bd870..1ba41d7 100644
--- a/src/styles/GlobalStyle.tsx
+++ b/src/styles/GlobalStyle.tsx
@@ -1,5 +1,8 @@
 import { Global, Theme, css } from '@emotion/react';
 
+import { cssCustomProperties } from '@/utils/css';
+
+// import resolveConfigPath, { resolveDefaultConfigPath } from '@/utils/resolve';
 import theme from './theme';
 
 const GlobalCustomStyle = (theme: Theme) => css`
@@ -10,6 +13,7 @@ const GlobalCustomStyle = (theme: Theme) => css`
   }
 
   :root {
+    ${cssCustomProperties(theme.colors)}
   }
 
   body {
diff --git a/src/utils/css.ts b/src/utils/css.ts
new file mode 100644
index 0000000..850297d
--- /dev/null
+++ b/src/utils/css.ts
@@ -0,0 +1,21 @@
+/**
+ * CSS Variables
+ * @param obj Theme Data
+ * @param prefix prefix
+ * @returns
+ */
+export const cssCustomProperties = (obj: object, prefix: string = '') => {
+  let cssString = '';
+
+  Object.entries(obj).forEach(([key, value]) => {
+    const propertyName = prefix ? `${prefix}-${key}` : key;
+
+    if (typeof value === 'object') {
+      cssString += cssCustomProperties(value, propertyName);
+    } else {
+      cssString += `--${propertyName}: ${value};\n`;
+    }
+  });
+
+  return cssString;
+};