Merge pull request #80 from LikeLionHGU/ehdrb01

feat: approval page api 연결

src/components/Write.jsx

@@ -64,11 +64,14 @@ import "../styles/write.css";
 import { useRecoilState } from "recoil";
 import { historyState } from "../atom";
 import ModalContainer from "./ModalContainer";
+// write 컴포넌트 호출 시, useEffect로 Approval에서는 내용을 가지고 와야함
+// Update에서는 useEffect 사용할 필요 X
+// useEffect 내부에서 updateId에 내용을 확인하고, null이 아닐 경우에만 사용
+
 
 // user === 0 : 독자, 1: 참여자, 2: 관리자
 // mode === 0 : /update, 1: /approval
-export default function Write({ user, mode, id }) {
-  // user, mode, 갈피 id를 받아옴
+export default function Write({ user, mode, id, updatedId, isLoading }) { // user, mode, 갈피 id를 받아옴
   const editorContainerRef = useRef(null);
   const editorMenuBarRef = useRef(null);
   const editorToolbarRef = useRef(null);
@@ -79,11 +82,26 @@ export default function Write({ user, mode, id }) {
   const [isLayoutReady, setIsLayoutReady] = useState(false);
   const [openModal, setOpenModal] = useState(false);
   const [history, setHistory] = useRecoilState(historyState);
-  var data = "";
-  console.log(id);
+  var data = ""; // contents에 해당하는 부분
+
+
+
 
   const [postList, setPostList] = useState([]); // 모든 버전(post를 다 가지고 옴)
   const [post, setPost] = useState(); // 현재 선택한 버전의 post
+  const [updatedPost, setUpdatedPost] = useState(); // 검토 신청이 들어온 post
+  // 처음 입력되는 부분
+  // const [initialData, setInitialData] = useState();
+  var initialData = "";
+
+  const [possible, setPossible] = useState(isLoading); // 로딩 상태 추가
+
+
+
+
+
+
+
 
   const toggleHistory = () => {
     setHistory(!history); // 상태를 토글하여 열림/닫힘 상태 변경
@@ -128,6 +146,62 @@ export default function Write({ user, mode, id }) {
     }
   };
 
+  useEffect(() => {
+    if(updatedId != null) { // updated id가 null이 아닌 경우에만 호출하게 됨
+      const token = localStorage.getItem("token");
+
+
+      if (token == null) {
+        navigate("/", { replace: true });
+        return;
+      }
+
+      const fetchDefaultPost = () => { // 갈피의 가장 최신 승인 post 가져오기
+        axios
+          .get(`https://likelion.info/bookmark/get/default/${id}`, {
+            headers: { Authorization: `Bearer ${token}` },
+            withCredentials: true,
+          })
+          .then((response) => {
+            setPost(response.data); // 가장 최신 승인 post를 post 안에 저장
+            initialData = response.data.contents;
+            setPossible(false);
+
+            console.log(initialData);
+          })
+          .catch((error) => {
+            console.error("Error fetching posts:", error);
+            localStorage.removeItem("token");
+            navigate("/", { replace: true });
+          }
+        );
+      };
+
+      const fetchUpdatedPost = () => { // 검토 요청이 들어온 post 객체 가져오기
+        axios
+          .get(`https://likelion.info/post/get/${updatedId}`, { // 수정된 post id 사용
+            headers: { Authorization: `Bearer ${token}` },
+            withCredentials: true,
+          })
+          .then((response) => {
+            setUpdatedPost(response.data); // 검토 요청이 들어온 post를 updatedPost 안에 저장
+          })
+          .catch((error) => {
+            console.error("Error fetching posts:", error);
+            localStorage.removeItem("token");
+            navigate("/", { replace: true });
+          }
+        );
+      };
+
+      fetchUpdatedPost();
+      fetchDefaultPost();
+
+
+    } 
+  }, []);
+
+
   useEffect(() => {
     setIsLayoutReady(true);
     return () => setIsLayoutReady(false);
@@ -174,11 +248,7 @@ export default function Write({ user, mode, id }) {
     }
   };
 
-  // 처음 입력되는 부분
-  const initialData =
-    user === 2 && mode === 2
-      ? "<h2>제목</h2><p>태그가</p><h1>아주 잘 되네요</h1><h3>수정도 안되게 했습니다</h3>"
-      : "";
+
 
   const editorConfig = {
     toolbar: {
@@ -373,8 +443,11 @@ export default function Write({ user, mode, id }) {
     translations: [translations],
   };
 
-  return (
-    <div className="write-container">
+  if(possible) {
+    return <div>왜 안돼</div>;
+  } return (
+
+      <div className="write-container">
       <div
         className="editor-container editor-container_document-editor editor-container_include-style"
         ref={editorContainerRef}
@@ -459,4 +532,6 @@ export default function Write({ user, mode, id }) {
       </div>
     </div>
   );
+
+
 }

src/pages/project/Update.jsx

@@ -44,13 +44,17 @@ export default function Update() {
       return (
         <div>
           <div>검토 대기 기록</div>
+          <br></br>
             {waitPostList.map((item, index) => (
             <div key={index}>
               <div>{item.updatedDate}</div>
               <div>{item.user.name}</div>
+              <div onClick={() => toApprove(item.id)}>검토하러 가기</div>
+              <br></br>
             </div>
           ))}
           <div>모든 버전</div>
+          <br></br>
           {confirmedList.map((item, index) => (
             <div key={index}>
               <div>{item.updatedDate}</div>
@@ -156,6 +160,13 @@ export default function Update() {
     console.log(confirmedList);
   }, [confirmedList]);
 
+
+  const toApprove = (updatedId) => { // 넘겨주는 id는 갈피의 id
+
+    navigate("/approval", { state: { id: id, updatedId: updatedId} });
+  };
+
+
   return (
     <div id="update-main-container">
       <Header mode={3} />
@@ -183,7 +194,7 @@ export default function Update() {
           )}
         </div>
         <div id="update-middle">
-          <Write user={user} mode={0} id={id}/>
+          <Write user={user} mode={0} id={id} isLoading={false}/>
         </div>
         <div id="update-right">
           <div

src/pages/project/manager/Approval.jsx

@@ -2,14 +2,31 @@
 import Write from "../../../components/Write";
 
 import "../../../styles/approval.css";
+import { useLocation } from "react-router-dom";
+
+
+// 갈피 아이디를 보내줘야 함
 
 export default function Approval() {
+  const location = useLocation();
+  const { id, updatedId } = location.state || {}; // id는 현재 갈피 id / updatedId는 현재 업데이트 된 갈피의 id
+
+  console.log(updatedId);
+  console.log(id);
+
   return (
     <div className="approval-write">
+<<<<<<< HEAD
+      {/* 참여자가 수정한 것 */}
+      <Write user={2} mode={2} id={id} updatedId={updatedId}/>
+      {/* 원본 */}
+      <Write user={2} mode={1} id={id} updatedId={updatedId}/>
+=======
       {/* 원본 */}
       <Write user={2} mode={1} />
       {/* 참여자가 수정한 것 */}
       <Write user={2} mode={2} />
+>>>>>>> main
     </div>
   );
 }