From 592453ef1f4294fffeb8647104166205f7ad3896 Mon Sep 17 00:00:00 2001 From: JongHyun Date: Sun, 4 Aug 2024 21:47:14 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EB=AA=A9=ED=91=9C=EC=B9=B4=EB=93=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/diaryListPage/components/Diaries.jsx | 32 ++----- src/diaryListPage/components/GoalCard.jsx | 100 +++++++++++++++++----- src/homepage/component/goals/Goals.jsx | 4 +- 3 files changed, 87 insertions(+), 49 deletions(-) diff --git a/src/diaryListPage/components/Diaries.jsx b/src/diaryListPage/components/Diaries.jsx index a1396c2..b5b4205 100644 --- a/src/diaryListPage/components/Diaries.jsx +++ b/src/diaryListPage/components/Diaries.jsx @@ -48,13 +48,9 @@ function Diaries() { let diaries = goalList.journals; if (currentSort === "최신순") { - diaries = diaries.sort( - (a, b) => formatDate(b.createdDate) - formatDate(a.createdDate) - ); + diaries = diaries.sort((a, b) => formatDate(b.createdDate) - formatDate(a.createdDate)); } else if (currentSort === "오래된 순") { - diaries = diaries.sort( - (a, b) => formatDate(a.createdDate) - formatDate(b.createdDate) - ); + diaries = diaries.sort((a, b) => formatDate(a.createdDate) - formatDate(b.createdDate)); } return diaries; @@ -66,26 +62,18 @@ function Diaries() { - +
일지 추가하기
- +
{!isLoading && filteredDiaries.length === 0 && ( - - 📝 일지 작성으로 목표에 한걸음 더! 📝 - + 📝 일지 작성으로 목표에 한걸음 더! 📝 )} {filteredDiaries.map((diaries, index) => ( {diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음 - + ) : null} ))} - {isModalOpen && ( - - )} + {isModalOpen && } ); } @@ -244,7 +228,7 @@ const DiaryDoesNotExist = styled.div` justify-content: center; align-items: center; width: 466px; - height: 92px; + height: 592px; border: 1px solid #aeaeae; border-radius: 12px; border-style: dashed; diff --git a/src/diaryListPage/components/GoalCard.jsx b/src/diaryListPage/components/GoalCard.jsx index 96f111e..91bbeea 100644 --- a/src/diaryListPage/components/GoalCard.jsx +++ b/src/diaryListPage/components/GoalCard.jsx @@ -34,9 +34,7 @@ function GoalCard() { const calculateDaysFromStart = (startDate) => { if (!isValidDate(startDate)) return 0; // 기본값 설정 - const [year, month, day] = startDate - .split(".") - .map((part) => parseInt(part, 10)); + const [year, month, day] = startDate.split(".").map((part) => parseInt(part, 10)); const start = new Date(year + 2000, month - 1, day); // 2000년대를 가정 const today = new Date(); const diffTime = today - start; @@ -49,9 +47,7 @@ function GoalCard() { const fetchedGoalInfo = await getDiaryList(goalId, csrfToken); setGoalInfo(fetchedGoalInfo); - const daysFromStart = calculateDaysFromStart( - fetchedGoalInfo.goal.startDate - ); + const daysFromStart = calculateDaysFromStart(fetchedGoalInfo.goal.startDate); setStartedFrom(daysFromStart); } catch (error) { console.error("Error fetching goal info:", error); @@ -72,26 +68,31 @@ function GoalCard() { {goalInfo.goal.thumbnail ? ( - + ) : ( )} {/* */} - {goalInfo.goal.title} + + {goalInfo.goal.title} + {goalInfo.goal.streak >= 3 && ( + + 🔥{goalInfo.goal.streak >= 10 && 🔥} + 연속{goalInfo.goal.streak}일 작성 + + )} + + {goalInfo.goal.startDate} - + {goalInfo.goal.startDate && goalInfo.goal.endDate && } {goalInfo.goal.endDate} -
{startedFrom}일차
-
- 작성한 일지 {goalInfo.journals ? goalInfo.journals.length : 0}개 -
+ {startedFrom >= 1 &&
{startedFrom}일차
} +
작성한 일지 {goalInfo.journals ? goalInfo.journals.length : 0}개
)} - {isCompModalOpen && ( - - )} + {isCompModalOpen && } ); } @@ -157,13 +156,65 @@ const Info = styled.div` /* background-color: #d9d9d9; */ `; +const TitleFireContainer = styled.div` + display: flex; + justify-content: space-between; + width: 242px; + margin-top: 12px; +`; + const Title = styled.div` - font-size: 20px; + font-size: 18px; font-weight: bolder; - margin-top: 12px; /* border: 2px solid red; */ `; +const Fire = styled.div` + font-size: 14px; + display: flex; +`; + +const FireContainer = styled.div` + position: relative; + display: flex; + align-items: center; + margin-bottom: 3px; + + &:hover div { + display: block; + } +`; + +const Tooltip = styled.div` + display: none; + position: absolute; + bottom: -34px; + left: 50%; + transform: translateX(-50%); + width: max-content; + padding: 8px; + background-color: white; + text-align: center; + border-radius: 4px; + font-size: 12px; + z-index: 4; + box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.12); + + &:before { + content: ""; + border-color: white transparent; + border-style: solid; + border-width: 0 6px 8px 6.5px; + display: block; + left: 50%; + transform: translateX(-50%); + position: absolute; + top: -5px; + width: 0; + z-index: 4; + } +`; + const Period = styled.div` display: flex; font-size: 16px; @@ -179,7 +230,11 @@ const Period = styled.div` } `; -const StartDate = styled.div``; +const StartDate = styled.div` + height: 24px; + display: flex; + align-items: center; +`; const DueDate = styled.div``; @@ -223,8 +278,7 @@ const Accomplished = styled.button` margin-bottom: 16px; border-radius: 8px; /* background-color: transparent; */ - background-color: ${(props) => - props.status === "OPEN" ? "transparent" : "#EEF1FF"}; + background-color: ${(props) => (props.status === "OPEN" ? "transparent" : "#EEF1FF")}; cursor: pointer; font-weight: bold; diff --git a/src/homepage/component/goals/Goals.jsx b/src/homepage/component/goals/Goals.jsx index dc55a6f..3ebcce3 100644 --- a/src/homepage/component/goals/Goals.jsx +++ b/src/homepage/component/goals/Goals.jsx @@ -410,7 +410,7 @@ const TitleFireContainer = styled.div` `; const Title = styled.div` - font-size: 20px; + font-size: 18px; font-weight: bolder; margin-bottom: 3px; `; @@ -427,7 +427,7 @@ const FireContainer = styled.div` `; const Fire = styled.div` - font-size: 18px; + font-size: 14px; display: flex; `;