chore: createInterpolation 관련 코드를 롤백한다

pedaling · Jun 3, 2024 · ae3cf98 · ae3cf98
1 parent 0f40d52
commit ae3cf98
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/vibrant-core/src/lib/createInterpolation/createInterpolation.spec.ts b/packages/vibrant-core/src/lib/createInterpolation/createInterpolation.spec.ts
@@ -38,14 +38,14 @@ const pseudoHoverProp = createSystemProp({
   shouldInterpolation: 'before',
 });
 
-describe.skip('createInterpolation', () => {
+describe('createInterpolation', () => {
   const { theme } = useCurrentTheme();
 
   const interpolation = createInterpolation([widthProp, heightProp, marginProp, pseudoHoverProp])({
     theme,
     breakpointIndex: 0,
   });
-  // eslint-disable-next-line @typescript-eslint/naming-convention
+
   let props: Record<string, any>;
 
   describe('when prop is 1 depth object', () => {
@@ -55,7 +55,7 @@ describe.skip('createInterpolation', () => {
       });
 
       it('systemProp return value is merged by media query key', () => {
-        expect(interpolation).toStrictEqual({
+        expect(interpolation(props)).toStrictEqual({
           width: 100,
           height: 100,
           '@media screen and (min-width: 640px)': {
@@ -72,7 +72,7 @@ describe.skip('createInterpolation', () => {
       });
 
       it('should removed non-systemProp key', () => {
-        expect(interpolation).toStrictEqual({ width: 100 });
+        expect(interpolation(props)).toStrictEqual({ width: 100 });
       });
     });
 
@@ -82,7 +82,7 @@ describe.skip('createInterpolation', () => {
       });
 
       it('should return empty object', () => {
-        expect(interpolation).toStrictEqual({});
+        expect(interpolation(props)).toStrictEqual({});
       });
     });
 
@@ -92,7 +92,7 @@ describe.skip('createInterpolation', () => {
       });
 
       it('should return empty object', () => {
-        expect(interpolation).toStrictEqual({});
+        expect(interpolation(props)).toStrictEqual({});
       });
     });
   });
@@ -103,7 +103,7 @@ describe.skip('createInterpolation', () => {
     });
 
     it('should return return value of all nested systemProp', () => {
-      expect(interpolation).toStrictEqual({
+      expect(interpolation(props)).toStrictEqual({
         '&:hover': { margin: 3 },
       });
     });

diff --git a/packages/vibrant-core/src/lib/createInterpolation/createInterpolation.ts b/packages/vibrant-core/src/lib/createInterpolation/createInterpolation.ts
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import type { CurrentTheme } from '@vibrant-ui/theme';
 import { isDefined, isRecord } from '@vibrant-ui/utils';
 import type { SystemProp } from '../createSystemProp';
@@ -48,7 +49,7 @@ export const createInterpolation = (systemProps: SystemProp[], defaultProps: any
   };
 
   return ({ theme, props }: { theme: CurrentTheme; props: Record<string, any> }) => {
-    const interpolationResult = childInterpolation({ ...defaultProps, ...props }, theme);
+    const interpolationResult = useMemo(() => childInterpolation({ ...defaultProps, ...props }, theme), [props, theme]);
 
     return useBuildStyle({ styleObjects: interpolationResult, theme });
   };