refactor(shared/components): classNames에서 cx로 함수명 변경

dnd-side-project · Apr 16, 2024 · 5a0d421 · 5a0d421
1 parent 652dce8
commit 5a0d421
Show file tree

Hide file tree

Showing 21 changed files with 45 additions and 51 deletions.
diff --git a/packages/shared/components/src/button/button.tsx b/packages/shared/components/src/button/button.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './button.styles.css';
 
 export type ButtonProps = HTMLFavolinkProps<'button'> & {
@@ -21,7 +21,7 @@ export const Button = forwardRef<ButtonProps, 'button'>(
       <favolink.button
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-button',
           styles.buttonBase,
           styles.buttonSize[size],

diff --git a/packages/shared/components/src/button/icon-button.tsx b/packages/shared/components/src/button/icon-button.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import { type ReactElement } from 'react';
 import * as styles from './icon-button.styles.css';
 import * as theme from './icon-button.theme.css';
@@ -24,7 +24,7 @@ export const IconButton = forwardRef<IconButtonProps, 'button'>(
       <favolink.button
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-button',
           theme.iconButtonColor,
           styles.iconButtonBase,

diff --git a/packages/shared/components/src/icon/icon.tsx b/packages/shared/components/src/icon/icon.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 
 export type IconProps = HTMLFavolinkProps<'svg'>;
 
@@ -8,7 +8,7 @@ export const Icon = forwardRef<IconProps, 'svg'>(function Icon(props, ref) {
 
   const sharedProps = {
     ref,
-    className: classNames('favolink-icon', className),
+    className: cx('favolink-icon', className),
   };
 
   if (element && typeof element !== 'string') {

diff --git a/packages/shared/components/src/input/input-element.tsx b/packages/shared/components/src/input/input-element.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './input-element.styles.css';
 
 type InputElementProps = HTMLFavolinkProps<'div'>;
@@ -14,7 +14,7 @@ export const InputLeftElement = forwardRef<InputLeftElementProps, 'div'>(
       <favolink.div
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           '$favolink-input__left-element',
           styles.inputElementDirection.left,
           className,
@@ -36,7 +36,7 @@ export const InputRightElement = forwardRef<InputRightElementProps, 'div'>(
       <favolink.div
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-input__right-element',
           styles.inputElementDirection.right,
           className,

diff --git a/packages/shared/components/src/input/input-group.tsx b/packages/shared/components/src/input/input-group.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './input-group.styles.css';
 
 export type InputGroupProps = HTMLFavolinkProps<'div'>;
@@ -12,7 +12,7 @@ export const InputGroup = forwardRef<InputGroupProps, 'div'>(
       <favolink.div
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-input__group',
           styles.inputGroupBase,
           className,

diff --git a/packages/shared/components/src/input/input.tsx b/packages/shared/components/src/input/input.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './input.styles.css';
 
 export type InputProps = HTMLFavolinkProps<'input'> & {
@@ -14,7 +14,7 @@ export const Input = forwardRef<InputProps, 'input'>(
       <favolink.input
         {...restPorps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-input',
           styles.inputBase,
           styles.inputVariant[variant],

diff --git a/packages/shared/components/src/layout/flex.tsx b/packages/shared/components/src/layout/flex.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { type CSSProperties } from 'react';
 import * as styles from './flex.styles.css';
@@ -35,7 +35,7 @@ export const Flex = forwardRef<FlexProps, 'div'>(function Flex(props, ref) {
     <favolink.div
       {...restProps}
       ref={ref}
-      className={classNames(styles.flexBase, className)}
+      className={cx(styles.flexBase, className)}
       style={{
         ...assignInlineVars({
           [styles.flexJustify]: justify,

diff --git a/packages/shared/components/src/link/link.tsx b/packages/shared/components/src/link/link.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './link-styles.css';
 
 export type LinkProps = HTMLFavolinkProps<'a'> & {
@@ -22,7 +22,7 @@ export const Link = forwardRef<LinkProps, 'a'>(function Link(props, ref) {
       ref={ref}
       target={isExternal ? '_blank' : undefined}
       rel={isExternal ? 'noopener' : undefined}
-      className={classNames(
+      className={cx(
         'favolink-link',
         styles.linkBase,
         styles.linkColor[color],

diff --git a/packages/shared/components/src/modal/modal-body.tsx b/packages/shared/components/src/modal/modal-body.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 
 export type ModalBodyProps = HTMLFavolinkProps<'main'>;
 
@@ -12,7 +12,7 @@ export const ModalBody = forwardRef<ModalBodyProps, 'main'>(
         as="main"
         {...restProps}
         ref={ref}
-        className={classNames('favolink-modal__body', className)}
+        className={cx('favolink-modal__body', className)}
       >
         {children}
       </favolink.main>

diff --git a/packages/shared/components/src/modal/modal-content.tsx b/packages/shared/components/src/modal/modal-content.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './modal-content.styles.css';
 import { ModalOverlay } from './modal-overlay';
 import { useModalContext } from './modal.context';
@@ -21,7 +21,7 @@ export const ModalContent = forwardRef<ModalContentProps, 'div'>(
         <favolink.div
           {...restPorps}
           ref={ref}
-          className={classNames(
+          className={cx(
             'favolink-modal__content',
             styles.modalContentBase,
             className,

diff --git a/packages/shared/components/src/modal/modal-footer.tsx b/packages/shared/components/src/modal/modal-footer.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './modal-footer.styles.css';
 
 export type ModalFooterProps = HTMLFavolinkProps<'footer'>;
@@ -12,7 +12,7 @@ export const ModalFooter = forwardRef<ModalFooterProps, 'footer'>(
       <favolink.footer
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           `favolink-modal__footer`,
           styles.modalFooterBase,
           className,

diff --git a/packages/shared/components/src/modal/modal-header.tsx b/packages/shared/components/src/modal/modal-header.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './modal-header.styles.css';
 
 export type ModalHeaderProps = HTMLFavolinkProps<'header'>;
@@ -12,7 +12,7 @@ export const ModalHeader = forwardRef<ModalHeaderProps, 'header'>(
       <favolink.header
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-modal__header',
           styles.modalHeaderBase,
           className,

diff --git a/packages/shared/components/src/modal/modal-overlay.tsx b/packages/shared/components/src/modal/modal-overlay.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './modal-overlay.styles.css';
 
 export type ModalOverlayProps = HTMLFavolinkProps<'div'> & {
@@ -14,7 +14,7 @@ export const ModalOverlay = forwardRef<ModalOverlayProps, 'div'>(
       <favolink.div
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-modal__overlay',
           styles.modalOverlayBase,
           styles.modalOverlayVariant[variant],

diff --git a/packages/shared/components/src/modal/modal-title.tsx b/packages/shared/components/src/modal/modal-title.tsx
@@ -1,5 +1,5 @@
 import { favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './modal-title.styles.css';
 import { Heading, type HeadingProps } from '../typography';
 
@@ -17,7 +17,7 @@ export const ModalTitle = forwardRef<ModalTitleProps, typeof Heading>(
           as="h4"
           {...restProps}
           ref={ref}
-          className={classNames(
+          className={cx(
             'favolink-modal__title',
             styles.modalTitleBase,
             className,

diff --git a/packages/shared/components/src/modal/modal-topbar.tsx b/packages/shared/components/src/modal/modal-topbar.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './modal-topbar.styles.css';
 import { useModalContext } from './modal.context';
 import { Text } from '../typography';
@@ -20,7 +20,7 @@ export const ModalTopbar = forwardRef<ModalTopbarProps, 'div'>(
       <favolink.div
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           `favolink-modal__topbar`,
           styles.modalTopbarBase,
           styles.modalTopbarLayout[layout],

diff --git a/packages/shared/components/src/tag/tag-label.tsx b/packages/shared/components/src/tag/tag-label.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './tag-label.styles.css';
 import { useTagStylesContext } from './tag.context';
 
@@ -17,7 +17,7 @@ export const TagLabel = forwardRef<TagLabelProps, 'span'>(
       <favolink.span
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-tag__label',
           styles.tagLabelBase,
           styles.tagLabelSize[size],

diff --git a/packages/shared/components/src/tag/tag.tsx b/packages/shared/components/src/tag/tag.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import { TagStylesContextProvider } from './tag.context';
 import * as styles from './tag.styles.css';
 import * as theme from './tag.theme.css';
@@ -23,7 +23,7 @@ export const Tag = forwardRef<TagProps, 'span'>(function Tag(props, ref) {
       <favolink.span
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-tag',
           theme.tagColor,
           styles.tagBase,

diff --git a/packages/shared/components/src/toast/toast.provider.tsx b/packages/shared/components/src/toast/toast.provider.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import { useSyncExternalStore } from 'react';
 import { Toast } from './toast';
 import * as styles from './toast.provider.styles.css';
@@ -13,9 +13,7 @@ export function ToastProvider() {
   );
 
   const toastList = (
-    <Box
-      className={classNames('favolink-toast__list', styles.toastContainerBase)}
-    >
+    <Box className={cx('favolink-toast__list', styles.toastContainerBase)}>
       {toastState.map((toast) => (
         <Toast key={toast.id} {...toast} />
       ))}

diff --git a/packages/shared/components/src/toast/toast.tsx b/packages/shared/components/src/toast/toast.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import { useEffect } from 'react';
 import { type Toast, toastStore } from './toast.store';
 import * as styles from './toast.styles.css';
@@ -24,16 +24,16 @@ export function Toast(props: ToastProps) {
   }, [deleteToast, duration, id]);
 
   return (
-    <Box className={classNames('favolink-toast__item', styles.toastItemBase)}>
+    <Box className={cx('favolink-toast__item', styles.toastItemBase)}>
       <Heading
         as="h5"
         weight="semibold"
-        className={classNames(styles.toastItemTextBase)}
+        className={cx(styles.toastItemTextBase)}
       >
         {message}
       </Heading>
       {link && (
-        <Link color="gray" href={link}>
+        <Link cxolor="gray" href={link}>
           바로가기
         </Link>
       )}

diff --git a/packages/shared/components/src/typography/heading.tsx b/packages/shared/components/src/typography/heading.tsx
@@ -1,5 +1,5 @@
 import { favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import { type ComponentPropsWithoutRef, type ElementType } from 'react';
 import * as styles from './heading.styles.css';
 
@@ -22,7 +22,7 @@ export const Heading = forwardRef<HeadingProps, 'h2'>(
       <favolink.h2
         {...restProps}
         ref={ref}
-        className={classNames(
+        className={cx(
           'favolink-heading',
           styles.headingWeight[realWeight],
           className,

diff --git a/packages/shared/components/src/typography/text.tsx b/packages/shared/components/src/typography/text.tsx
@@ -1,5 +1,5 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
-import { classNames } from '@favolink/utils';
+import { cx } from '@favolink/utils';
 import * as styles from './text.styles.css';
 
 export type TextProps = HTMLFavolinkProps<'p'> & {
@@ -13,11 +13,7 @@ export const Text = forwardRef<TextProps, 'p'>(function Text(props, ref) {
     <favolink.p
       {...restProps}
       ref={ref}
-      className={classNames(
-        'favolink-text',
-        styles.textScale[scale],
-        className,
-      )}
+      className={cx('favolink-text', styles.textScale[scale], className)}
     >
       {children}
     </favolink.p>