Merge pull request #52 from boostcampwm2023/feat/48-emotion-icon-ui

[Feat] 읽기 모달 UI에 수정, 삭제 버튼 추가 및 감정 분석 결과 추가
boostcampwm2023 · Nov 16, 2023 · c999303 · c999303
2 parents 018c06e + 90f95aa
commit c999303
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 6 deletions.
diff --git a/FE/src/assets/delete.svg b/FE/src/assets/delete.svg
diff --git a/FE/src/assets/edit.svg b/FE/src/assets/edit.svg
diff --git a/FE/src/assets/indicator-arrow.svg b/FE/src/assets/indicator-arrow.svg
diff --git a/FE/src/assets/star.svg b/FE/src/assets/star.svg
diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -1,13 +1,67 @@
 import React from "react";
 import styled from "styled-components";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
+import editIcon from "../../assets/edit.svg";
+import deleteIcon from "../../assets/delete.svg";
+import starIcon from "../../assets/star.svg";
+import indicatorArrowIcon from "../../assets/indicator-arrow.svg";
+
+function DiaryModalEmotionIndicator({ emotion }) {
+  return (
+    <EmotionIndicatorWrapper>
+      <EmotionIndicatorBar>
+        <EmotionIndicator ratio={emotion.positive} color='#618CF7' />
+        <EmotionIndicatorArrow>
+          <img
+            src={indicatorArrowIcon}
+            alt='arrow'
+            style={{ width: "1rem", height: "1rem" }}
+          />
+        </EmotionIndicatorArrow>
+        <EmotionIndicator ratio={emotion.neutral} color='#A848F6' />
+        <EmotionIndicatorArrow>
+          <img
+            src={indicatorArrowIcon}
+            alt='arrow'
+            style={{ width: "1rem", height: "1rem" }}
+          />
+        </EmotionIndicatorArrow>
+        <EmotionIndicator ratio={emotion.negative} color='#E5575B' />
+      </EmotionIndicatorBar>
+      <EmotionTextWrapper>
+        <EmotionText>긍정 {emotion.positive}</EmotionText>
+        <EmotionText>중립 {emotion.neutral}</EmotionText>
+        <EmotionText>부정 {emotion.negative}</EmotionText>
+      </EmotionTextWrapper>
+    </EmotionIndicatorWrapper>
+  );
+}
 
 function DiaryReadModal() {
   return (
-    <ModalWrapper left='67%' width='40vw' height='70vh' opacity='0.3'>
+    <ModalWrapper left='67%' width='40vw' height='65vh' opacity='0.3'>
       <DiaryModalHeader>
         <DiaryModalTitle>아주 멋진 나!</DiaryModalTitle>
-        <DiaryDeleteButton>삭제</DiaryDeleteButton>
+        <DiaryButton>
+          <img
+            src={editIcon}
+            alt='edit'
+            style={{
+              width: "1.5rem",
+              height: "1.5rem",
+            }}
+          />
+        </DiaryButton>
+        <DiaryButton>
+          <img
+            src={deleteIcon}
+            style={{
+              width: "1.5rem",
+              height: "1.5rem",
+            }}
+            alt='delete'
+          />
+        </DiaryButton>
       </DiaryModalHeader>
       <DiaryModalContent>
         오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
@@ -44,7 +98,25 @@ function DiaryReadModal() {
           <DiaryModalTag>맛있다!</DiaryModalTag>
         </DiaryModalTagList>
       </DiaryModalTagBar>
-      <div>감정 분석 결과</div>
+      <DiaryModalEmotionBar>
+        <DiaryModalEmotionIndicator
+          emotion={{
+            positive: "50%",
+            neutral: "20%",
+            negative: "30%",
+          }}
+        />
+        <DiaryModalIcon>
+          <img
+            src={starIcon}
+            alt='star'
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        </DiaryModalIcon>
+      </DiaryModalEmotionBar>
     </ModalWrapper>
   );
 }
@@ -59,10 +131,14 @@ const DiaryModalHeader = styled.div`
 
 const DiaryModalTitle = styled.div`
   flex-grow: 1;
-  font-size: 1.2rem;
+  font-size: 1.5rem;
 `;
 
-const DiaryDeleteButton = styled.button`
+const DiaryButton = styled.button`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 3rem;
   height: 1rem;
   border: hidden;
@@ -71,12 +147,13 @@ const DiaryDeleteButton = styled.button`
   color: rgba(255, 255, 255, 0.5);
   font-size: 1rem;
 
+  gap: 0.5rem;
   cursor: pointer;
 `;
 
 const DiaryModalContent = styled.div`
   width: 100%;
-  height: 50%;
+  height: 60%;
   line-height: 1.5rem;
   overflow-y: scroll;
   &::-webkit-scrollbar {
@@ -117,4 +194,55 @@ const DiaryModalTagList = styled.div`
   gap: 0.5rem;
 `;
 
+const DiaryModalEmotionBar = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  height: 5rem;
+`;
+
+const DiaryModalIcon = styled.div`
+  width: 5rem;
+  height: 5rem;
+`;
+
+const EmotionIndicatorWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+`;
+
+const EmotionIndicatorBar = styled.div`
+  width: 20rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const EmotionIndicator = styled.div`
+  width: ${(props) => props.ratio};
+  height: 100%;
+  background-color: ${(props) => props.color};
+`;
+
+const EmotionIndicatorArrow = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 0;
+  height: 4rem;
+`;
+
+const EmotionTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const EmotionText = styled.div`
+  font-size: 0.9rem;
+`;
+
 export default DiaryReadModal;