diff --git a/src/asset/Icon/GoalDoesNotExistPink.svg b/src/asset/Icon/GoalDoesNotExistPink.svg new file mode 100644 index 0000000..8800924 --- /dev/null +++ b/src/asset/Icon/GoalDoesNotExistPink.svg @@ -0,0 +1,7 @@ + + + + + + + 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 df4efd4..3ebcce3 100644 --- a/src/homepage/component/goals/Goals.jsx +++ b/src/homepage/component/goals/Goals.jsx @@ -12,13 +12,12 @@ import getGoalList from "../../../apis/getGoalList"; import { tokenState } from "../../../atom/atom"; import { useRecoilState } from "recoil"; import GoalDoesNotExistImg from "../../../asset/Icon/GoalDoesNotExist.svg"; - +import GoalDoesNotExistPink from "../../../asset/Icon/GoalDoesNotExistPink.svg"; import img1 from "../../../asset/Random/random1.svg"; import img2 from "../../../asset/Random/random2.svg"; import GoalCreatedModal from "./CreateGoalModal/GoalCreatedModal"; + const backgroundArr = [img1, img2]; -// const randomIndex = Math.floor(Math.random() * backgroundArr.length); -// const backgroundImg = backgroundArr[randomIndex]; function Goals() { const [isModalOpen, setIsModalOpen] = useState(false); @@ -33,7 +32,7 @@ function Goals() { const [csrfToken, setCsrfToken] = useRecoilState(tokenState); useEffect(() => { - if (!csrfToken) return; // 토큰이 없으면 API 호출하지 않음 + if (!csrfToken) return; const fetchGoalList = async () => { try { const fetchedGoalList = await getGoalList(csrfToken); @@ -41,8 +40,8 @@ function Goals() { console.log("Fetched goalList:", fetchedGoalList); } catch (error) { if (error.response && error.response.status === 401) { - setCsrfToken(null); // 401 에러 발생 시 토큰 초기화 - navigate("/"); // 로그인 페이지로 이동 + setCsrfToken(null); + navigate("/"); } else { console.error("Error fetching goal list", error); } @@ -70,7 +69,7 @@ function Goals() { const isExpired = (endDate) => { if (!endDate) return false; let [year, month, day] = endDate.split(".").map(Number); - year += year < 50 ? 2000 : 1900; // 50을 기준으로 2000년대와 1900년대 구분 + year += year < 50 ? 2000 : 1900; const goalDate = new Date(year, month - 1, day); return goalDate < today; }; @@ -78,7 +77,7 @@ function Goals() { const getDaysLeft = (endDate) => { if (!endDate) return null; let [year, month, day] = endDate.split(".").map(Number); - year += year < 50 ? 2000 : 1900; // 50을 기준으로 2000년대와 1900년대 구분 + year += year < 50 ? 2000 : 1900; const goalDate = new Date(year, month - 1, day); const diffTime = goalDate - today; const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); @@ -116,7 +115,7 @@ function Goals() { 목표 추가하기 - {!isLoading && filteredGoals.length === 0 && ( + {!isLoading && filteredGoals.length === 0 && currentTab !== "완료한 도전" && (
)} + {!isLoading && filteredGoals.length === 0 && currentTab === "완료한 도전" && ( + + +
+
작은 목표부터 시작해서
+
하나씩 채워나가봐요!
+
+
+
곧 이곳이 당신의 성취로
가득 찰 거예요!
+
+ + )} {filteredGoals.map((goal) => { const randomIndex = Math.floor(Math.random() * backgroundArr.length); @@ -162,9 +192,6 @@ function Goals() { ) : ( )} - {/* */} @@ -383,7 +410,7 @@ const TitleFireContainer = styled.div` `; const Title = styled.div` - font-size: 20px; + font-size: 18px; font-weight: bolder; margin-bottom: 3px; `; @@ -400,7 +427,7 @@ const FireContainer = styled.div` `; const Fire = styled.div` - font-size: 18px; + font-size: 14px; display: flex; `;