feat: 챗봇 요약 기능 구현

LikeLionHGU · Aug 5, 2024 · f521bde · f521bde
1 parent 1ed4089
commit f521bde
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 33 deletions.
diff --git a/src/chatbotPage/components/LoadingModal.jsx b/src/chatbotPage/components/LoadingModal.jsx
@@ -1,44 +1,132 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import loadingImg from "../../asset/Loading/loading.svg";
-import { useNavigate } from "react-router-dom";
-function LoadingModal({ setModalOpen }) {
+import { useLocation, useNavigate } from "react-router-dom";
+import postChatSummary from "../../apis/postChatSummary";
+import { useRecoilValue } from "recoil";
+import { tokenState } from "../../atom/atom";
+
+// import React, { useState, useEffect } from "react";
+// import { useNavigate } from "react-router-dom";
+// import { useRecoilValue } from "recoil";
+// import { tokenState } from "../recoil/atoms";
+// import { postChatSummary } from "../api"; // Adjust the import path as needed
+// import styled from "styled-components";
+// import loadingImg from "../../asset/loading.svg"; // Adjust the import path as needed
+
+function LoadingModal({ chatId, setModalOpen }) {
+  const csrfToken = useRecoilValue(tokenState);
   const navigate = useNavigate();
+  const [summaryText, setSummaryText] = useState("");
 
   const closeLoadingModal = () => {
     setModalOpen(false);
-    navigate("/summaryEdit"); // navigate하면서 요약된 내용을 보내줘야한다. 여기서 연결해야할 것 같다.
-    // summaryEdit 링크로 넘겨준 내용을 quill 에디터에 기본값으로 넣어줘야한다.
-    // -> DiaryBotPage/components/SummaryEdit 로 들어간다 !!
+    navigate("/summaryEdit", { state: { summaryText } });
   };
+
+  useEffect(() => {
+    const summaryFetch = async () => {
+      try {
+        const summary = await postChatSummary(chatId, csrfToken);
+        setSummaryText(summary.content);
+      } catch (error) {
+        console.error("Error fetching diary detail:", error);
+      }
+    };
+    summaryFetch();
+  }, [chatId, csrfToken]);
+
+  useEffect(() => {
+    if (summaryText) {
+      closeLoadingModal(); // Navigate only after summaryText is updated
+    }
+  }, [summaryText]);
+
   return (
-    <div>
-      {/* 사실 사용자가 모달을 닫을 필요는 없어서 나중에 closeLoadingModal부분은 지워주면 된다. */}
-      <ModalBackground onClick={closeLoadingModal}>
-        {/* <Overlay> */}
-        <Wrapper>
-          {/* <img src={loadingGif} alt="loading" width="60px"></img> */}
-          <img
-            src={loadingImg}
-            alt="loading"
-            className="loading-img"
-            width="60px"
-          ></img>
-          <h3>steppy가 일지를 요약중이에요!</h3>
-          <div className="loading-content">
-            steppy와 대화 중 일지에 추가하고 싶은 내용이 있었나요?
-            <br />
-            일지 수정하기 페이지에 담아주세요 :)
-          </div>
-        </Wrapper>
-        {/* </Overlay> */}
-      </ModalBackground>
-    </div>
+    <ModalBackground>
+      <Wrapper>
+        <img
+          src={loadingImg}
+          alt="loading"
+          className="loading-img"
+          width="60px"
+        />
+        <h3>steppy가 일지를 요약중이에요!</h3>
+        <div className="loading-content">
+          steppy와 대화 중 일지에 추가하고 싶은 내용이 있었나요?
+          <br />
+          일지 수정하기 페이지에 담아주세요 :)
+        </div>
+      </Wrapper>
+    </ModalBackground>
   );
 }
 
 export default LoadingModal;
 
