From 9e20d869c42f46cc7f0659e053d8dc7099893ac9 Mon Sep 17 00:00:00 2001
From: Minn-Choi <min031106@dgu.ac.kr>
Date: Thu, 5 Dec 2024 16:54:44 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20api=EC=97=B0=EA=B2=B0=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/92.svg                  |   5 +
 src/components/common/feed/FriendGoal.vue | 285 ++++++++-------
 src/components/common/feed/MyGoal.vue     | 425 ++++++++++++++--------
 src/views/feed/MainFeedPage.vue           | 106 ++++--
 4 files changed, 498 insertions(+), 323 deletions(-)
 create mode 100644 src/assets/images/92.svg

diff --git a/src/assets/images/92.svg b/src/assets/images/92.svg
new file mode 100644
index 0000000..1071106
--- /dev/null
+++ b/src/assets/images/92.svg
@@ -0,0 +1,5 @@
+<svg width="95" height="95" viewBox="0 0 95 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="47.5" cy="47.5" r="47.5" fill="#F4B28C"/>
+<rect x="43.2671" y="19.7529" width="8.46535" height="56.4356" rx="4.23267" fill="white"/>
+<rect x="75.2476" y="43.2676" width="8.46535" height="56.4356" rx="4.23267" transform="rotate(90 75.2476 43.2676)" fill="white"/>
+</svg>
diff --git a/src/components/common/feed/FriendGoal.vue b/src/components/common/feed/FriendGoal.vue
index 5ba7cd4..a97676a 100644
--- a/src/components/common/feed/FriendGoal.vue
+++ b/src/components/common/feed/FriendGoal.vue
@@ -1,159 +1,149 @@
 <template>
-  <div v-if="friendNickname && friendGoalContent" class="friend-goal">
-    <div class="goal-content">
-      <span class="friendName">{{ friendNickname }}</span>
-      <span class="friendContent">{{ friendGoalContent }}</span>
-      <button class="btn" @click="toggleCommentSection">
-        <img src="../../../assets/images/comment.svg" alt="댓글">
-      </button>
-    </div>
-
-    <!-- 댓글 입력 섹션 -->
-    <div v-if="showCommentSection">
-      <div class="comment-input">
-        <select v-model="selectedEmoji">
-          <option value="" disabled selected hidden>#️⃣</option>
-          <option value="😊">😊</option>
-          <option value="👍">👍</option>
-          <option value="❤️">❤️</option>
-          <option value="😎">😎</option>
-          <option value="😍">😍</option>
-        </select>
-        <input
-          class="realinput"
-          type="text"
-          v-model="comment"
-          placeholder="댓글 입력"
-        />
-        <button @click="submitComment">
-          <img src="../../../assets/images/add.svg" />
+  <div v-if="goals.length" class="friend-goals">
+    <div v-for="goal in goals" :key="goal.goalId" class="friend-goal">
+      <div class="goal-content">
+        <span class="friendName">{{ goal.nickname }}</span>
+        <span class="friendContent">{{ goal.content }}</span>
+        <button class="btn" @click="toggleCommentSection(goal.goalId)">
+          <img src="../../../assets/images/comment.svg" alt="댓글">
         </button>
       </div>
 
-      <div class="comment-list">
-        <div v-for="comment in comments" :key="comment.id" class="comment">
-          <div class="nick">{{ comment.nickname }}</div>
-          <div>{{ getEmoji(comment.emoji) }}</div> <!-- 이모지 변환 -->
-          <div class="comment-content">{{ comment.content }}</div>
+      <div v-if="showCommentSection === goal.goalId">
+        <div class="comment-input">
+          <select v-model="comments[goal.goalId].emoji">
+            <option value="" disabled selected hidden>#️⃣</option>
+            <option value="😊">😊</option>
+            <option value="👍">👍</option>
+            <option value="❤️">❤️</option>
+            <option value="😎">😎</option>
+            <option value="😍">😍</option>
+          </select>
+          <input
+            class="realinput"
+            type="text"
+            v-model="comments[goal.goalId].content"
+            placeholder="댓글 입력"
+          />
+          <div class="'btn2'" @click="submitComment(goal.goalId)">
+            <img src="../../../assets/images/add.svg" />
+          </div>
+        </div>
+
+        <div class="comment-list">
+          <div v-for="comment in goal.comments" :key="comment.commentId" class="comment">
+            <div class="nick">{{ comment.nickname }}</div>
+            <div class='emo'>{{ getEmoji(comment.emoji) }}</div>
+            <div class="comment-content">{{ comment.content }}</div>
+          </div>
         </div>
       </div>
     </div>
   </div>
