Merge pull request #117 from boostcampwm2023/feat/113-ui-animation

[Feat] UI 애니메이션 추가
boostcampwm2023 · Nov 23, 2023 · 39e6fe6 · 39e6fe6
2 parents 79d6fd9 + 31a25a8
commit 39e6fe6
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 5 deletions.
diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -266,6 +266,11 @@ const ModalSideButton = styled.div`
   color: #ffffff;
   font-size: 1.2rem;
   cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+    transition: 0.25s;
+  }
 `;
 
 const DiaryModalTitle = styled.h1`

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -41,6 +41,7 @@ function DiaryDeleteModal() {
           취소
         </DeleteModalButton>
         <DeleteModalButton
+          color='rgba(255, 0, 0, 0.8)'
           onClick={() => {
             deleteDiary({
               diaryUuid: diaryState.diaryUuid,
@@ -91,6 +92,7 @@ const DeleteModalButton = styled.button`
   font-family: "Pretendard-Medium";
   font-size: 1.2rem;
   cursor: pointer;
+  color: ${(props) => props.color || "#000000"};)};
 `;
 
 export default DiaryDeleteModal;
diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -71,7 +71,7 @@ function DiaryListModal() {
         >
           {DiaryList?.map((diary) => (
             <DiaryTitleListItem
-              key={diary.id}
+              key={diary.uuid}
               onClick={() => {
                 setSelectedDiary(diary);
               }}
@@ -129,6 +129,16 @@ const DiaryListModalItem = styled.div`
 
   font-size: 1.3rem;
   color: #ffffff;
+
+  animation: modalFadeIn 0.5s;
+  @keyframes modalFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 `;
 
 const DiaryListModalFilterWrapper = styled.div`
@@ -208,6 +218,11 @@ const DiaryTitleImg = styled.img`
   height: 1.3rem;
 
   cursor: pointer;
+
+  &:hover {
+    transform: scale(1.2);
+    transition: transform 0.25s;
+  }
 `;
 
 const DiaryContent = styled.div`

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -108,7 +108,7 @@ function DiaryReadModal() {
         <DiaryModalTagName>태그</DiaryModalTagName>
         <DiaryModalTagList>
           {data.tags.map((tag) => (
-            <DiaryModalTag>{tag}</DiaryModalTag>
+            <DiaryModalTag key={tag}>{tag}</DiaryModalTag>
           ))}
         </DiaryModalTagList>
       </DiaryModalTagBar>
@@ -164,6 +164,11 @@ const DiaryButton = styled.button`
 
   gap: 0.5rem;
   cursor: pointer;
+
+  &:hover {
+    transform: scale(1.2);
+    transition: transform 0.25s;
+  }
 `;
 
 const DiaryModalContent = styled.div`

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -290,6 +290,11 @@ const ModalSideButton = styled.div`
   color: #ffffff;
   font-size: 1.2rem;
   cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+    transition: 0.25s;
+  }
 `;
 
 const DiaryModalTitle = styled.h1`

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -12,7 +12,7 @@ function SideBar() {
   const setUserState = useSetRecoilState(userAtom);
 
   return (
-    <>
+    <AnimationWrapper>
       <SideBarWrapper>
         <SideBarContentWrapper>
           <SideBarContent
@@ -72,11 +72,28 @@ function SideBar() {
           }}
         />
       </SideBarWrapper>
-      <SideBarBackground />
-    </>
+      <SideBarBackground
+        onClick={() => {
+          setHeaderState((prev) => ({
+            ...prev,
+            isSideBar: false,
+          }));
+        }}
+      />
+    </AnimationWrapper>
   );
 }
 
+const AnimationWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  z-index: 1003;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+`;
+
 const SideBarWrapper = styled.div`
   width: 15rem;
   height: 100vh;
@@ -93,6 +110,18 @@ const SideBarWrapper = styled.div`
   top: 0;
   right: 0;
   box-sizing: border-box;
+
+  overflow: auto;
+
+  animation: slideIn 0.5s ease-in-out;
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0%);
+    }
+  }
 `;
 
 const SideBarBackground = styled.div`

diff --git a/FE/src/styles/Modal/ModalWrapper.js b/FE/src/styles/Modal/ModalWrapper.js
@@ -18,6 +18,16 @@ const ModalWrapper = styled.div`
   border-radius: 1rem;
   padding: 4rem;
   color: #ffffff;
+
+  animation: modalFadeIn 0.5s;
+  @keyframes modalFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 `;
 
 export default ModalWrapper;