[Fix] pr review 1386

frontend/.eslintignore

@@ -0,0 +1 @@
+frontend/public/mockServiceWorker.js

frontend/CLAUDE.md

@@ -95,7 +95,6 @@ npm run generate:sitemap # sitemap.xml 생성
 API는 `src/apis/utils/apiHelpers.ts`의 헬퍼 함수를 사용하는 일관된 패턴을 따름:
 
 - `handleResponse<T>()` - 응답 파싱, `{ data: {...} }` 형식 자동 언래핑
-- `withErrorHandling()` - API 호출을 에러 로깅으로 래핑
 - `secureFetch()` - 인증된 요청, 403 시 토큰 자동 갱신
 
 쿼리 키는 `src/constants/queryKeys.ts`에 중앙 관리.

frontend/public/mockServiceWorker.js

@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 /* tslint:disable */
 
 /**

frontend/src/constants/queryKeys.ts

@@ -1,4 +1,10 @@
 export const queryKeys = {
+  googleCalendar: {
+    all: ['googleCalendar'] as const,
+    calendars: () => ['googleCalendar', 'calendars'] as const,
+    events: (calendarId: string, timeMin: string, timeMax: string) =>
+      ['googleCalendar', 'events', calendarId, timeMin, timeMax] as const,
+  },
   applicants: {
     all: ['clubApplicants'] as const,
     detail: (applicationFormId: string) =>

frontend/src/hooks/Queries/useGoogleCalendar.ts

@@ -0,0 +1,70 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  disconnectGoogleCalendar,
+  fetchGoogleCalendarEvents,
+  fetchGoogleCalendars,
+  selectGoogleCalendar,
+} from '@/apis/calendarOAuth';
+import { queryKeys } from '@/constants/queryKeys';
+import { ApiError } from '@/errors';
+import type { GoogleCalendarListResponse } from '@/types/google';
+
+export const useGetGoogleCalendars = () => {
+  return useQuery<GoogleCalendarListResponse | null>({
+    queryKey: queryKeys.googleCalendar.calendars(),
+    queryFn: async () => {
+      try {
+        return await fetchGoogleCalendars();
+      } catch (error) {
+        if (error instanceof ApiError && error.errorCode === '960-4') {
+          return null;
+        }
+        throw error;
+      }
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+};
+
+export const useGetGoogleCalendarEvents = (
+  calendarId: string,
+  timeMin: string,
+  timeMax: string,
+) => {
+  return useQuery({
+    queryKey: queryKeys.googleCalendar.events(calendarId, timeMin, timeMax),
+    queryFn: () => fetchGoogleCalendarEvents(calendarId, timeMin, timeMax),
+    staleTime: 5 * 60 * 1000,
+    enabled: !!calendarId,
+  });
+};
+
+export const useSelectGoogleCalendar = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      calendarId,
+      calendarName,
+    }: {
+      calendarId: string;
+      calendarName: string;
+    }) => selectGoogleCalendar(calendarId, calendarName),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.googleCalendar.calendars(),
+      });
+    },
+  });
+};
+
+export const useDisconnectGoogleCalendar = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: disconnectGoogleCalendar,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.googleCalendar.all,
+      });
+    },
+  });
+};

frontend/src/pages/AdminPage/tabs/CalendarSyncTab/CalendarSyncTab.styles.ts

@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import { media } from '@/styles/mediaQuery';
+import { colors } from '@/styles/theme/colors';
 
 export const Container = styled.div`
   display: flex;
@@ -9,21 +11,21 @@ export const Container = styled.div`
 export const Description = styled.p`
   font-size: 0.94rem;
   line-height: 1.5;
-  color: #4b5563;
+  color: ${colors.gray[600]};
 `;
 
 export const ConfigGrid = styled.div`
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
 
-  @media (max-width: 1024px) {
+  ${media.laptop} {
     grid-template-columns: 1fr;
   }
 `;
 
 export const Block = styled.div`
-  border: 1px solid #e5e7eb;
+  border: 1px solid ${colors.gray[300]};
   border-radius: 12px;
   padding: 14px;
 `;