feat: add conversation viewer(#86)

package.json

@@ -20,13 +20,15 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-query-devtools": "^5.59.15",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.10",
     "html-to-image": "^1.11.11",
+    "js-base64": "^3.7.7",
     "lucide-react": "^0.453.0",
     "monaco-editor": "^0.52.0",
     "next-themes": "^0.3.0",

src/apis/conversation/dtos.ts

@@ -2,30 +2,65 @@ interface UserData {
   email: string;
   name: string;
 }
-
-export interface Conversation {
-  pk: number;
-  // TODO : 추후에 BE가 변경될 때 이야기 하기.
-  creatorPk: number;
-  participantPk: number;
-  //
-  dataPk: number;
-  title: string;
-  startedAt: string;
-  finishedAt: string;
-  deleteAt: Date;
-  creator: UserData;
-  participant: UserData;
-}
-
-export interface Data {
-  total: number;
-  conversations: Conversation[];
-}
-
-export interface GetPreviousRoomResponseDto {
+export class GetPreviousRoomsResponseDto {
   success: boolean;
-  data: Data;
+  data: {
+    total: number;
+    conversations: {
+      pk: number;
+      creatorPk: number;
+      participantPk: number;
+      dataPk: number;
+      title: string;
+      startedAt: Date;
+      finishedAt: Date;
+      deleteAt: Date;
+      creator: UserData;
+      participant: UserData;
+      conversationDatas: {
+        uuid: string;
+        canShared: boolean;
+      }
+    }[];
+  };
+  constructor({ success, data }: {
+    success: boolean; data: {
+      total: number, conversations: {
+        pk: number;
+        creatorPk: number;
+        participantPk: number;
+        dataPk: number;
+        title: string;
+        startedAt: string;
+        finishedAt: string;
+        deleteAt: Date;
+        creator: UserData;
+        participant: UserData;
+        conversationDatas: {
+          uuid: string;
+          canShared: boolean;
+        }
+      }[];
+    }
+  }) {
+    this.success = success;
+    this.data = {
+      total: data.total,
+      conversations: data.conversations.map(conversation => ({
+        pk: conversation.pk,
+        creatorPk: conversation.creatorPk,
+        participantPk: conversation.participantPk,
+        dataPk: conversation.dataPk,
+        title: conversation.title,
+        startedAt: new Date(conversation.startedAt),
+        finishedAt: new Date(conversation.finishedAt),
+        deleteAt: new Date(conversation.deleteAt),
+        creator: conversation.creator,
+        participant: conversation.participant,
+        conversationDatas: conversation.conversationDatas,
+      }))
+    };
+  }
 }
 
 export class ChattingSocketResponse {
@@ -50,3 +85,25 @@ export class ChattingSocketResponse {
     this.date = new Date(date);
   }
 }
+
+
+export interface GetPreviousRoomResponseDto {
+  chat: {
+    url: string,
+    isShared: boolean
+  },
+  note: {
+    url: string,
+    isShared: boolean
+  },
+  drawBoard: {
+    url: string,
+    isShared: boolean
+  },
+  voice: {
+    url: string,
+    isShared: boolean
+  },
+  canShared: boolean;
+}
+

src/apis/room/previousRoomApi.ts

@@ -0,0 +1,18 @@
+import { GetPreviousRoomResponseDto, GetPreviousRoomsResponseDto } from "@/apis/conversation/dtos";
+import https from "@/lib/https";
+
+export const getPreviousRoomsApi = async (
+  currentPage: number,
+): Promise<GetPreviousRoomsResponseDto> => {
+  const { data } = await https.get("/conversations", {
+    params: { page: currentPage },
+  });
+  return new GetPreviousRoomsResponseDto(data);
+};
+
+export const getPreviousRoom = async (
+  conversationId: string,
+) => {
+  const { data } = await https.get<GetPreviousRoomResponseDto>(`/conversations/${conversationId}`);
+  return data;
+}

src/components/Conversation/Save/DrawBoard.tsx

@@ -0,0 +1,42 @@
+import { useFetcher } from "@/hooks/useFetcher";
+import { Excalidraw } from "@excalidraw/excalidraw";
+import { toUint8Array } from "js-base64";
+import { yjsToExcalidraw } from "y-excalidraw";
+import * as Y from "yjs";
+
+interface ConversationSaveDrawBoardViewerProps {
+  data: {
+    url: string;
+    isShared: boolean;
+  };
+}
+
+const ConversationSaveDrawBoardViewer = ({
+  data: { url },
+}: ConversationSaveDrawBoardViewerProps) => {
+  const { data } = useFetcher({ url });
+
+  if (!data) return null;
+
+  const ydoc = new Y.Doc();
+  const binaryEndcoed = toUint8Array(data.data || "");
+  Y.applyUpdate(ydoc, binaryEndcoed);
+
+  const yElements = ydoc.getArray<Y.Map<unknown>>("elements");
+
+  return (
+    <div className="h-[calc(100vh-12rem)]">
+      <Excalidraw
+        initialData={{
+          elements: yjsToExcalidraw(yElements || new Y.Array<Y.Map<unknown>>()),
+          appState: {
+            viewModeEnabled: true,
+          },
+        }}
+        theme="light"
+      />
+    </div>
+  );
+};
+
+export default ConversationSaveDrawBoardViewer;

src/components/Conversation/Save/Header.tsx

@@ -1,16 +1,25 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Link } from "react-router-dom";
 
-const ConversationSaveHeader = () => {
+interface ConversationSaveHeaderProps {
+  initialTitle?: string;
+}
+
+const ConversationSaveHeader = ({
+  initialTitle,
+}: ConversationSaveHeaderProps) => {
   return (
-    <div className="flex justify-between px-12">
+    <div className="flex justify-between pb-6">
       <div className="flex items-center">
         <span className="min-w-12 text-lg">제목: </span>
-        <Input />
+        <Input defaultValue={initialTitle} />
       </div>
       <div className="flex gap-4">
-        <Button variant="secondary">종료하기</Button>
-        <Button>저장하기</Button>
+        <Button variant="secondary">홈으로</Button>
+        <Button asChild>
+          <Link to="/room">저장하기</Link>
+        </Button>
       </div>
     </div>
   );

src/components/Conversation/Save/NoteViewer.tsx

@@ -0,0 +1,37 @@
+import { useFetcher } from "@/hooks/useFetcher";
+import { BlockNoteView } from "@blocknote/mantine";
+import { useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/mantine/style.css";
+import { useEffect } from "react";
+
+interface ConversationSaveNoteViewerProps {
+  data: {
+    url: string;
+    isShared: boolean;
+  };
+}
+
+const ConversationSaveNoteViewer = ({
+  data: { url },
+}: ConversationSaveNoteViewerProps) => {
+  const { data } = useFetcher({ url });
+  const editor = useCreateBlockNote({
+    animations: false,
+  });
+
+  useEffect(() => {
+    async function loadInitialHTML() {
+      const blocks = await editor.tryParseMarkdownToBlocks(data?.data || "");
+      editor.replaceBlocks(editor.document, blocks);
+    }
+    loadInitialHTML();
+  }, [data]);
+
+  return (
+    <div className="h-[calc(100vh-12rem)] py-2">
+      <BlockNoteView editor={editor} sideMenu={true} theme="light" />
+    </div>
+  );
+};
+
+export default ConversationSaveNoteViewer;