From 33fe19753cbe2d35d77a354958a301c0766da9bc Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Mon, 13 Nov 2023 18:43:00 +0900
Subject: [PATCH 1/4] =?UTF-8?q?build:=20prettier-plugin-tailwindcss=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc  | 4 +++-
 package.json | 1 +
 yarn.lock    | 5 +++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.prettierrc b/.prettierrc
index 9607cea..2d979e4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -6,5 +6,7 @@
   "trailingComma": "all",
   "printWidth": 80,
   "arrowParens": "avoid",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
index 623acee..a020618 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "lint-staged": "^15.1.0",
     "postcss": "^8",
     "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3",
     "typescript": "^5"
   }
diff --git a/yarn.lock b/yarn.lock
index 108b061..d9fe4dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3562,6 +3562,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz#d05dc42c6f2167e3bf2c20e9f71a1fff4232b5d9"
+  integrity sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==
+
 prettier@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"

From bdb39220f034730fb6e95bf225ccc3688770a8ee Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Mon, 13 Nov 2023 18:44:26 +0900
Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=EC=BB=A8=EB=B2=A4=EC=85=98?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20tailwindcss=20className=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/admin/page.tsx                             | 2 +-
 src/app/detail/[id]/modify/page.tsx                | 4 ++--
 src/app/detail/[id]/page.tsx                       | 2 +-
 src/app/detail/[id]/status/page.tsx                | 2 +-
 src/app/layout.tsx                                 | 2 +-
 src/app/page.tsx                                   | 6 +++---
 src/components/common/Input/Input.tsx              | 2 +-
 src/components/common/Select/Select.tsx            | 2 +-
 src/components/detail/CommentItem.tsx              | 6 +++---
 src/components/detail/CommentList.tsx              | 4 ++--
 src/components/detail/GameInfo.tsx                 | 2 +-
 src/components/detail/Record.tsx                   | 6 +++---
 src/components/home/GameItem/index.tsx             | 2 +-
 src/components/home/GameList/GameWithTimeStamp.tsx | 2 +-
 14 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 88b6895..710b57f 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -135,7 +135,7 @@ export default function Admin() {
         ))}
       </Select>
       {isTeamError && (
-        <div className="text-red-400 text-sm">팀을 다시 선택해주세요!</div>
+        <div className="text-sm text-red-400">팀을 다시 선택해주세요!</div>
       )}
 
       <label htmlFor="leagueName">
