From f46aade67d3768a2b70a61fbc3900ac6c6d60f34 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:39:09 +0900
Subject: [PATCH] =?UTF-8?q?[Feature]=20#21=20-=20=EC=8A=A4=ED=83=AC?=
 =?UTF-8?q?=ED=94=84=20=EB=B6=80=EB=B6=84=20=EC=A0=9C=EC=99=B8=20=EB=B0=B1?=
 =?UTF-8?q?=EC=97=94=EB=93=9C=20=EC=97=B0=EA=B2=B0=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1(=ED=80=98=EC=8A=A4=ED=8A=B8,=20=EC=95=84?=
 =?UTF-8?q?=EC=BD=94=20=EC=BA=90=EB=A6=AD=ED=84=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mainpage/MainpageView.vue | 75 ++++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 13 deletions(-)

diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index ee1d75c..599878f 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/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,7 +119,8 @@
 </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'
@@ -131,6 +128,31 @@ 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>