Merge pull request #38 from study2895/main

[Feat] Tailwind CSS purge 설정 추가 및 메인페이지 백엔드 로직 작성

.env

@@ -1,2 +1,2 @@
 #백엔드 포트 번호
-VUE_APP_BE_API_URL=http://localhost:8082
+VUE_APP_BE_API_URL=http://ec2-43-202-20-87.ap-northeast-2.compute.amazonaws.com:8080/

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,24 +119,99 @@
 </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' } },
-  { label: 'O', completed: true, position: { top: '62px', left: '262px' } },
+  { label: 'A', completed: false, position: { top: '-18px', left: '12px' } },
+  { label: 'K', completed: false, position: { top: '-18px', left: '147px' } },
+  { label: 'O', completed: false, position: { top: '62px', left: '262px' } },
   { label: 'M', completed: false, position: { top: '144px', left: '157px' } },
   { label: 'I', completed: false, position: { top: '144px', left: '22px' } },
   { label: 'N', completed: false, position: { top: '297px', left: '102px' } },
   { label: 'G', completed: false, position: { top: '297px', left: '237px' } }
 ])
 
+// 각 스탬프의 상태를 받아와서 stamps에 업데이트하는 함수
+const fetchStampsStatus = async () => {
+  try {
+    const userId = 'user-id' // 실제 사용자 ID로 설정해야 함
+    const response = await axios.get(`/api/quests/${userId}`)
+    const { stamp1, stamp2, stamp3, stamp4, stamp5, stamp6, stamp7 } =
+      response.data
+
+    stamps.value[0].completed = stamp1 // 스탬프 A
+    stamps.value[1].completed = stamp2 // 스탬프 K
+    stamps.value[2].completed = stamp3 // 스탬프 O
+    stamps.value[3].completed = stamp4 // 스탬프 M
+    stamps.value[4].completed = stamp5 // 스탬프 I
+    stamps.value[5].completed = stamp6 // 스탬프 N
+    stamps.value[6].completed = stamp7 // 스탬프 G
+  } catch (error) {
+    console.error('스탬프 상태를 가져오는 중 오류 발생:', error)
+  }
+}
+
+// 아코 이미지 경로 저장할 변수
+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 +221,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 +235,11 @@ const getTaskIcon = (taskName) => {
       return null
   }
 }
+
+// onMounted에서 호출하여 초기 데이터 로드
+onMounted(() => {
+  fetchQuestStatus()
+  fetchStampsStatus() // 스탬프 상태도 불러오기
+  setElephantIconByLevel()
+})
 </script>

tailwind.config.js

@@ -17,5 +17,6 @@ module.exports = {
       }
     }
   },
-  plugins: []
+  plugins: [],
+  purge: ['./src/**/*.html', './src/**/*.vue', './public/**/*.html']
 }

vue.config.js

@@ -17,9 +17,9 @@ module.exports = defineConfig({
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:8082', // 백엔드 서버 주소
-        changeOrigin: true, // 백엔드 서버의 도메인과 상관없이 요청을 보낼 수 있게 허용
-        secure: false // HTTPS가 아니므로 설정 (필요한 경우 추가)
+        target:
+          'http://ec2-43-202-20-87.ap-northeast-2.compute.amazonaws.com:8080',
+        changeOrigin: true
       }
     },
     port: 3000