Merge pull request #25 from LikeLionHGU/eunju_feat/#23

feat: AI 일지요약 하는 동안의 로딩 모달창 UI 구현

src/chatbotPage/components/ChatbotBody.jsx

@@ -1,10 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import dummy from "../../db/data.json";
 import sendIcon from "../../asset/Icon/send.svg";
+import LoadingModal from "./LoadingModal";
 function ChatbotBody() {
   //   let botTexts = dummy.Chatbot;
+  const [modalOpen, setModalOpen] = useState(false);
 
+  const openLoadingModal = () => {
+    setModalOpen(true);
+  };
   return (
     <div>
       <PageWrapper>
@@ -31,16 +36,26 @@ function ChatbotBody() {
               {" "}
               <span>
                 (봇이름)과 대화를 통해 충분히 오늘의 감상을 기록하셨다면{" "}
-                <a href="/chatbot">일지를 요약</a>해보세요!
+                <span
+                  className="summarize-button"
+                  onClick={openLoadingModal}
+                  href="/"
+                >
+                  일지를 요약
+                </span>
+                해보세요!
               </span>{" "}
-              <span>일지 요약하기 &gt; </span>
+              <span className="summarizeBtn" onClick={openLoadingModal}>
+                일지 요약하기 &gt;{" "}
+              </span>
             </SummarizeArea>
             <TypingBox>
               <TypingArea placeholder="메시지를 작성해주세요! "></TypingArea>
               <SendButton src={sendIcon} />
             </TypingBox>
           </UserInteractField>
         </CenterBox>
+        {modalOpen && <LoadingModal setModalOpen={setModalOpen} />}
       </PageWrapper>
     </div>
   );
@@ -150,6 +165,14 @@ const SummarizeArea = styled.div`
   margin-bottom: 5px;
   /* border: 2px solid blue; */
   border: 2px solid lightgray;
+  > span > .summarize-button {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .summarizeBtn {
+    cursor: pointer;
+  }
 `;
 
 const TypingBox = styled.div`

src/chatbotPage/components/LoadingModal.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "styled-components";
+import loadingGif from "../../asset/loadingRolling.gif";
+function LoadingModal({ setModalOpen }) {
+  const closeLoadingModal = () => {
+    setModalOpen(false);
+  };
+  return (
+    <div>
+      {/* 사실 사용자가 모달을 닫을 필요는 없어서 나중에 closeLoadingModal부분은 지워주면 된다. */}
+      <ModalBackground onClick={closeLoadingModal}>
+        {/* <Overlay> */}
+        <Wrapper>
+          <img src={loadingGif} alt="loading" width="60px"></img>
+          <h3>AI가 일지를 요약중이에요!</h3>
+          <div className="loading-content">
+            (봇이름)과 대화 중 일지에 추가하고 싶은 내용이 떠오르셨나요?
+            <br />
+            그렇다면 어떤 내용을 적을지 잠시 생각해보세요 :)
+          </div>
+        </Wrapper>
+        {/* </Overlay> */}
+      </ModalBackground>
+    </div>
+  );
+}
+
+export default LoadingModal;
+
+const modalBase = `
+width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: fixed;`;
+
+const ModalBackground = styled.div`
+  ${modalBase}
+
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 3;
+`;
+
+// const Overlay = styled.div`
+//   ${modalBase}
+//   background: rgba(0, 0, 0, 0.2);
+//   cursor: pointer;
+// `;
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #ffffff;
+  width: 350px; // 로딩모달 크기
+  height: 230px;
+  /* border: 2px solid red; */
+  .loading-content {
+    width: 210px;
+    font-size: 15px;
+    text-align: center;
+    /* border: 2px solid red; */
+  }
+`;

src/diaryListPage/components/CreateDiaryModal.jsx

@@ -20,17 +20,27 @@ function CreateDiaryModal({ setIsModalOpen }) {
               <TextContainer>
                 <MainText>👾 (봇이름)이와 함께 일지 작성하기</MainText>
                 <SubText>
-                  <div>무슨 일지를 써야할지 고민이 되는 날에도, 고된 일정으로 피곤한 하루에도</div>{" "}
-                  <div style={{ marginTop: "3px" }}>(봇이름)이가 chicky님의 꾸준한 기록을 도와줄게요!</div>
+                  <div>
+                    무슨 일지를 써야할지 고민이 되는 날에도, 고된 일정으로
+                    피곤한 하루에도
+                  </div>{" "}
+                  <div style={{ marginTop: "3px" }}>
+                    (봇이름)이가 chicky님의 꾸준한 기록을 도와줄게요!
+                  </div>
                 </SubText>
               </TextContainer>
             </WriteMethod>
             <WriteMethod>
               <TextContainer>
                 <MainText>✍️ 직접 작성하기</MainText>
                 <SubText>
-                  <div>오늘만큼은 적고 싶은게 너무 많은 날, 떠오르는 생각과 느낌을 적고 싶은 날</div>{" "}
-                  <div style={{ marginTop: "3px" }}>자유롭게 하루의 일지를 적어보아요!</div>
+                  <div>
+                    오늘만큼은 적고 싶은게 너무 많은 날, 떠오르는 생각과 느낌을
+                    적고 싶은 날
+                  </div>{" "}
+                  <div style={{ marginTop: "3px" }}>
+                    자유롭게 하루의 일지를 적어보아요!
+                  </div>
                 </SubText>
               </TextContainer>
             </WriteMethod>
@@ -55,6 +65,7 @@ const modalStyles = `
 
 const Modal = styled.div`
   ${modalStyles}
+  background: rgba(158, 158, 158, 0.8);
   z-index: 3;
 `;