[Design] CSID-DGU#6 - 아코피드 페이지 연결 및 디자인 추가

src/components/common/feed/CommentInput.vue

@@ -1,31 +1,124 @@
 <template>
   <div class="comment-input">
     <select v-model="selectedEmoji">
-      <option value="" disabled selected hidden><img src="../../../assets/images/smile.svg"></option>
+      <option value="" disabled selected hidden>#️⃣</option>
       <option value="😊">😊</option>
       <option value="👍">👍</option>
       <option value="❤️">❤️</option>
+      <option value="😎">😎</option>
+      <option value="😍">😍</option>
     </select>
-    <input type="text" v-model="comment" placeholder="댓글 입력" />
-    <button @click="submitComment"><img src="../../../assets/images/add.svg"></button>
+    <input
+      class="realinput"
+      type="text"
+      v-model="comment"
+      placeholder="댓글 입력"
+    />
+    <button @click="submitComment">
+      <img src="../../../assets/images/add.svg" />
+    </button>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import axios from 'axios'
 
-const selectedEmoji = ref('')
-const comment = ref('')
+const selectedEmoji = ref('') // 이모지 선택 상태
+const comment = ref('') // 댓글 내용
+const goalId = '123' // 목표 ID (수정 필요: 부모 컴포넌트에서 전달)
 
-const submitComment = () => {
-  /* 댓글 제출 */
+// 이모지를 숫자로 매핑하는 객체
+const emojiMap = {
+  '😊': 0,
+  '👍': 1,
+  '❤️': 2,
+  '😎': 3,
+  '😍': 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 payload = {
+      emoji: emojiNumber, // 숫자로 된 이모지 값
+      content: comment.value,
+    }
+
+    // 요청 전에 콘솔로 값 확인
+    console.log("요청할 Payload:", payload);
+
+    const response = await axios.post(
+      `/api/goals/${goalId}/comments`,
+      payload,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`, // 인증 헤더 추가
+        },
+      }
+    )
+
+    if (response.status === 201) {
+      alert('댓글이 성공적으로 추가되었습니다!')
+      selectedEmoji.value = ''
+      comment.value = ''
+    }
+  } catch (error) {
+    console.error('댓글 전송 중 오류:', error)
+    alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
+  }
+}
+
 </script>
 
 <style scoped>
 .comment-input {
   display: flex;
-  gap: 8px;
-  margin-top: 8px;
+  width: 98%;
+}
+
+.comment-input select:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.realinput::placeholder {
+  color: #b3b3b3;
+  font-family: 'NaL';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.realinput {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+  font-family: 'NaL';
+  font-size: 16px;
+  margin-left: 4px;
+}
+
+.realinput:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
 }
-</style>
+</style>

src/components/common/feed/CommentList.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="comment-list">
     <div v-for="comment in comments" :key="comment.id" class="comment">
-      <span>{{ comment.nickname }}</span>
-      <span>{{ comment.emoji }}</span>
-      <p>{{ comment.content }}</p>
+      <div class="nick">{{ comment.nickname }}</div>
+      <div>{{ comment.emoji }}</div>
+      <div class="comment">{{ comment.content }}</div>
     </div>
   </div>
 </template>
@@ -18,10 +18,38 @@ const comments = ref([
 </script>
 
 <style scoped>
-.comment-list .comment {
+
+.comment-list{
+  display: flex;
+  flex-direction: column;
+  gap:5px;
+  margin-bottom: 5px;
+}
+.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;
+}
+
+.comment{
+  font-family: 'NaL';
+  font-size: 14px;
+  color:#000000;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
   display: flex;
-  gap: 8px;
   align-items: center;
-  margin-bottom: 8px;
 }
 </style>

src/components/common/feed/FollowStats.vue

@@ -6,13 +6,14 @@
       <span class="follower-count">{{ followerCount }}명</span>
       <span class="following-text">팔로잉</span>
       <span class="following-count">{{ followingCount }}명</span>
-      <img src="../../../assets/images/next.svg">
+      <img class='na' src="../../../assets/images/next.svg" alt="Next" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const followerCount = ref(0) // API에서 받아오는 팔로워 수
 const followingCount = ref(0) // API에서 받아오는 팔로잉 수
@@ -27,15 +28,18 @@ const formattedDate = computed(() => {
   return `${year} . ${month} . ${day}`;
 });
 
+const router = useRouter()
+
 const goToFollowPage = () => {
-  // 팔로우 관리 페이지로 이동하는 함수
+  router.push('/feed/ako-stamp-follow') // 팔로우 관리 페이지로 이동
 }
 </script>
 
 <style scoped>
 .follow-stats {
   display: flex;
   align-items: center;
+  width: 100%;
   height: 37px;
   padding: 8px;
   border-radius: 10px;
@@ -84,4 +88,8 @@ const goToFollowPage = () => {
   font-weight: 400;
   line-height: normal;
 }
-</style>
+
+.na{
+  cursor: pointer;
+}
+</style>

src/components/common/feed/FriendGoal.vue

@@ -17,7 +17,7 @@ import CommentInput from './CommentInput.vue'
 import CommentList from './CommentList.vue'
 
 const friendNickname = ref('토니')
-const friendGoalContent = ref('이따 상록원에서 밥먹을사람? 김치철판어쩌고저쩌고')
+const friendGoalContent = ref('이따 상록원에서 밥먹을사람있나요? 같이 먹어요')
 const showCommentSection = ref(false)
 
 const toggleCommentSection = () => {

src/components/common/feed/MyGoal.vue

@@ -25,7 +25,7 @@ import CommentInput from './CommentInput.vue'
 import CommentList from './CommentList.vue'
 
 const nickname = ref('민달팽럴')
-const goalContent = ref('포기하지 않고 긍정적으로 오늘의 할일을 마무리하자냥냥걸')
+const goalContent = ref('포기하지 않고 긍정적으로 오늘의 할일을 마무리하자')
 const showCommentSection = ref(false)
 
 const toggleCommentSection = () => {
@@ -96,7 +96,6 @@ const deleteGoal = () => {
 
 
 .comment-section {
-  margin-top: 8px;
 }
 
 .line{