ContainerQuery 추가했다

packages/co-design-core/src/components/ContainerQuery/ContainerQuery.style.ts

@@ -0,0 +1,32 @@
+import { createStyles, CoBreakpoints, CSSObject } from '@co-design/styles';
+
+interface ContainerQueryStyles {
+  smallerThan?: CoBreakpoints | number;
+  largerThan?: CoBreakpoints | number;
+  style?: CSSObject;
+  query: string;
+}
+
+export default createStyles((theme, { smallerThan, largerThan, query, style }: 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;
+  } else {
+    if (largerThan) {
+      containerQuery[`@container (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;
+    }
+  }
+
+  if (query) {
+    containerQuery[`@container ${query}`] = style;
+  }
+
+  return { containerQuery };
+});

packages/co-design-core/src/components/ContainerQuery/ContainerQuery.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CoBreakpoints, CSSObject } from '@co-design/styles';
+import useStyles from './ContainerQuery.style';
+
+export interface ContainerQueryProps {
+  /** ContainerQuery 컴포넌트는 오직 하나의 자식만 가질 수 있습니다. */
+  children: React.ReactElement;
+
+  /** 속성 값보다 작은 경우 자식 요소에 className과 style이 적용됩니다. */
+  smallerThan?: CoBreakpoints | number;
+
+  /** 속성 값보다 큰 경우 자식 요소에 className과 style이 적용됩니다. */
+  largerThan?: CoBreakpoints | number;
+
+  /** ContainerQuery를 raw string으로 적용합니다. */
+  query?: string;
+
+  /** 자식 요소에 적용되는 className 입니다. */
+  className?: string;
+
+  /** 자식 요소에 적용되는 style 입니다. */
+  style?: CSSObject;
+}
+
+export function ContainerQuery({ children, smallerThan, largerThan, query, className, style }: ContainerQueryProps) {
+  const { classes, cx } = useStyles({ smallerThan, largerThan, query, style }, { name: 'ContainerQuery' });
+  const child = React.Children.only(children) as React.ReactElement;
+  return React.cloneElement(child, {
+    className: cx(classes.containerQuery, child.props?.className, className),
+  });
+}
+
+ContainerQuery.displayName = '@co-design/core/ContainerQuery';

packages/co-design-core/src/components/ContainerQuery/index.ts

@@ -0,0 +1,2 @@
+export { ContainerQuery } from './ContainerQuery';
+export type { ContainerQueryProps } from './ContainerQuery';

packages/co-design-core/src/components/ContainerQuery/stories/ContainerQuery.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ContainerQuery } from '../ContainerQuery';
+
+export default {
+  title: '@co-design/core/ContainerQuery',
+  component: ContainerQuery,
+};
+
+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>
+  );
+};

packages/co-design-core/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './Center';
 export * from './Checkbox';
 export * from './Chips';
 export * from './Container';
+export * from './ContainerQuery';
 export * from './Divider';
 export * from './Drawer';
 export * from './EquallyGrid';