From d70b820b62f54e2d301ba277b3b887385e88e1fc Mon Sep 17 00:00:00 2001
From: jaeyo03 <toyazx@naver.com>
Date: Sat, 9 Nov 2024 01:44:51 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix=20:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=8B=9C=20=EC=9E=AC=EB=9E=9C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20blob=20=EC=83=9D=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WriteReview/UploadImageSection.tsx        | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/WriteReview/UploadImageSection.tsx b/src/components/WriteReview/UploadImageSection.tsx
index 20cbc0b..62ebdba 100644
--- a/src/components/WriteReview/UploadImageSection.tsx
+++ b/src/components/WriteReview/UploadImageSection.tsx
@@ -2,6 +2,7 @@ import tw from "twin.macro";
 import styled from "styled-components";
 import CameraSvg from "../../assets/images/camera.svg?react";
 import { MdDeleteOutline } from "react-icons/md";
+import {useEffect, useMemo} from "react";
 type UploadImageProps = {
   imageFiles: File[];
   setImageFiles: React.Dispatch<React.SetStateAction<File[]>>;
@@ -14,6 +15,8 @@ function UploadImageSection({ imageFiles, setImageFiles }: UploadImageProps) {
         const newFiles = [...prevFiles, ...filesArray];
         return newFiles;
       });