+  <div v-else>
+    <p>표시할 목표가 없습니다.</p>
+  </div>
 </template>
 
-<script setup>
-import { ref, onMounted } from 'vue'
+<script>
+import { ref, reactive, onMounted } from 'vue';
 
-// 데이터 정의
-const friendNickname = ref('')
-const friendGoalContent = ref('')
-const comments = ref([])
-const showCommentSection = ref(false)
-const selectedEmoji = ref('')
-const comment = ref('')
-const goalId = ref(null)  // goalId는 API에서 받아옴
+export default {
+  setup() {
+    const goals = ref([]);
+    const showCommentSection = ref(null);
+    const comments = reactive({}); 
 
-// 이모지 맵
-const emojiMap = {
-  '😊': 0,
-  '👍': 1,
-  '❤️': 2,
-  '😎': 3,
-  '😍': 4
-}
+    const emojiMap = {
+      '😊': 0,
+      '👍': 1,
+      '❤️': 2,
+      '😎': 3,
+      '😍': 4,
+    };
 
-// emojiMap을 반대로 변환하여 숫자 값을 이모지로 변환하는 함수
-const getEmoji = (emojiIndex) => {
-  const reversedMap = Object.keys(emojiMap).reduce((acc, key) => {
-    acc[emojiMap[key]] = key
-    return acc
-  }, {})
-  return reversedMap[emojiIndex] || ''  // 없으면 빈 문자열 반환
-}
+    const fetchGoals = async () => {
+      try {
+        const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/feeds`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        });
 
-// 목표 데이터를 불러오는 함수
-const fetchGoals = async () => {
-  try {
-    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/feeds`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'include',
-    })
+        if (response.ok) {
+          const data = await response.json();
+          goals.value = data.filter((goal) => !goal.mine);
 
-    if (response.ok) {
-      const data = await response.json()
-      console.log('API 응답 데이터:', data)
-      if (data.length > 0) {
-        const firstGoal = data[0]
-        friendNickname.value = firstGoal.nickname
-        friendGoalContent.value = firstGoal.content
-        comments.value = firstGoal.comments
-        goalId.value = firstGoal.goalId
+          goals.value.forEach((goal) => {
+            comments[goal.goalId] = { content: '', emoji: '' };
+          });
+        } else {
+          console.error('목표 데이터를 불러오지 못했습니다.', response.status);
+          alert('데이터를 불러오는 데 문제가 발생했습니다.');
+        }
+      } catch (error) {
+        console.error('API 요청 오류:', error);
+        alert('서버 요청 오류가 발생했습니다.');
       }
-    } else {
-      console.error('목표 데이터를 불러오지 못했습니다.', response.status)
-      alert('데이터를 불러오는 데 문제가 발생했습니다.')
-    }
-  } catch (error) {
-    console.error('API 요청 오류:', error)
-    alert('서버 요청 오류가 발생했습니다.')
-  }
-}
+    };
 
