diff --git a/src/components/common/MultipleImageUploader.js b/src/components/common/MultipleImageUploader.js index 28788ca..30f7911 100644 --- a/src/components/common/MultipleImageUploader.js +++ b/src/components/common/MultipleImageUploader.js @@ -1,13 +1,18 @@ -import React, { useRef } from "react"; +import React, { useRef, useEffect } 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 }) => { const inputRef = useRef(null); + useEffect(() => { + // console.log("이미지 뜨니>?????:", files[0]); // Travel ID 출력 + console.log(files.length); + }); + const saveImage = (e) => { e.preventDefault(); onFilesChange(files); @@ -62,8 +67,12 @@ const Uploader = ({ onFilesChange, files, setFiles }) => {
- deleteImage(index)} /> + {/* deleteImage(index)} /> */} + { + console.log("랴ㅣㄷㄴ", file); // 파일의 preview_URL을 콘솔에 출력 + deleteImage(index); + }} />
))} diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js index 66a1a54..d8f7d12 100644 --- a/src/pages/DiaryWritePage.js +++ b/src/pages/DiaryWritePage.js @@ -25,7 +25,7 @@ const DiaryWritePage = () => { const [diaryId, setDiaryId] = useState({ diaryid: "" }); useEffect(() => { console.log("Travel ID:", travelid); // Travel ID 출력 - // + console.log("일기 생성 files:", files); }); const navigate = useNavigate(); @@ -108,6 +108,10 @@ const DiaryWritePage = () => { + {/* {Array.isArray(files) && + files.map((file, index) => ( + + ))} */} 취소 diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index f332479..c25df63 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { React, useState } from "react"; +import { React, useState, useEffect } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import calendar from "../assets/images/calendar.svg"; @@ -19,6 +19,22 @@ 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 transformFiles = (filesArray) => { + return filesArray.map((file) => ({ preview_URL: file })); + }; + + useEffect(() => { + const transformedFiles = transformFiles(files); + setFiles2(transformedFiles); + }, []); + + useEffect(() => { + console.log("이미지 제발:", files2); // Travel ID 출력 + // console.log("길이",files2.length); + // + }); const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); // Cancel 버튼을 위한 모달 상태 const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 @@ -105,8 +121,7 @@ const EditDiaryWritePage = () => { /> - - + 취소