diff --git a/src/app/detail/[id]/modify/page.tsx b/src/app/detail/[id]/modify/page.tsx
index 35f30e7..4fde17f 100644
--- a/src/app/detail/[id]/modify/page.tsx
+++ b/src/app/detail/[id]/modify/page.tsx
@@ -93,7 +93,7 @@ export default function ModifyGame() {
 
       <label htmlFor="scoreTime">
         득점 시간
-        <div className="flex justify-center items-center gap-1">
+        <div className="flex items-center justify-center gap-1">
           <Input
             id="scoreTime"
             type="number"
@@ -118,7 +118,7 @@ export default function ModifyGame() {
       </label>
       <button
         type="submit"
-        className="border border-slate-200 rounded-md bg-green-600 text-white py-2 px-4 w-full disabled:opacity-70 disabled:pointer-none"
+        className="disabled:pointer-none w-full rounded-md border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
       >
         저장하기
       </button>
diff --git a/src/app/detail/[id]/page.tsx b/src/app/detail/[id]/page.tsx
index 7c525ba..7c1335d 100644
--- a/src/app/detail/[id]/page.tsx
+++ b/src/app/detail/[id]/page.tsx
@@ -35,7 +35,7 @@ export default function DetailPage({ params }: { params: { id: string } }) {
       {isLoggedIn && (
         <Link
           href={`/detail/${gameId}/modify`}
-          className="p-2 text-white bg-red-400 border border-red-500 rounded-lg w-fit"
+          className="w-fit rounded-lg border border-red-500 bg-red-400 p-2 text-white"
         >
           수정
         </Link>
diff --git a/src/app/detail/[id]/status/page.tsx b/src/app/detail/[id]/status/page.tsx
index f96175e..2b63cf9 100644
--- a/src/app/detail/[id]/status/page.tsx
+++ b/src/app/detail/[id]/status/page.tsx
@@ -33,7 +33,7 @@ export default function Status() {
       </Select>
       <button
         onClick={updateGameStatus}
-        className="mt-4 border border-slate-200 rounded-md bg-green-600 text-white py-2 px-4 w-full disabled:opacity-70 disabled:pointer-none"
+        className="disabled:pointer-none mt-4 w-full rounded-md border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
       >
         변경하기
       </button>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2b745a1..a880579 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`${inter.className} max-w-md m-auto bg-slate-50 p-4`}>
+      <body className={`${inter.className} m-auto max-w-md bg-slate-50 p-4`}>
         <ReactQueryProvider>
           <Header />
           {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8bb8505..3495b10 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -52,12 +52,12 @@ const DUMMY_GAME: GameType[] = [
 
 export default function Home() {
   return (
-    <main className="w-full flex flex-col gap-3">
-      <p className="text-xl font-bold text-center my-2">매치</p>
+    <main className="flex w-full flex-col gap-3">
+      <p className="my-2 text-center text-xl font-bold">매치</p>
       <div className="flex flex-col gap-8">
         {DUMMY_GAME.map(game => (
           <Game records={[]} videoId={''} key={game.id} {...game}>
-            <Game.Label className="border-black pb-1 mb-2 border-b-[1px]" />
+            <Game.Label className="mb-2 border-b-[1px] border-black pb-1" />
             <div className="flex items-center">
               <Game.Team teamIndex={1} />
               <Game.Score teamIndex={1} />
diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
index eb062b1..9ff64b9 100644
--- a/src/components/common/Input/Input.tsx
+++ b/src/components/common/Input/Input.tsx
@@ -5,7 +5,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
 export default function Input({ className, ...props }: InputProps) {
   return (
     <input
-      className={`block w-full p-2 border rounded-lg ${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
index 65d0671..a2ac65a 100644
--- a/src/components/common/Select/Select.tsx
+++ b/src/components/common/Select/Select.tsx
@@ -10,7 +10,7 @@ export default function Select({
   ...props
 }: SelectProps) {
   return (
-    <select {...props} className="block w-full p-2 border rounded-lg">
+    <select {...props} className="block w-full rounded-lg border p-2">
       {placeholder && (
         <option value="0" disabled hidden>
           {placeholder}
diff --git a/src/components/detail/CommentItem.tsx b/src/components/detail/CommentItem.tsx
index 8014102..30a8e4b 100644
--- a/src/components/detail/CommentItem.tsx
+++ b/src/components/detail/CommentItem.tsx
@@ -24,9 +24,9 @@ export const CommentItem = ({
     await postBlockComment(id);
   };
   return (
-    <li className="flex justify-start items-center gap-4">
+    <li className="flex items-center justify-start gap-4">
       <div
-        className={`p-3 rounded-lg shadow-md ${
+        className={`rounded-lg p-3 shadow-md ${
           isBlocked ? 'bg-gray-200' : 'bg-white'
         }`}
       >
@@ -47,7 +47,7 @@ export const CommentItem = ({
       {!isBlocked && isLoggedIn && (
         <button
           type="button"
-          className="text-red-500 min-w-max min-h-max p-[0.1rem] rounded-md border-2 border-red-500 bg-red-100 flex justify-center items-center"
+          className="flex min-h-max min-w-max items-center justify-center rounded-md border-2 border-red-500 bg-red-100 p-[0.1rem] text-red-500"
           onClick={handleBlockComment}
         >
           <Cross2Icon />
diff --git a/src/components/detail/CommentList.tsx b/src/components/detail/CommentList.tsx
index 1bc58f3..2172d33 100644
--- a/src/components/detail/CommentList.tsx
+++ b/src/components/detail/CommentList.tsx
@@ -39,7 +39,7 @@ export default function CommentList({ gameId }: { gameId: number }) {
           value={inputContent}
           onChange={e => setInputContent(e.target.value)}
           placeholder="댓글을 작성하세요"
-          className="w-full p-4 border-2 rounded-lg border-slate-400"
+          className="w-full rounded-lg border-2 border-slate-400 p-4"
         />
         <div className="flex items-center justify-between">
           <span className="text-xs text-gray-400">
@@ -49,7 +49,7 @@ export default function CommentList({ gameId }: { gameId: number }) {
           </span>
           <button
             type="submit"
-            className="float-right px-4 py-2 text-white bg-green-600 border rounded-lg border-slate-200 disabled:opacity-70 disabled:pointer-none"
+            className="disabled:pointer-none float-right rounded-lg border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
             disabled={inputContent.length == 0}
           >
             등록
diff --git a/src/components/detail/GameInfo.tsx b/src/components/detail/GameInfo.tsx
index a7f8d33..7a2756d 100644
--- a/src/components/detail/GameInfo.tsx
+++ b/src/components/detail/GameInfo.tsx
@@ -3,7 +3,7 @@ import { GameDetailType } from '@/types/game';
 
 export default function GameInfo({ game }: { game: GameDetailType }) {
   return (
-    <div className="flex flex-col gap-1 justify-center px-2 py-8 bg-white rounded-md">
+    <div className="flex flex-col justify-center gap-1 rounded-md bg-white px-2 py-8">
       <Game {...game}>
         <Game.Team teamIndex={1} />
         <Game.Score teamIndex={1} />
diff --git a/src/components/detail/Record.tsx b/src/components/detail/Record.tsx
index 2dd4760..f911c63 100644
--- a/src/components/detail/Record.tsx
+++ b/src/components/detail/Record.tsx
@@ -5,13 +5,13 @@ export const Record = ({ id, playerName, score, scoredAt }: GameRecordType) => {
   const { hour, minute } = useDate(scoredAt);
   return (
     <li
-      className="flex gap-4 items-center justify-center p-4 rounded-lg shadow-md bg-white"
+      className="flex items-center justify-center gap-4 rounded-lg bg-white p-4 shadow-md"
       key={id}
     >
-      <span className="text-lg text-center">
+      <span className="text-center text-lg">
         {playerName} 선수 {score}골 득점!
       </span>
-      <span className="text-xs opacity-50 text-center">
+      <span className="text-center text-xs opacity-50">
         {hour}시 {minute}분
       </span>
     </li>
diff --git a/src/components/home/GameItem/index.tsx b/src/components/home/GameItem/index.tsx
index 8ed21df..6bf6c30 100644
--- a/src/components/home/GameItem/index.tsx
+++ b/src/components/home/GameItem/index.tsx
@@ -8,7 +8,7 @@ export default function GameItem(props: GameDetailType) {
     <li key={props.id}>
       <Link
         href={`/detail/${props.id}`}
-        className="flex flex-col gap-1 justify-center p-2 rounded-lg shadow-md bg-white"
+        className="flex flex-col justify-center gap-1 rounded-lg bg-white p-2 shadow-md"
       >
         <Game {...props}>
           <Game.Label />
diff --git a/src/components/home/GameList/GameWithTimeStamp.tsx b/src/components/home/GameList/GameWithTimeStamp.tsx
index d400d17..0e2a41d 100644
--- a/src/components/home/GameList/GameWithTimeStamp.tsx
+++ b/src/components/home/GameList/GameWithTimeStamp.tsx
@@ -14,7 +14,7 @@ export default function GameWithTimeStamp({ data }: GameListProps) {
         <li key={game.id}>
           <Link
             href={`/detail/${game.id}`}
-            className="flex flex-col gap-1 justify-center p-2 rounded-lg shadow-md bg-white"
+            className="flex flex-col justify-center gap-1 rounded-lg bg-white p-2 shadow-md"
           >
             <Game records={[]} videoId="" {...game}>
               <Game.Label />

From 4b00218cde043850be6701728cac2896fe82480d Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Mon, 13 Nov 2023 23:41:49 +0900
Subject: [PATCH 3/4] =?UTF-8?q?build:=20tailwind-merge,=20clsx=20=EC=84=A4?=
 =?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  4 +++-
 yarn.lock    | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a020618..f196153 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
     "@tanstack/react-query": "^5.8.2",
     "@tanstack/react-query-devtools": "^5.8.2",
     "axios": "^1.5.1",
+    "clsx": "^2.0.0",
     "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.2.0",
diff --git a/yarn.lock b/yarn.lock
index d9fe4dc..6da0387 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,7 +41,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.2":
+"@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -1294,6 +1294,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4123,6 +4128,13 @@ synckit@^0.8.5:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.5.0"
 
+tailwind-merge@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.0.0.tgz#a0f3a8c874ebae5feec5595614d08245a5f88a39"
+  integrity sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+
 tailwindcss@^3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"

From f56d7716588a529406bbb615525183cc17d55ea6 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Mon, 13 Nov 2023 23:42:52 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20tailwindcss=20=ED=81=B4?=
 =?UTF-8?q?=EB=9E=98=EC=8A=A4=EB=AA=85=EC=9D=84=20=ED=95=A9=EB=B3=91?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=9C=A0=ED=8B=B8=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Game/GameWrapper.tsx | 5 +++--
 src/components/common/Game/Label.tsx       | 3 ++-
 src/components/common/Game/Score.tsx       | 5 +++--
 src/components/common/Game/Status.tsx      | 5 +++--
 src/components/common/Game/Team.tsx        | 5 +++--
 src/components/common/Input/Input.tsx      | 4 +++-
 src/components/common/Select/Select.tsx    | 4 +++-
 src/utils/core.ts                          | 6 ++++++
 8 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/core.ts

diff --git a/src/components/common/Game/GameWrapper.tsx b/src/components/common/Game/GameWrapper.tsx
index ab7b49a..34ab8cc 100644
--- 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
index 5f312a3..d463ff8 100644
--- 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
index 2c64536..dff2e63 100644
--- 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
index 2827df9..3e0fcff 100644
--- 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
index f888714..0faad5f 100644
--- 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
index 9ff64b9..4e8f183 100644
--- 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
index a2ac65a..798a6ed 100644
--- 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
new file mode 100644
index 0000000..abdcbea
--- /dev/null
+++ 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));
+};