From d52153f23a71c8436f7a72a18d48ebf238566204 Mon Sep 17 00:00:00 2001 From: yeonjin719 <111187984+yeonjin719@users.noreply.github.com> Date: Tue, 3 Feb 2026 15:52:48 +0000 Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=9D=20[Calio]=20=EA=B0=9C?= =?UTF-8?q?=EB=B0=9C=20=EC=9D=BC=EC=A7=80=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/2026-02-04.md | 185 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 articles/2026-02-04.md diff --git a/articles/2026-02-04.md b/articles/2026-02-04.md new file mode 100644 index 0000000..684fe90 --- /dev/null +++ b/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 + // 이벤트 수정 버튼 텍스트가 '적용'으로 변경되어 사용자의 의도를 명확히 했습니다. + // ... + // > + // 적용 + // + // ... + ``` + +--- + +## 🌿 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: , + }, + ]) + ``` + +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 +``` \ No newline at end of file