-// 댓글을 작성하는 함수
-const submitComment = async () => {
-  if (!comment.value.trim()) {
-    alert('댓글을 입력하세요.')
-    return
-  }
+    const toggleCommentSection = (goalId) => {
+      showCommentSection.value = showCommentSection.value === goalId ? null : goalId;
+    };
 
-  try {
-    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1
+    const getEmoji = (emoji) => {
+      return Object.keys(emojiMap).find((key) => emojiMap[key] === emoji) || '#️⃣';
+    };
 
-    const payload = {
-      emoji: emojiNumber,
-      content: comment.value,
-    }
+    const submitComment = async (goalId) => {
+      const { content, emoji } = comments[goalId];
+      const emojiValue = emojiMap[emoji] ?? -1;
 
-    console.log("요청할 Payload:", payload)
-
-    const response = await fetch(
-      `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId.value}/comments`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify(payload),
+      if (!content.trim()) {
+        alert('댓글을 입력해주세요.');
+        return;
       }
-    )
 
-    if (response.ok) {
-      const data = await response.json()
-      console.log("API 응답 데이터:", data) 
-      window.location.reload() 
-      alert('댓글이 성공적으로 추가되었습니다!')
-      selectedEmoji.value = ''
-      comment.value = ''
-    } else {
-      alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
-    }
-  } catch (error) {
-    console.error('댓글 전송 중 오류:', error)
-    alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
-  }
-}
+      try {
+        const payload = { content, emoji: emojiValue };
+        const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId}/comments`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify(payload),
+        });
 
-const toggleCommentSection = () => {
-  showCommentSection.value = !showCommentSection.value
-}
+        if (response.ok) {
+          alert('댓글이 성공적으로 추가되었습니다.');
+          comments[goalId].content = '';
+          comments[goalId].emoji = '';
+          fetchGoals();
+        } else {
+          console.error('댓글 추가 실패:', response.status);
+          alert('댓글 추가에 실패했습니다.');
+        }
+      } catch (error) {
+        console.error('댓글 제출 오류:', error);
+        alert('서버 요청 오류가 발생했습니다.');
+      }
+    };
 
-onMounted(() => {
-  fetchGoals()
-})
+    onMounted(fetchGoals);
+
+    return {
+      goals,
+      showCommentSection,
+      comments,
+      toggleCommentSection,
+      getEmoji,
+      submitComment,
+    };
+  },
+};
 </script>
 
 <style scoped>
@@ -161,6 +151,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  margin-bottom: 3px;
   width: 100%;
   border-radius: 10px;
   background: #fff;
@@ -186,8 +177,33 @@ onMounted(() => {
   padding: 8px 0;
   word-wrap: break-word;
 }
+.btn,
+.btn2{
+  display: flex;
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer; 
+}
+
+.btn:focus,
+.btn:active,
+.btn2:focus,
+.btn2:active {
+  outline: none;
+  border: none;
+  cursor: pointer; 
+}
+
 
+.emo{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .friendContent {
+  display: flex;
+  align-items: center;
   margin-left: 10px;
   margin-right: 5px;
   padding: 5px 0;
@@ -201,6 +217,7 @@ onMounted(() => {
 
 .comment-list {
   display: flex;
+  justify-content: center;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 5px;
@@ -208,8 +225,8 @@ onMounted(() => {
 
 .comment {
   display: flex;
-  gap: 10px;
   margin-left: 5px;
+  align-items: center;
 }
 
 .nick {
@@ -220,6 +237,7 @@ onMounted(() => {
   font-weight: 300;
   line-height: normal;
   display: flex;
+  min-width: 40px;
   align-items: center;
 }
 
@@ -232,6 +250,7 @@ onMounted(() => {
   line-height: normal;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .comment-input {
diff --git a/src/components/common/feed/MyGoal.vue b/src/components/common/feed/MyGoal.vue
index 20b8341..ef0c7dd 100644
--- a/src/components/common/feed/MyGoal.vue
+++ b/src/components/common/feed/MyGoal.vue
@@ -1,172 +1,223 @@
 <template>
-  <div v-if="goalContent" class="my-goal">
-    <div class="goal-content">
-      <span class="name">{{ nickname }}</span>
-      <span class="content">{{ goalContent }}</span>
-      <div class="goal-icons">
-        <button @click="toggleCommentSection">
-          <img src="../../../assets/images/comment.svg" alt="comment" />
-        </button>
-        <div class="line"></div>
-        <button @click="editGoal">
-          <img src="../../../assets/images/write.svg" alt="edit" />
-        </button>
-        <div class="line"></div>
-        <button @click="deleteGoal">
-          <img src="../../../assets/images/delete.svg" alt="delete" />
-        </button>
+  <div v-if="goals.length" class="friend-goals">
+    <div v-for="goal in goals" :key="goal.goalId" class="friend-goal">
+      <div class="goal-content">
+        <span class="friendName">{{ goal.nickname }}</span>
+        <span class="friendContent">{{ goal.content }}</span>
+        <div class="btn" @click="toggleCommentSection(goal.goalId)">
+          <img src="../../../assets/images/comment.svg" alt="댓글">
+        </div>
+
+        <div class="btn" @click="editGoal(goal.goalId)">
+          <img src="../../../assets/images/write.svg" alt="수정">
+        </div>
+        <div class="btn" @click="deleteGoal(goal.goalId)">
+          <img src="../../../assets/images/delete.svg" alt="삭제">
+        </div>
       </div>
-    </div>
 
-    <div v-if="showCommentSection" class="comment-section">
-      <CommentInput />
-      <CommentList />
+      <div v-if="showCommentSection === goal.goalId">
+        <div class="comment-input">
+          <select v-model="comments[goal.goalId].emoji">
+            <option value="" disabled selected hidden>#️⃣</option>
+            <option value="😊">😊</option>
+            <option value="👍">👍</option>
+            <option value="❤️">❤️</option>
+            <option value="😎">😎</option>
+            <option value="😍">😍</option>
+          </select>
+          <input
+            class="realinput"
+            type="text"
+            v-model="comments[goal.goalId].content"
+            placeholder="댓글 입력"
+          />
+          <div class="btn2" @click="submitComment(goal.goalId)">
+            <img src="../../../assets/images/add.svg" />
+          </div>
+        </div>
+
+        <div class="comment-list">
+          <div v-for="comment in goal.comments" :key="comment.commentId" class="comment">
+            <div class="nick">{{ comment.nickname }}</div>
+            <div>{{ getEmoji(comment.emoji) }}</div>
+            <div class="comment-content">{{ comment.content }}</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+  <div v-else>
+    <p class='no'>표시할 목표가 없습니다 😮</p>
+  </div>
 </template>
 
-<script setup>
-import { ref, onMounted } from "vue";
-import CommentInput from "./CommentInput.vue";
-import CommentList from "./CommentList.vue";
+<script>
+import { ref, reactive, onMounted } from 'vue';
 
-const nickname = ref("");
-const goalContent = ref("");
-const showCommentSection = ref(false);
-const goalId = ref("");
+export default {
+  setup() {
+    const goals = ref([]);
+    const showCommentSection = ref(null);
+    const comments = reactive({});
+    const goalToEdit = ref(null); 
 
-const fetchGoalData = async () => {
-  try {
-    const userResponse = await fetch(
-      `${process.env.VUE_APP_BE_API_URL}/api/users/profile`,
-      {
-        method: "GET",
-        credentials: "include",
+    const emojiMap = {
+      '😊': 0,
+      '👍': 1,
+      '❤️': 2,
+      '😎': 3,
+      '😍': 4,
+    };
+
+    const fetchGoals = async () => {
+      try {
+        const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/feeds`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          goals.value = data.filter((goal) => goal.mine);
+
+          goals.value.forEach((goal) => {
+            comments[goal.goalId] = { content: '', emoji: '' };
+          });
+        } else {
+          console.error('목표 데이터를 불러오지 못했습니다.', response.status);
+          alert('데이터를 불러오는 데 문제가 발생했습니다.');
+        }
+      } catch (error) {
+        console.error('API 요청 오류:', error);
+        alert('서버 요청 오류가 발생했습니다.');
       }
