📝 [Calio] 오늘의 개발 아티클이 도착했습니다! (2026-02-04)

articles/2026-02-04.md

@@ -0,0 +1,185 @@
+**[2026년 02월 04일] 캘린더 드래그앤드롭 기능 완성 및 API 연동을 위한 인프라 구축**
+
+팀 Calio의 개발 일지입니다. 오늘은 두 개의 핵심 브랜치 작업이 `develop`에 통합되면서 프로젝트의 기능적 완성도와 아키텍처 기반이 크게 강화되었습니다. 주요 성과는 캘린더 이벤트의 드래그 앤 드롭 및 리사이징 기능 구현 완료와 더불어, 향후 백엔드 API 연동을 위한 React Query, Axios, 그리고 Suspense/Error Boundary 시스템의 기본 세팅을 마친 것입니다. 이를 통해 프론트엔드 개발의 다음 단계인 실제 데이터 연동 준비를 완료했습니다.
+
+---
+
+## 🌿 Branch: develop
+
+### [Yeonjin Kim] Merge pull request #18 from 2026-Capstone-Project/auto-daily-log
+
+Yeonjin Kim 개발자는 자동 일지 생성 시스템의 정기적인 업데이트를 병합했습니다. 이는 2월 3일자 개발 아티클을 생성하는 단순 유지보수 작업입니다.
+
+```diff
+📝 [Calio] 오늘의 개발 아티클이 도착했습니다! (2026-02-03)
+- **articles/2026-02-03.md** 변경:
+  ```diff
+  @@ -0,0 +1 @@
++오늘은 업데이트된 작업이 없습니다. 내일 더 파이팅해봐요! 🚀
+\ No newline at end of file
+  ```
+
+### [Yeonjin Kim] Merge pull request #13 from 2026-Capstone-Project/feature/#12-이벤트-드래그드롭-변경된-스타일-반영
+
+Yeonjin Kim 개발자는 캘린더의 핵심 기능인 이벤트 드래그 앤 드롭(Drag and Drop, D&D) 및 리사이징 기능을 통합하고, 변경된 디자인을 전반적으로 반영했습니다. 이 작업은 `react-big-calendar`의 D&D 애드온을 활용하는 동시에, 특히 Day View에서 커스텀 D&D 로직을 구현하는 데 중점을 두었습니다.
+
+**주요 기술 분석:**
+
+1.  **D&D 통합 및 타입 확장:**
+    *   `react-big-calendar/lib/addons/dragAndDrop`이 `CustomCalendar.tsx`에 적용되었습니다.
+    *   `CalendarEvent` 타입에 `type: 'todo' | 'schedule'`과 `isDone?: boolean` 필드가 추가되어 To-do 항목 관리의 기반이 마련되었습니다.
+
+    ```typescript
+    // src/features/Calendar/domain/types.ts
+    export interface CalendarEvent {
+      id: number | string
+      title: string
+      start: stringOrDate
+      end: stringOrDate
+      allDay?: boolean
+      type: 'todo' | 'schedule'
+      isDone?: boolean
+      color: EventColorType
+    // ...
+    }
+    ```
+
+2.  **커스텀 Day View D&D 로직 구현:**
+    *   Day View 내에서 정밀한 시간 단위의 이벤트 이동 및 크기 조절을 위해 `dayView/dragHandlers.ts`와 `dayView/timeHelpers.ts`에 포인터 이벤트 기반의 커스텀 로직이 대거 추가되었습니다. `getMinutesPerPixel` 함수를 통해 픽셀 이동량을 시간 변화량으로 변환하는 핵심 로직이 포함되었습니다.
+
+    ```typescript
+    // src/features/Calendar/components/CustomView/dayView/dragHandlers.ts
+    export type DragMode = 'move' | 'resize'
+    export type DragState = {
+      event: CalendarEvent
+      startClientY: number
+      startDate: Date
+      endDate: Date
+      deltaMinutes: number
+      pointerId: number
+      target: EventTarget | null
+      mode: 
+    // ... (이후 드래그 상태 관리 및 핸들러 구현)
+    ```
+
+3.  **이벤트 컴포넌트 업데이트 및 To-do 반영:**
+    *   Month/Week 이벤트 컴포넌트(`CustomMonthEvent.tsx`, `CustomWeekEvent.tsx`)에 To-do 타입 이벤트를 위한 체크박스 스타일(`TodoCheckbox`)이 추가되었으며, `onToggleTodo` 핸들러를 받을 수 있도록 확장되었습니다.
+
+    ```typescript
+    // src/features/Calendar/components/CustomEvent/CustomEvent.style.ts
+    export const TodoCheckbox = styled.input`
+      max-width: 10px;
+      max-height: 10px;
+      width: 10px;
+      height: 10px;
+      aspect-ratio: 1 / 1;
+      appearance: none;
+      border: 1px
+    // ...
+    `
+    ```
+
+4.  **모달 및 훅 분리:**
+    *   캘린더 페이지의 복잡성을 줄이기 위해 모달 관련 로직이 `CalendarModals.tsx`로 분리되었고, 새로운 훅들(`useCalendarPortals`, `useCalendarProps`, `useStoredCalendarView` 등)이 도입되어 상태 관리와 반응형 처리가 모듈화되었습니다.
+
+5.  **UI/스타일 조정:**
+    *   `AddModalLayout`의 너비가 420px에서 400px로 조정되었고, `TerminationPanel`의 캘린더 팝오버 z-index가 3000에서 20000으로 상향되어 다른 모달과의 겹침 문제를 해결했습니다.
+
+    ```typescript
+    // src/shared/ui/modal/AddModalLayout/AddModalLayout.style.ts
+    export const ModalWrapper = styled.div<{ mode: 'modal' | 'inline' }>`
+      width: 100%;
+      max-width: 90vw;
+      width: 400px;
+    // ...
+    `
+    // src/shared/ui/modal/EditConfirmModal/EditConfirmModal.tsx
+    // 이벤트 수정 버튼 텍스트가 '적용'으로 변경되어 사용자의 의도를 명확히 했습니다.
+    // ...
+    //           >
+    //             적용
+    //           </S.EditButton>
+    // ...
+    ```
+
+---
+
+## 🌿 Branch: feature/#19-api-연결을-위한-기본-세팅
+
+### [Yeonjin Kim] feat: 라우터에 404 추가, Suspense위한 준비
+
+Yeonjin Kim 개발자는 API 연동을 위한 인프라 구축 작업을 진행했습니다. 이 커밋에서는 React Router에 404 에러 페이지를 추가하고, 데이터 로딩 및 에러 처리를 위한 기본 컴포넌트와 훅을 정의했습니다.
+
+**주요 기술 분석:**
+
+1.  **라우팅 및 에러 페이지:**
+    *   `Router.tsx`에 와일드카드 경로(`*`)를 추가하여 정의되지 않은 경로 접근 시 `ErrorPage`를 렌더링하도록 설정했습니다.
+
+    ```typescript
+    // src/routes/Router.tsx
+    export const router = createBrowserRouter([
+      AuthRoutes,
+      MainRoutes,
+      {
+        path: '*',
+        element: <ErrorPage />,
+      },
+    ])
+    ```
+
+2.  **React Query 커스텀 훅 정의:**
+    *   `customQuery.ts`에 `useQuery`, `useSuspenseQuery`, `useMutation` 등 React Query의 핵심 훅들을 감싸는 커스텀 훅이 정의되었습니다. 이는 전역적인 `staleTime` (3분) 및 `retry` 설정을 일관되게 적용하기 위함입니다.
+
+    ```typescript
+    // src/shared/hooks/customQuery.ts
+    const STALE_TIME = 1000 * 60 * 3
+    const RETRY = 1
+    const MUTATION_RETRY = 1
+
+    // ... (useQuery, useSuspenseQuery 등 커스텀 훅 정의)
+    ```
+
+3.  **Async Boundary 구현:**
+    *   `AsyncBoundary.tsx`에 `ErrorBoundary`와 `Suspense`를 결합한 컴포넌트가 구현되었습니다. 이는 데이터 페칭 중 발생하는 로딩 상태와 에러 상태를 선언적으로 관리할 수 있게 하며, 컴포넌트 트리의 안정성을 높입니다.
+
+    ```typescript
+    // src/shared/ui/common/AsyncBoundary/AsyncBoundary.tsx
+    class ErrorBoundary extends Component<
+    // ... (Error Boundary 구현)
+    const AsyncBoundary = ({ children, fallback, errorFallback, resetKeys }: AsyncBoundaryProps) => {
+      // ... (Suspense와 ErrorBoundary 조합)
+    }
+    ```
+
+### [Yeonjin Kim] feat: axios 세팅
+
+API 통신을 위한 기본 HTTP 클라이언트인 Axios 설정이 완료되었습니다.
+
+**주요 기술 분석:**
+
+*   `axiosInstance`를 생성하고 환경 변수(`VITE_SERVER_URL`)를 사용하여 `baseURL`을 설정했습니다.
+*   CORS 환경에서 인증 정보를 전달하기 위해 `withCredentials: true` 옵션을 활성화했습니다.
+*   응답 인터셉터의 기본 구조를 마련하여, 향후 인증 토큰 만료나 전역 에러 처리 로직을 추가할 수 있도록 준비했습니다.
+
+```typescript
+// src/shared/api/axios.ts
+import axios from 'axios'
+
+export const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_SERVER_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+})
+
+//TODO: @yujin5959 나중에 이부분 해주세용~
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+export default axiosInstance
+```