Skip to content

Commit

Permalink
fix: 통계 페이지 디자인 약간 수정
Browse files Browse the repository at this point in the history
dbwhdtjr0457 committed Dec 13, 2023
1 parent c953606 commit ff283ac
Showing 1 changed file with 28 additions and 15 deletions.
43 changes: 28 additions & 15 deletions FE/src/components/DiaryModal/DiaryAnalysisModal.js
Original file line number Diff line number Diff line change
@@ -239,9 +239,7 @@ function DiaryAnalysisModal() {
onMouseLeave={() => {
setHoverData(null);
}}
>
hi
</DailyStreak>
/>
);
})}
</StreakBar>
@@ -271,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>
@@ -527,22 +540,22 @@ 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"};
font-size: 0.8rem;
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;

0 comments on commit ff283ac

Please sign in to comment.