보드 플러그인

보드 플러그인은 DayFlow에 할 일 보드 뷰를 추가합니다. 캘린더의 할 일(kind: 'task')을 상태, 우선순위 또는 담당자별 열로 보여 줍니다. 카드는 열 사이로 드래그할 수 있고, 모든 변경 사항은 캘린더의 일반 이벤트와 콜백으로 저장되므로 별도의 데이터 저장소가 필요하지 않습니다.

인터랙티브 데모에서 직접 사용해 볼 수 있습니다.

설치

사용법

보드는 뷰입니다. 다른 캘린더 뷰와 함께 views에 등록하세요. enableTasks: true가 필요하며, taskMembers로 할 일을 할당할 수 있는 멤버를 지정합니다.

import {
  DayFlowCalendar,
  createMonthView,
  useCalendarApp,
} from '@dayflow/react';
import { createBoardView } from '@dayflow/plugin-board';
import '@dayflow/core/dist/styles.css';
import '@dayflow/plugin-board/styles.css';

// Create the view once so its board state survives re-renders.
const board = createBoardView();

export function TaskCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView(), board],
    enableTasks: true,
    taskMembers: [
      { id: 'ava', name: 'Ava Chen' },
      { id: 'leo', name: 'Leo Martin', avatarUrl: '/leo.png' },
    ],
    callbacks: {
      onEventUpdate: event => saveEvent(event),
    },
  });

  return <DayFlowCalendar calendar={calendar} />;
}

saveEvent는 직접 구현한 저장 함수를 뜻합니다. 등록하면 뷰 전환기에 Board가 나타납니다.

할 일 데이터

열, 우선순위, 담당자는 모두 할 일 필드이므로 보드, 캘린더 뷰, 할 일 편집기가 같은 값을 읽고 씁니다. taskStatuses와 taskMembers 옵션은 상태와 담당자를 참고하세요.

• completed: true인 상태가 있으면 카드를 그 열로 옮길 때 할 일이 완료되고, 밖으로 옮기면 다시 열립니다. 다른 곳에서 할 일을 완료하면 첫 번째 완료 상태로 이동합니다.
• 완료 상태가 없으면 체크박스와 열은 서로 독립적입니다.
• 담당자별로 그룹화하면 카드는 첫 번째 담당자의 열에 속합니다. 카드를 옮기면 그 담당자만 바뀌고 나머지는 유지됩니다. Unassigned로 옮기면 모든 담당자가 해제됩니다.
• 보드는 캘린더의 표시 여부와 읽기 전용 설정을 따릅니다.

보드 사용하기

• 카드 이동: 열 사이로 드래그하면 상태, 우선순위 또는 담당자가 바뀌고, 열 안에서 드래그하면 순서가 바뀝니다. 포커스된 카드는 Alt + 방향키 또는 Alt + Home/End로도 이동할 수 있습니다.
• 카드 열기: 카드를 클릭하면 할 일 편집기에서 제목, 열, 우선순위, 담당자, 마감일, 메모를 수정할 수 있습니다.
• 할 일 추가: 열 머리글의 ＋ 또는 열 하단의 New task는 그 열의 상태, 우선순위 또는 담당자를 가진 할 일을 추가합니다.
• 열 편집: 상태 열의 제목을 클릭하면 이름을 바꿀 수 있고, ⋯ 메뉴에서 이름 변경, 색상 변경, 삭제를 할 수 있습니다. 열을 삭제할 때는 할 일을 다른 열로 병합할지 함께 삭제할지 묻습니다. Add column으로 상태를 추가합니다.
• 열 순서 변경: 열 머리글을 드래그하거나, 포커스된 머리글에서 Alt + 왼쪽/오른쪽을 누릅니다.
• 그룹화와 필터: Group by로 상태, 우선순위, 담당자를 전환합니다. 멤버 아바타를 클릭하면 그 멤버의 할 일만 표시합니다.

상태 열을 수정하면 app.setTaskStatuses와 onTaskStatusesChange 콜백이 호출되므로 거기서 저장하세요.

옵션

cardClassName과 cardStyle은 { event, app, groupId, groupBy }를 받습니다.

콜백

할 일 데이터 변경은 여전히 캘린더 콜백(onEventCreate, onEventUpdate, onEventDelete, onTaskStatusesChange)으로도 전달됩니다.

보드 레이아웃 저장하기

그룹화, 열 순서, 카드 순서, 담당자 필터는 화면 표시용 상태이며 할 일 자체를 바꾸지 않습니다. onViewStateChange가 변경을 알려 주고, initialState로 복원합니다.

const board = createBoardView({
  initialState:
    JSON.parse(localStorage.getItem('board') ?? 'null') ?? undefined,
  onViewStateChange: state =>
    localStorage.setItem('board', JSON.stringify(state)),
});

board.getState(app)와 board.setState(app, state)로 코드에서 상태를 읽고 교체할 수 있습니다. 뷰 팩토리는 안정적으로 유지하세요. 같은 팩토리를 공유해도 캘린더마다 상태는 따로 유지됩니다.

카드 스타일

카드는 다음 CSS 사용자 지정 속성을 읽으며, .df-board, 열 또는 개별 카드에 설정할 수 있습니다.

각 카드에는 data-priority, data-group, data-calendar, data-completed, data-due(overdue, today, upcoming) 속성도 있습니다.

.df-board-card[data-due='overdue'] {
  box-shadow: inset 3px 0 #ef4444;
}

제한 사항

• 보드는 캘린더에 불러온 모든 날짜의 할 일을 보여 줍니다. 보이는 범위별로 이벤트를 불러온다면 보드용 할 일도 불러와야 합니다.
• 모든 할 일에는 마감일이 있습니다. 마감일 없는 할 일, 라벨, 하위 할 일은 아직 지원하지 않습니다.
• renderCard는 Preact 콘텐츠를 반환합니다. 프레임워크 네이티브 카드 슬롯은 아직 지원하지 않습니다.