feat(WEB): 스켈레톤 구조 개선 및 달력 UI 개선

스켈레톤 시스템:
- 타이틀은 항상 표시, 나머지 영역만 스켈레톤 처리
- 헤더 액션, 검색, 테이블 영역 개별 스켈레톤 적용

달력 UI:
- 경계선 색상 border-gray-200으로 통일
- 지난 일자 배경색 bg-gray-300으로 더 어둡게
- 선택/오늘 날짜 색상 보라색으로 변경 (이벤트 바와 구분)
- 날짜-이벤트 바 간격 8px 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/common/ScheduleCalendar/DayCell.tsx

@@ -52,10 +52,10 @@ export function DayCell({
         isWeekend && isCurrentMonth && !isPast && 'text-red-500',
         // 지난 주말 - 연한 색상
         isWeekend && isCurrentMonth && isPast && !isToday && !isSelected && 'text-red-300',
-        // 오늘 - 굵은 글씨 (외곽선은 부모 셀에 적용)
-        isToday && !isSelected && 'font-bold text-primary',
-        // 선택됨 - 배경색 하이라이트
-        isSelected && 'bg-primary text-primary-foreground hover:bg-primary'
+        // 오늘 - 굵은 글씨 (외곽선은 부모 셀에 적용) - 보라색
+        isToday && !isSelected && 'font-bold text-purple-600',
+        // 선택됨 - 배경색 하이라이트 - 보라색
+        isSelected && 'bg-purple-500 text-white hover:bg-purple-600'
       )}
     >
       {/* 날짜 숫자 */}

src/components/common/ScheduleCalendar/MonthView.tsx

@@ -158,11 +158,11 @@ function WeekRow({
   // 셀 최소 높이 계산 (이벤트 행 수에 따라) - 더 넉넉하게 확보
   const segmentRowIndices = eventSegments.map(s => globalRowAssignments.get(s.event.id) || 0);
   const maxRowIndex = Math.max(0, ...segmentRowIndices);
-  const rowHeight = Math.max(120, 40 + Math.min(maxRowIndex + 1, visibleRows) * 28 + 24);
+  const rowHeight = Math.max(120, 48 + Math.min(maxRowIndex + 1, visibleRows) * 28 + 24);
 
   return (
     <div
-      className="relative grid grid-cols-7 border-b last:border-b-0"
+      className="relative grid grid-cols-7 border-b border-gray-200 last:border-b-0"
       style={{ minHeight: `${rowHeight}px` }}
     >
       {/* 날짜 셀들 */}
@@ -182,15 +182,15 @@ function WeekRow({
           <div
             key={date.toISOString()}
             className={cn(
-              'relative p-1 border-r last:border-r-0',
+              'relative p-1 border-r border-gray-200 last:border-r-0',
               'flex flex-col cursor-pointer transition-colors',
               // 기본 배경
               !isCurrMonth && 'bg-muted/30',
               // 지난 일자 - 회색 배경 (현재 월, 오늘/선택 제외)
-              isPast && isCurrMonth && !isToday && !isSelected && 'bg-gray-200 dark:bg-gray-700',
+              isPast && isCurrMonth && !isToday && !isSelected && 'bg-gray-300 dark:bg-gray-700',
               // 오늘 - 셀 전체 외곽선 하이라이트
               isToday && !isSelected && 'ring-2 ring-primary ring-inset',
-              // 선택된 날짜 - 셀 전체 배경색 변경 (테두리 없이)
+              // 선택된 날짜 - 셀 전체 배경색 변경
               isSelected && 'bg-primary/15'
             )}
             onClick={() => onDateClick(date)}

src/components/common/ScheduleCalendar/ScheduleBar.tsx

@@ -76,7 +76,7 @@ export function ScheduleBar({
             style={{
               width: `calc(${widthPercent}% - 4px)`,
               left: `calc(${leftPercent}% + 2px)`,
-              top: `${rowIndex * 24 + 32}px`, // 날짜 영역(32px) 아래부터 시작
+              top: `${rowIndex * 24 + 40}px`, // 날짜 영역(40px) 아래부터 시작 (간격 8px 추가)
             }}
           >
             {isStart && <span className="truncate">{event.title}</span>}