From 3966146cd9e231e714e8304014239eb0265ecca4 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Wed, 13 Dec 2023 12:17:52 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EC=9E=94=EB=94=94=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DiaryModal/DiaryAnalysisModal.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js index 3224608..2a46bb3 100644 --- a/FE/src/components/DiaryModal/DiaryAnalysisModal.js +++ b/FE/src/components/DiaryModal/DiaryAnalysisModal.js @@ -192,7 +192,7 @@ function DiaryAnalysisModal() { {["일", "월", "화", "수", "목", "금", "토"].map((day) => ( - {day} + {day} ))} { @@ -239,7 +239,9 @@ function DiaryAnalysisModal() { onMouseLeave={() => { setHoverData(null); }} - /> + > + hi + ); })} @@ -480,7 +482,7 @@ const DiaryAnalysisModalItem = styled.div` display: flex; flex-direction: column; - justify-content: center; + justify-content: space-evenly; align-items: center; font-size: 1.3rem; @@ -515,8 +517,7 @@ const ArrowButton = styled.img` `; const StreakBar = styled.div` - width: 65rem; - padding: 2% 0; + width: 80%; margin: 0 auto; display: grid; grid-auto-flow: column; @@ -526,8 +527,9 @@ const StreakBar = styled.div` `; const DailyStreak = styled.div` - width: 1rem; - height: 1rem; + width: 100%; + padding-bottom: 100%; + height: 0; flex-shrink: 0; border-radius: 20%; background-color: ${(props) => props.$bg || "#bbbbbb"}; @@ -537,6 +539,12 @@ const DailyStreak = styled.div` align-items: center; `; +const DailyStreakDay = styled.div` + font-size: 0.8rem; + color: #ffffff99; + display: absolute; +`; + const EmotionBar = styled.div` width: 85%; height: 15%; From c95360612bd15a3f46cdcd89d56a0e1b26999768 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Wed, 13 Dec 2023 12:19:17 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EB=8B=AC=EB=A0=A5=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/DiaryModal/DiaryListModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index 3b5fb20..76906ac 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -464,7 +464,8 @@ const DiaryListModalFilterContent = styled.div` background-color: #bbc2d4; width: 16rem; - height: 18rem; + height: auto; + padding: 0.5rem 0; display: flex; flex-direction: column; From ff283ac14e159dc9957b1cb972a6a7cb28f2f1f1 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Wed, 13 Dec 2023 12:40:06 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=ED=86=B5=EA=B3=84=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=95=BD?= =?UTF-8?q?=EA=B0=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DiaryModal/DiaryAnalysisModal.js | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js index 2a46bb3..7f0818d 100644 --- a/FE/src/components/DiaryModal/DiaryAnalysisModal.js +++ b/FE/src/components/DiaryModal/DiaryAnalysisModal.js @@ -239,9 +239,7 @@ function DiaryAnalysisModal() { onMouseLeave={() => { setHoverData(null); }} - > - hi - + /> ); })} @@ -271,19 +269,34 @@ function DiaryAnalysisModal() { /> - + 긍정 - + 부정 - + 중립 @@ -527,9 +540,9 @@ const StreakBar = styled.div` `; const DailyStreak = styled.div` - width: 100%; - padding-bottom: 100%; - height: 0; + width: ${(props) => props.$width || "100%"}; + padding-bottom: ${(props) => props.$paddingBottom || "100%"}; + height: ${(props) => props.$height || "0"}; flex-shrink: 0; border-radius: 20%; background-color: ${(props) => props.$bg || "#bbbbbb"}; @@ -537,12 +550,12 @@ const DailyStreak = styled.div` display: flex; justify-content: center; align-items: center; + position: relative; `; const DailyStreakDay = styled.div` - font-size: 0.8rem; - color: #ffffff99; - display: absolute; + position: absolute; + top: 25%; `; const EmotionBar = styled.div` @@ -621,16 +634,16 @@ const DiaryAnalysisModalContentWrapper = styled.div` `; const MonthGraphBar = styled.div` - width: 85%; + width: 80%; height: 65%; display: flex; - justify-content: space-between; + justify-content: space-evenly; align-items: flex-end; gap: 5%; `; const MonthGraphWrapper = styled.div` - width: 0.7rem; + width: 0.8rem; height: 70%; padding-bottom: 10%; display: flex;