feat(member): add cn util (#86)

apps/member/package.json

@@ -13,6 +13,7 @@
     "@gwansikk/server-chain": "^0.5.2",
     "@tanstack/react-query": "^5.18.1",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "entities": "^4.5.0",
     "framer-motion": "^10.18.0",
@@ -21,7 +22,8 @@
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.21.2",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "tailwind-merge": "^2.2.2"
   },
   "devDependencies": {
     "@clab/design-system": "workspace:^",

apps/member/src/utils/string.ts

@@ -1,6 +1,12 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import * as entities from 'entities';
 import type { MembershipStatusType } from '@type/membershipFee';
 
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
+
 /**
  * 주어진 숫자를 한국식 통화 형식으로 포맷합니다.
  * @param amount 포맷할 숫자

yarn.lock

@@ -261,6 +261,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.24.0":
+  version: 7.24.4
+  resolution: "@babel/runtime@npm:7.24.4"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -2605,6 +2614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "clsx@npm:2.1.0"
+  checksum: c09c00ad14f638366ca814097e6cab533dfa1972a358da5b557be487168acbb25b4c1395e89ffa842a8a61ba87a462d2b4885bc9d4f8410b598f3cb339599cdb
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -5014,6 +5030,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:^4.2.1"
     autoprefixer: "npm:^10.4.16"
     classnames: "npm:^2.5.1"
+    clsx: "npm:^2.1.0"
     dayjs: "npm:^1.11.10"
     entities: "npm:^4.5.0"
     eslint: "npm:^8.56.0"
@@ -5031,6 +5048,7 @@ __metadata:
     react-icons: "npm:^5.0.1"
     react-router-dom: "npm:^6.21.2"
     recoil: "npm:^0.7.7"
+    tailwind-merge: "npm:^2.2.2"
     tailwindcss: "npm:^3.4.1"
     typescript: "npm:^5.2.2"
     vite: "npm:^5.0.8"
@@ -6909,6 +6927,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "tailwind-merge@npm:2.2.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.0"
+  checksum: 68a5e199848a467aed4f8d1a8d7b6a5b583ff72f1d2801e018bf245eaa41e6564b63ead9e2b708a214cefbd843970c5e0a21754d5f2a20e2c1238e25955685ce
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.3.0":
   version: 3.4.0
   resolution: "tailwindcss@npm:3.4.0"