Merge pull request #267 from boostcampwm2023/fix/calendar-fix

[Fix] 리스트 보기 달력 크기 버그 수정, 통계 페이지 잔디 크기 구현 방식 수정
boostcampwm2023 · Dec 13, 2023 · eff45fd · eff45fd
2 parents 2a7eb5c + ff283ac
commit eff45fd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js
@@ -192,7 +192,7 @@ function DiaryAnalysisModal() {
           <StreakBar>
             {["일", "월", "화", "수", "목", "금", "토"].map((day) => (
               <DailyStreak key={`streak-${day}`} $bg='none'>
-                {day}
+                <DailyStreakDay>{day}</DailyStreakDay>
               </DailyStreak>
             ))}
             {
@@ -269,19 +269,34 @@ function DiaryAnalysisModal() {
             />
             <EmotionStreakBar>
               <EmotionStreak>
-                <DailyStreak $bg='#618cf7' />
+                <DailyStreak
+                  $bg='#618cf7'
+                  $paddingBottom='0'
+                  $width='1.2rem'
+                  $height='1.2rem'
+                />
                 <DiaryAnalysisModalText size='1rem'>
                   긍정
                 </DiaryAnalysisModalText>
               </EmotionStreak>
               <EmotionStreak>
-                <DailyStreak $bg='#e5575b' />
+                <DailyStreak
+                  $bg='#e5575b'
+                  $paddingBottom='0'
+                  $width='1.2rem'
+                  $height='1.2rem'
+                />
                 <DiaryAnalysisModalText size='1rem'>
                   부정
                 </DiaryAnalysisModalText>
               </EmotionStreak>
               <EmotionStreak>
-                <DailyStreak $bg='#a848f6' />
+                <DailyStreak
+                  $bg='#a848f6'
+                  $paddingBottom='0'
+                  $width='1.2rem'
+                  $height='1.2rem'
+                />
                 <DiaryAnalysisModalText size='1rem'>
                   중립
                 </DiaryAnalysisModalText>
@@ -480,7 +495,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 +530,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,15 +540,22 @@ const StreakBar = styled.div`
 `;
 
 const DailyStreak = styled.div`
-  width: 1rem;
-  height: 1rem;
+  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"};
   font-size: 0.8rem;
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+`;
+
+const DailyStreakDay = styled.div`
+  position: absolute;
+  top: 25%;
 `;
 
 const EmotionBar = styled.div`
@@ -613,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;

diff --git 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;