feat: 컴포넌트 추가, 스타일 수정

web-app/app/shared/components/calendar/Calendar.tsx

@@ -24,13 +24,13 @@ const cellStyles = tv({
       false: '',
     },
     isDisabled: {
-      true: 'cursor-default text-kc-gray-be',
+      true: 'cursor-default text-dabeeo-gray-be',
     },
     isUnavailable: {
-      true: 'cursor-default text-kc-gray-be line-through',
+      true: 'cursor-default text-dabeeo-gray-be line-through',
     },
     isOutsideMonth: {
-      true: 'text-kc-gray-be',
+      true: 'text-dabeeo-gray-be',
     },
     isSunday: {
       true: 'text-[#e48686]',
@@ -143,8 +143,8 @@ const navButton = tv({
   base: 'flex h-7 w-7 items-center justify-center rounded-sm border-none bg-transparent outline-none',
   variants: {
     isDisabled: {
-      true: 'cursor-default text-kc-gray-be',
-      false: 'cursor-pointer text-kc-black-34 hover:bg-kc-gray-eb',
+      true: 'cursor-default text-dabeeo-gray-be',
+      false: 'cursor-pointer text-dabeeo-black-34 hover:bg-dabeeo-gray-eb',
     },
     isFocusVisible: {
       true: 'ring-2 ring-offset-2 ring-primary',
@@ -161,7 +161,7 @@ export function CalendarHeader() {
       <AriaButton slot="previous" className={(renderProps) => navButton(renderProps)}>
         <ChevronLeftIcon className="h-4 w-4" />
       </AriaButton>
-      <Heading className="mx-2 flex-1 text-center text-sm font-semibold text-kc-black-34" />
+      <Heading className="mx-2 flex-1 text-center text-sm font-semibold text-dabeeo-black-34" />
       <AriaButton slot="next" className={(renderProps) => navButton(renderProps)}>
         <ChevronRightIcon className="h-4 w-4" />
       </AriaButton>
@@ -173,7 +173,7 @@ export function CalendarGridHeader() {
   return (
     <AriaCalendarGridHeader>
       {(day) => (
-        <CalendarHeaderCell className="h-[30px] w-[30px] text-xs font-semibold text-kc-gray-99 first:text-[#e48686] last:text-[#7b8cc8]">
+        <CalendarHeaderCell className="h-[30px] w-[30px] text-xs font-semibold text-dabeeo-gray-99 first:text-[#e48686] last:text-[#7b8cc8]">
           {day}
         </CalendarHeaderCell>
       )}

web-app/app/shared/components/calendar/RangeCalendar.tsx

@@ -21,10 +21,10 @@ const rangeCell = tv({
       cap: 'bg-primary font-bold text-white',
     },
     isDisabled: {
-      true: 'text-kc-gray-be',
+      true: 'text-dabeeo-gray-be',
     },
     isOutsideMonth: {
-      true: 'text-kc-gray-be',
+      true: 'text-dabeeo-gray-be',
     },
     isSunday: {
       true: 'text-[#e48686]',