+// function LoadingModal({ chatId, setModalOpen }) {
+//   const csrfToken = useRecoilValue(tokenState);
+
+//   const navigate = useNavigate();
+//   // const location = useLocation();
+//   const [summaryText, setSummaryText] = useState("");
+//   // const { summary } = location.state;
+//   const closeLoadingModal = () => {
+//     setModalOpen(false);
+//     navigate("/summaryEdit", { state: { summaryText } }); // navigate하면서 요약된 내용을 보내줘야한다. 여기서 연결해야할 것 같다.
+//   };
+
+//   useEffect(() => {
+//     console.log("chatid: ", chatId);
+
+//     const summaryFetch = async () => {
+//       try {
+//         const summary = await postChatSummary(chatId, csrfToken);
+
+//         console.log("summary : ", summary);
+//         // summary = fetchedSummary;
+//         setSummaryText(summary.content);
+//         console.log("아아아악summary : ", summary.content);
+//         closeLoadingModal(); // 일지 받아오고 나면 모달 닫기
+//       } catch (error) {
+//         console.error("Error fetching diary detail:", error);
+//         console.log("summary AAA");
+//       }
+//     };
+//     summaryFetch();
+//   }, [chatId, csrfToken]);
+
+//   useEffect(() => {
+//     if (summaryText) {
+//       closeLoadingModal(); // Navigate only after summaryText is updated
+//     }
+//   }, [summaryText]); // 값 변하면 업데이트
+//   return (
+//     <div>
+//       <ModalBackground>
+//         {/* <Overlay> */}
+//         <Wrapper>
+//           <img
+//             src={loadingImg}
+//             alt="loading"
+//             className="loading-img"
+//             width="60px"
+//           ></img>
+//           <h3>steppy가 일지를 요약중이에요!</h3>
+//           <div className="loading-content">
+//             steppy와 대화 중 일지에 추가하고 싶은 내용이 있었나요?
+//             <br />
+//             일지 수정하기 페이지에 담아주세요 :)
+//           </div>
+//         </Wrapper>
+//         {/* </Overlay> */}
+//       </ModalBackground>
+//     </div>
+//   );
+// }
+
+// export default LoadingModal;
+
 const modalBase = `
 width: 100vw;
   height: 100vh;

diff --git a/src/diaryBotPage/components/SummaryEdit.jsx b/src/diaryBotPage/components/SummaryEdit.jsx
@@ -1,32 +1,89 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import QuillEditor from "../../diaryWritePage/components/QuillEditor";
 import styled from "styled-components";
+import ThumbnailModal from "../../diaryWritePage/components/ThumbnailModal";
+import DiaryPostModal from "../../diaryWritePage/components/DiaryPostModal";
+import { useRecoilValue } from "recoil";
+import { tokenState } from "../../atom/atom";
+import { useLocation } from "react-router-dom";
 /*
 
 일지 작성하기 버튼을 누르면 여기서 수정한 내용을 
 
 */
+
 function SummaryEdit() {
+  const location = useLocation();
+  const summaryText = location.state?.summaryText || "";
+  // console.log("edit page에서 확인하는 summary", summaryText);
+  const [thumbnailModal, setThumbnailModal] = useState(false); // 썸네일 사진 추가하는 모달
+  const [postedModal, setPostedModal] = useState(false); //일지가 추가되었다는 걸 알려주는 모달
+  const [formData, setFormData] = useState({
+    title: "",
+    content: "",
+  });
+  const csrfToken = useRecoilValue(tokenState);
+  const goalId = location.state.goalId;
+
+  const openThumbnailModal = () => {
+    setThumbnailModal(true);
+  };
+  useEffect(() => {
+    console.log("formData updated:", formData, csrfToken);
+  }, [formData]);
+
   return (
     <Wrapper>
       <BoxWrapper>
         <BoxTitles>
           <BoxTitle className="title-disabled">steppy와 일지 작성하기</BoxTitle>
-          <BoxTitle>일지 수정하기</BoxTitle>
+          <BoxTitle>일지 작성하기</BoxTitle>
         </BoxTitles>
         <CenterBox>
           <DiaryHeader>
-            <DiaryTitle placeholder="오늘의 일지를 잘 표현할 수 있는 제목을 작성해주세요 (최대 10자)">
+            <DiaryTitle
+              placeholder="오늘의 일지를 잘 표현할 수 있는 제목을 작성해주세요 (최대 10자)"
+              name="title"
+              value={formData.title}
+              onChange={(e) =>
+                setFormData((formData) => ({
+                  ...formData,
+                  title: e.target.value,
+                }))
+              }
+            >
               {/* */}
             </DiaryTitle>
           </DiaryHeader>
           <EditorArea>
-            <QuillEditor />
+            <QuillEditor
+              onChange={(content) =>
+                setFormData((formData) => ({
+                  ...formData,
+                  content: content,
+                }))
+              }
+              mainText={summaryText}
+            />
           </EditorArea>
           <SaveButton>
-            <button className="save-button">일지 작성하기</button>
+            <button className="save-button" onClick={openThumbnailModal}>
+              일지 작성하기
+            </button>
           </SaveButton>
         </CenterBox>
+        {thumbnailModal && (
+          <ThumbnailModal
+            setThumbnailModal={setThumbnailModal}
+            setPostedModal={setPostedModal}
+            formData={formData}
+            goalId={goalId}
+            csrfToken={csrfToken}
+          />
+        )}
+        {!thumbnailModal && postedModal && (
+          <DiaryPostModal setPostedModal={setPostedModal} goalId={goalId} />
+        )}
       </BoxWrapper>
     </Wrapper>
   );