Merge pull request #129 from 2022-Winter-Bootcamp-Team-K/fix/#126-rol…

…lingLocal 로컬스토리지에서 바로 데이터 옮기고 삭제해줌
SVTeamK-ROLLIT · Jan 31, 2023 · 8749edb · 8749edb
2 parents ab77567 + f5bb609
commit 8749edb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/src/Page/MemoText.js b/src/Page/MemoText.js
@@ -119,6 +119,7 @@ function MemoText({
     if (textcase.nickname === '') {
       textcase.nickname = anonymous();
     }
+    localStorage.removeItem('textcase');
     localStorage.setItem('textcase', JSON.stringify({ textcase }));
     const paperId = localStorage.getItem('paperId');
     navigate(`/rolling/${paperId}`);

diff --git a/src/Page/Rolling.js b/src/Page/Rolling.js
@@ -228,15 +228,30 @@ function Rolling() {
   const [isAdmin, setIsAdmin] = useState(false);
   // eslint-disable-next-line no-unused-vars
   const [loading, setLoading] = useState(false);
+  const [memoData, setMemoData] = useState({});
 
   useEffect(() => {
     // 로컬에 ###메모지#### 내용이 들어있으면
     if (localStorage.getItem('textcase') !== null) {
       setIsMemo(true);
       setIsActive(true);
+      const textcaseString = localStorage.getItem('textcase');
+      const textcase = JSON.parse(textcaseString);
+      setMemoData({
+        content: textcase.textcase.content,
+        nickname: textcase.textcase.nickname,
+        font: textcase.textcase.font,
+        password: textcase.textcase.password,
+        color: textcase.textcase.color,
+        font_color: textcase.textcase.fontColor,
+      });
+      localStorage.removeItem('textcase');
     }
   }, []);
 
+  useEffect(() => {
+    console.log(memoData);
+  }, [memoData]);
   const openPhotoModal = useCallback(() => setIsPhotoOpen(true), []); // 사진 모달창 열기
   const closePhotoModal = useCallback(() => setIsPhotoOpen(false), []); // 사진 모달창 닫기
   const openStickyModal = useCallback(() => setIsStickyOpen(true), []); // 스티커 모달창 열기
@@ -288,30 +303,20 @@ function Rolling() {
       setIsMemo(false); // 메모기능 비활성화
       setIsActive(false); // 수정기능 비활성화
       // setIsCancel(false);
-      localStorage.removeItem('textcase'); // 로컬에 저장돼있던 메모지 내용 지움
       return;
     }
 
-    const textcaseString = localStorage.getItem('textcase');
-    const textcase = JSON.parse(textcaseString);
-    textcase.textcase.xcoor = coor.x;
-    textcase.textcase.ycoor = coor.y;
+    console.log(memoData);
+
     try {
-      await axios.post(`${backBaseUrl}/api/v1/papers/${paperId}/memos`, {
-        content: textcase.textcase.content,
-        nickname: textcase.textcase.nickname,
-        font: textcase.textcase.font,
-        password: textcase.textcase.password,
-        color: textcase.textcase.color,
-        font_color: textcase.textcase.fontColor,
-        xcoor: textcase.textcase.xcoor,
-        ycoor: textcase.textcase.ycoor,
-      });
+      await axios.post(
+        `${backBaseUrl}/api/v1/papers/${paperId}/memos`,
+        memoData,
+      );
 
       console.log('successSave!!!!');
       setIsMemo(false); // 메모기능 비활성화
       setIsActive(false); // 수정기능 비활성화
-      localStorage.removeItem('textcase'); // 로컬에 저장돼있던 메모지 내용 지움
     } catch (e) {
       // 서버에서 받은 에러 메시지 출력
       console.log(e);
@@ -362,10 +367,6 @@ function Rolling() {
     setLoading(true);
 
     console.log('start Resizing');
-    console.log(photo);
-    console.log(photo.image_id);
-    console.log(coor);
-    console.log(paperId);
     axios
       .post(`${backBaseUrl}/api/v1/papers/${paperId}/xyphotos`, {
         image_id: photo.image_id,
@@ -433,12 +434,13 @@ function Rolling() {
   // 스티커?메모지?사진? 확인해주고 어떤 것이 새로 생겨서 움직일 것인지 정해주는 함수
   function isItem() {
     return isMemo ? (
-      <NewMemo
+      <NewMemo setCoor={setCoor} setMemoData={setMemoData} list={memoData} />
+    ) : isSticky ? (
+      <NewSticky
         setCoor={setCoor}
-        list={JSON.parse(localStorage.getItem('textcase')).textcase}
+        setMemoData={setMemoData}
+        skickyUrl={skickyUrl}
       />
-    ) : isSticky ? (
-      <NewSticky setCoor={setCoor} skickyUrl={skickyUrl} />
     ) : isPhoto ? (
       <NewPhoto
         parentFunction={parentFunction}

diff --git a/src/Page/newMemo.js b/src/Page/newMemo.js
@@ -3,7 +3,7 @@ import React, { useState, useRef } from 'react';
 import Draggable from 'react-draggable';
 import './Active.css';
 
-export default function newMemo({ list, setCoor }) {
+export default function newMemo({ list, setCoor, setMemoData }) {
   const nodeRef = useRef(null);
   const { content, color, font, fontColor, nickname } = list;
   const [position, setPosition] = useState({ x: 0, y: 0 });
@@ -19,6 +19,11 @@ export default function newMemo({ list, setCoor }) {
   const handleEnd = () => {
     setOpacity(false);
     setCoor(position);
+    setMemoData(prevState => ({
+      ...prevState,
+      xcoor: position.x,
+      ycoor: position.y,
+    }));
   };
 
   return (