test: 🟩 반복 일정 표시 구현 및 테스트 통과

Author: nemobim

…_tests__/unit/custom.repeatUtils.spec.ts …tests__/unit/custom.repeatUtils.spec.tsxsrc/__tests__/unit/custom.repeatUtils.spec.ts renamed to src/__tests__/unit/custom.repeatUtils.spec.tsx src/__tests__/unit/custom.repeatUtils.spec.ts renamed to src/__tests__/unit/custom.repeatUtils.spec.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+
+import { RepeatIcon } from '../../icons/RepeatIcon';
 import { EventForm } from '../../types';
 import { generateRepeatEvents } from '../../utils/repeatUtils';
 import { createMockEvent } from '../utils';
@@ -120,22 +122,20 @@ describe('generateRepeatEvents: 반복 일정을 생성한다.', () => {
     });
   });
 
-  describe('RepeatIcon', () => {
-    describe('반복 일정 아이콘을 표시한다', () => {
-      it('반복 유형이 none인 경우 아이콘을 표시하지 않는다', () => {
-        render(<RepeatIcon repeatType="none" />);
+  describe('반복 일정 아이콘을 표시한다', () => {
+    it('반복 유형이 none인 경우 아이콘을 표시하지 않는다', () => {
+      render(<RepeatIcon repeatType="none" />);
 
-        const icon = screen.queryByTestId('repeat-icon');
-        expect(icon).not.toBeInTheDocument();
-      });
+      const icon = screen.queryByTestId('repeat-icon');
+      expect(icon).not.toBeInTheDocument();
+    });
 
-      it('매일 반복 일정 아이콘을 표시한다', () => {
-        render(<RepeatIcon repeatType="daily" />);
+    it('매일 반복 일정 아이콘을 표시한다', () => {
+      render(<RepeatIcon repeatType="daily" />);
 
-        const icon = screen.getByTestId('repeat-icon');
-        expect(icon).toBeInTheDocument();
-        expect(icon).toHaveAttribute('data-repeat-type', 'daily');
-      });
+      const icon = screen.getByTestId('repeat-icon');
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveAttribute('data-repeat-type', 'daily');
     });
   });
 });

src/icons/RepeatIcon.tsx

@@ -0,0 +1,33 @@
+import CalendarToday from '@mui/icons-material/CalendarToday';
+import CalendarViewMonth from '@mui/icons-material/CalendarViewMonth';
+import DateRange from '@mui/icons-material/DateRange';
+import Repeat from '@mui/icons-material/Repeat';
+
+import { RepeatType } from '../types';
+
+interface RepeatIconProps {
+  repeatType: RepeatType;
+}
+
+export function RepeatIcon({ repeatType }: RepeatIconProps) {
+  if (repeatType === 'none') {
+    return null;
+  }
+
+  const getIcon = (type: RepeatType) => {
+    switch (type) {
+      case 'daily':
+        return <Repeat data-testid="repeat-icon" data-repeat-type="daily" />;
+      case 'weekly':
+        return <DateRange data-testid="repeat-icon" data-repeat-type="weekly" />;
+      case 'monthly':
+        return <CalendarViewMonth data-testid="repeat-icon" data-repeat-type="monthly" />;
+      case 'yearly':
+        return <CalendarToday data-testid="repeat-icon" data-repeat-type="yearly" />;
+      default:
+        return null;
+    }
+  };
+
+  return getIcon(repeatType);
+}