Frontend#233/잠금 로직 개선, 기여도 초기 작업

frontend/package.json

@@ -9,6 +9,8 @@
     "@fortawesome/free-regular-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "chart.js": "^4.4.3",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "http-proxy-middleware": "^2.0.6",
     "jquery": "^3.7.1",
     "prosemirror-example-setup": "^1.2.2",
@@ -20,6 +22,7 @@
     "prosemirror-utils": "^1.2.1-0",
     "prosemirror-view": "^1.33.1",
     "react": "17.0.2",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "17.0.2",
     "react-router-dom": "6.21.3",
     "react-scripts": "5.0.1",

frontend/src/App.js

@@ -6,6 +6,7 @@ import SignupPage from "./Component/Auth/SignupPage";
 import NotePage from "./Component/Note/NotePage";
 import UserProfileEdit from "./Component/Auth/UserProfileEdit";
 import Page from "./Component/Page/Page";
+import Contribution from "./Component/Contribution/ContributionPage";
 import EmailTokenHandler from "./Component/Utils/EmailTokenHandler";
 import { BrowserRouter, Routes, Route  } from "react-router-dom";
 
@@ -15,16 +16,14 @@ export default function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<AuthPage />} />
-          <Route path="/main/*" element={<Mainpage />} />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/signup" element={<SignupPage />} />
+          <Route path="/main/*" element={<Mainpage />} />
           <Route path="/editProfile" element={<UserProfileEdit />} />
-          <Route path="/logout" element={<Mainpage />} />
-          <Route path="/about" element={<Mainpage />} />
           <Route path="/organization/invitation/approve" element={<EmailTokenHandler />} />
           <Route path="/organization/:id/*" element={<NotePage />} /> 
-          <Route path="/organization/:id/:mainPageId" element={<Page />} />
-          <Route path="/organization/:id/:mainPageId/:subPageId" element={<Page />} /> 
+          <Route path="/organization/:id/:noteId/:pageId" element={<Page />} /> 
+          <Route path="/contribution/:id" element={<Contribution />} /> 
         </Routes>
       </BrowserRouter>
     </div>

frontend/src/Component/Page/Page.js

@@ -52,6 +52,7 @@ function Page() {
   const editorRef = useRef(null);
   const ydocRef = useRef(new Y.Doc());
   const ydocProviderRef = useRef(null);
+  const yDocInitialized = useRef(null);
   const blockLikeRef = useRef(null);
   const blockLockRef = useRef(null);
 
@@ -270,6 +271,7 @@ function Page() {
     if (!ydocRef.current) return;
 
     ydocRef.current = new Y.Doc();
+    yDocInitialized.current = false;
     ydocProviderRef.current = new WebsocketProvider(
       // "wss://demos.yjs.dev/ws", // yjs 데모 서버 주소
       // "ws://localhost:4000",
@@ -297,12 +299,13 @@ function Page() {
       } else {
           if (isSynced) {
             handleUserConnection();  
-            ydocProviderRef.current.connect(); 
-        }
+            ydocProviderRef.current.connect();
+          }
       }
       // setisloaded(true); // 딜레이 없음
       setTimeout(() => {
         setisloaded(true);
+        yDocInitialized.current = true;
       }, 300); // 딜레이 있음
     });
 
@@ -575,7 +578,7 @@ function Page() {
           yUndoPlugin(),
           hoverButtonPlugin(blockLikeRef, blockLockRef),
           inlinePlaceholderPlugin(),
-          generateBlockIdPlugin(),
+          generateBlockIdPlugin({ yDocInitialized }),
           imagePlugin({
             ...imageSettings,
             resizeCallback: (el, updateCallback) => {

frontend/src/Component/Page/utils/editor/plugin/generateBlockIdPlugin.js

@@ -1,14 +1,19 @@
 import { Plugin } from "prosemirror-state";
 import { v4 as uuidv4 } from "uuid";
 
-export const generateBlockIdPlugin = (guidGenerator = uuidv4) => {
-    return new Plugin({
+export const generateBlockIdPlugin = ({ yDocInitialized, guidGenerator = uuidv4 }) => {
+  return new Plugin({
       appendTransaction: (transactions, prevState, nextState) => {
+        // Yjs 문서가 초기화되지 않은 경우 동작하지 않도록 함
+        if (!yDocInitialized.current) {
+          return null;        
+        }
+
         const tr = nextState.tr;
         let modified = false;
         const generatedIds = new Set();
         const userId = localStorage.getItem('userId');
-      
+
         if (transactions.some(transaction => transaction.docChanged)) {
           const { paragraph, image } = nextState.schema.nodes;
           let prevNode = null; // 이전 노드를 추적하기 위한 변수

frontend/src/Component/Page/utils/editor/plugin/hoverButtonPlugin.js

@@ -74,10 +74,6 @@ export function hoverButtonPlugin(blockLikeRef, blockLockRef) {
                 toastr.warning("내용이 없는 블록입니다.");
               } else {
                   await blockLikeRef.current.toggleLike(guid, liker, writer);
-                  if (liker !== writer) {
-                    this.classList.toggle("hoverButton_like");
-                    this.classList.toggle("hoverButton_like_fullRedHeart");
-                  }
               }
             } else {
               console.log('No UUID found for this node.');
@@ -133,10 +129,10 @@ export function hoverButtonPlugin(blockLikeRef, blockLockRef) {
 
           // 새 노드 삽입
           const newNode = state.schema.nodes.paragraph.create();
-          tr = state.doc.content.size === $clickPos.end($clickPos.depth) ? tr.insert(insertPos - 1, newNode) : tr.insert(insertPos, newNode);
+          tr = state.doc.content.size === $clickPos.end($clickPos.depth) && !isImageNode ? tr.insert(insertPos - 1, newNode) : tr.insert(insertPos, newNode);
 
           // 삽입된 노드 내부에 커서 위치시키기
-          const newPos = state.doc.content.size === $clickPos.end($clickPos.depth) ? insertPos : insertPos + 1; // 노드 삽입 후 새로운 위치 조정
+          const newPos = state.doc.content.size === $clickPos.end($clickPos.depth) && !isImageNode ? insertPos : insertPos + 1; // 노드 삽입 후 새로운 위치 조정
           tr = tr.setSelection(Selection.near(tr.doc.resolve(newPos)));
 
           // 트랜잭션 적용

frontend/src/Component/Page/utils/yjs/BlockLike.js

@@ -8,10 +8,11 @@ const BlockLike = forwardRef(({ ydocRef }, ref) => {
   const pathSegments = location.pathname.split('/').filter(Boolean); 
   const organizationId = pathSegments[1];
   const noteId = pathSegments[2];
+  const hoverButton_like = document.querySelector(".hoverButton_like");
 
   const userId = localStorage.getItem('userId');
   const yLikeList = ydocRef.current.getMap(`yLikeList_${userId}`);
-
+  
   const toggleLike = async (blockId, lover, heartReceiver) => {
     if (lover !== heartReceiver) {
       const currentLikeState = yLikeList.get(blockId);
@@ -34,8 +35,10 @@ const BlockLike = forwardRef(({ ydocRef }, ref) => {
       if (response.ok) {
         if (responseData.includes("좋아요 성공!")) {
           toastr.success(responseData);
+          hoverButton_like.classList.replace('hoverButton_like', 'hoverButton_like_fullRedHeart');
         } else {
           toastr.info(responseData);
+          hoverButton_like.classList.replace('hoverButton_like_fullRedHeart', 'hoverButton_like');
         }
       } else {
         toastr.error(responseData);