Merge pull request #12 from SayisMe/dev

Feat: DR 사진let 추가

src/diary.tsx

@@ -1,6 +1,6 @@
 // diary.tsx
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import html2canvas from "html2canvas";
 
 // selectedUSer 받아와서 return !
@@ -11,7 +11,19 @@ const Diary = ({ selectedUser }) => {
   const [isTextEditMode, setIsTextEditMode] = useState(false);
   const [isTitleEditMode, setIsTitleEditMode] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
+  const [imageData, setImageData] = useState([]);
 
+  useEffect(() => {
+    fetch(`http://3.38.118.228:8080/api/imageLet/${selectedUser.kakaoId}`)
+      .then(response => response.json())
+      .then(data => {
+        setImageData(data);
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+  }, []);
+
   const handleTextChange = (event) => {
     setEditableText(event.target.value);
   };
@@ -116,6 +128,13 @@ const Diary = ({ selectedUser }) => {
           {user.bodyText}
         </p>
       )}
+      {imageData &&
+        <div className="imageContainer">
+          {imageData.map((item, index) => (
+            <img key={index} src={item.imageUrl} alt={`Image ${index}`} />
+          ))}
+        </div>
+      }
 
       {!isEditMode &&
         <>

src/users.css

@@ -252,6 +252,21 @@
   background-color: #b0b0b0;
 }
 
+.imageContainer {
+  width: auto;
+  padding: 0px 20px 20px;
+  display: flex;
+  align-self: center;
+  overflow-x: auto;
+  gap: 10px;
+}
+
+.imageContainer img {
+  width: 30%;
+  height: 30%;
+  align-self: center;
+}
+
 /* 모바일 환경에서의 스타일 조정 */
 @media (max-width: 768px) {