Merge branch 'main' of https://github.com/CSID-DGU/2024-2-OSSProj-Oso…

…ri-FE-01 into feature/CSID-DGU#6

src/views/akopolio/Edit/edit.js

@@ -4,25 +4,54 @@ import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 
+const nickname = ref('');
+
+const fetchUserData = async () => {
+  try {
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/users/profile`,
+      {
+        method: 'GET',
+        credentials: 'include',
+      }
+    );
+
+    if (response.ok) {
+      const data = await response.json();
+      nickname.value = data.nickname;
+    } else {
+      console.error('사용자 정보 불러오기 실패:', response.status, response.statusText);
+      if (response.status === 401) {
+        alert('인증에 실패했습니다. 다시 로그인해주세요.');
+        window.location.href = '/login';
+      } else {
+        alert('사용자 정보 가져오기 실패. 다시 시도해주세요.');
+      }
+    }
+  } catch (error) {
+    console.error('사용자 정보 가져오기 오류:', error);
+    alert('사용자 정보 가져오기 오류가 발생했습니다.');
+  }
+};
+
 export default {
   components: {
     MainHeader,
-    MainFooter
+    MainFooter,
   },
   setup() {
     const route = useRoute();
+    const portfolio = ref(null);
     const portfolioId = route.params.id;
     const activityName = ref('');
     const activityDate = ref('');
-    const selectedTags = ref([]);
+    const selectedTags = ref([]); // 초기값 배열로 설정
     const tags = ref([
       '전공', '교양', '교내동아리', '교외동아리', '학회', '봉사활동', '인턴', '아르바이트',
       '대외활동', '서포터즈', '기자단', '강연/행사', '스터디', '부트캠프', '프로젝트',
       '연구', '학생회', '기타',
     ]);
-    const images = ref([
-      { previewUrl: "https://via.placeholder.com/150" } // 예시 이미지
-    ]);
+    const images = ref([]); // 초기값 배열로 설정
     const star = ref({
       situation: '',
       task: '',
@@ -36,12 +65,10 @@ export default {
     });
     const isDropdownOpen = ref(false);
 
-    // 드롭다운 토글
     const toggleDropdown = () => {
       isDropdownOpen.value = !isDropdownOpen.value;
     };
 
-    // 태그 선택/해제
     const toggleTag = (tag) => {
       const index = selectedTags.value.indexOf(tag);
       if (index > -1) {
@@ -51,62 +78,69 @@ export default {
       }
     };
 
-    // 텍스트 영역 자동 크기 조정
     const autoResize = (event) => {
       const textarea = event.target;
       textarea.style.height = 'auto';
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
 
-    // 포트폴리오 데이터 가져오기
-    const fetchPortfolioById = async () => {
+    const fetchPortfolioById = async (id) => {
       try {
-        const response = await fetch(
-          `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`
-        );
+        const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`;
+        console.log('Fetching portfolio from URL:', apiUrl);
+
+        const response = await fetch(apiUrl);
+        console.log('Response status:', response.status);
 
         if (!response.ok) {
+          console.error(`Response status: ${response.status}, ${response.statusText}`);
           throw new Error(`Failed to fetch portfolio: ${response.statusText}`);
         }
 
         const data = await response.json();
-        activityName.value = data.activityName || '';
-        activityDate.value = data.activityDate || '';
-        selectedTags.value = data.selectedTags || [];
-        star.value = data.star || { situation: '', task: '', action: '', result: '' };
-        pmi.value = data.pmi || { plus: '', minus: '', interesting: '' };
-        images.value = data.images || [];
+        console.log('Received portfolio data:', data);
+
+        portfolio.value = {
+          baseInfo: data.baseInfo || {},
+          experience: data.experience || { situation: '', task: '', action: '', result: '' },
+          pmi: data.pmi || { plus: '', minus: '', interesting: '' },
+          photoUrls: data.photoUrls || [],
+        };
+
+        images.value = portfolio.value.photoUrls || [];
       } catch (error) {
         console.error('Error fetching portfolio:', error);
-        alert('포트폴리오를 불러오는 중 오류가 발생했습니다.');
+        alert('포트폴리오를 가져오는 중 오류가 발생했습니다.');
+        portfolio.value = null;
+        images.value = [];
       }
     };
 
     const handleFileChange = (event) => {
       const selectedFiles = Array.from(event.target.files);
-      if (images.value.length + selectedFiles.length > 5) {
+      if (Array.isArray(images.value) && images.value.length + selectedFiles.length > 5) {
         alert('최대 5개의 이미지만 업로드할 수 있습니다.');
         return;
       }
-    
+
       const newImagesPromises = selectedFiles.map((file) => {
         const previewUrl = URL.createObjectURL(file);
         const imageElement = new Image();
         imageElement.src = previewUrl;
-    
+
         return new Promise((resolve) => {
           imageElement.onload = () => {
             const aspectRatio = imageElement.width / imageElement.height;
             let containerWidth, containerHeight;
-    
+
             if (aspectRatio > 1) {
               containerWidth = '300px';
               containerHeight = `${300 / aspectRatio}px`;
             } else {
               containerWidth = `${300 * aspectRatio}px`;
               containerHeight = '300px';
             }
-    
+
             resolve({
               file,
               name: file.name,
@@ -118,88 +152,106 @@ export default {
           };
         });
       });
-    
+
       Promise.all(newImagesPromises).then((newImages) => {
         const uniqueNewImages = newImages.filter(
           (newImage) =>
             !images.value.some(
               (existingImage) => existingImage.previewUrl === newImage.previewUrl
             )
         );
-    
+
         if (uniqueNewImages.length === 0) {
           alert('이미 선택된 이미지입니다.');
           return;
         }
-    
+
         images.value = [...images.value, ...uniqueNewImages];
       });
     };
-    
+
     const removeImage = (index) => {
       URL.revokeObjectURL(images.value[index].previewUrl);
       images.value.splice(index, 1);
     };
-
-    const prefix = 'images';
+
     const uploadImages = async () => {
       const uploadedUrls = [];
-      for (const image of images.value) {
-        try {
-          const { data } = await axios.post(
-            `${process.env.VUE_APP_BE_API_URL}/file/${prefix}/presigned-url`,
-            {
-              fileName: image.name,
-              fileType: image.file.type,
-            }
-          );
-
-          await axios.put(data.url, image.file, {
-            headers: { 'Content-Type': image.file.type },
+
+      try {
+        console.log("Starting image upload...");
+
+        for (const image of images.value) {
+          const apiUrl = `${process.env.VUE_APP_BE_API_URL}/file/IMAGE/presigned-url`;
+          console.log('Requesting presigned URL from:', apiUrl);
+
+          const response = await axios.post(apiUrl, {
+            imageName: image.file.name,
+          });
+
+          const presignedUrl = response.data;
+          console.log("Received presigned URL:", presignedUrl);
+
+          await axios.put(presignedUrl, image.file, {
+            headers: {
+              "Content-Type": image.file.type,
+            },
           });
-
-          const uploadedUrl = data.url.split('?')[0];
+
+          console.log("Image uploaded successfully!");
+
+          const uploadedUrl = presignedUrl.split("?")[0];
           uploadedUrls.push(uploadedUrl);
-        } catch (error) {
-          console.error('Error uploading image:', error);
-          alert('이미지 업로드 중 오류가 발생했습니다.');
+          console.log("Uploaded image URL:", uploadedUrl);
         }
+
+        console.log("Uploaded image URLs:", uploadedUrls);
+
+      } catch (error) {
+        console.error("Error uploading image:", error);
+        alert("이미지 업로드 중 오류가 발생했습니다.");
       }
     };
-
 
-    // 저장 버튼 클릭 시 서버에 반영
-    const saveData = async () => {
+    const saveData = async (id) => {
       if (!isFormComplete.value) {
         alert('모든 필드를 입력해주세요.');
         return;
       }
 
       try {
-        // 수정된 포트폴리오 데이터와 이미지 URL을 서버에 전송
-        const response = await fetch(
-          `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`,
+        const response = await axios.put(
+          `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`,
+          {
+            name: activityName.value,
+            startDate: activityDate.value,
+            tags: selectedTags.value,
+            experience: {
+              situation: star.value.situation,
+              task: star.value.task,
+              action: star.value.action,
+              result: star.value.result,
+            },
+            pmi: {
+              plus: pmi.value.plus,
+              minus: pmi.value.minus,
+              interesting: pmi.value.interesting,
+            },
+            photoUrls: images.value.map(image => image.name),
+          },
           {
-            method: 'PUT',
             headers: {
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({
-              activityName: activityName.value,
-              activityDate: activityDate.value,
-              selectedTags: selectedTags.value,
-              star: star.value,
-              pmi: pmi.value,
-              images: images.value.map(image => image.name), // 서버에 전달할 이미지 파일 이름만 전달
-            }),
           }
         );
 
-        if (!response.ok) {
-          throw new Error(`Failed to save data: ${response.statusText}`);
+        if (response.status === 200) {
+          alert('데이터가 성공적으로 저장되었습니다.');
+        } else {
+          alert('저장에 실패했습니다. 다시 시도해주세요.');
         }
 
-        alert('데이터가 성공적으로 저장되었습니다.');
       } catch (error) {
         console.error('Error saving data:', error);
         alert('데이터 저장 중 오류가 발생했습니다.');
@@ -210,34 +262,37 @@ export default {
       return (
         activityName.value &&
         activityDate.value &&
-        selectedTags.value.length > 0 &&
+        Array.isArray(selectedTags.value) && selectedTags.value.length > 0 &&
         Object.values(star.value).every((field) => field) &&
         Object.values(pmi.value).every((field) => field)
       );
     });
 
-    // 컴포넌트 마운트 시 데이터 가져오기
-    onMounted(() => {
-      fetchPortfolioById();
+    onMounted(async () => {
+      images.value = []; 
+      selectedTags.value = [];
+      await fetchUserData();
+      await fetchPortfolioById(portfolioId);
     });
 
     return {
+      portfolio,
       activityName,
       activityDate,
-      tags,
       selectedTags,
-      isDropdownOpen,
+      tags,
+      images,
       star,
       pmi,
-      images,
+      isDropdownOpen,
       toggleDropdown,
       toggleTag,
       autoResize,
-      handleFileChange, 
-      removeImage,      
-      uploadImages,     
+      handleFileChange,
+      removeImage,
+      uploadImages,
       saveData,
-      isFormComplete
+      isFormComplete,
     };
-  }
+  },
 };