Merge branch 'main' of https://github.com/prgrms-fe-devcourse/NFE1_2_…

…FitPlace into feat/#76
prgrms-fe-devcourse · Oct 2, 2024 · 7972752 · 7972752
2 parents 1f055b9 + 65894bb
commit 7972752
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 51 deletions.
diff --git a/src/pages/NotionAdd.tsx b/src/pages/NotionAdd.tsx
@@ -53,50 +53,47 @@ const NotionAdd: React.FC = () => {
 
   const [channels, setChannels] = useState<Channel[]>([]);
 
-  //이미지 업로드 부분(충돌 방지 주석)---------------------------------------------------------------
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [imageFiles, setImageFiles] = useState<File[]>([]); // 선택된 파일들
-  const [imageUrls, setImageUrls] = useState<string[]>([]); // 업로드된 이미지 URL들
-
-  const handleFileChange = useCallback(
-    async (e: ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files;
-      if (files) {
-        const newFiles = Array.from(files);
-        setImageFiles((prev) => [...prev, ...newFiles]); // 기존 파일에 추가
-
-        const newUrls: string[] = [];
-        const formData = new FormData();
-
-        for (const file of newFiles) {
-          formData.append("file", file);
-          formData.append("upload_preset", UPLOAD_PRESET);
-
-          try {
-            const response = await fetch(
-              `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`,
-              {
-                method: "POST",
-                body: formData,
-              }
-            );
-            const data = await response.json();
-            newUrls.push(data.secure_url); // 업로드된 이미지 URL 추가
-          } catch (error) {
-            console.error("이미지 업로드 실패:", error);
-          }
-        }
-        setImageUrls((prev) => [...prev, ...newUrls]); // 기존 URL에 추가
-        setFormData((prev) => ({
-          ...prev,
-          images: [...prev.images, ...newUrls],
-        })); // 폼 데이터에 이미지 URL 배열 저장
-      }
-    },
-    []
-  );
-
-  // 이미지 업로드 부분 여기까지---------------------------------------------------------------
+   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+   const [imageFiles, setImageFiles] = useState<File[]>([]); 
+   const [imageUrls, setImageUrls] = useState<string[]>([]); 
+
+   const handleFileChange = useCallback(
+     async (e: ChangeEvent<HTMLInputElement>) => {
+       const files = e.target.files;
+       if (files) {
+         const newFiles = Array.from(files);
+         setImageFiles((prev) => [...prev, ...newFiles]); 
+
+         const newUrls: string[] = [];
+         const formData = new FormData();
+
+         for (const file of newFiles) {
+           formData.append("file", file);
+           formData.append("upload_preset", UPLOAD_PRESET);
+
+           try {
+             const response = await fetch(
+               `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`,
+               {
+                 method: "POST",
+                 body: formData,
+               }
+             );
+             const data = await response.json();
+             newUrls.push(data.secure_url); 
+           } catch (error) {
+             console.error("이미지 업로드 실패:", error);
+           }
+         }
+         setImageUrls((prev) => [...prev, ...newUrls]); 
+         setFormData((prev) => ({
+           ...prev,
+           images: [...prev.images, ...newUrls],
+         })); 
+       }
+     },
+     []
+   );
 
   const navigate = useNavigate();
 
@@ -157,7 +154,7 @@ const NotionAdd: React.FC = () => {
       meetingTime: meetingTime,
       meetingSpot: formData.meetingSpot,
       channel: formData.channel,
-      image: formData.images, //이미지 업로드 부분
+      image: formData.images,
     };
 
     const submitData = new FormData();
@@ -337,7 +334,7 @@ const NotionAdd: React.FC = () => {
               <KakaoMap
                 isMarkerFixed={true}
                 location={selectedLocation}
-                style={{ height: "300px" }} // 높이를 300px로 설정
+                style={{ height: "300px" }} 
               />
             </div>
           )}
@@ -391,6 +388,7 @@ const NotionAdd: React.FC = () => {
               />
             </div>
           </div>
+
           {/*사진 초기화하기 */}
           {imageUrls && imageUrls.length > 0 && (
             <div className="flex flex-col items-center">
@@ -416,4 +414,4 @@ const NotionAdd: React.FC = () => {
   );
 };
 
-export default NotionAdd;
+export default NotionAdd;
diff --git a/src/pages/NotionPage.tsx b/src/pages/NotionPage.tsx
@@ -38,7 +38,7 @@ const NotionPage = () => {
   const { id } = useParams();
 
   const [postData, setPostData] = useState<ParsedPost | null>(null);
-  const [PrevData, setPrevData] = useState({}); //파싱하기 전의 데이터
+  const [PrevData, setPrevData] = useState({}); 
 
   const parsePostData = (post: any): ParsedPost => {
     try {
@@ -59,7 +59,7 @@ const NotionPage = () => {
       };
     } catch (error) {
       console.error("Error parsing post title:", error);
-      return post; // 파싱에 실패하면 원본 데이터 반환
+      return post; 
     }
   };
 
@@ -91,7 +91,7 @@ const NotionPage = () => {
   }, []);
 
   if (!postData) {
-    return <div>Loading...</div>; // 데이터 로딩 중 표시
+    return <div>Loading...</div>;
   }
   //게시글 삭제 코드 입니다. 충돌 방지--------------------------------------------------------
   const Delete_post = async () => {
@@ -257,4 +257,4 @@ const NotionPage = () => {
   );
 };
 
-export default NotionPage;
+export default NotionPage;