+      // 파일 선택 후 input의 값을 초기화하여 동일 파일 업로드 가능하게 만듦
+      event.target.value = "";
     }
   };
   const handleImageDelete = (index: number) => {
@@ -21,7 +24,19 @@ function UploadImageSection({ imageFiles, setImageFiles }: UploadImageProps) {
     const updatedFiles = imageFiles.filter((_, i) => i !== index);
     setImageFiles(updatedFiles);
   };
-
+  
+  // imageFiles가 변경될 때만 URL 생성
+  const imageUrls = useMemo(() => {
+    return imageFiles.map((file) => URL.createObjectURL(file));
+  }, [imageFiles]);
+  
+  // Blob URL 해제
+  useEffect(() => {
+    return () => {
+      imageUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, [imageUrls]);
+  
   return (
     <Container>
       <label htmlFor="image-upload">
@@ -40,9 +55,9 @@ function UploadImageSection({ imageFiles, setImageFiles }: UploadImageProps) {
         disabled={Boolean(status && status !== "PENDING")}
       />
 
-      {imageFiles.map((file, index) => (
+      {imageUrls.map((url, index) => (
         <ImageWrapper key={index}>
-          <img src={URL.createObjectURL(file)} alt={`Uploaded ${index}`} />
+          <img src={url} alt={`Uploaded ${index}`} />
           <DeleteIconWrapper onClick={() => handleImageDelete(index)}>
             <MdDeleteOutline size={20} color="#A1A6B5" />
           </DeleteIconWrapper>

From e296c61d4e1acae083ba8e2871978596518d2b56 Mon Sep 17 00:00:00 2001
From: jaeyo03 <toyazx@naver.com>
Date: Sat, 9 Nov 2024 01:45:08 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat=20:=20qr=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PhotoUpload/WriteDetail.tsx | 38 ++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/pages/PhotoUpload/WriteDetail.tsx b/src/pages/PhotoUpload/WriteDetail.tsx
index ae1e4d3..86bda36 100644
--- a/src/pages/PhotoUpload/WriteDetail.tsx
+++ b/src/pages/PhotoUpload/WriteDetail.tsx
@@ -14,7 +14,6 @@ function WriteDetail() {
   const [isHashModalOpen, setIsHashModalOpen] = useState(false);
   const [isRecordModalOpen, setIsRecordModalOpen] = useState(false);
   const [countHash, setCountHash] = useState(0);
-  // const [imageFiles, setImageFiles] = useState<File[]>([imgSrc]);
   const { accessToken } = useAuthStore();
   const location = useLocation();
 
@@ -46,12 +45,29 @@ function WriteDetail() {
     const count = hashTags.filter((tag) => tag.length > 0);
     setCountHash(count.length);
   }, [hashTags]);
-
+  
   const getUploadedFilePaths = async () => {
-    const presignedData = await getPresignedUrl("/images/album", imageFile.name, accessToken!);
-    if (presignedData) {
-      //s3에 이미지 업로드
-      await uploadToS3(presignedData.url, imageFile);
+    let imageName = "";
+    let imageFileToUpload: File | undefined;
+    
+    if (qrLink) {
+      const url = new URL(qrLink);
+      imageName = url.pathname.split("/").pop() || "qr-photo";
+      // QR URL에서 이미지 Blob 가져오기
+      const response = await fetch(qrLink);
+      const blob = await response.blob();
+      imageFileToUpload = new File([blob], imageName, { type: blob.type }); // Blob을 File 객체로 변환
+      //TODO 인생네컷으로 받아오는 QR 링크가 실제로 blob화가 가능한지 검증이 필요함
+    } else if (imageFile) {
+      imageName = imageFile.name;
+      imageFileToUpload = imageFile;
+    }
+    
+    // presigned URL 가져오기
+    const presignedData = await getPresignedUrl("/images/album", imageName, accessToken!);
+    if (presignedData && imageFileToUpload) {
+      // S3에 이미지 업로드
+      await uploadToS3(presignedData.url, imageFileToUpload);
       return presignedData.filePath;
     }
   };
@@ -81,10 +97,8 @@ function WriteDetail() {
 
   // 메인 로직
   const handleUpload = async () => {
-    console.log(imageFile);
     // Step 2: 이미지 업로드 및 filePaths 저장
     const filePath = await getUploadedFilePaths();
-    console.log(filePath);
     // Step 3: 리뷰등록 api 호출
     if (filePath) {
       await uploadImage(accessToken!, boothId, year, month, day, hashTags, records, filePath);
@@ -152,7 +166,13 @@ function WriteDetail() {
         </div>
 
         {isHashModalOpen && <HashTagModal hashTags={hashTags} closeModal={closeHashModal} setHashTags={setHashTags} />}
-        <img className="w-[80%]" src={URL.createObjectURL(imageFile)} alt="QR 사진" />
+        
+        {!imageFile ? (
+          <img className="w-[80%] h-[400px]" src={qrLink} alt="QR 사진" />
+        ) : (
+          <img className="w-[80%]" src={URL.createObjectURL(imageFile)} alt="업로드 사진" />
+        )}
+        
 
         <button
           className="w-[90%] p-[10px] rounded-lg bg-[#e9eaee] text-[#676f7b] text-base font-normal font-['Pretendard']"

From af5a8180de2245579dbe7d05cb47c6629ff777ce Mon Sep 17 00:00:00 2001
From: jaeyo03 <toyazx@naver.com>
Date: Sat, 9 Nov 2024 01:45:14 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat=20:=20qr=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PhotoUpload/ReviewPhoto.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/PhotoUpload/ReviewPhoto.tsx b/src/pages/PhotoUpload/ReviewPhoto.tsx
index c9b584a..f082280 100644
--- a/src/pages/PhotoUpload/ReviewPhoto.tsx
+++ b/src/pages/PhotoUpload/ReviewPhoto.tsx
@@ -26,9 +26,10 @@ function ReviewPhoto() {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { imageFile } = location.state;
+  const { imageFile, qrLink } = location.state;
 
   console.log(imageFile);
+  console.log(qrLink);
 
   const handleNext = () => {
     navigate("/write-detail", {
@@ -36,7 +37,7 @@ function ReviewPhoto() {
         year: year,
         month: month,
         day: day,
-        qrLink: location.state.qrLink,
+        qrLink: qrLink,
         imageFile: imageFile,
         boothId: boothId,
       },

From 26a4e4b0c4bf903a9c80c039c004f0754265e960 Mon Sep 17 00:00:00 2001
From: jaeyo03 <toyazx@naver.com>
Date: Sat, 9 Nov 2024 01:45:36 +0900
Subject: [PATCH 4/5] =?UTF-8?q?style=20:=20=EC=98=B5=EC=85=98=20=EC=9B=90?=
 =?UTF-8?q?=20=ED=81=AC=EA=B8=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/OptionButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/OptionButton.tsx b/src/components/Common/OptionButton.tsx
index bf76d89..40999d9 100644
--- a/src/components/Common/OptionButton.tsx
+++ b/src/components/Common/OptionButton.tsx
@@ -80,7 +80,7 @@ const CircleInner = styled.div<{ size: string }>`
       case "small":
         return tw`w-2 h-2 left-[4px] top-[4px]`;
       case "large":
-        return tw`w-3 h-3 left-[8px] top-[8px]`;
+        return tw`w-3 h-3 left-[9px] top-[9px]`;
       default:
         return tw`w-2.5 h-2.5 left-[6px] top-[6px]`;
     }

From c18f20fb59a57893a65356bc4019f923ee7a9e08 Mon Sep 17 00:00:00 2001
From: jaeyo03 <toyazx@naver.com>
Date: Sat, 9 Nov 2024 01:45:47 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat=20:=20qr=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PhotoUpload/CheckPhoto.tsx | 30 +++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/pages/PhotoUpload/CheckPhoto.tsx b/src/pages/PhotoUpload/CheckPhoto.tsx
index 19307ff..1a16808 100644
--- a/src/pages/PhotoUpload/CheckPhoto.tsx
+++ b/src/pages/PhotoUpload/CheckPhoto.tsx
@@ -6,14 +6,31 @@ import NextButton from "../../components/Common/NextButton.tsx";
 
 function CheckPhoto() {
   const navigate = useNavigate();
-
   const location = useLocation();
-  const { imageFile } = location.state;
-
+  const { imageFile, qrLink } = location.state;
+  
   const handleNextClick = () => {
-    navigate("/photo-review", { state: { imageFile: imageFile } });
+    navigate("/photo-review", { state: { imageFile: imageFile , qrLink: qrLink } });
   };
-
+  
+  console.log(qrLink);
+  
+  if (!imageFile) {
+    // imageFile이 없는 경우 처리
+    return (
+      <Container>
+        <Header>
+          <Title>QR 사진 확인</Title>
+          <button className="absolute left-[10px] top-[35%]" onClick={() => navigate(-1)}>
+            <BackIcon color="white" />
+          </button>
+        </Header>
+        <img src={qrLink} alt="QR 사진" className="img-container" />
+        <NextButton onClick={handleNextClick} text="다음" />
+      </Container>
+    );
+  }
+  
   return (
     <Container>
       <Header>
@@ -22,8 +39,7 @@ function CheckPhoto() {
           <BackIcon color="white" />
         </button>
       </Header>
-
-      <img src={URL.createObjectURL(imageFile)} alt="QR 사진" className="img-container" />
+      <img src={URL.createObjectURL(imageFile)} alt="업로드 사진" className="img-container" />
       <NextButton onClick={handleNextClick} text="다음" />
     </Container>
   );