feat: css properties

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`

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 {

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;
+};