[Feature] #21 - 스탬프 부분 제외 백엔드 연결 로직 작성(퀘스트, 아코 캐릭터)

src/views/mainpage/MainpageView.vue

@@ -110,11 +110,7 @@
               토실토실 아코가 자라는 중
             </p>
           </div>
-          <img
-            src="@/assets/Icons/akoming/mainpage/ako-01.svg"
-            alt="아코 이미지"
-            class="w-64 h-64 mx-auto"
-          />
+          <img :src="akoImage" alt="아코 이미지" class="w-64 h-64 mx-auto" />
         </div>
       </main>
       <MainFooter />
@@ -123,14 +119,40 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
 import attendanceIcon from '@/assets/Icons/akoming/todo/attendance.svg'
 import akojagukIcon from '@/assets/Icons/akoming/todo/akojaguk.svg'
 import commentIcon from '@/assets/Icons/akoming/todo/comment.svg'
 import akofolioIcon from '@/assets/Icons/akoming/todo/akofolio.svg'
 
+// Tasks for the to-do list
+const tasks = ref([
+  { name: '아코밍 출석', completed: false },
+  { name: '아코자국', completed: false },
+  { name: '댓글 남기기', completed: false },
+  { name: '아코폴리오', completed: false }
+])
+
+// 각 퀘스트의 상태를 받아와서 tasks에 업데이트하는 함수
+const fetchQuestStatus = async () => {
+  try {
+    const userId = 'user-id' // 실제 사용자 ID로 설정해야 함
+    const response = await axios.get(`/api/quests/${userId}`)
+    const { quest1, quest2, quest3, quest4 } = response.data
+
+    tasks.value[0].completed = quest1 // 아코밍 출석
+    tasks.value[1].completed = quest2 // 아코자국
+    tasks.value[2].completed = quest3 // 댓글 남기기
+    tasks.value[3].completed = quest4 // 아코폴리오
+  } catch (error) {
+    console.error('퀘스트 상태를 가져오는 중 오류 발생:', error)
+  }
+}
+
+// 스탬프 상태 정의
 const stamps = ref([
   { label: 'A', completed: true, position: { top: '-18px', left: '12px' } },
   { label: 'K', completed: true, position: { top: '-18px', left: '147px' } },
@@ -141,6 +163,35 @@ const stamps = ref([
   { label: 'G', completed: false, position: { top: '297px', left: '237px' } }
 ])
 
+// 아코 이미지 경로 저장할 변수
+const elephantIcons = [
+  '@/assets/Icons/akoming/mainpage/ako-01.svg',
+  '@/assets/Icons/akoming/mainpage/ako-02.svg',
+  '@/assets/Icons/akoming/mainpage/ako-03.svg',
+  '@/assets/Icons/akoming/mainpage/ako-04.svg',
+  '@/assets/Icons/akoming/mainpage/ako-05.svg',
+  '@/assets/Icons/akoming/mainpage/ako-06.svg'
+]
+const akoImage = ref(elephantIcons[0])
+
+// Level에 따른 아코 이미지 설정 함수
+const setElephantIconByLevel = async () => {
+  try {
+    const response = await axios.get('/api/goals')
+    const level = response.data.level
+
+    if (level >= 1 && level <= 6) {
+      akoImage.value = elephantIcons[level - 1]
+    } else {
+      console.warn('유효한 level 값이 아닙니다:', level)
+      akoImage.value = elephantIcons[0] // 기본 이미지로 설정
+    }
+  } catch (error) {
+    console.error('아코 이미지를 가져오는 중 오류 발생:', error)
+    akoImage.value = elephantIcons[0] // 오류 시 기본 이미지로 설정
+  }
+}
+
 // Functions to get icons based on task name and completion status
 const getCompletedStampIcon = (label) => {
   return require(`@/assets/Icons/akoming/stamp/color/color${label.toLowerCase()}.svg`)
@@ -150,13 +201,6 @@ const getGrayStampIcon = (label) => {
   return require(`@/assets/Icons/akoming/stamp/gray/gray${label.toLowerCase()}.svg`)
 }
 
-const tasks = ref([
-  { name: '아코밍 출석', completed: true },
-  { name: '아코자국', completed: true },
-  { name: '댓글 남기기', completed: false },
-  { name: '아코폴리오', completed: false }
-])
-
 const getTaskIcon = (taskName) => {
   switch (taskName) {
     case '아코밍 출석':
@@ -171,4 +215,9 @@ const getTaskIcon = (taskName) => {
       return null
   }
 }
+
+onMounted(() => {
+  fetchQuestStatus()
+  setElephantIconByLevel()
+})
 </script>