feat/#197 Change color-style

hanaro-on-and-on · Jul 9, 2024 · 42a5551 · 42a5551
1 parent 4e08da2
commit 42a5551
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/src/components/ui/CalendarMark.tsx b/src/components/ui/CalendarMark.tsx
@@ -1,5 +1,5 @@
 import calculateDailyWage from '../../utils/get-DailyPay';
-import { getColor } from '../../utils/get-color';
+import { getBorderColor, getColor } from '../../utils/get-color';
 import { HStack } from './Stack';
 
 type CalendarMarkProps = {
@@ -17,9 +17,11 @@ const CalendarMark = (props: CalendarMarkProps) => {
 
   return (
     <div
-      className={`flex flex-row rounded-lg border gap-0.5 border-red-300 text-2xs items-left`}
+      className={`flex flex-row rounded-lg border gap-0.5 ${getBorderColor(workPlaceColor)} text-2xs items-left`}
     >
-      <div className='font-semibold bg-red-300 rounded-lg pr-1'>
+      <div
+        className={`font-semibold ${getColor(workPlaceColor)} rounded-lg pr-1`}
+      >
         {employeeSize}
       </div>
       <span className='font-semibold'>{payment.toLocaleString()}</span>

diff --git a/src/utils/get-color.ts b/src/utils/get-color.ts
@@ -53,3 +53,30 @@ export function getTextColor(colorType: string) {
       return 'text-violet-200';
   }
 }
+
+export function getBorderColor(colorType: string) {
+  switch (colorType) {
+    case '01':
+      return 'border-red-200';
+    case '02':
+      return 'border-lime-200';
+    case '03':
+      return 'border-yellow-200 ';
+    case '04':
+      return 'border-blue-100';
+    case '05':
+      return 'border-emerald-200';
+    case '06':
+      return 'border-slate-200';
+    case '07':
+      return 'border-cyan-200';
+    case '08':
+      return 'border-pink-100';
+    case '09':
+      return 'border-fuchsia-100';
+    case '10':
+      return 'border-violet-100';
+    default:
+      return 'border-violet-200';
+  }
+}