Skip to content

Commit

Permalink
Merge pull request #99 from LikeLionHGU/jonghyun_style/#96
Browse files Browse the repository at this point in the history 
Jonghyun style/#96
  • Loading branch information
@dkrehd0519
dkrehd0519 authored Aug 4, 2024
2 parents b318f00 + 592453e commit 4f1504c
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 61 deletions.
7 changes: 7 additions & 0 deletions src/asset/Icon/GoalDoesNotExistPink.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 8 additions & 24 deletions src/diaryListPage/components/Diaries.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -66,26 +62,18 @@ function Diaries() {
<ListPart>
<Searchbar>
<SearchIcon />
<input
className="search-bar"
placeholder="제목+내용을 입력해보세요."
></input>
<input className="search-bar" placeholder="제목+내용을 입력해보세요."></input>
</Searchbar>
<DairyListBox>
<div className="diary-list-head">
<div onClick={openCreateDiaryModal} className="diary-add">
일지 추가하기 <img src={goPencil} alt="" />
</div>
<DiaryViewDropdown
currentSort={currentSort}
setCurrentSort={setCurrentSort}
/>
<DiaryViewDropdown currentSort={currentSort} setCurrentSort={setCurrentSort} />
</div>
<DiaryList>
{!isLoading && filteredDiaries.length === 0 && (
<DiaryDoesNotExist>
📝 일지 작성으로 목표에 한걸음 더! 📝
</DiaryDoesNotExist>
<DiaryDoesNotExist>📝 일지 작성으로 목표에 한걸음 더! 📝</DiaryDoesNotExist>
)}
{filteredDiaries.map((diaries, index) => (
<Diary
Expand All @@ -104,17 +92,13 @@ function Diaries() {
</div>
</div>
{diaries.thumbnail ? ( // 이미지url이 있는지 없는지 판별, 있으면 Image 컴포넌트 보여주고 없으면 안넣음
<Image
style={{ backgroundImage: `url(${diaries.thumbnail})` }}
/>
<Image style={{ backgroundImage: `url(${diaries.thumbnail})` }} />
) : null}
</Diary>
))}
</DiaryList>
</DairyListBox>
{isModalOpen && (
<CreateDiaryModal setIsModalOpen={setIsModalOpen} goalId={goalId} />
)}
{isModalOpen && <CreateDiaryModal setIsModalOpen={setIsModalOpen} goalId={goalId} />}
</ListPart>
);
}
Expand Down Expand Up @@ -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;
Expand Down
100 changes: 77 additions & 23 deletions src/diaryListPage/components/GoalCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -72,26 +68,31 @@ function GoalCard() {
<Container>
<Wrapper>
{goalInfo.goal.thumbnail ? (
<Image
style={{ backgroundImage: `url(${goalInfo.goal.thumbnail})` }}
/>
<Image style={{ backgroundImage: `url(${goalInfo.goal.thumbnail})` }} />
) : (
<Image style={{ backgroundImage: `url(${backgroundImg})` }} />
)}
{/* <Image style={{ backgroundImage: `url(${backgroundImg})` }} /> */}
<Info>
<Title>{goalInfo.goal.title}</Title>
<TitleFireContainer>
<Title>{goalInfo.goal.title}</Title>
{goalInfo.goal.streak >= 3 && (
<FireContainer>
<Fire>🔥{goalInfo.goal.streak >= 10 && <span>🔥</span>}</Fire>
<Tooltip>연속{goalInfo.goal.streak}일 작성</Tooltip>
</FireContainer>
)}
</TitleFireContainer>

<Period>
<StartDate>{goalInfo.goal.startDate}</StartDate>
<ArrowForwardIcon />
{goalInfo.goal.startDate && goalInfo.goal.endDate && <ArrowForwardIcon />}
<DueDate>{goalInfo.goal.endDate}</DueDate>
</Period>
<Line />
<ExtrtaInfo>
<div className="info-day-count">{startedFrom}일차</div>
<div className="info-diary-count">
작성한 일지 {goalInfo.journals ? goalInfo.journals.length : 0}개
</div>
{startedFrom >= 1 && <div className="info-day-count">{startedFrom}일차</div>}
<div className="info-diary-count">작성한 일지 {goalInfo.journals ? goalInfo.journals.length : 0}개</div>
</ExtrtaInfo>
<div className="accomplish-btn">
<Accomplished
Expand All @@ -114,9 +115,7 @@ function GoalCard() {
setIsCompModalOpen={setIsCompModalOpen}
/>
)}
{isCompModalOpen && (
<CompleteGoalModal setIsCompModalOpen={setIsCompModalOpen} />
)}
{isCompModalOpen && <CompleteGoalModal setIsCompModalOpen={setIsCompModalOpen} />}
</Container>
);
}
Expand Down Expand Up @@ -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;
Expand All @@ -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``;