-    );
+    };
 
-    if (userResponse.ok) {
-      const userData = await userResponse.json();
-      nickname.value = userData.nickname;
-    } else {
-      handleFetchError(userResponse);
-    }
+    const toggleCommentSection = (goalId) => {
+      showCommentSection.value = showCommentSection.value === goalId ? null : goalId;
+    };
 
-    const goalResponse = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-    });
+    const getEmoji = (emoji) => {
+      return Object.keys(emojiMap).find((key) => emojiMap[key] === emoji) || '#️⃣';
+    };
+
+    const submitComment = async (goalId) => {
+      const { content, emoji } = comments[goalId];
+      const emojiValue = emojiMap[emoji] ?? -1;
 
-    if (goalResponse.ok) {
-      const goalData = await goalResponse.json();
-      if (goalData.length > 0) {
-        const goal = goalData[0];
-        goalContent.value = goal.content;
-        goalId.value = goal.goalId;
+      if (!content.trim()) {
+        alert('댓글을 입력해주세요.');
+        return;
       }
-    } else {
-      alert("목표를 가져오는 데 실패했습니다.");
-    }
-  } catch (error) {
-    console.error("목표 및 사용자 정보 불러오기 오류:", error);
-    alert("목표 및 사용자 정보 가져오기 오류가 발생했습니다.");
-  }
-};
 
