From 58ca686fa5b315330d313ec5d932bfec93e60739 Mon Sep 17 00:00:00 2001
From: gwansikk <seorit98@gmail.com>
Date: Mon, 13 May 2024 02:58:42 +0900
Subject: [PATCH] refactor(design-system): update grid variants to use string
 literals (#133)

---
 .../design-system/src/Grid/Grid.styles.ts     | 24 +++++++++----------
 packages/design-system/src/Grid/Grid.tsx      | 12 +++++-----
 packages/design-system/src/Grid/Grid.types.ts | 17 ++++++++++++-
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/design-system/src/Grid/Grid.styles.ts b/packages/design-system/src/Grid/Grid.styles.ts
index 960b227b..48fd5ea2 100644
--- a/packages/design-system/src/Grid/Grid.styles.ts
+++ b/packages/design-system/src/Grid/Grid.styles.ts
@@ -1,18 +1,18 @@
 import { cva } from 'class-variance-authority';
 
-export const gridVariants = cva('gird', {
+export const gridVariants = cva('grid', {
   variants: {
     col: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-2',
-      3: 'grid-cols-3',
-      4: 'grid-cols-4',
-      5: 'grid-cols-5',
-      6: 'grid-cols-6',
-      7: 'grid-cols-7',
-      8: 'grid-cols-8',
-      9: 'grid-cols-9',
-      10: 'grid-cols-10',
+      '1': 'grid-cols-1',
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+      '5': 'grid-cols-5',
+      '6': 'grid-cols-6',
+      '7': 'grid-cols-7',
+      '8': 'grid-cols-8',
+      '9': 'grid-cols-9',
+      '10': 'grid-cols-10',
     },
     gap: {
       none: 'gap-0',
@@ -22,7 +22,7 @@ export const gridVariants = cva('gird', {
     },
   },
   defaultVariants: {
-    col: 1,
+    col: '1',
     gap: 'none',
   },
 });
diff --git a/packages/design-system/src/Grid/Grid.tsx b/packages/design-system/src/Grid/Grid.tsx
index aba8fc53..60d1af0e 100644
--- a/packages/design-system/src/Grid/Grid.tsx
+++ b/packages/design-system/src/Grid/Grid.tsx
@@ -1,14 +1,14 @@
 import React, { type HTMLAttributes, forwardRef } from 'react';
 
-import { type VariantProps } from 'class-variance-authority';
-
 import { cn } from '../utils';
 import { gridVariants } from './Grid.styles';
-import { GridColVariant, GridGapVariant } from './Grid.types';
+import type {
+  GridColVariant,
+  GridGapVariant,
+  GridVariantProps,
+} from './Grid.types';
 
-interface GridProps
-  extends HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof gridVariants> {
+interface GridProps extends HTMLAttributes<HTMLDivElement>, GridVariantProps {
   col?: GridColVariant;
   gap?: GridGapVariant;
 }
diff --git a/packages/design-system/src/Grid/Grid.types.ts b/packages/design-system/src/Grid/Grid.types.ts
index 6bbafb25..db50ebe8 100644
--- a/packages/design-system/src/Grid/Grid.types.ts
+++ b/packages/design-system/src/Grid/Grid.types.ts
@@ -1,4 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+
 import type { DesignSystemSizeVariant } from '../types';
+import { gridVariants } from './Grid.styles';
+
+export type GridVariantProps = VariantProps<typeof gridVariants>;
 
-export type GridColVariant = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type GridColVariant =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
 export type GridGapVariant = DesignSystemSizeVariant<'none'>;