칸반보드를 캘린더에 연동

app/(main)/(routes)/boards/[boardId]/page.tsx

@@ -4,8 +4,9 @@ import { BoardToolbar } from "@/components/KanbanBoard/board-toolbar";
 import BoardView from "@/components/KanbanBoard/board-view";
 import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/convex/_generated/api";
-import { Id } from "@/convex/_generated/dataModel";
-import { useMutation, useQuery } from "convex/react";
+import { Doc, Id } from "@/convex/_generated/dataModel";
+import { useConvex, useMutation, useQuery } from "convex/react";
+import { useEffect, useState } from "react";
 
 interface BoardIdPageProps {
   params: {
@@ -17,7 +18,33 @@ const BoardIdPage = ({ params }: BoardIdPageProps) => {
   const board = useQuery(api.boards.getById, {
     boardId: params.boardId
   });
+  const convex = useConvex();
+
+  const [calendar, setCalendar] = useState<Doc<"calendars"> | undefined>(undefined);
+
   const update = useMutation(api.boards.update);
+  const removeCalendar = useMutation(api.boards.unconnectCalendar);
+
+  useEffect(() => {
+    const onUnconnectCalendar = () => {
+      removeCalendar({
+        id: params.boardId,
+      })
+    }
+    console.log("???");
+
+    if (!(board?.connectedCalendar)) setCalendar(undefined);
+    else {
+      convex.query(api.calendars.getById, {
+        calendarId: board.connectedCalendar
+      }).then(v => {
+        setCalendar(v);
+      }).catch(_ => {
+        onUnconnectCalendar();
+      });
+    }
+  }, [board?.connectedCalendar, convex, params.boardId, removeCalendar]);
+
 
   if (board === undefined) {
     return (
@@ -45,11 +72,15 @@ const BoardIdPage = ({ params }: BoardIdPageProps) => {
 
   return (
     <div>
-      <BoardToolbar initialData={board}/>
+      <BoardToolbar
+        initialData={board}
+        calendar={calendar}
+      />
       <BoardView
         onChange={onUpdate}
         initialContent={board.content}
         editable={true}
+        connectedCalendar={calendar}
       />
     </div>
   )

app/(main)/_components/KanbanBoard/board-misc-menu.tsx

@@ -6,7 +6,7 @@ import { useMutation, useQuery } from "convex/react";
 import { toast } from "sonner";
 import { Calendar, Eye, MoreHorizontal, Trash, Unlink } from "lucide-react";
 
-import { Id } from "@/convex/_generated/dataModel";
+import { Doc, Id } from "@/convex/_generated/dataModel";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -25,14 +25,14 @@ import Link from "next/link";
 
 interface MenuProps {
   documentId: Id<"boards">;
+  calendar?: Doc<"calendars">;
 }
 
-export const BoardMiscMenu = ({ documentId }: MenuProps) => {
+export const BoardMiscMenu = ({ documentId, calendar }: MenuProps) => {
   const router = useRouter();
   const { user } = useUser();
 
   const board = useQuery(api.boards.getById, { boardId: documentId });
-  const calendar = useQuery(api.calendars.getById, (!!(board?.connectedCalendar)) ? { newCalendar: board?.connectedCalendar } : "skip");
 
   const calendars = useQuery(api.calendars.getSidebar);
   const connectCalendar = useMutation(api.boards.connectCalendar);
@@ -74,7 +74,7 @@ export const BoardMiscMenu = ({ documentId }: MenuProps) => {
             <DropdownMenuPortal>
               <DropdownMenuSubContent>
                 <DropdownMenuItem asChild>
-                  <Link href={'/calendars'}>
+                  <Link href={`/calendars/${calendar._id}`}>
                     <Eye className="h-4 w-4 mr-2" />
                     See
                   </Link>

components/KanbanBoard/board-document.tsx

@@ -12,6 +12,7 @@ import { KanbanBoardDocument } from "@/components/KanbanBoard/kanbanboard.types"
 import { BoardDocumentTitle } from "@/components/KanbanBoard/board-document-title";
 import { toast } from "sonner";
 import { BoardColorPicker } from "@/app/(main)/_components/KanbanBoard/board-color-picker";
+import { formatDistance } from "date-fns";
 
 export const BoardDocument = ({
   boardDocument: {
@@ -27,12 +28,14 @@ export const BoardDocument = ({
     onDocumentSetAttribute,
   },
   onDragChange,
+  date,
 }: {
   boardDocument: KanbanBoardDocument,
   document: Doc<"documents">,
   editable?: boolean,
   editor: KanbanBoardProps,
   onDragChange?: (status: ("before" | "after" | "none")) => void,
+  date?: Date,
 }) => {
   const { resolvedTheme } = useTheme();
   const rootRef = useRef<ElementRef<"div">>(null);
@@ -206,11 +209,11 @@ export const BoardDocument = ({
             </div>
           </div>
         )}
-        {false && (
+        {date && (
           <div className="flex">
             <AlarmClockCheck className="w-4 h-4 mr-2" />
             <div className="text-nowrap overflow-hidden text-ellipsis max-w-20">
-              {"in 1234 years"}
+              {formatDistance(new Date(), date)}
             </div>
           </div>
         )}

components/KanbanBoard/board-element.tsx

@@ -31,12 +31,14 @@ export const BoardElement = ({
   editable,
   documents,
   onDragChange,
+  calendarData,
 }: {
   editor: KanbanBoardProps,
   element: KanbanBoardElement,
   editable?: boolean,
   documents?: Doc<"documents">[] | undefined,
   onDragChange?: (status: ("before" | "after" | "none")) => void,
+  calendarData?: {[document: Id<"documents">]: Date},
 }) => {
   const { resolvedTheme } = useTheme();
   const rootRef = useRef<ElementRef<"div">>(null);
@@ -284,6 +286,7 @@ export const BoardElement = ({
               editable={editable}
               editor={editor}
               onDragChange={(status) => onDocumentDragOver(status, i)}
+              date={calendarData?.[document.board._id]}
             />
           ))}
         </ArrayDragSpace>

components/KanbanBoard/board-toolbar.tsx

@@ -15,9 +15,10 @@ import { BoardMiscMenu } from "@/app/(main)/_components/KanbanBoard/board-misc-m
 interface BoardToolbarProps {
   initialData: Doc<"boards">;
   preview?: boolean;
+  calendar?: Doc<"calendars">;
 }
 
-export const BoardToolbar = ({ initialData, preview }: BoardToolbarProps) => {
+export const BoardToolbar = ({ initialData, preview, calendar }: BoardToolbarProps) => {
   const inputRef = useRef<ElementRef<"textarea">>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [value, setValue] = useState(initialData.title);
@@ -129,7 +130,7 @@ export const BoardToolbar = ({ initialData, preview }: BoardToolbarProps) => {
       {!preview && (
         <div className="flex gap-x-2 m-2">
           <PublishBoard initialData={initialData} />
-          <BoardMiscMenu documentId={initialData._id} />
+          <BoardMiscMenu documentId={initialData._id} calendar={calendar}/>
         </div>
       )}
     </div>

components/KanbanBoard/board-view.tsx

@@ -1,22 +1,27 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useKanbanBoard } from "@/hooks/use-kanban-board";
 import { PlusCircle } from "lucide-react";
 
 import { BoardElement } from "./board-element";
 import { useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import { ArrayDragSpace } from "../array-drag-space";
+import { cn } from "@/lib/utils";
+import { Doc, Id } from "@/convex/_generated/dataModel";
+import { Calendar, parseDateByIndex } from "@/types/calendar";
 
 const BoardView = ({
   onChange,
   initialContent,
   editable,
+  connectedCalendar,
 }: {
   onChange?: (value: string) => void,
   initialContent?: string,
-  editable?: boolean
+  connectedCalendar?: Doc<"calendars">,
+  editable?: boolean,
 }) => {
   const documents = useQuery(api.documents.getSearch, {});
   const [dragSelected, setDragSelected] = useState<number | undefined>(undefined);
@@ -28,6 +33,23 @@ const BoardView = ({
     }
   });
 
+  const [orientedData, setOrientedData] = useState<{[document: Id<"documents">]: Date}>({});
+  useEffect(() => {
+    const newData: {[document: Id<"documents">]: Date} = {};
+    if (connectedCalendar?.content) {
+      const calendarData: Calendar = JSON.parse(connectedCalendar.content);
+      calendarData.forEach(e => {
+        const parsedDate = parseDateByIndex(e.calendarMonth, e.calendarIndex);
+        e.content.forEach(d => {
+          if (false) { // Todo: calendarDocument가 문서를 포함하고 있다면! (아래에 있는 as 문법도 수정하기)
+            newData[(d as unknown as {doc: Id<"documents">}).doc] = parsedDate;
+          }
+        });
+      });
+      setOrientedData(newData);
+    }
+  }, [connectedCalendar]);
+
   const onDragOver = (e: React.DragEvent) => {
     if (e.dataTransfer.types[0] === "elementid") {
       e.preventDefault();
@@ -94,6 +116,7 @@ const BoardView = ({
             editable={editable}
             documents={documents}
             onDragChange={(e) => onElementDragOver(e, i)}
+            calendarData={orientedData}
           />
         ))}
       </ArrayDragSpace>

components/KanbanBoard/calendar.ts

@@ -0,0 +1,61 @@
+import { Id } from "@/convex/_generated/dataModel";
+export type Calendar = CalendarDocumentElement[];
+
+export type CalendarDocumentElement = {
+  _id: string;
+  name: string;
+  content: CalendarDocument[];
+  calendarIndex: number;
+  calendarMonth: number;
+};
+
+//calendar에 들어갈 내용
+export type CalendarDocument = {
+  _id: string;
+  name?: string;
+  content?: [];
+};
+
+export const newCalendarDocument = (...names: string[]): Calendar => {
+  return names.map((v) => {
+    const currentDate = new Date();
+    const formattedDate = `${currentDate.getMonth() + 2}`;
+
+    return {
+      _id: generateId(),
+      name: v,
+      content: [],
+      calendarIndex: +v,
+      calendarMonth: +formattedDate,
+    };
+  });
+};
+
+export function generateId() {
+  var S4 = function () {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  };
+  return `${S4()}${S4()}${S4()}${S4()}`;
+}
+
+export function parseDateByIndex(month: number, index: number): Date {
+  const today = new Date();
+
+  const thisYear = new Date(today.getFullYear(), month - 1, 1);
+  thisYear.setDate(thisYear.getDate() - thisYear.getDay() + index);
+
+  // 연도가 구분되어 있지 않고, '목표' 이므로 시간이 일주일을 넘기면 다음 해의 날짜를 대신 카운트
+  if (getDayDifference(today, thisYear) > -7) return thisYear;
+
+  const nextYear = new Date(today.getFullYear() + 1, month - 1, 1);
+  nextYear.setDate(nextYear.getDate() - nextYear.getDay() + index);
+
+  return nextYear;
+}
+
+function getDayDifference(date1: Date, date2: Date) {
+    const diffInMilliseconds = Math.abs(date2.getTime() - date1.getTime());
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const daysDifference = Math.floor(diffInMilliseconds / millisecondsPerDay);
+    return daysDifference;
+}

components/array-drag-space.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import React from "react";
 
 export const ArrayDragSpace = ({
   children,
@@ -35,10 +36,10 @@ export const ArrayDragSpace = ({
   if (!children) return null;
 
   return (<>
-    {children.map((v, i) => (<>
+    {children.map((v, i) => (<React.Fragment key={i}>
         <Space onDragOver={(e) => onDragToIndex?.(e, i)} enabled={index === i} />
         {v}
-    </>)
+    </React.Fragment>)
     )}
     <Space onDragOver={(e) => onDragToLast?.(e)} enabled={index === children.length} />
   </>)

types/calendar.ts

@@ -1,5 +1,4 @@
 import { Id } from "@/convex/_generated/dataModel";
-
 export type Calendar = CalendarDocumentElement[];
 
 export type CalendarDocumentElement = {
@@ -38,3 +37,25 @@ export function generateId() {
   };
   return `${S4()}${S4()}${S4()}${S4()}`;
 }
+
+export function parseDateByIndex(month: number, index: number): Date {
+  const today = new Date();
+
+  const thisYear = new Date(today.getFullYear(), month - 1, 1);
+  thisYear.setDate(thisYear.getDate() - thisYear.getDay() + index);
+
+  // 연도가 구분되어 있지 않고, '목표' 이므로 시간이 일주일을 넘기면 다음 해의 날짜를 대신 카운트
+  if (getDayDifference(today, thisYear) > -7) return thisYear;
+
+  const nextYear = new Date(today.getFullYear() + 1, month - 1, 1);
+  nextYear.setDate(nextYear.getDate() - nextYear.getDay() + index);
+
+  return nextYear;
+}
+
+function getDayDifference(date1: Date, date2: Date) {
+    const diffInMilliseconds = Math.abs(date2.getTime() - date1.getTime());
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const daysDifference = Math.floor(diffInMilliseconds / millisecondsPerDay);
+    return daysDifference;
+}