Merge pull request #195 from prgrms-aibe-devcourse/dev

dev to main

Author: hanjungho

README.md

@@ -49,7 +49,7 @@
 | 구분 | 기술 | 
 | :--- | :--- |
  | **Core** | ![React](https://img.shields.io/badge/React-18-61DAFB?style=for-the-badge&logo=react&logoColor=black) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white) ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) |
-| **State & Data** | ![Zustand](https://img.shields.io/badge/Zustand-7E5340?style=for-the-badge&logo=zustand&logoColor=white) ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white) ![React Hook Form](https://img.shields.io/badge/React%20Hook%20Form-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white) |
+| **State & Data** | ![Zustand](https://img.shields.io/badge/Zustand-7E5340?style=for-the-badge&logo=zustand&logoColor=white) ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white) |
 | **UI & Routing** | ![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) ![Framer Motion](https://img.shields.io/badge/Framer%20Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white) ![React Router](https://img.shields.io/badge/React%20Router-CA4245?style=for-the-badge&logo=reactrouter&logoColor=white) | 
 | **배포** | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) |
 

check-backend.js

@@ -0,0 +1,42 @@
+// 백엔드 서버 상태 체크 스크립트
+const https = require('https');
+const http = require('http');
+
+const checkEndpoint = (url) => {
+  return new Promise((resolve, reject) => {
+    const protocol = url.startsWith('https:') ? https : http;
+    const req = protocol.get(url, (res) => {
+      console.log(`${url}: ${res.statusCode}`);
+      resolve(res.statusCode);
+    });
+    
+    req.on('error', (err) => {
+      console.error(`${url}: ERROR - ${err.message}`);
+      reject(err);
+    });
+    
+    req.setTimeout(5000, () => {
+      req.destroy();
+      reject(new Error('Timeout'));
+    });
+  });
+};
+
+async function checkBackend() {
+  const endpoints = [
+    'http://localhost:8080',
+    'http://localhost:8080/oauth2/authorization/google',
+    'https://api.woori-zip.lastdance.store',
+    'https://api.woori-zip.lastdance.store/oauth2/authorization/google'
+  ];
+
+  for (const endpoint of endpoints) {
+    try {
+      await checkEndpoint(endpoint);
+    } catch (error) {
+      console.error(`Failed to check ${endpoint}`);
+    }
+  }
+}
+
+checkBackend();

src/components/calendar/EventModal.tsx

@@ -119,6 +119,12 @@ const EventModal: React.FC<EventModalProps> = ({
       return;
     }
 
+    // 반복일정 선택 시 종료일 필수 검증
+    if (formData.repeat && formData.repeat !== 'none' && !formData.repeatEndDate) {
+      toast.error('반복일정을 선택했을 때는 반복 종료 날짜를 꼭 선택해야 합니다.');
+      return;
+    }
+
     // 반복 종료 날짜가 시작 날짜보다 이전인지 검증
     if (formData.repeatEndDate && formData.date && formData.repeatEndDate < formData.date) {
       toast.error('반복 종료 날짜는 시작 날짜보다 이후여야 합니다.');
@@ -407,7 +413,22 @@ const EventModal: React.FC<EventModalProps> = ({
                 </label>
                 <select
                     value={formData.repeat}
-                    onChange={(e) => setFormData(prev => ({ ...prev, repeat: e.target.value as Event['repeat'] }))}
+                    onChange={(e) => {
+                      const repeatValue = e.target.value as Event['repeat'];
+                      setFormData(prev => ({ 
+                        ...prev, 
+                        repeat: repeatValue,
+                        // 반복을 'none'으로 변경하면 종료일 초기화
+                        repeatEndDate: repeatValue === 'none' ? undefined : prev.repeatEndDate
+                      }));
+                      
+                      // 반복일정을 선택한 경우 안내 메시지
+                      if (repeatValue !== 'none') {
+                        setTimeout(() => {
+                          toast.success('반복일정을 선택했습니다. 반복 종료 날짜를 꼭 설정해주세요.');
+                        }, 100);
+                      }
+                    }}
                     className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:outline-none focus:ring-accent-500 focus:border-transparent"
                     disabled={isSubmitting}
                 >
@@ -423,7 +444,7 @@ const EventModal: React.FC<EventModalProps> = ({
               {formData.repeat && formData.repeat !== 'none' && (
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
-                      반복 종료 날짜 (선택사항)
+                      반복 종료 날짜 * <span className="text-xs text-red-500">(필수)</span>
                     </label>
                     <input
                         type="date"
@@ -432,9 +453,13 @@ const EventModal: React.FC<EventModalProps> = ({
                           ...prev,
                           repeatEndDate: e.target.value ? new Date(e.target.value) : undefined
                         }))}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:outline-none focus:ring-accent-500 focus:border-transparent"
+                        className="w-full px-3 py-2 border-2 border-red-300 rounded-lg focus:ring-2 focus:outline-none focus:ring-red-500 focus:border-red-500 bg-red-50"
                         disabled={isSubmitting}
+                        required
                     />
+                    <p className="text-xs text-gray-500 mt-1">
+                      반복일정을 선택했을 때는 반드시 종료 날짜를 설정해야 합니다.
+                    </p>
                   </div>
               )}
 

src/components/expenses/ExpenseModal.tsx

@@ -184,6 +184,7 @@ const ExpenseModal: React.FC<ExpenseModalProps> = ({expense, onClose}) => {
 
         onClose();
         toast.success(expense ? '지출이 수정되었습니다' : '지출이 추가되었습니다');
+        window.dispatchEvent(new CustomEvent('refreshMonthlyTrend'));
       } catch (error) {
         console.error('지출 처리 실패: ', error);
       } finally {

src/components/expenses/ExpensesPage.tsx

@@ -432,6 +432,19 @@ const ExpensesPage: React.FC = () => {
     }
   }, [categoryFilter, searchTerm]); // 의존성에 필터와 검색어 추가
 
+  // 월별 추이 그래프 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleRefresh = () => {
+      loadMonthlyTrendData();
+    };
+
+    window.addEventListener('refreshMonthlyTrend', handleRefresh);
+
+    return () => {
+      window.removeEventListener('refreshMonthlyTrend', handleRefresh);
+    };
+  }, [loadMonthlyTrendData]);
+
   const categoryData = [
     { category: "FOOD", label: "식비", color: "#FF6B6B" },
     { category: "UTILITIES", label: "공과금", color: "#4ECDC4" },