refactor(status): apply @clab/utils cn utility function (#171)

kgu-clab · Jun 25, 2024 · 26bbeb5 · 26bbeb5
1 parent 63928a6
commit 26bbeb5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/apps/status/src/widgets/service-status/ui/CurrentServices.tsx b/apps/status/src/widgets/service-status/ui/CurrentServices.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@clab/utils';
+
 import { SERVICE_LIST } from '@/src/shared';
 import Title from '@/src/shared/ui/Title';
 
@@ -6,7 +8,10 @@ import ServiceStatusItem from './ServiceStatusItem';
 function StatusBanner({ status }: { status: boolean }) {
   return (
     <div
-      className={`w-full rounded-md ${status ? 'bg-green-500' : 'bg-red-500'} px-8 py-4 text-lg font-semibold text-white`}
+      className={cn(
+        'w-full rounded-md px-8 py-4 text-lg font-semibold text-white',
+        status ? 'bg-green-500' : 'bg-red-500',
+      )}
     >
       {status
         ? '현재 서비스가 정상적으로 운영되고 있습니다.'

diff --git a/apps/status/src/widgets/service-status/ui/ServiceStatusItem.tsx b/apps/status/src/widgets/service-status/ui/ServiceStatusItem.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@clab/utils';
+
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -10,7 +12,10 @@ interface StatusItemProps {
 function StatusTag({ status }: { status: boolean }) {
   return (
     <div
-      className={`w-fit rounded-md ${status ? 'bg-green-500' : 'bg-red-500'} px-2 py-1 text-center text-sm font-medium text-white`}
+      className={cn(
+        'w-fit rounded-md px-2 py-1 text-center text-sm font-medium text-white',
+        status ? 'bg-green-500' : 'bg-red-500',
+      )}
     >
       {status ? '서비스 중' : '서비스 일시 중단'}
     </div>