Expand Down Expand Up @@ -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;
Expand Down
55 changes: 41 additions & 14 deletions src/homepage/component/goals/Goals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -33,16 +32,16 @@ function Goals() {
const [csrfToken, setCsrfToken] = useRecoilState(tokenState);

useEffect(() => {
if (!csrfToken) return; // 토큰이 없으면 API 호출하지 않음
if (!csrfToken) return;
const fetchGoalList = async () => {
try {
const fetchedGoalList = await getGoalList(csrfToken);
setGoalList(fetchedGoalList);
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);
}
Expand Down Expand Up @@ -70,15 +69,15 @@ 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;
};

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));
Expand Down Expand Up @@ -116,7 +115,7 @@ function Goals() {
<img src={CreateGoal} alt="" style={{ marginBottom: "15px" }} />
목표 추가하기
</CreateGoalModalBtn>
{!isLoading && filteredGoals.length === 0 && (
{!isLoading && filteredGoals.length === 0 && currentTab !== "완료한 도전" && (
<GoalDoesNotExist>
<img src={GoalDoesNotExistImg} alt="" style={{ marginTop: "59px", width: "40px", height: "41px" }} />
<div
Expand Down Expand Up @@ -148,6 +147,37 @@ function Goals() {
</div>
</GoalDoesNotExist>
)}
{!isLoading && filteredGoals.length === 0 && currentTab === "완료한 도전" && (
<GoalDoesNotExist>
<img src={GoalDoesNotExistPink} alt="" style={{ marginTop: "59px", width: "40px", height: "41px" }} />
<div
style={{
color: "#676767",
fontWeight: "bold",
fontSize: "18px",
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: "16px",
}}
>
<div>작은 목표부터 시작해서</div>
<div style={{ marginTop: "5px" }}>하나씩 채워나가봐요!</div>
</div>
<div
style={{
color: "#AEAEAE",
fontSize: "14px",
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: "10px",
}}
>
<div>곧 이곳이 당신의 성취로</div> <div style={{ marginTop: "5px" }}>가득 찰 거예요!</div>
</div>
</GoalDoesNotExist>
)}
<TransitionGroup component={null}>
{filteredGoals.map((goal) => {
const randomIndex = Math.floor(Math.random() * backgroundArr.length);
Expand All @@ -162,9 +192,6 @@ function Goals() {
) : (
<Image style={{ backgroundImage: `url(${backgroundImg})` }} />
)}
{/* <Image
style={{ backgroundImage: `url(${goal.thumbnail})` }}
/> */}
<GoalEditDropdown setIsDeleteModalOpen={setIsDeleteModalOpen} />
</ImageContainer>
<Info>
Expand Down Expand Up @@ -383,7 +410,7 @@ const TitleFireContainer = styled.div`
`;

const Title = styled.div`
font-size: 20px;
font-size: 18px;
font-weight: bolder;
margin-bottom: 3px;
`;
Expand All @@ -400,7 +427,7 @@ const FireContainer = styled.div`
`;

const Fire = styled.div`
font-size: 18px;
font-size: 14px;
display: flex;
`;

Expand Down

0 comments on commit 4f1504c

Please sign in to comment.