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 = () => {
/>
-
-
+
취소