Skip to content

Commit

Permalink
Merge pull request #272 from boostcampwm2023/refactor/268-fe-refactor
Browse files Browse the repository at this point in the history 
[Refactor] 컴포넌트 중복 요소 분리 및 정리
  • Loading branch information
@dbwhdtjr0457
dbwhdtjr0457 authored Dec 14, 2023
2 parents 850b46b + 9e8eb2a commit d1601e3
Show file tree
Hide file tree
Showing 6 changed files with 358 additions and 396 deletions.
121 changes: 40 additions & 81 deletions FE/src/components/DiaryModal/DiaryAnalysisModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ function DiaryAnalysisModal() {
left: 0,
text: "",
});
const emotions = [
{ bg: "#618cf7", text: "긍정" },
{ bg: "#e5575b", text: "부정" },
{ bg: "#a848f6", text: "중립" },
];

async function getDataFn(data) {
return fetch(
Expand Down Expand Up @@ -250,39 +255,19 @@ function DiaryAnalysisModal() {
text={false}
/>
<EmotionStreakBar>
<EmotionStreak>
<DailyStreak
$bg='#618cf7'
$paddingBottom='0'
$width='1.2rem'
$height='1.2rem'
/>
<DiaryAnalysisModalText size='1rem'>
긍정
</DiaryAnalysisModalText>
</EmotionStreak>
<EmotionStreak>
<DailyStreak
$bg='#e5575b'
$paddingBottom='0'
$width='1.2rem'
$height='1.2rem'
/>
<DiaryAnalysisModalText size='1rem'>
부정
</DiaryAnalysisModalText>
</EmotionStreak>
<EmotionStreak>
<DailyStreak
$bg='#a848f6'
$paddingBottom='0'
$width='1.2rem'
$height='1.2rem'
/>
<DiaryAnalysisModalText size='1rem'>
중립
</DiaryAnalysisModalText>
</EmotionStreak>
{emotions.map((emotion, index) => (
<EmotionStreak key={`emotion-${index + 1}`}>
<DailyStreak
$bg={emotion.bg}
$paddingBottom='0'
$width='1.2rem'
$height='1.2rem'
/>
<DiaryAnalysisModalText size='1rem'>
{emotion.text}
</DiaryAnalysisModalText>
</EmotionStreak>
))}
</EmotionStreakBar>
</EmotionBarContentWrapper>
</EmotionBar>
Expand Down Expand Up @@ -340,30 +325,17 @@ function DiaryAnalysisModal() {
</DiaryAnalysisModalText>
</DiaryAnalysisModalTitleWrapper>
<DiaryAnalysisModalContentWrapper>
{tagsRankData && tagsRankData?.first ? (
<TagRanking
key='first-tag'
rank={tagsRankData.first.rank}
tag={tagsRankData.first.tag}
count={tagsRankData.first.count}
/>
) : null}
{tagsRankData && tagsRankData?.second ? (
<TagRanking
key='second-tag'
rank={tagsRankData.second.rank}
tag={tagsRankData.second.tag}
count={tagsRankData.second.count}
/>
) : null}
{tagsRankData && tagsRankData?.third ? (
<TagRanking
key='third-tag'
rank={tagsRankData.third.rank}
tag={tagsRankData.third.tag}
count={tagsRankData.third.count}
/>
) : null}
{tagsRankData &&
["first", "second", "third"].map((rank) =>
tagsRankData[rank] ? (
<TagRanking
key={`${rank}-tag`}
rank={tagsRankData[rank].rank}
tag={tagsRankData[rank].tag}
count={tagsRankData[rank].count}
/>
) : null,
)}
</DiaryAnalysisModalContentWrapper>
</>
) : (
Expand All @@ -379,30 +351,17 @@ function DiaryAnalysisModal() {
</DiaryAnalysisModalText>
</DiaryAnalysisModalTitleWrapper>
<DiaryAnalysisModalContentWrapper direction='row'>
{shapesRankData && shapesRankData?.first ? (
<ShapeRanking
key='first-shape'
rank={shapesRankData.first.rank}
uuid={shapesRankData.first.uuid}
count={shapesRankData.first.count}
/>
) : null}
{shapesRankData && shapesRankData?.second ? (
<ShapeRanking
key='second-shape'
rank={shapesRankData.second.rank}
uuid={shapesRankData.second.uuid}
count={shapesRankData.second.count}
/>
) : null}
{shapesRankData && shapesRankData?.third ? (
<ShapeRanking
key='third-shape'
rank={shapesRankData.third.rank}
uuid={shapesRankData.third.uuid}
count={shapesRankData.third.count}
/>
) : null}
{shapesRankData &&
["first", "second", "third"].map((rank) =>
shapesRankData[rank] ? (
<ShapeRanking
key={`${rank}-shape`}
rank={shapesRankData[rank].rank}
uuid={shapesRankData[rank].uuid}
count={shapesRankData[rank].count}
/>
) : null,
)}
</DiaryAnalysisModalContentWrapper>
</>
) : (
Expand Down
163 changes: 74 additions & 89 deletions FE/src/components/DiaryModal/DiaryListModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,57 +52,77 @@ function DiaryListModal() {
}, [selectedDiary]);

useEffect(() => {
if (diaryState.diaryList) {
const filteredList = diaryState.diaryList
.filter((diary) => {
return (
(!filterState.date.start && !filterState.date.end) ||
(filterState.date.start &&
filterState.date.end &&
new Date(diary.date) >= filterState.date.start &&
new Date(diary.date) <= filterState.date.end) ||
(filterState.date.start &&
!filterState.date.end &&
new Date(diary.date) >= filterState.date.start) ||
(filterState.date.end &&
!filterState.date.start &&
new Date(diary.date) <= filterState.date.end)
);
})
.filter((diary) => {
return (
(!filterState.emotion.positive &&
!filterState.emotion.neutral &&
!filterState.emotion.negative) ||
(filterState.emotion.positive &&
diary.emotion.sentiment === "positive") ||
(filterState.emotion.neutral &&
diary.emotion.sentiment === "neutral") ||
(filterState.emotion.negative &&
diary.emotion.sentiment === "negative")
);
})
.filter((diary) => {
return (
filterState.shape.length === 0 ||
filterState.shape.includes(diary.shapeUuid)
);
})
.filter((diary) => {
return (
filterState.tag.length === 0 ||
filterState.tag.every((tag) => diary.tags.includes(tag))
);
});
setFilteredDiaryList([...filteredList]);
}
if (!diaryState.diaryList) return;

const isDateInRange = (diaryDate) => {
const startDateCondition =
!filterState.date.start ||
new Date(diaryDate) >= filterState.date.start;

const endDateCondition =
!filterState.date.end || new Date(diaryDate) <= filterState.date.end;

return startDateCondition && endDateCondition;
};

const isEmotionMatch = (diaryEmotion) => {
const { positive, neutral, negative } = filterState.emotion;

return (
(!positive && !neutral && !negative) ||
(positive && diaryEmotion === "positive") ||
(neutral && diaryEmotion === "neutral") ||
(negative && diaryEmotion === "negative")
);
};

const isShapeMatch = (diaryShapeUuid) => {
return (
filterState.shape.length === 0 ||
filterState.shape.includes(diaryShapeUuid)
);
};

const areTagsMatch = (diaryTags) => {
return (
filterState.tag.length === 0 ||
filterState.tag.every((tag) => diaryTags.includes(tag))
);
};

const filteredList = diaryState.diaryList.filter((diary) => {
const isDateValid = isDateInRange(diary.date);
const isEmotionValid = isEmotionMatch(diary.emotion.sentiment);
const isShapeValid = isShapeMatch(diary.shapeUuid);
const areTagsValid = areTagsMatch(diary.tags);

return isDateValid && isEmotionValid && isShapeValid && areTagsValid;
});

setFilteredDiaryList([...filteredList]);
}, [
filterState.date,
filterState.emotion,
filterState.shape,
filterState.tag,
]);

const toggleEmotionFilter = (emotionType) => {
setFilterState((prev) => ({
...prev,
emotion: {
...prev.emotion,
[emotionType]: !prev.emotion[emotionType],
},
}));
};

const emotionButtons = [
{ type: "positive", borderColor: "#00ccff", text: "긍정" },
{ type: "neutral", borderColor: "#ba55d3", text: "중립" },
{ type: "negative", borderColor: "#d1180b", text: "부정" },
];

return (
<DiaryListModalWrapper>
<DiaryListModalItem $justifyContent='center'>
Expand Down Expand Up @@ -154,51 +174,16 @@ function DiaryListModal() {
<DiaryListModalFilterWrapper $height='17%'>
<DiaryTitleListHeader>감정</DiaryTitleListHeader>
<DiaryListModalFilterContent $height='50%'>
<FilterEmotionButton
selected={filterState.emotion.positive}
$borderColor='#00ccff'
onClick={() => {
setFilterState((prev) => ({
...prev,
emotion: {
...prev.emotion,
positive: !prev.emotion.positive,
},
}));
}}
>
긍정
</FilterEmotionButton>
<FilterEmotionButton
selected={filterState.emotion.neutral}
$borderColor='#ba55d3'
onClick={() => {
setFilterState((prev) => ({
...prev,
emotion: {
...prev.emotion,
neutral: !prev.emotion.neutral,
},
}));
}}
>
중립
</FilterEmotionButton>
<FilterEmotionButton
selected={filterState.emotion.negative}
$borderColor='#d1180b'
onClick={() => {
setFilterState((prev) => ({
...prev,
emotion: {
...prev.emotion,
negative: !prev.emotion.negative,
},
}));
}}
>
부정
</FilterEmotionButton>
{emotionButtons.map(({ type, borderColor, text }) => (
<FilterEmotionButton
key={type}
selected={filterState.emotion[type]}
$borderColor={borderColor}
onClick={() => toggleEmotionFilter(type)}
>
{text}
</FilterEmotionButton>
))}
</DiaryListModalFilterContent>
</DiaryListModalFilterWrapper>
<DiaryListModalFilterWrapper $height='28%'>
Expand Down
Loading

0 comments on commit d1601e3

Please sign in to comment.