merge: [FE] 클라우드 불러오기 crdt 적용, 로컬 파일 저장시 확장자 깨지는 문제 해결 (#198)

boostcampwm2023 · Dec 6, 2023 · 2dfa6e5 · 2dfa6e5
2 parents 7d2316b + 09811ca
commit 2dfa6e5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/frontEnd/src/components/room/modal/CodeListModal.tsx b/frontEnd/src/components/room/modal/CodeListModal.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
+import * as Y from 'yjs';
 import { useQuery } from '@tanstack/react-query';
 import { LoadCodeData } from '@/types/loadCodeData';
 import CodeFileButton from './codeList/CodeFileButton';
@@ -8,6 +9,9 @@ import WarningModal from './WarningModal';
 import getUserCodes from '@/apis/getUserCodes';
 import QUERY_KEYS from '@/constants/queryKeys';
 import useModifyState from '@/stores/useModifyState';
+import { CRDTContext } from '@/contexts/crdt';
+import useDataChannels from '@/stores/useDataChannels';
+import sendMessageDataChannels from '@/utils/sendMessageDataChannels';
 
 export default function CodeListModal({
   codeData,
@@ -28,6 +32,8 @@ export default function CodeListModal({
   const [selectOne, setSelectOne] = useState<string>('');
   const { show } = useModal(WarningModal);
   const { hide } = useModal();
+  const crdt = useContext(CRDTContext);
+  const { codeDataChannel } = useDataChannels();
 
   const findById = (id: string) => {
     const result = codeData.find((code) => code.id === id);
@@ -41,6 +47,12 @@ export default function CodeListModal({
       show({
         warningString: '작업중이던 내용이 모두 지워집니다.',
         callback: () => {
+          crdt.getText('sharedText').delete(0, crdt.getText('sharedText').toString().length);
+          sendMessageDataChannels(codeDataChannel, Y.encodeStateAsUpdate(crdt));
+
+          crdt.getText('sharedText').insert(0, result.content);
+          sendMessageDataChannels(codeDataChannel, Y.encodeStateAsUpdate(crdt));
+
           setPlainCode(result.content);
           setModifyId(result.id);
           setLanguage(result.language);

diff --git a/frontEnd/src/main.tsx b/frontEnd/src/main.tsx
@@ -8,6 +8,7 @@ import Room from '@pages/Room.tsx';
 
 import Modals from './components/modal/Modals';
 import reactQueryClient from './configs/reactQueryClient';
+import { CRDTProvider } from './contexts/crdt';
 
 const router = createBrowserRouter([
   {
@@ -23,8 +24,10 @@ const router = createBrowserRouter([
 function Main() {
   return (
     <QueryClientProvider client={reactQueryClient}>
-      <RouterProvider router={router} />
-      <Modals />
+      <CRDTProvider>
+        <RouterProvider router={router} />
+        <Modals />
+      </CRDTProvider>
     </QueryClientProvider>
   );
 }

diff --git a/frontEnd/src/utils/file.ts b/frontEnd/src/utils/file.ts
@@ -33,7 +33,7 @@ export const downloadLocalFile = (contents: string, fileName: string, extension:
   const fileURL = URL.createObjectURL(file);
 
   element.href = fileURL;
-  element.download = `${fileName || 'solution'}.${extension}`;
+  element.download = fileName || `solution.${extension}`;
   document.body.appendChild(element);
 
   element.click();