feat: api연결 및 로직 수정

Minn-Choi · Dec 2, 2024 · 747d791 · 747d791
1 parent f00b2ca
commit 747d791
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 88 deletions.
diff --git a/src/components/common/feed/CommentInput.vue b/src/components/common/feed/CommentInput.vue
@@ -21,14 +21,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import axios from 'axios'
+import { ref, onMounted } from 'vue'
 
-const selectedEmoji = ref('') // 이모지 선택 상태
-const comment = ref('') // 댓글 내용
-const goalId = '123' // 목표 ID (수정 필요: 부모 컴포넌트에서 전달)
+const selectedEmoji = ref('')
+const comment = ref('')
+const goalId = '123'
 
-// 이모지를 숫자로 매핑하는 객체
 const emojiMap = {
   '😊': 0,
   '👍': 1,
@@ -37,52 +35,46 @@ const emojiMap = {
   '😍': 4
 }
 
-// 댓글 제출 함수
 const submitComment = async () => {
   if (!comment.value.trim()) {
     alert('댓글을 입력하세요.')
     return
   }
 
   try {
-    const token = localStorage.getItem('authToken') // 저장된 토큰 가져오기
-    if (!token) {
-      alert('로그인이 필요합니다.')
-      return
-    }
-
-    // 이모지를 숫자로 변환
-    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1; // 선택된 이모지가 없으면 -1로 처리
+    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1
 
     const payload = {
-      emoji: emojiNumber, // 숫자로 된 이모지 값
+      emoji: emojiNumber,
       content: comment.value,
     }
 
-    // 요청 전에 콘솔로 값 확인
-    console.log("요청할 Payload:", payload);
+    console.log("요청할 Payload:", payload)
 
-    const response = await axios.post(
-      `/api/goals/${goalId}/comments`,
-      payload,
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId}/comments`,
       {
+        method: 'POST',
         headers: {
-          Authorization: `Bearer ${token}`, // 인증 헤더 추가
+          'Content-Type': 'application/json',
         },
+        credentials: 'include',
+        body: JSON.stringify(payload), 
       }
     )
 
-    if (response.status === 201) {
+    if (response.ok) {
       alert('댓글이 성공적으로 추가되었습니다!')
       selectedEmoji.value = ''
       comment.value = ''
+    } else {
+      alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
     }
   } catch (error) {
     console.error('댓글 전송 중 오류:', error)
     alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
   }
 }
-
 </script>
 
 <style scoped>
@@ -121,4 +113,4 @@ const submitComment = async () => {
   border: none;
   box-shadow: none;
 }
-</style>
+</style>
diff --git a/src/components/common/feed/MyGoal.vue b/src/components/common/feed/MyGoal.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="my-goal">
     <div class="goal-content">
-      <span class="name">{{ nickname }}</span> 
-      <span class="content"> {{ goalContent }}</span>
+      <span class="name">{{ nickname }}</span>
+      <span class="content">{{ goalContent }}</span>
       <div class="goal-icons">
         <button @click="toggleCommentSection"><img src='../../../assets/images/comment.svg'></button>
         <div class='line'></div>
@@ -20,23 +20,117 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import CommentInput from './CommentInput.vue'
 import CommentList from './CommentList.vue'
 
-const nickname = ref('민달팽럴')
-const goalContent = ref('포기하지 않고 긍정적으로 오늘의 할일을 마무리하자')
+// 목표 관련 상태 변수
+const nickname = ref('')
+const goalContent = ref('')
 const showCommentSection = ref(false)
+const goalId = ref('') // 목표 ID
 
-const toggleCommentSection = () => {
-  showCommentSection.value = !showCommentSection.value
+// 목표를 불러오는 함수
+const fetchGoalData = async () => {
+  try {
+    // 세션의 userId를 이용하여 목표를 조회
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', // 쿠키 인증을 포함
+    })
+
+    if (response.ok) {
+      const data = await response.json()
+      // 첫 번째 목표를 가져왔다고 가정하고 데이터를 설정
+      if (data.length > 0) {
+        const goal = data[0] // 첫 번째 목표 가져오기 (여러 목표일 경우 필요에 따라 수정)
+        nickname.value = goal.nickname
+        goalContent.value = goal.content
+        goalId.value = goal.id
+      }
+    } else {
+      alert('목표를 가져오는 데 실패했습니다.')
+    }
+  } catch (error) {
+    console.error('목표 불러오기 오류:', error)
+    alert('목표를 불러오는 중 오류가 발생했습니다.')
+  }
 }
 
-const editGoal = () => {
-  /* 목표 수정 */
+// 목표 수정 함수
+const editGoal = async () => {
+  const updatedContent = prompt('목표를 수정하세요', goalContent.value)
+  if (updatedContent && updatedContent !== goalContent.value) {
+    try {
+      const response = await fetch(
+        `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId.value}`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include', // 쿠키 인증을 포함
+          body: JSON.stringify({
+            content: updatedContent,
+          }),
+        }
+      )
+
+      if (response.ok) {
+        goalContent.value = updatedContent
+        alert('목표가 수정되었습니다.')
+      } else {
+        alert('목표 수정 중 문제가 발생했습니다.')
+      }
+    } catch (error) {
+      console.error('목표 수정 오류:', error)
+      alert('목표 수정 중 오류가 발생했습니다.')
+    }
+  }
 }
-const deleteGoal = () => {
-  /* 목표 삭제 */
+
+// 목표 삭제 함수
+const deleteGoal = async () => {
+  const confirmDelete = confirm('목표를 삭제하시겠습니까?')
+  if (confirmDelete) {
+    try {
+      const response = await fetch(
+        `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId.value}`,
+        {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include', // 쿠키 인증을 포함
+        }
+      )
+
+      if (response.ok) {
+        alert('목표가 삭제되었습니다.')
+        goalContent.value = '' // 삭제 후 내용 비우기
+        nickname.value = ''
+        goalId.value = ''
+      } else {
+        alert('목표 삭제 중 문제가 발생했습니다.')
+      }
+    } catch (error) {
+      console.error('목표 삭제 오류:', error)
+      alert('목표 삭제 중 오류가 발생했습니다.')
+    }
+  }
+}
+
+// 목표 데이터 불러오기
+onMounted(() => {
+  fetchGoalData()
+})
+
+// 댓글 섹션 토글
+const toggleCommentSection = () => {
+  showCommentSection.value = !showCommentSection.value
 }
 </script>
 
@@ -55,6 +149,7 @@ const deleteGoal = () => {
   display: flex;
   width: 100%;
 }
+
 .name {
   border-radius: 10px 0px 0px 10px;
   background: #FF7F00;
@@ -70,13 +165,12 @@ const deleteGoal = () => {
   word-wrap: break-word;
 }
 
-
-.content{
+.content {
   margin-left: 10px;
   margin-right: 5px;
   padding: 5px 0px;
   color: #000;
-  width:50%;
+  width: 50%;
   font-family: 'NaL';
   font-size: 15px;
   font-style: normal;
@@ -96,14 +190,12 @@ const deleteGoal = () => {
   background: none;
 }
 
-
 .comment-section {
 }
 
-.line{
+.line {
   width: 1px;
   height: 35px;
   background: #D9D9D9;
 }
-
 </style>