From b30c5a3641bb3390d2546e47f431f447a78c5dd8 Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Mon, 27 May 2024 17:45:25 +0900 Subject: [PATCH 1/6] Fix: imageslider null resolve #120 --- src/components/common/ImageSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/ImageSlider.js b/src/components/common/ImageSlider.js index 21a395e..bde1726 100644 --- a/src/components/common/ImageSlider.js +++ b/src/components/common/ImageSlider.js @@ -10,7 +10,7 @@ import Box from "@mui/material/Box"; import xicon from "../../assets/icons/x-icon.svg"; const ImageSlider = ({ images }) => { - if (images === undefined) { + if (!images || images.length === 0) { return null; } const settings = { From 717ea55048e4ce6f1dcf9df915fc044e87347ac7 Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Mon, 27 May 2024 18:11:12 +0900 Subject: [PATCH 2/6] Feat: notify server put imgmodified true false value #120 --- src/components/common/MultipleImageUploader.js | 7 +++++-- src/pages/DiaryWritePage.js | 5 +++-- src/pages/EditDiaryWritePage.js | 9 +++++---- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/common/MultipleImageUploader.js b/src/components/common/MultipleImageUploader.js index 0a5b79a..aa6c463 100644 --- a/src/components/common/MultipleImageUploader.js +++ b/src/components/common/MultipleImageUploader.js @@ -1,11 +1,11 @@ -import React, { useRef, useEffect } from "react"; +import React, { useRef } from "react"; import styled from "styled-components"; import { COLOR } from "../../styles/color"; import CancelIcon from "@mui/icons-material/Cancel"; import CameraAltIcon from "@mui/icons-material/CameraAlt"; import PropTypes from "prop-types"; -const Uploader = ({ onFilesChange, files=[], setFiles }) => { +const Uploader = ({ onFilesChange, files=[], setFiles, onImgModified }) => { const inputRef = useRef(null); const saveImage = (e) => { @@ -25,6 +25,7 @@ const Uploader = ({ onFilesChange, files=[], setFiles }) => { ...prevFiles, { fileObject: e.target.files[0], preview_URL: fileReader.result, type: fileType }, ]); + onImgModified(true); }; }; @@ -32,6 +33,7 @@ const Uploader = ({ onFilesChange, files=[], setFiles }) => { const updatedFiles = [...files]; updatedFiles.splice(index, 1); setFiles(updatedFiles); + onImgModified(true); }; return ( @@ -77,6 +79,7 @@ Uploader.propTypes = { setFiles: PropTypes.node.isRequired, files: PropTypes.node.isRequired, onFilesChange: PropTypes.node.isRequired, + onImgModified: PropTypes.func.isRequired, }; const ImageUploadDiv = styled.div` diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js index 44a6b7d..98f9e6e 100644 --- a/src/pages/DiaryWritePage.js +++ b/src/pages/DiaryWritePage.js @@ -13,7 +13,7 @@ import { useLocation } from "react-router"; import moment from "moment"; const DiaryWritePage = () => { - + const [imgmodified, setImgModified] = useState(false); const [startDate, setStartDate] = useState(); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); @@ -22,6 +22,7 @@ const DiaryWritePage = () => { const [imagePreview, setImagePreview] = useState(null); const [files, setFiles] = useState([]); const location = useLocation(); + const { state } = useLocation(); const [travelid, setTravelId] = useState(state); const [diaryId, setDiaryId] = useState({ diaryid: "" }); useEffect(() => { @@ -107,7 +108,7 @@ const DiaryWritePage = () => { /> - + 취소 diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index 3ef3b2a..107806b 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -21,12 +21,14 @@ const EditDiaryWritePage = () => { const [content, setContent] = useState(diaryInfo?.content || ""); const [files, setFiles] = useState(diaryInfo?.url || []); const [files2, setFiles2] = useState(); + const [imgmodified, setImgModified] = useState(false); const transformFiles = (filesArray) => { return filesArray.map((file) => ({ preview_URL: file })); }; useEffect(() => { + console.log("이미지 바뀜?",imgmodified); console.log("안녕?",state.id.diaryid); const transformedFiles = transformFiles(files); setFiles2(transformedFiles); @@ -61,6 +63,7 @@ const EditDiaryWritePage = () => { formData.append("content", content); formData.append("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")); formData.append("img", files2); + formData.append("imgmodified", imgmodified); files.forEach((file) => { formData.append("images", file.fileObject); @@ -75,9 +78,7 @@ const EditDiaryWritePage = () => { setDiaryId({ diaryid: res.data.diaryid, }); - const diary_id = res.data.diaryid; - console.log("응?",diary_id); - navigate("/showdiary", { state: { diaryid: diary_id } }); + navigate("/showdiary", { state: { diaryid: state.id.diaryid} }); }) .catch((error) => { console.log("에러", error); @@ -116,7 +117,7 @@ const EditDiaryWritePage = () => { /> - + 취소 From bdb10bbb984a2544ed812c901c379c46116088da Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Tue, 28 May 2024 16:06:11 +0900 Subject: [PATCH 3/6] Feat: succeed edit diary image upload & multipleimageuploader code get #120 --- src/pages/EditDiaryWritePage.js | 156 +++++++++++++++++++++++++++++++- 1 file changed, 151 insertions(+), 5 deletions(-) diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index 8bc5b50..a64eed6 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { React, useState, useEffect } from "react"; +import { React, useState, useEffect, useRef } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import calendar from "../assets/images/calendar.svg"; @@ -14,6 +14,9 @@ import moment from "moment"; import { useRecoilState } from "recoil"; import { diaryIdState } from "../recoil/commonState"; +import CancelIcon from "@mui/icons-material/Cancel"; +import CameraAltIcon from "@mui/icons-material/CameraAlt"; + const EditDiaryWritePage = () => { const { state } = useLocation(); const [diaryId, setDiaryId] = useRecoilState(diaryIdState); @@ -23,7 +26,7 @@ const EditDiaryWritePage = () => { const [title, setTitle] = useState(diaryInfo?.title || ""); const [content, setContent] = useState(diaryInfo?.content || ""); const [files, setFiles] = useState(diaryInfo?.url || []); - const [files2, setFiles2] = useState(); + const [files2, setFiles2] = useState([]); const [imgmodified, setImgModified] = useState(false); const goToShowDiary = () => { @@ -36,6 +39,7 @@ const EditDiaryWritePage = () => { }; useEffect(() => { + // console.log("files22",files2.length); const transformedFiles = transformFiles(files); setFiles2(transformedFiles); }, []); @@ -67,12 +71,22 @@ const EditDiaryWritePage = () => { formData.append("title", title); formData.append("content", content); formData.append("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")); - formData.append("img", files2); + // formData.append("img", files2); formData.append("imgmodified", imgmodified); - files.forEach((file) => { + files2.forEach((file) => { formData.append("images", file.fileObject); }); + // files2.forEach((file) => { + // formData.append("originImage", file.preview_URL); + // }); + + // const files2PreviewURLs = files2.map((file) => file.preview_URL || null); + // formData.append("originImage", JSON.stringify(files2PreviewURLs)); + // const files2PreviewURLs = files2.map((file) => `'${file.preview_URL || ''}'`); + // formData.append("originImage", `[${files2PreviewURLs.join(',')}]`); + const files2PreviewURLs = files2.map((file) => file.preview_URL || null); + formData.append("originImage", files2PreviewURLs); for (const [key, value] of formData.entries()) { console.log(`${key}: ${value}`); @@ -87,6 +101,40 @@ const EditDiaryWritePage = () => { }); }; + /////////////////////////////// + + const inputRef = useRef(null); + + const saveImage = (e) => { + e.preventDefault(); + // console.log("image length", e.target.files); + + handleImageUpload(files); + // console.log("image length", e.target.files); + if (files2.length >= 10) { + return; + } + const fileReader = new FileReader(); + if (e.target.files[0]) { + fileReader.readAsDataURL(e.target.files[0]); + } + fileReader.onload = () => { + const fileType = e.target.files[0].type.split("/")[0]; + setFiles2((prevFiles) => [ + ...prevFiles, + { fileObject: e.target.files[0], preview_URL: fileReader.result, type: fileType }, + ]); + setImgModified(true); + }; + }; + + const deleteImage = (index) => { + const updatedFiles = [...files2]; + updatedFiles.splice(index, 1); + setFiles2(updatedFiles); + setImgModified(true); + }; + return
@@ -119,7 +167,42 @@ const EditDiaryWritePage = () => { /> - + {/* */} +
+ { + e.target.value = null; + }} + style={{ display: "none" }} + ref={inputRef} + /> + + + inputRef.current && inputRef.current.click()} + disabled={files2.length >= 10} + > + + {files2.length}/10 + + + {Array.isArray(files2) && + files2.map((file, index) => ( +
+ + + deleteImage(index)} /> + +
+ ))} + + +
취소 @@ -303,6 +386,69 @@ const ContentDiv = styled.div` margin-top: 4rem; `; +//////////////////////// + +const ImageUploadDiv = styled.div` + display: flex; + flex-direction: row; + align-items: center; + height: 8.5rem; + margin-top: 0.5rem; + margin-left: 8%; + margin-right: 8%; +`; + +const ImgUploadBtn = styled.button` + background-color: #eeeeee; + border: none; + border-radius: 0.8rem; + height: 7rem; + width: 7rem; + margin-right: 0.5rem; + min-width: 7rem; + min-height: 7rem; + color: ${COLOR.MAIN_GREEN}; + color: ${(props) => props.disabled ? "rgba(46, 171, 161, 0.3)" : "${COLOR.MAIN_GREEN}"} +`; + +const UploadedImage = styled.img` + border-radius: 0.8rem; + height: 7rem; + width: 7rem; + margin: 0.5rem; + object-fit: cover; +`; + +const CancelIcons = styled(CancelIcon)` + color: ${COLOR.MAIN_GREEN}; + height: 2rem; + width: 2rem; + position: absolute; + top: 0; + right: 0; +`; + +const Slider = styled.div` + display: flex; + align-items: center; + flex-direction: row; + position: relative; + overflow: auto; +`; + +const ImageDiv = styled.div` + position: relative; +`; + +const CameraAltIcons= styled(CameraAltIcon)` + height: 3rem; + width: 3rem; +`; + +const UploadCount = styled.p` + color: ${COLOR.MAIN_GREEN}; + font-weight: 500; +`; export default EditDiaryWritePage; From 753677e5a169f9fdbcacead590394fa3eed264fb Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Tue, 28 May 2024 16:11:32 +0900 Subject: [PATCH 4/6] Chore: clear codes #120 --- src/pages/EditDiaryWritePage.js | 26 +++++--------------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index a64eed6..f1a12e2 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -4,7 +4,6 @@ import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import calendar from "../assets/images/calendar.svg"; import Modal from "../components/common/Modal"; -import Uploader from "../components/common/MultipleImageUploader"; import { COLOR } from "../styles/color"; import BottomNav from "../layout/BottomNav"; import axios from "axios"; @@ -39,13 +38,12 @@ const EditDiaryWritePage = () => { }; useEffect(() => { - // console.log("files22",files2.length); const transformedFiles = transformFiles(files); setFiles2(transformedFiles); }, []); - const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); // Cancel 버튼을 위한 모달 상태 - const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 + const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); + const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); const [imagePreview, setImagePreview] = useState(null); const navigate = useNavigate(); @@ -71,26 +69,15 @@ const EditDiaryWritePage = () => { formData.append("title", title); formData.append("content", content); formData.append("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")); - // formData.append("img", files2); formData.append("imgmodified", imgmodified); files2.forEach((file) => { - formData.append("images", file.fileObject); + formData.append("images", file.fileObject); // edit diary 시 수정한 이미지 }); - // files2.forEach((file) => { - // formData.append("originImage", file.preview_URL); - // }); - - // const files2PreviewURLs = files2.map((file) => file.preview_URL || null); - // formData.append("originImage", JSON.stringify(files2PreviewURLs)); - // const files2PreviewURLs = files2.map((file) => `'${file.preview_URL || ''}'`); - // formData.append("originImage", `[${files2PreviewURLs.join(',')}]`); + const files2PreviewURLs = files2.map((file) => file.preview_URL || null); - formData.append("originImage", files2PreviewURLs); + formData.append("originImage", files2PreviewURLs); // edit diary 시 수정이 아닌 원본 이미지 - for (const [key, value] of formData.entries()) { - console.log(`${key}: ${value}`); - } axios.put(`http://localhost:5000/diary/${diaryId}`, formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) .then((res) => { @@ -107,10 +94,8 @@ const EditDiaryWritePage = () => { const saveImage = (e) => { e.preventDefault(); - // console.log("image length", e.target.files); handleImageUpload(files); - // console.log("image length", e.target.files); if (files2.length >= 10) { return; } @@ -167,7 +152,6 @@ const EditDiaryWritePage = () => { /> - {/* */}
Date: Tue, 28 May 2024 16:13:37 +0900 Subject: [PATCH 5/6] Chore: clear codes #120 --- src/pages/EditDiaryWritePage.js | 30 +++++++----------------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index a64eed6..e6fbcf7 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -4,7 +4,6 @@ import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import calendar from "../assets/images/calendar.svg"; import Modal from "../components/common/Modal"; -import Uploader from "../components/common/MultipleImageUploader"; import { COLOR } from "../styles/color"; import BottomNav from "../layout/BottomNav"; import axios from "axios"; @@ -39,13 +38,12 @@ const EditDiaryWritePage = () => { }; useEffect(() => { - // console.log("files22",files2.length); const transformedFiles = transformFiles(files); setFiles2(transformedFiles); }, []); - const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); // Cancel 버튼을 위한 모달 상태 - const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 + const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); + const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); const [imagePreview, setImagePreview] = useState(null); const navigate = useNavigate(); @@ -71,26 +69,15 @@ const EditDiaryWritePage = () => { formData.append("title", title); formData.append("content", content); formData.append("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")); - // formData.append("img", files2); formData.append("imgmodified", imgmodified); files2.forEach((file) => { - formData.append("images", file.fileObject); + formData.append("images", file.fileObject); // edit diary 시 수정한 이미지 }); - // files2.forEach((file) => { - // formData.append("originImage", file.preview_URL); - // }); - - // const files2PreviewURLs = files2.map((file) => file.preview_URL || null); - // formData.append("originImage", JSON.stringify(files2PreviewURLs)); - // const files2PreviewURLs = files2.map((file) => `'${file.preview_URL || ''}'`); - // formData.append("originImage", `[${files2PreviewURLs.join(',')}]`); + const files2PreviewURLs = files2.map((file) => file.preview_URL || null); - formData.append("originImage", files2PreviewURLs); + formData.append("originImage", files2PreviewURLs); // edit diary 시 수정이 아닌 원본 이미지 - for (const [key, value] of formData.entries()) { - console.log(`${key}: ${value}`); - } axios.put(`http://localhost:5000/diary/${diaryId}`, formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) .then((res) => { @@ -101,16 +88,14 @@ const EditDiaryWritePage = () => { }); }; - /////////////////////////////// + //////////// MultipleImageUploader //////////// const inputRef = useRef(null); const saveImage = (e) => { e.preventDefault(); - // console.log("image length", e.target.files); handleImageUpload(files); - // console.log("image length", e.target.files); if (files2.length >= 10) { return; } @@ -167,7 +152,6 @@ const EditDiaryWritePage = () => { /> - {/* */}
Date: Tue, 28 May 2024 16:16:02 +0900 Subject: [PATCH 6/6] Merge branch 'feature/120' of https://github.com/TripTory/TripTory_client into feature/120 --- src/pages/DiaryWritePage.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js index 74e9607..27eb5db 100644 --- a/src/pages/DiaryWritePage.js +++ b/src/pages/DiaryWritePage.js @@ -25,10 +25,6 @@ const DiaryWritePage = () => { const [imagePreview, setImagePreview] = useState(null); const [files, setFiles] = useState([]); const [travelid, setTravelId] = useState(""); - useEffect(() => { - console.log("Travel ID:", travelid); // Travel ID 출력 - console.log("일기 생성 files:", files); - }); const navigate = useNavigate(); @@ -63,13 +59,8 @@ const DiaryWritePage = () => { formData.append("images", file.fileObject); }); - for (const [key, value] of formData.entries()) { - console.log(`${key}: ${value}`); - } - axios.post("http://localhost:5000/diary", formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) .then((res) => { - console.log("res.data:", res.data); setDiaryId(res.data.diaryid); navigate("/showdiary"); })