Container name 을 설정할 수 있게 변경했다

cobaltinc · Nov 9, 2023 · cdf21b6 · cdf21b6
1 parent 0012bbf
commit cdf21b6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 41 deletions.
diff --git a/config/rollup/create-package-config.ts b/config/rollup/create-package-config.ts
@@ -39,6 +39,14 @@ export default async function createPackageConfig(config: PkgConfigInput): Promi
       minify: config.format === 'umd',
       sourceMap: false,
       tsconfig: path.resolve(process.cwd(), 'tsconfig.json'),
+      optimizeDeps: {
+        esbuildOptions: {
+          define: {
+            global: 'globalThis',
+          },
+        },
+        include: [],
+      },
     }),
     json(),
     alias({ entries: aliasEntries }),

diff --git a/packages/co-design-core/src/components/ContainerQuery/ContainerQuery.style.ts b/packages/co-design-core/src/components/ContainerQuery/ContainerQuery.style.ts
@@ -4,29 +4,36 @@ interface ContainerQueryStyles {
   smallerThan?: CoBreakpoints | number;
   largerThan?: CoBreakpoints | number;
   style?: CSSObject;
+  containerName?: string;
   query: string;
 }
 
-export default createStyles((theme, { smallerThan, largerThan, query, style }: ContainerQueryStyles) => {
+export default createStyles((theme, { smallerThan, largerThan, query, style, containerName }: ContainerQueryStyles) => {
   const containerQuery: CSSObject = {};
   const minWidth = theme.fn.size({ size: largerThan, sizes: theme.breakpoints }) + 1;
   const maxWidth = theme.fn.size({ size: smallerThan, sizes: theme.breakpoints });
 
   if (largerThan && smallerThan) {
-    containerQuery[`@container (min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`] = style;
+    containerQuery[`@container ${containerName ? containerName + ' ' : ''}(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`] = style;
   } else {
     if (largerThan) {
-      containerQuery[`@container (min-width: ${theme.fn.size({ size: largerThan, sizes: theme.breakpoints }) + 1}px)`] = style;
+      containerQuery[
+        `@container ${containerName ? containerName + ' ' : ''}(min-width: ${theme.fn.size({ size: largerThan, sizes: theme.breakpoints }) + 1}px)`
+      ] = style;
     }
 
     if (smallerThan) {
-      containerQuery[`@container (max-width: ${theme.fn.size({ size: smallerThan, sizes: theme.breakpoints })}px)`] = style;
+      containerQuery[
+        `@container ${containerName ? containerName + ' ' : ''}(max-width: ${theme.fn.size({ size: smallerThan, sizes: theme.breakpoints })}px)`
+      ] = style;
     }
   }
 
   if (query) {
-    containerQuery[`@container ${query}`] = style;
+    containerQuery[`@container ${containerName ? containerName + ' ' : ''}${query}`] = style;
   }
 
-  return { containerQuery };
+  return {
+    containerQuery,
+  };
 });
diff --git a/packages/co-design-core/src/components/ContainerQuery/ContainerQuery.tsx b/packages/co-design-core/src/components/ContainerQuery/ContainerQuery.tsx
@@ -20,10 +20,13 @@ export interface ContainerQueryProps {
 
   /** 자식 요소에 적용되는 style 입니다. */
   style?: CSSObject;
+
+  /** 지정 컨테이너의 이름을 설정할 때 사용합니다. */
+  containerName?: string;
 }
 
-export function ContainerQuery({ children, smallerThan, largerThan, query, className, style }: ContainerQueryProps) {
-  const { classes, cx } = useStyles({ smallerThan, largerThan, query, style }, { name: 'ContainerQuery' });
+export function ContainerQuery({ children, smallerThan, largerThan, query, className, style, containerName }: ContainerQueryProps) {
+  const { classes, cx } = useStyles({ smallerThan, largerThan, query, style, containerName }, { name: 'ContainerQuery' });
   const child = React.Children.only(children) as React.ReactElement;
   return React.cloneElement(child, {
     className: cx(classes.containerQuery, child.props?.className, className),

diff --git a/packages/co-design-core/src/components/ContainerQuery/stories/ContainerQuery.stories.tsx b/packages/co-design-core/src/components/ContainerQuery/stories/ContainerQuery.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { ContainerQuery } from '../ContainerQuery';
+import { View } from '../../View';
+import { Stack } from '../../Stack';
 
 export default {
   title: '@co-design/core/ContainerQuery',
@@ -9,38 +11,21 @@ export default {
 export const Default = () => {
   const highlight = { color: 'blue' };
   return (
-    <div>
-      <ContainerQuery largerThan="xlarge" style={highlight}>
-        <div>largerThan xlarge</div>
-      </ContainerQuery>
-      <ContainerQuery largerThan="large" style={highlight}>
-        <div>largerThan large</div>
-      </ContainerQuery>
-      <ContainerQuery largerThan="medium" style={highlight}>
-        <div>largerThan medium</div>
-      </ContainerQuery>
-      <ContainerQuery largerThan="small" style={highlight}>
-        <div>largerThan small</div>
-      </ContainerQuery>
-      <ContainerQuery largerThan="xsmall" style={highlight}>
-        <div>largerThan xsmall</div>
-      </ContainerQuery>
-
-      <ContainerQuery smallerThan="xlarge" style={highlight}>
-        <div>smallerThan xlarge</div>
-      </ContainerQuery>
-      <ContainerQuery smallerThan="large" style={highlight}>
-        <div>smallerThan large</div>
-      </ContainerQuery>
-      <ContainerQuery smallerThan="medium" style={highlight}>
-        <div>smallerThan medium</div>
-      </ContainerQuery>
-      <ContainerQuery smallerThan="small" style={highlight}>
-        <div>smallerThan small</div>
-      </ContainerQuery>
-      <ContainerQuery smallerThan="xsmall" style={highlight}>
-        <div>smallerThan xsmall</div>
-      </ContainerQuery>
-    </div>
+    <Stack
+      co={{
+        width: '100%',
+        containerType: 'inline-size',
+      }}
+    >
+      <ContainerQuery largerThan={900} style={highlight}>
+        <View>largerThan 900</View>
+      </ContainerQuery>
+      <ContainerQuery largerThan={1000} style={highlight}>
+        <View>largerThan 1000</View>
+      </ContainerQuery>
+      <ContainerQuery smallerThan={1000} style={highlight}>
+        <View>smallerThan 1000</View>
+      </ContainerQuery>
+    </Stack>
   );
 };