refactor: tailwindcss 클래스명을 합병하는 유틸 함수 생성

HiimKwak · Nov 14, 2023 · f56d771 · f56d771
1 parent 4b00218
commit f56d771
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 11 deletions.
diff --git a/src/components/common/Game/GameWrapper.tsx b/src/components/common/Game/GameWrapper.tsx
@@ -1,6 +1,7 @@
 import { createContext, ReactNode } from 'react';
 
 import { GameDetailType } from '@/types/game';
+import { $ } from '@/utils/core';
 
 type GameProps = GameDetailType & {
   children: ReactNode;
@@ -12,13 +13,13 @@ export const GameContext = createContext<null | GameDetailType>(
 );
 
 export default function GameWrapper({
-  className = '',
+  className,
   children,
   ...props
 }: GameProps) {
   return (
     <GameContext.Provider value={props}>
-      <div className={className}>{children}</div>
+      <div className={$(className)}>{children}</div>
     </GameContext.Provider>
   );
 }
diff --git a/src/components/common/Game/Label.tsx b/src/components/common/Game/Label.tsx
@@ -1,4 +1,5 @@
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type LabelProps = {
   className?: string;
@@ -7,5 +8,5 @@ type LabelProps = {
 export default function Label({ className }: LabelProps) {
   const { name } = useGameContext();
 
-  return <div className={`${className}`}>{name}</div>;
+  return <div className={$(className)}>{name}</div>;
 }
diff --git a/src/components/common/Game/Score.tsx b/src/components/common/Game/Score.tsx
@@ -1,15 +1,16 @@
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type ScoreProps = {
   teamIndex: number;
   className?: string;
 };
 
-export default function Score({ teamIndex, className = '' }: ScoreProps) {
+export default function Score({ teamIndex, className }: ScoreProps) {
   const { firstTeamScore, secondTeamScore } = useGameContext();
 
   return (
-    <span className={`${className}`}>
+    <span className={$(className)}>
       {teamIndex === 1 ? firstTeamScore : secondTeamScore}
     </span>
   );

diff --git a/src/components/common/Game/Status.tsx b/src/components/common/Game/Status.tsx
@@ -1,12 +1,13 @@
 import { GAME_STATUS } from '@/constants/gameStatus';
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type StatusProps = {
   className?: string;
 };
 
-export default function Status({ className = '' }: StatusProps) {
+export default function Status({ className }: StatusProps) {
   const { gameStatus } = useGameContext();
 
-  return <div className={`${className}`}>{GAME_STATUS[gameStatus]}</div>;
+  return <div className={$(className)}>{GAME_STATUS[gameStatus]}</div>;
 }
diff --git a/src/components/common/Game/Team.tsx b/src/components/common/Game/Team.tsx
@@ -1,19 +1,20 @@
 import Image from 'next/image';
 
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type TeamProps = {
   teamIndex: number;
   className?: string;
 };
 
-export default function Team({ teamIndex, className = '' }: TeamProps) {
+export default function Team({ teamIndex, className }: TeamProps) {
   const { firstTeam, secondTeam } = useGameContext();
 
   const targetTeamInfo = teamIndex === 1 ? firstTeam : secondTeam;
 
   return (
-    <div className={`${className}`}>
+    <div className={$(className)}>
       <Image
         width="100"
         height="100"

diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
@@ -1,11 +1,13 @@
 import { InputHTMLAttributes } from 'react';
 
+import { $ } from '@/utils/core';
+
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
 export default function Input({ className, ...props }: InputProps) {
   return (
     <input
-      className={`block w-full rounded-lg border p-2 ${className}`}
+      className={$('block w-full rounded-lg border p-2', className)}
       {...props}
     />
   );

diff --git a/src/components/common/Select/Select.tsx b/src/components/common/Select/Select.tsx
@@ -1,5 +1,7 @@
 import { ReactNode, SelectHTMLAttributes } from 'react';
 
+import { $ } from '@/utils/core';
+
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   children?: ReactNode;
 }
@@ -10,7 +12,7 @@ export default function Select({
   ...props
 }: SelectProps) {
   return (
-    <select {...props} className="block w-full rounded-lg border p-2">
+    <select {...props} className={$('block w-full rounded-lg border p-2')}>
       {placeholder && (
         <option value="0" disabled hidden>
           {placeholder}

diff --git a/src/utils/core.ts b/src/utils/core.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const $ = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};