Fix: succeed edit diary get image error #106

TripTory · May 23, 2024 · c9db51c · c9db51c
1 parent f1fa1bc
commit c9db51c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git 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 }) => {
               <div key={index}>
                 <ImageDiv>
                   <UploadedImage src={file.preview_URL} />
-                  <CancelIcons
-                    onClick={() => deleteImage(index)} />
+                  {/* <CancelIcons
+                    onClick={() => deleteImage(index)} /> */}
+                  <CancelIcons onClick={() => {
+                    console.log("랴ㅣㄷㄴ", file); // 파일의 preview_URL을 콘솔에 출력
+                    deleteImage(index);
+                  }} />
                 </ImageDiv>
               </div>
             ))}

diff --git 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 = () => {
 
     <Uploader onFilesChange={handleImageUpload} files={files} setFiles={setFiles} />
 
+    {/* {Array.isArray(files) &&
+      files.map((file, index) => (
+        <Uploader key={index} onFilesChange={handleImageUpload} file={file} setFiles={setFiles} />
+      ))} */}
 
     <BtnDiv>
       <CancelBtn onClick={openCancelModal}>취소</CancelBtn>

diff --git 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 = () => {
       />
     </DiaryDiv>
 
-    <Uploader onFilesChange={handleImageUpload} files={files} setFiles={setFiles} />
-
+    <Uploader onFilesChange={handleImageUpload} files={files2} setFiles={setFiles2} />
 
     <BtnDiv>
       <CancelBtn onClick={openCancelModal}>취소</CancelBtn>