Merge pull request #44 from LikeLionHGU/eunju_style/#43

Eunju style/#43
LikeLionHGU · Aug 1, 2024 · 47051a4 · 47051a4
2 parents efc1b8b + e228e8e
commit 47051a4
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 60 deletions.
diff --git a/src/chatbotPage/components/ChatbotBody.jsx b/src/chatbotPage/components/ChatbotBody.jsx
@@ -13,49 +13,52 @@ function ChatbotBody() {
   return (
     <div>
       <PageWrapper>
-        <CenterBox className="flex">
-          <Chattings>
-            <Chatbot className="flex">
+        <BoxWrapper>
+          <BoxTitle>steppy와 일지 작성하기</BoxTitle>
+          <CenterBox className="flex">
+            <Chattings>
+              <Chatbot className="flex">
+                <ChatbotIcon className="flex" />
+                {dummy.chatbot.map((texts, index) => (
+                  <ChatbotText key={index}>{texts.text}</ChatbotText>
+                  //   <ChatbotText key={index}>{texts.text}</ChatbotText>
+                ))}
+              </Chatbot>
+              <User>
+                {dummy.user.map((texts, index) => (
+                  <UserText key={index}>{texts.text}</UserText>
+                ))}
+              </User>
               <ChatbotIcon className="flex" />
-              {dummy.chatbot.map((texts, index) => (
-                <ChatbotText key={index}>{texts.text}</ChatbotText>
-                //   <ChatbotText key={index}>{texts.text}</ChatbotText>
-              ))}
-            </Chatbot>
-            <User>
-              {dummy.user.map((texts, index) => (
-                <UserText key={index}>{texts.text}</UserText>
-              ))}
-            </User>
-            <ChatbotIcon className="flex" />
-            <ChatbotText className="flex"> . . . </ChatbotText>
-          </Chattings>
-          <UserInteractField>
-            <> {/* 일지 작성 조건 갖춰지면 클릭할 부분 보여주기 */}</>
-            <SummarizeArea>
-              {" "}
-              <span>
-                (봇이름)과 대화를 통해 충분히 오늘의 감상을 기록하셨다면{" "}
-                <span
-                  className="summarize-button"
-                  onClick={openLoadingModal}
-                  href="/"
-                >
-                  일지를 요약
+              <ChatbotText className="flex"> . . . </ChatbotText>
+            </Chattings>
+            <UserInteractField>
+              <> {/* 일지 작성 조건 갖춰지면 클릭할 부분 보여주기 */}</>
+              <SummarizeArea>
+                <span>
+                  (봇이름)과 대화를 통해 충분히 오늘의 감상을 기록하셨다면
+                  일지를 요약해보세요!
+                  {/* <span
+                    className="summarize-button"
+                    onClick={openLoadingModal}
+                    href="/"
+                  > */}
+                  {/* 일지를 요약 */}
+                  {/* </span> */}
+                  {/* 해보세요! */}
+                </span>{" "}
+                <span className="summarizeBtn" onClick={openLoadingModal}>
+                  일지 요약하기 &gt;{" "}
                 </span>
-                해보세요!
-              </span>{" "}
-              <span className="summarizeBtn" onClick={openLoadingModal}>
-                일지 요약하기 &gt;{" "}
-              </span>
-            </SummarizeArea>
-            <TypingBox>
-              <TypingArea placeholder="메시지를 작성해주세요! "></TypingArea>
-              <SendButton src={sendIcon} />
-            </TypingBox>
-          </UserInteractField>
-        </CenterBox>
-        {modalOpen && <LoadingModal setModalOpen={setModalOpen} />}
+              </SummarizeArea>
+              <TypingBox>
+                <TypingArea placeholder="메시지를 작성해주세요! "></TypingArea>
+                <SendButton src={sendIcon} />
+              </TypingBox>
+            </UserInteractField>
+          </CenterBox>
+          {modalOpen && <LoadingModal setModalOpen={setModalOpen} />}
+        </BoxWrapper>
       </PageWrapper>
     </div>
   );
@@ -64,8 +67,10 @@ function ChatbotBody() {
 export default ChatbotBody;
 const PageWrapper = styled.div`
   display: flex;
-  padding: 32px;
-  justify-content: center;
+  flex-direction: column;
+  padding-top: 32px;
+  align-items: center;
+  /* justify-content: center; */
   width: 100%;
   height: 100%;
   /* border: 2px solid red; */
@@ -74,16 +79,35 @@ const PageWrapper = styled.div`
     display: flex;
   }
 `;
+const BoxWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const BoxTitle = styled.div`
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 2px solid #586eff;
+  color: #676767;
+  font-size: 16px;
+  font-weight: bold;
+  width: 230px;
+  margin-bottom: 0px;
+  // 폰트 적용 필요 : Apple SD Gothic Neo
+`;
 const CenterBox = styled.div`
   flex-direction: column;
   justify-content: space-between;
 
   width: 792px; // << 나중에 바꿔야 할 부분
   height: 708px;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
 
   padding: 21px 20px;
-  /* border: 2px solid orange; */
-  border: 2px solid lightgray;
+  background-color: #eef1ff;
+  /* border: 2px solid lightgray; */
 `;
 
 const Chatbot = styled.div`
@@ -162,14 +186,25 @@ const SummarizeArea = styled.div`
   align-items: center;
   padding-left: 15px;
   padding-right: 15px;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
+
+  border: 1.5px solid transparent;
+  background: linear-gradient(to right, #eef1ff, #eef1ff) padding-box,
+    linear-gradient(to right, #586eff, #bea0e6) border-box;
+  border-radius: 8px;
   /* border: 2px solid blue; */
-  border: 2px solid lightgray;
-  > span > .summarize-button {
+  > span {
+    background-image: linear-gradient(to right, #586eff, #bea0e6);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+  /* background: linear-gradient(to right, #586eff, #bea0e6) border-box; */
+  /* > span > .summarize-button {
     color: blue;
     text-decoration: underline;
     cursor: pointer;
-  }
+  } */
   .summarizeBtn {
     cursor: pointer;
   }
@@ -183,7 +218,8 @@ const TypingBox = styled.div`
   padding-left: 15px;
   padding-right: 15px;
   /* border: 2px solid pink; */
-  background-color: #d9d9d9;
+  background-color: #dfdfdf;
+  border-radius: 8px;
   border: 2px solid lightgray;
 `;
 
@@ -196,12 +232,12 @@ const TypingArea = styled.input`
   /* padding-left: 15px; */
   font-size: 16px;
   /* border: 2px solid pink; */
-  background-color: #d9d9d9;
+  background-color: #dfdfdf;
   border: none;
 `;
 const SendButton = styled.img`
   /* background-color: ; */
-
+  cursor: pointer;
   height: 27px;
   width: 27px;
   border-radius: 4px;

diff --git a/src/chatbotPage/components/LoadingModal.jsx b/src/chatbotPage/components/LoadingModal.jsx
@@ -34,7 +34,8 @@ width: 100vw;
   left: 0;
   right: 0;
   bottom: 0;
-  position: fixed;`;
+  position: fixed;
+  `;
 
 const ModalBackground = styled.div`
   ${modalBase}
@@ -60,6 +61,7 @@ const Wrapper = styled.div`
   background: #ffffff;
   width: 350px; // 로딩모달 크기
   height: 230px;
+  border-radius: 12px;
   /* border: 2px solid red; */
   .loading-content {
     width: 210px;

diff --git a/src/diaryListPage/components/CreateDiaryModal.jsx b/src/diaryListPage/components/CreateDiaryModal.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
-
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 function CreateDiaryModal({ setIsModalOpen }) {
   const navigate = useNavigate();
 
@@ -16,11 +16,13 @@ function CreateDiaryModal({ setIsModalOpen }) {
         <Wrapper>
           <TopContainer>
             <TopText>어떤 방법으로 일지를 작성하시겠어요?</TopText>
-            <ExitButton onClick={closeCreateDiaryModal}>나가기</ExitButton>
+            <ExitButton onClick={closeCreateDiaryModal}>
+              <CloseRoundedIcon />
+            </ExitButton>
           </TopContainer>
           <MainContainer>
-            <WriteMethod>
-              <TextContainer onClick={() => navigate("../chatbot")}>
+            <WriteMethod onClick={() => navigate("../chatbot")}>
+              <TextContainer>
                 <MainText>👾 (봇이름)이와 함께 일지 작성하기</MainText>
                 <SubText>
                   <div>
@@ -33,14 +35,14 @@ function CreateDiaryModal({ setIsModalOpen }) {
                 </SubText>
               </TextContainer>
             </WriteMethod>
-            <WriteMethod>
+            <WriteMethod onClick={() => navigate("/write")}>
               <TextContainer>
                 <MainText>✍️ 직접 작성하기</MainText>
                 <SubText>
                   <div>
                     오늘만큼은 적고 싶은게 너무 많은 날, 떠오르는 생각과 느낌을
                     적고 싶은 날
-                  </div>{" "}
+                  </div>
                   <div style={{ marginTop: "3px" }}>
                     자유롭게 하루의 일지를 적어보아요!
                   </div>
@@ -86,6 +88,7 @@ const Wrapper = styled.div`
   background: #ffffff;
   width: 520px;
   height: 375px;
+  border-radius: 12px;
 `;
 
 const TopContainer = styled.div`
@@ -103,13 +106,21 @@ const TopText = styled.div`
   left: 50%;
   transform: translateX(-50%);
   width: 316px;
+  cursor: default;
 `;
 
 const ExitButton = styled.div`
   display: flex;
   justify-content: center;
   margin-left: auto;
   margin-right: 22px;
+  cursor: pointer;
+  /* border: 2px solid red; */
+  padding: 2px;
+  border-radius: 5px;
+  &:hover {
+    background-color: #eef1ff;
+  }
 `;
 
 const MainContainer = styled.div`
@@ -126,12 +137,13 @@ const WriteMethod = styled.div`
   border: 1px solid lightgray;
   margin-bottom: 16px;
   color: gray;
+  cursor: pointer;
 `;
 
 const TextContainer = styled.div`
   margin-left: 15px;
   margin-top: 23px;
-  cursor: pointer;
+  cursor: pointer !important;
 `;
 
 const MainText = styled.div`