-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",
+      try {
+        const payload = { content, emoji: emojiValue };
+        const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId}/comments`, {
+          method: 'POST',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
-          credentials: "include",
-          body: JSON.stringify({ content: updatedContent }),
-        }
-      );
+          credentials: 'include',
+          body: JSON.stringify(payload),
+        });
 
-      if (response.ok) {
-        goalContent.value = updatedContent;
-        alert("목표가 수정되었습니다.");
-      } else {
-        alert("목표 수정 중 문제가 발생했습니다.");
+        if (response.ok) {
+          alert('댓글이 성공적으로 추가되었습니다.');
+          comments[goalId].content = '';
+          comments[goalId].emoji = '';
+          fetchGoals();
+        } else {
+          console.error('댓글 추가 실패:', response.status);
+          alert('댓글 추가에 실패했습니다.');
+        }
+      } catch (error) {
+        console.error('댓글 제출 오류:', error);
+        alert('서버 요청 오류가 발생했습니다.');
       }
-    } catch (error) {
-      console.error("목표 수정 오류:", error);
-      alert("목표 수정 중 오류가 발생했습니다.");
-    }
-  }
-};
+    };
 
-const deleteGoal = async () => {
-  if (!goalId.value) {
-    alert("삭제할 목표가 없습니다.");
-    return;
-  }
+    const editGoal = async (goalId) => {
+      const goal = goals.value.find((goal) => goal.goalId === goalId);
+      if (!goal) return;
 
-  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",
+      const updatedContent = prompt('목표를 수정하세요', goal.content);
+      if (updatedContent && updatedContent !== goal.content) {
+        try {
+          const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId}`, {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            credentials: 'include',
+            body: JSON.stringify({ content: updatedContent }),
+          });
+
+          if (response.ok) {
+            goal.content = updatedContent;
+            alert('목표가 수정되었습니다.');
+          } else {
+            alert('목표 수정 중 문제가 발생했습니다.');
+          }
+        } catch (error) {
+          console.error('목표 수정 오류:', error);
+          alert('목표 수정 중 오류가 발생했습니다.');
         }
-      );
-
-      if (response.ok) {
-        alert("목표가 삭제되었습니다.");
-        goalContent.value = "";
-        goalId.value = "";
-      } else {
-        alert("목표 삭제 중 문제가 발생했습니다.");
       }
-    } catch (error) {
-      console.error("목표 삭제 오류:", error);
-      alert("목표 삭제 중 오류가 발생했습니다.");
+    };
+
+    const deleteGoal = async (goalId) => {
+  try {
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+
+    if (response.ok) {
+      alert('목표가 삭제되었습니다.');
+      window.location.reload(); 
+    } else {
+      const errorData = await response.json();
+      console.error('목표 삭제 실패:', response.status, errorData);
+      alert(`목표 삭제 실패: ${errorData.message || '알 수 없는 오류'}`);
     }
+  } catch (error) {
+    console.error('목표 삭제 오류:', error);
+    alert('서버 요청 오류가 발생했습니다.');
   }
 };
 
