Merge pull request #248 from boostcampwm2023/fix/ui

boostcampwm2023 · Dec 9, 2023 · 7502da5 · 7502da5
2 parents 3948a8e + 8ce45c7
commit 7502da5
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 16 deletions.
diff --git a/FE/src/assets/rule.png b/FE/src/assets/rule.png
diff --git a/FE/src/components/DiaryModal/Calendar.js b/FE/src/components/DiaryModal/Calendar.js
@@ -118,6 +118,7 @@ function Calendar(props) {
                     item === ""
                       ? () => {}
                       : () => {
+                          setIsCalendarOpen(false);
                           setSelectedDate(
                             new Date(
                               calendarDate.getFullYear(),

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -326,6 +326,10 @@ function DiaryListModal() {
       </DiaryListModalItem>
       <DiaryListModalItem $width='50%'>
         <DiaryTitle>
+          <DateInfo>
+            {selectedDiary?.date.slice(2, 4)}.{selectedDiary?.date.slice(5, 7)}.
+            {selectedDiary?.date.slice(8, 10)}
+          </DateInfo>
           {selectedDiary?.title}
           <DiaryTitleImg
             src={zoomIn}
@@ -653,7 +657,7 @@ const DiaryTitleTagItem = styled.div`
 
 const DiaryTitle = styled.div`
   width: 85%;
-  height: 10rem;
+  height: 8rem;
 
   display: flex;
   justify-content: space-between;
@@ -690,4 +694,14 @@ const DiaryContent = styled.div`
   white-space: pre-wrap;
 `;
 
+const DateInfo = styled.div`
+  width: 30%;
+
+  position: fixed;
+  top: 2rem;
+
+  font-size: 0.8rem;
+  color: #ffffff80;
+`;
+
 export default DiaryListModal;
diff --git a/FE/src/components/DiaryModal/DiaryLoadingModal.js b/FE/src/components/DiaryModal/DiaryLoadingModal.js
@@ -24,7 +24,7 @@ function DiaryLoadingModal() {
         ...prev,
         isLoading: false,
       }));
-    }, 1000);
+    }, 500);
   }, []);
 
   return (

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -110,7 +110,13 @@ function DiaryReadModal(props) {
       <ModalBackground $opacity='0' />
       <ModalWrapper $left='50%' width='40vw' height='65vh'>
         <DiaryModalHeader>
-          <DiaryModalTitle>{data.title}</DiaryModalTitle>
+          <DiaryModalTitleWrapper>
+            <DateInfo>
+              {data.date.slice(2, 4)}.{data.date.slice(5, 7)}.
+              {data.date.slice(8, 10)}
+            </DateInfo>
+            <DiaryModalTitle>{data.title}</DiaryModalTitle>
+          </DiaryModalTitleWrapper>
           <DiaryButton
             onClick={() => {
               setDiaryState((prev) => ({
@@ -209,11 +215,19 @@ const DiaryModalHeader = styled.div`
   justify-content: space-between;
 `;
 
-const DiaryModalTitle = styled.div`
+const DiaryModalTitleWrapper = styled.div`
   flex-grow: 1;
-  font-size: 1.5rem;
-  line-height: 1.8rem;
   width: 70%;
+  height: 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const DiaryModalTitle = styled.div`
+  width: 100%;
+  font-size: 1.5rem;
+  height: 2.5rem;
 
   overflow-x: auto;
   white-space: nowrap;
@@ -225,14 +239,13 @@ const DiaryButton = styled.button`
   align-items: center;
   justify-content: center;
   width: 3rem;
-  height: 2rem;
+  height: 100%;
   border: hidden;
   background: none;
 
   color: rgba(255, 255, 255, 0.2);
   font-size: 1rem;
 
-  gap: 0.5rem;
   cursor: pointer;
 
   &:hover {
@@ -320,4 +333,14 @@ const DiaryModalIcon = styled.div`
   justify-content: center;
 `;
 
+const DateInfo = styled.div`
+  width: 30%;
+
+  position: relative;
+  top: -0.5rem;
+
+  font-size: 0.8rem;
+  color: #ffffff80;
+`;
+
 export default DiaryReadModal;
diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -51,7 +51,6 @@ function DiaryUpdateModal(props) {
     setDiaryState((prev) => ({
       ...prev,
       isUpdate: false,
-      isRead: true,
     }));
   };
 
@@ -87,6 +86,11 @@ function DiaryUpdateModal(props) {
       shapeUuid: data.diaryData.shapeUuid,
     };
 
+    setDiaryState((prev) => ({
+      ...prev,
+      isLoading: true,
+    }));
+
     return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries`, {
       method: "PUT",
       headers: {
@@ -99,7 +103,7 @@ function DiaryUpdateModal(props) {
         refetch();
         setDiaryState((prev) => ({
           ...prev,
-          isLoading: true,
+          isRead: true,
         }));
       }
       if (res.status === 403) {

diff --git a/FE/src/components/SignUpModal/SignUpModal.js b/FE/src/components/SignUpModal/SignUpModal.js
@@ -8,6 +8,7 @@ import ModalTitle from "../../styles/Modal/ModalTitle";
 import ModalButton from "../../styles/Modal/ModalButton";
 import ModalInputBox from "../../styles/Modal/ModalInputBox";
 import ModalBackground from "../ModalBackground/ModalBackground";
+import SignUpRuleGuide from "./SignUpRuleGuide";
 
 function SignUpModal() {
   const [email, setEmail] = useState("");
@@ -97,10 +98,13 @@ function SignUpModal() {
     <>
       <ModalBackground />
       <ModalWrapper $left='50%' width='25rem' height='40rem'>
-        <SignUpModalTitleWrapper>
-          <ModalTitle>회원가입</ModalTitle>
+        <SignUpModalHeaderWrapper>
+          <SignUpModalTitleWrapper>
+            <ModalTitle>회원가입</ModalTitle>
+            <SignUpRuleGuide />
+          </SignUpModalTitleWrapper>
           <SignUpModalSubtitle>당신의 이야기를 펼쳐보세요!</SignUpModalSubtitle>
-        </SignUpModalTitleWrapper>
+        </SignUpModalHeaderWrapper>
         <SignUpModalInputWrapper>
           <SignUpModalInput>
             <SignUpModalInputTitle>* 아이디</SignUpModalInputTitle>
@@ -168,11 +172,20 @@ function SignUpModal() {
   );
 }
 
-const SignUpModalTitleWrapper = styled.div`
+const SignUpModalHeaderWrapper = styled.div`
   width: 100%;
+  height: 2.25rem;
+  margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
+`;
+
+const SignUpModalTitleWrapper = styled.div`
+  width: 50%;
+  display: flex;
   align-items: center;
+  gap: 10%;
 `;
 
 const SignUpModalSubtitle = styled.div`

diff --git a/FE/src/components/SignUpModal/SignUpRuleGuide.js b/FE/src/components/SignUpModal/SignUpRuleGuide.js
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import rule from "../../assets/rule.png";
+
+function SignUpRuleGuide() {
+  const [isRuleGuideOpen, setIsRuleGuideOpen] = useState(false);
+  return (
+    <SignUpRuleGuideWrapper>
+      <SignUpRuleGuideImg
+        src={rule}
+        alt='rule'
+        onMouseEnter={() => setIsRuleGuideOpen(true)}
+        onMouseLeave={() => setIsRuleGuideOpen(false)}
+      />
+      {isRuleGuideOpen && (
+        <SignUpRuleGuideTextWrapper>
+          <SignUpRuleGuideText>
+            아이디: 5~20자의 영문 대소문자, 숫자와 특수기호(_),(-)
+            <br />
+            비밀번호: 5~20자의 영문 대소문자, 숫자, 특수문자
+            <br />
+            <br />
+            네이버 / 카카오 계정으로도 간편하게 로그인할 수 있습니다.
+          </SignUpRuleGuideText>
+        </SignUpRuleGuideTextWrapper>
+      )}
+    </SignUpRuleGuideWrapper>
+  );
+}
+
+const SignUpRuleGuideTextWrapper = styled.div`
+  width: 80%;
+  height: 20%;
+  border-radius: 0.5rem;
+  background-color: #bbc2d4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 14%;
+  font-size: 1rem;
+  text-align: center;
+  line-height: 1.8rem;
+
+  animation: fadeIn 0.3s forwards;
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
+const SignUpRuleGuideWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SignUpRuleGuideImg = styled.img`
+  width: 1.8rem;
+  filter: invert(100%);
+  cursor: pointer;
+
+  animation: blink 1.25s 3;
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
+const SignUpRuleGuideText = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+`;
+
+export default SignUpRuleGuide;
diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js
@@ -84,6 +84,15 @@ function StarPage({ refetch, pointsRefetch }) {
           }}
         />
       ) : null}
+      <CreateGuide
+        width='20rem'
+        height='1rem'
+        $top='50%'
+        $paddingTop='2rem'
+        $paddingBottom='2rem'
+      >
+        빈 공간을 더블 클릭해 별을 생성해 보세요.
+      </CreateGuide>
       {starState.mode !== "create" ? (
         <ModalWrapper
           width='25rem'
@@ -146,7 +155,11 @@ function StarPage({ refetch, pointsRefetch }) {
             >
               <img src={arrow} alt='starMove' />별 이동
             </DockContent>
-            <DockContent>
+            <DockContent
+              onClick={() => {
+                alert("준비 중인 서비스입니다.");
+              }}
+            >
               <img src={paint} alt='paint' />
               스킨 변경
             </DockContent>
@@ -776,4 +789,23 @@ const CanvasContainer = styled.div`
   left: 0;
 `;
 
+const CreateGuide = styled(ModalWrapper)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2rem;
+
+  animation: fadeOut 5s forwards;
+  @keyframes fadeOut {
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+`;
+
 export default StarPage;
diff --git a/FE/src/styles/Modal/ModalTitle.js b/FE/src/styles/Modal/ModalTitle.js
@@ -3,7 +3,6 @@ import styled from "styled-components";
 const ModalTitle = styled.div`
   font-size: 2.25rem;
   font-weight: bold;
-  margin-bottom: 1rem;
 `;
 
 export default ModalTitle;