Merge pull request #116 from LikeLionHGU/eunju_feat/#107

feat: 챗봇 요약+일지 생성
LikeLionHGU · Aug 5, 2024 · fbbc12d · fbbc12d
2 parents 332ea10 + cdbfea7
commit fbbc12d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 81 deletions.
diff --git a/src/chatbotPage/components/ChatbotBody.jsx b/src/chatbotPage/components/ChatbotBody.jsx
@@ -14,6 +14,7 @@ function ChatbotBody() {
   const [isLoading, setIsLoading] = useState(false); // 로딩 상태 추가
   const location = useLocation();
   const chatId = location.state.chatId.chatId;
+  const goalId = location.state.goalId;
   const clientRef = useRef(null); //
   const isFirstLoadRef = useRef(true); //이 페이지가 로드 되었는가 (맨 처음 한번만 채팅 기록 가져오기위해 씀)
   const scrollRef = useRef(); // 스크롤 채팅창 맨 아래로 넣어주기 위해 사용하는 부분
@@ -201,7 +202,11 @@ function ChatbotBody() {
             </UserInteractField>
           </CenterBox>
           {modalOpen && (
-            <LoadingModal chatId={chatId} setModalOpen={setModalOpen} />
+            <LoadingModal
+              chatId={chatId}
+              goalId={goalId}
+              setModalOpen={setModalOpen}
+            />
           )}
         </BoxWrapper>
       </PageWrapper>

diff --git a/src/chatbotPage/components/LoadingModal.jsx b/src/chatbotPage/components/LoadingModal.jsx
@@ -6,22 +6,14 @@ 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 }) {
+function LoadingModal({ chatId, setModalOpen, goalId }) {
   const csrfToken = useRecoilValue(tokenState);
   const navigate = useNavigate();
   const [summaryText, setSummaryText] = useState("");
 
   const closeLoadingModal = () => {
     setModalOpen(false);
-    navigate("/summaryEdit", { state: { summaryText } });
+    navigate("/summaryEdit", { state: { summaryText, goalId } });
   };
 
   useEffect(() => {
@@ -64,69 +56,6 @@ function LoadingModal({ chatId, setModalOpen }) {
 
 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
@@ -23,15 +23,25 @@ function SummaryEdit() {
     content: "",
   });
   const csrfToken = useRecoilValue(tokenState);
-  const goalId = location.state.goalId;
+  const goalId = location.state?.goalId;
 
+  console.log("<<<<<<<<goalID : ", goalId);
   const openThumbnailModal = () => {
     setThumbnailModal(true);
   };
   useEffect(() => {
     console.log("formData updated:", formData, csrfToken);
   }, [formData]);
 
+  // summaryText가 있을 때 formData.content를 업데이트
+  useEffect(() => {
+    if (summaryText) {
+      setFormData((formData) => ({
+        ...formData,
+        content: summaryText,
+      }));
+    }
+  }, [summaryText]);
   return (
     <Wrapper>
       <BoxWrapper>

diff --git a/src/diaryListPage/components/CreateDiaryModal.jsx b/src/diaryListPage/components/CreateDiaryModal.jsx
@@ -14,7 +14,7 @@ function CreateDiaryModal({ setIsModalOpen, goalId }) {
       const chatId = await createChatbotRoom(csrfToken, goalId);
       console.log("채팅아디", chatId.chatId);
       closeCreateDiaryModal();
-      navigate(`../chatbot`, { state: { chatId } });
+      navigate(`../chatbot`, { state: { chatId, goalId } });
     } catch (error) {
       console.error("채팅방 생성 실패", error);
     }
@@ -40,17 +40,29 @@ function CreateDiaryModal({ setIsModalOpen, goalId }) {
               <TextContainer>
                 <MainText>👾 steppy와 함께 일지 작성하기</MainText>
                 <SubText>
-                  <div>무슨 일지를 써야할지 고민이 되는 날에도, 고된 일정으로 피곤한 하루에도</div>
-                  <div style={{ marginTop: "3px" }}>steppy가 chicky님의 꾸준한 기록을 도와줄게요!</div>
+                  <div>
+                    무슨 일지를 써야할지 고민이 되는 날에도, 고된 일정으로
+                    피곤한 하루에도
+                  </div>
+                  <div style={{ marginTop: "3px" }}>
+                    steppy가 chicky님의 꾸준한 기록을 도와줄게요!
+                  </div>
                 </SubText>
               </TextContainer>
             </WriteMethod>
-            <WriteMethod onClick={() => navigate(`/write`, { state: { goalId } })}>
+            <WriteMethod
+              onClick={() => navigate(`/write`, { state: { goalId } })}
+            >
               <TextContainer>
                 <MainText>✍️ 직접 작성하기</MainText>
                 <SubText>
-                  <div>오늘만큼은 적고 싶은게 너무 많은 날, 떠오르는 생각과 느낌을 적고 싶은 날</div>
-                  <div style={{ marginTop: "3px" }}>자유롭게 하루의 일지를 적어보아요!</div>
+                  <div>
+                    오늘만큼은 적고 싶은게 너무 많은 날, 떠오르는 생각과 느낌을
+                    적고 싶은 날
+                  </div>
+                  <div style={{ marginTop: "3px" }}>
+                    자유롭게 하루의 일지를 적어보아요!
+                  </div>
                 </SubText>
               </TextContainer>
             </WriteMethod>