-const toggleCommentSection = () => {
-  showCommentSection.value = !showCommentSection.value;
-};
+    onMounted(fetchGoals);
 
-const handleFetchError = (response) => {
-  console.error("사용자 정보 불러오기 실패:", response.status, response.statusText);
-  if (response.status === 401) {
-    alert("인증에 실패했습니다. 다시 로그인해주세요.");
-    window.location.href = "/login";
-  } else {
-    alert("사용자 정보 가져오기 실패. 다시 시도해주세요.");
-  }
+    return {
+      goals,
+      showCommentSection,
+      comments,
+      toggleCommentSection,
+      getEmoji,
+      submitComment,
+      editGoal,
+      deleteGoal,
+      goalToEdit,
+    };
+  },
 };
-
-onMounted(() => {
-  fetchGoalData();
-});
 </script>
 
-
 <style scoped>
-.my-goal {
+.friend-goal {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
   border-radius: 10px;
-  background: #FFF;
+  background: #fff;
   height: 100%;
 }
 
@@ -175,14 +226,14 @@ onMounted(() => {
   width: 100%;
 }
 
-.name {
-  border-radius: 10px 0px 0px 10px;
-  background: #FF7F00;
-  color: #FFF;
+.friendName {
+  border-radius: 10px 0 0 10px;
+  background: #ff7f00;
+  color: #fff;
   text-align: center;
   font-family: 'NaB';
   font-size: 11px;
-  width: 54px;
+  width: 74px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -190,37 +241,111 @@ onMounted(() => {
   word-wrap: break-word;
 }
 
-.content {
+.friendContent {
+  display: flex;
+  align-items: center;
   margin-left: 10px;
   margin-right: 5px;
-  padding: 5px 0px;
+  padding: 5px 0;
   color: #000;
-  width: 50%;
+  width: 70%;
   font-family: 'NaL';
   font-size: 15px;
-  font-style: normal;
   font-weight: 300;
   line-height: normal;
 }
 
-.goal-icons {
+.comment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 5px;
+}
+.btn ,
+.btn2{
+  display: flex;
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer; 
+}
+
+.btn:focus,
+.btn:active,
+.btn2:focus,
+.btn2:active {
+  outline: none;
+  border: none;
+}
+
+.comment {
   display: flex;
   gap: 10px;
+  margin-left: 5px;
+}
+
+.nick {
+  font-family: 'NaB';
+  font-size: 15px;
+  color: #FF7F00;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+  display: flex;
   align-items: center;
-  background: none;
+}
+
+.comment-content {
+  font-family: 'NaL';
+  font-size: 14px;
+  color: #000000;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+}
+
+.comment-input {
+  display: flex;
+  width: 98%;
+}
+.no{
+  font-family: 'NaR';
+  width:100%;
+  text-align: center;
+  font-size: 14px;
+  color: rgba(107, 105, 105, 0.612)
+}
+.comment-input select:focus {
   outline: none;
+  border: none;
+  box-shadow: none;
 }
 
-.goal-icons button:hover {
-  background: none;
+.realinput::placeholder {
+  color: #b3b3b3;
+  font-family: 'NaL';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
 }
 
-.comment-section {
+.realinput {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+  font-family: 'NaL';
+  font-size: 16px;
+  margin-left: 4px;
 }
 
-.line {
-  width: 1px;
-  height: 35px;
-  background: #D9D9D9;
+.realinput:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
 }
+
 </style>
diff --git a/src/views/feed/MainFeedPage.vue b/src/views/feed/MainFeedPage.vue
index 17f5926..6a8e926 100644
--- a/src/views/feed/MainFeedPage.vue
+++ b/src/views/feed/MainFeedPage.vue
@@ -3,16 +3,17 @@
     <div class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen relative overflow-y-auto">
       <div class="feed-page">
         <MainHeader />
-        <SearchBar class="component-spacing" style="margin-top: 100px" />
-        <FollowStats class="component-spacing" />
+        <SearchBar class="component-spacing1" style="margin-top: 100px" />
+        <FollowStats class="component-spacing2" />
         <MyGoal class="component-spacing" />
-        <FriendGoal class="component-spacing" />
-        <div class='Btn'>
+        <FriendGoal class="component-spacing3" />
+        
+        <div class="Btn" v-if="!hasMineGoal">
           <router-link to="/feed/ako-stamp-write" class="plusMentBtn">
-            아코자국 작성하기
-            <img src="@/assets/images/plusBtn.svg" alt="플러스버튼" />
+            <img src="@/assets/images/92.svg" alt="플러스버튼" />
           </router-link>
         </div>
+
         <MainFooter />
       </div>
     </div>
@@ -20,17 +21,45 @@
 </template>
 
 <script setup>
-import SearchBar from '@/components/common/feed/SearchBar.vue'
-import FollowStats from '@/components/common/feed/FollowStats.vue'
-import MyGoal from '@/components/common/feed/MyGoal.vue'
-import FriendGoal from '@/components/common/feed/FriendGoal.vue'
-import CommentInput from '@/components/common/feed/CommentInput.vue'
-import CommentList from '@/components/common/feed/CommentList.vue'
-import './FeedPageStyle.css'
-import MainHeader from '@/components/layout/Header.vue'
-import MainFooter from '@/components/layout/Footer.vue'
+import { ref, computed } from 'vue';
+import SearchBar from '@/components/common/feed/SearchBar.vue';
+import FollowStats from '@/components/common/feed/FollowStats.vue';
+import MyGoal from '@/components/common/feed/MyGoal.vue';
+import FriendGoal from '@/components/common/feed/FriendGoal.vue';
+import MainHeader from '@/components/layout/Header.vue';
+import MainFooter from '@/components/layout/Footer.vue';
+import './FeedPageStyle.css';
+
+const goals = ref([]);
+const hasMineGoal = computed(() => goals.value.some((goal) => goal.mine));
+
+const fetchGoals = async () => {
+  try {
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/feeds`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      goals.value = data.filter((goal) => goal.mine || !goal.mine);
+    } else {
+      console.error('목표 데이터를 불러오지 못했습니다.', response.status);
+      alert('데이터를 불러오는 데 문제가 발생했습니다.');
+    }
+  } catch (error) {
+    console.error('API 요청 오류:', error);
+    alert('서버 요청 오류가 발생했습니다.');
+  }
+};
+
+fetchGoals();
 </script>
 
+
 <style scoped>
 .feed-page {
   max-width: 345px;
@@ -42,36 +71,33 @@ import MainFooter from '@/components/layout/Footer.vue'
   padding-bottom: 100px;
 }
 .component-spacing {
-  margin-bottom: 20px;
+  margin-bottom: 3px;
+  width: 100%;
 }
-.Btn {
-  position: fixed;
-  bottom: 60px; 
+
+.component-spacing1 {
+  margin-bottom: 7px;
+}
+.component-spacing2 {
+  margin-bottom: 18px;
+}
+.component-spacing3 {
+  margin-bottom: 3px;
   width: 100%;
-  max-width: 395px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: center;
+}
+.Btn {
+  position: absolute;
+  bottom: 100px;
+  right: 20px;
+  width: 75px;
+  border-radius: 95px;
+background: #F4B28C;
+box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  height: 75px;
   z-index: 10;
 }
 .plusMentBtn {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 87px;
-  border-radius: 50px 50px 0px 0px;
-  background: #FFF;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
-  color: #FF7F00;
-  text-align: center;
-  font-family: 'NaR';
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 32px;
-  text-decoration: none;
+
 }
 
 </style>