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/akopolioEdit.vue

@@ -88,7 +88,9 @@
     </div>
 
     <div class="button-container">
-      <div @click="saveData" class="save-button">저장하기</div>
+      <div @click="() => saveData(activityId)" class="save-button">
+        저장하기
+      </div>
     </div>
       <MainFooter />
    </div> 

src/views/akopolio/Edit/edit.js

@@ -2,6 +2,7 @@ import MainHeader from '../../../components/layout/Header.vue';
 import MainFooter from '../../../components/layout/Footer.vue';
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 
 const nickname = ref('');
@@ -40,6 +41,7 @@ export default {
     MainFooter,
   },
   setup() {
+    const router = useRouter();
     const route = useRoute();
     const portfolio = ref(null);
     const portfolioId = route.params.id;
@@ -235,51 +237,88 @@ export default {
       }
     };
 
-    const saveData = async (id) => {
+    const saveData = async () => {
+      const id = portfolioId // route에서 가져온 portfolioId를 사용
+
+      // id가 올바른지 확인
+      if (!id || (typeof id !== 'string' && typeof id !== 'number')) {
+        console.error('Invalid id:', id)
+        alert('잘못된 ID 값입니다. 다시 시도해주세요.')
+        return
+      }
+
       if (!isFormComplete.value) {
-        alert('모든 필드를 입력해주세요.');
-        return;
+        alert('모든 필드를 입력해주세요.')
+        return
       }
 
+      // 이미지 URL 정리
+      const photoUrls =
+        images.value.length > 0
+          ? images.value
+              .map((image) => image.previewUrl?.trim()) // previewUrl이 존재하는지 확인 후 트림
+              .filter((url) => url) // 빈 값 제거
+          : []
+
+      // 태그 정리
+      const tagsArray = Array.isArray(selectedTags.value)
+        ? [...selectedTags.value] // Proxy 객체를 일반 배열로 변환
+        : []
+
+      // 요청 바디 생성
+      const requestBody = {
+        name: activityName.value,
+        startDate: activityDate.value,
+        tags: tagsArray,
+        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: photoUrls
+      }
+
+      console.log('요청 데이터:', requestBody)
 
       try {
-        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.url),
+        // URL 확인
+        const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`
+        console.log('API URL:', apiUrl)
+
+        const response = await fetch(apiUrl, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json'
           },
-          {
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          }
-        );
+          body: JSON.stringify(requestBody),
+          credentials: 'include' // 인증 쿠키 포함
+        })
 
-        if (response.status === 200) {
-          alert('데이터가 성공적으로 저장되었습니다.');
-        } else {
-          alert('저장에 실패했습니다. 다시 시도해주세요.');
+        // 응답 확인
+        if (!response.ok) {
+          const errorData = await response.json() // 에러 상세 데이터 파싱
+          console.error('서버 에러 응답:', errorData)
+          alert('저장에 실패했습니다. 다시 시도해주세요.')
+          return
         }
 
+        const responseData = await response.json()
+        console.log('서버 응답:', responseData)
+        alert('포트폴리오가 성공적으로 저장되었습니다.')
+        router.push('/akopolio/main'); 
       } catch (error) {
-        console.error('Error saving data:', error);
-        alert('데이터 저장 중 오류가 발생했습니다.');
+        console.error('데이터 저장 중 오류 발생:', error)
+        alert(
+          '데이터 저장 중 오류가 발생했습니다. 자세한 내용은 콘솔에서 확인하세요.'
+        )
       }
-    };
+    }
 
     const isFormComplete = computed(() => {
       return (

src/views/calendar/CalendarMainView.vue

@@ -41,28 +41,34 @@ onMounted(() => {
         <div>
           <h2
             class="section-title"
-            style="font-family: 'NanumSquareRound', sans-serif"
+            style="
+              font-family: 'NanumSquareRound', sans-serif;
+              margin-top: 10px;
+              margin-left: 28px;
+            "
           >
             {{ currentYear }} at 동국대학교
           </h2>
           <div class="flex items-center justify-between">
             <h3
               class="month-title"
-              style="font-family: 'NanumSquareRound', sans-serif"
+              style="
+                font-family: 'NanumSquareRound', sans-serif;
+                margin-left: 28px;
+              "
             >
               {{ currentMonth }}월
             </h3>
             <div class="flex space-x-6">
               <button @click="goToPrevMonth">
                 <img
-                  src="@/assets/Icons/akoming/arrowright.svg"
+                  src="@/assets/Icons/akoming/calendar-arrow-left.svg"
                   alt="arrow left"
-                  class="transform scale-x-[-1]"
                 />
               </button>
-              <button @click="goToNextMonth">
+              <button @click="goToNextMonth" style="margin-right: 28px">
                 <img
-                  src="@/assets/Icons/akoming/arrowright.svg"
+                  src="@/assets/Icons/akoming/calendar-arrow-right.svg"
                   alt="arrow right"
                 />
               </button>
@@ -101,14 +107,28 @@ onMounted(() => {
           class="schedule-popup"
           v-if="isScheduleOpen && selectedEvents.length > 0"
         >
-          <div class="popup-header">
-            <h2>학사 일정</h2>
-            <button class="close-button" @click="closeSchedule">×</button>
-          </div>
+          <button class="close-button" @click="closeSchedule">×</button>
           <div class="popup-content">
-            <div v-for="event in selectedEvents" :key="event.title">
-              <p>{{ event.title }}</p>
-              <p>{{ formatDateRange(event.startDate, event.endDate) }}</p>
+            <div
+              v-for="(event, index) in selectedEvents"
+              :key="event.title"
+              class="event-item"
+            >
+              <div class="event-header">
+                <div class="selected-date">
+                  {{ selectedDay }}
+                </div>
+                <div class="event-info">
+                  <p class="event-title">{{ event.title }}</p>
+                  <p class="event-date">
+                    {{ formatDateRange(event.startDate, event.endDate) }}
+                  </p>
+                </div>
+              </div>
+              <hr
+                v-if="index < selectedEvents.length - 1"
+                class="event-divider"
+              />
             </div>
           </div>
         </div>
@@ -186,14 +206,17 @@ onMounted(() => {
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 1rem;
+  gap: 1.5rem; /* Updated gap value */
   text-align: center;
   margin-bottom: 1rem;
+  margin-left: 10px;
 }
 
 .calendar-day {
   font-size: 0.875rem;
   color: #b3b3b3;
+
+  letter-spacing: 0.7em; /* Updated letter-spacing value */
 }
 
 .calendar-week {
@@ -229,21 +252,34 @@ onMounted(() => {
 
 .schedule-popup {
   position: fixed;
-  bottom: -100%; /* 시작 위치: 화면 아래 */
+  bottom: 60px; /* Adjust this value to match your footer height */
   left: 0;
   right: 0;
   background-color: #ffffff;
   border-radius: 1.5rem 1.5rem 0 0;
   padding: 1.5rem;
   overflow-y: auto;
-  max-height: 60vh;
+  max-height: calc(
+    100vh - 120px
+  ); /* Adjust this value to account for footer and some extra space */
   width: 395px;
   margin: 0 auto;
   box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
-  animation: slide-up 0.3s ease-out forwards; /* 부드러운 위로 이동 애니메이션 */
   z-index: 1000;
 }
 
+.close-button {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  background: none;
+  border: none;
+  font-size: 1.75rem;
+  color: #666;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
 .link-button {
   display: flex;
   align-items: center;
@@ -265,56 +301,74 @@ onMounted(() => {
 .link-button:hover {
   background-color: #f1cdb1;
 }
+
 .day-button.has-event::after {
   content: '';
   display: block;
-  width: 6px;
-  height: 6px;
+  width: 4px;
+  height: 4px;
   background-color: #b3b3b3;
   border-radius: 50%;
   margin: 0 auto;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 @keyframes slide-up {
   from {
-    bottom: -100%; /* 초기 상태 */
+    bottom: -100%;
   }
   to {
-    bottom: 0; /* 최종 상태 */
+    bottom: 0;
   }
 }
 
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.event-item {
   margin-bottom: 1rem;
 }
 
-.popup-header h2 {
-  font-size: 1.25rem;
+.event-header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.selected-date {
+  background-color: #ff7f00;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
   font-weight: bold;
-  color: #4a4a4a;
+  font-size: 0.875rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1.25rem; /* Updated margin-right value */
+  flex-shrink: 0;
 }
 
-.close-button {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
+.event-info {
+  flex: 1;
+}
+
+.event-title {
   font-weight: bold;
-  color: #b3b3b3;
-  cursor: pointer;
-  transition: color 0.3s;
+  margin-bottom: 0.25rem;
+}
+
+.event-date {
+  font-size: 0.75rem;
+  color: #666;
 }
 
-.close-button:hover {
-  color: #ff7f00;
+.event-divider {
+  border: none;
+  border-top: 1px solid #878787;
+  margin: 0.75rem;
 }
 
 .popup-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  padding-top: 1rem;
 }
 </style>