Skip to content

Commit

Permalink
fix : 목표생성모달 버그 픽스
Browse files Browse the repository at this point in the history
  • Loading branch information
JongHyun authored and JongHyun committed Aug 6, 2024
1 parent 0155b28 commit 4e14597
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 126 deletions.
22 changes: 16 additions & 6 deletions src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import ImgUpload from "../../../../asset/Icon/ImgUpload.svg";
import { Toggle } from "./Toggle";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import updateGoal from "../../../../apis/updateGoal";
import { fi } from "date-fns/locale";
import createImg from "../../../../apis/\bcreateImg";

const formatDate = (date) => {
const year = date.getFullYear();
Expand All @@ -32,6 +34,7 @@ function CreateGoalModal({
setIsUpdate,
setIsGoalEditedModalOpen,
expiredData,
setExpiredData,
}) {
const [isDateSetting, setIsDateSetting] = useState(true);
const csrfToken = useRecoilValue(tokenState);
Expand Down Expand Up @@ -61,19 +64,22 @@ function CreateGoalModal({
isUpdate && updateData?.thumbnail ? updateData.thumbnail : expiredData?.thumbnail ? expiredData.thumbnail : "",
});

const [imageUrl, setImageUrl] = useState("");

const goalId = isUpdate && updateData.goalId ? updateData.goalId : expiredData?.goalId;
const status = isUpdate && updateData.status ? updateData.status : expiredData?.status;
const [previewUrl, setPreviewUrl] = useState(
isUpdate && updateData?.thumbnail ? updateData.thumbnail : expiredData?.thumbnail ? expiredData.thumbnail : null
);

useEffect(() => {
console.log("formData updated:", formData, csrfToken, updateData, isUpdate);
console.log("formData updated:", formData, csrfToken, updateData, isUpdate, imageUrl);
}, [formData]);

const closeCreateGoalModal = () => {
setIsModalOpen(false);
setIsUpdate(false);
setExpiredData(undefined);
};

const handleImageUploadClick = () => {
Expand All @@ -93,8 +99,11 @@ function CreateGoalModal({
}
};

const handleFileInputChange = (event) => {
const handleFileInputChange = async (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append("file", file);
setImageUrl(await createImg(csrfToken, formData));

if (file) {
const reader = new FileReader();
Expand Down Expand Up @@ -140,8 +149,8 @@ function CreateGoalModal({
formDataToSend.append("startDate", startDate);
formDataToSend.append("endDate", endDate);

if (fileInputRef.current.files[0]) {
formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
if (imageUrl) {
formDataToSend.append("thumbnail", imageUrl);
}
await createGoal(formDataToSend, csrfToken);
closeCreateGoalModal();
Expand Down Expand Up @@ -175,15 +184,16 @@ function CreateGoalModal({
);
formDataToSend.append("status", status);

if (fileInputRef.current.files[0]) {
formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
if (imageUrl) {
formDataToSend.append("thumbnail", imageUrl);
}
await updateGoal(formDataToSend, csrfToken, goalId);
closeCreateGoalModal();
setIsGoalEditedModalOpen(true);
} catch (error) {
console.error("목표 수정 실패", error);
}
setExpiredData(undefined);
};

const handleToggleDateSetting = () => {
Expand Down
199 changes: 79 additions & 120 deletions src/homepage/component/goals/Goals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ function Goals() {
}, [csrfToken, navigate, setCsrfToken]);

const openCreateGoalsModal = () => {
setExpiredData(undefined);
setIsModalOpen(true);
};

Expand Down Expand Up @@ -132,105 +133,83 @@ function Goals() {
<Container>
<TopMenu>
<Taps currentTab={currentTab} setCurrentTab={setCurrentTab} />
<GoalViewDropdown
currentSort={currentSort}
setCurrentSort={setCurrentSort}
/>
<GoalViewDropdown currentSort={currentSort} setCurrentSort={setCurrentSort} />
</TopMenu>
<GoalContainer>
<CreateGoalModalBtn onClick={openCreateGoalsModal}>
<img src={CreateGoal} alt="" style={{ marginBottom: "15px" }} />
목표 추가하기
</CreateGoalModalBtn>
{!isLoading &&
filteredGoals.length === 0 &&
currentTab !== "완료한 도전" && (
<GoalDoesNotExist>
<img
src={GoalDoesNotExistImg}
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>
)}
{!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>
)}
{!isLoading && filteredGoals.length === 0 && currentTab !== "완료한 도전" && (
<GoalDoesNotExist>
<img src={GoalDoesNotExistImg} 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>
)}
{!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
);
const randomIndex = Math.floor(Math.random() * backgroundArr.length);
const backgroundImg = backgroundArr[randomIndex];
const daysLeft = getDaysLeft(goal.endDate);
const expired = isExpired(goal.endDate);
const randomStampIndex = Math.floor(
Math.random() * complete_stamps.length
);
const randomStampIndex = Math.floor(Math.random() * complete_stamps.length);
const completeStamps = complete_stamps[randomStampIndex];
return (
<CSSTransition key={goal.id} timeout={500} classNames="goal">
Expand Down Expand Up @@ -287,9 +266,7 @@ function Goals() {
}}
/>
) : (
<Image
style={{ backgroundImage: `url(${backgroundImg})` }}
/>
<Image style={{ backgroundImage: `url(${backgroundImg})` }} />
)}
<GoalEditDropdown
setIsDeleteModalOpen={setIsDeleteModalOpen}
Expand All @@ -303,26 +280,19 @@ function Goals() {

<Info>
<InfoContainer>
{daysLeft !== null &&
daysLeft <= 5 &&
daysLeft > 0 &&
goal?.status === "OPEN" && (
<DeadlineComing>
<span>D-{daysLeft}</span>
</DeadlineComing>
)}
{daysLeft !== null && daysLeft <= 5 && daysLeft > 0 && goal?.status === "OPEN" && (
<DeadlineComing>
<span>D-{daysLeft}</span>
</DeadlineComing>
)}
{expired && goal?.status === "OPEN" && (
<ExpirationText>
<span>기한이 지났어요!</span>
</ExpirationText>
)}
{daysLeft === null || daysLeft > 5
? !expired && <div style={{ marginTop: "4px" }} />
: null}
{daysLeft === null || daysLeft > 5 ? !expired && <div style={{ marginTop: "4px" }} /> : null}
<TitleFireContainer>
<Title isOpen={goal?.status === "OPEN"}>
{goal.title}
</Title>
<Title isOpen={goal?.status === "OPEN"}>{goal.title}</Title>
{goal.streak >= 3 && (
<FireContainer>
<Fire>
Expand All @@ -335,9 +305,7 @@ function Goals() {
</TitleFireContainer>
{(goal.startDate || goal.endDate) && (
<Period isOpen={goal?.status === "OPEN"}>
{goal.startDate && (
<StartDate>{goal.startDate}</StartDate>
)}
{goal.startDate && <StartDate>{goal.startDate}</StartDate>}
{goal.startDate && goal.endDate && <span> → </span>}
{goal.endDate && <DueDate>{goal.endDate}</DueDate>}
</Period>
Expand All @@ -359,6 +327,7 @@ function Goals() {
setIsUpdate={setIsUpdate}
setIsGoalEditedModalOpen={setIsGoalEditedModalOpen}
expiredData={expiredData}
setExpiredData={setExpiredData}
/>
)}
{isGoalCreatedModalOpen && (
Expand All @@ -368,12 +337,7 @@ function Goals() {
updateData={updateData}
/>
)}
{isDeleteModalOpen && (
<DeleteGoalModal
setIsDeleteModalOpen={setIsDeleteModalOpen}
goalId={updateData.goalId}
/>
)}
{isDeleteModalOpen && <DeleteGoalModal setIsDeleteModalOpen={setIsDeleteModalOpen} goalId={updateData.goalId} />}
{isGoalEditedModalOpen && <GoalEditedModal />}
{isConfirmModalOpen && (
<CompleteConfirmModal
Expand All @@ -384,12 +348,7 @@ function Goals() {
setIsModalOpen={setIsModalOpen}
/>
)}
{isCompModalOpen && (
<CompleteGoalModal
setIsCompModalOpen={setIsCompModalOpen}
isExpiredBox={isExpiredBox}
/>
)}
{isCompModalOpen && <CompleteGoalModal setIsCompModalOpen={setIsCompModalOpen} isExpiredBox={isExpiredBox} />}
</Container>
);
}
Expand Down

0 comments on commit 4e14597

Please sign in to comment.