Merge pull request #63 from Minn-Choi/feature/#6

[feat/#6] api 연결

package.json

@@ -19,6 +19,7 @@
     "express": "^4.21.1",
     "http-proxy-middleware": "^3.0.3",
     "register-service-worker": "^1.7.2",
+    "styled-components": "^6.1.13",
     "v-calendar": "^3.1.2",
     "vue": "^3.2.13",
     "vue-cal": "^4.10.0",

src/components/common/feed/CommentInput.vue

@@ -1,31 +1,116 @@
 <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 { ref, onMounted } from 'vue'
 
 const selectedEmoji = ref('')
 const comment = ref('')
+const goalId = '123'
 
-const submitComment = () => {
-  /* 댓글 제출 */
+const emojiMap = {
+  '😊': 0,
+  '👍': 1,
+  '❤️': 2,
+  '😎': 3,
+  '😍': 4
+}
+
+const submitComment = async () => {
+  if (!comment.value.trim()) {
+    alert('댓글을 입력하세요.')
+    return
+  }
+
+  try {
+    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1
+
+    const payload = {
+      emoji: emojiNumber,
+      content: comment.value,
+    }
+
+    console.log("요청할 Payload:", payload)
+
+    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), 
+      }
+    )
+
+    if (response.ok) {
+      alert('댓글이 성공적으로 추가되었습니다!')
+      selectedEmoji.value = ''
+      comment.value = ''
+    } else {
+      alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
+    }
+  } 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>

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,36 +6,67 @@
       <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 { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 
-const followerCount = ref(0) // API에서 받아오는 팔로워 수
-const followingCount = ref(0) // API에서 받아오는 팔로잉 수
+const followerCount = ref(0) 
+const followingCount = ref(0)  
 
-// 현재 날짜를 포맷팅
 const formattedDate = computed(() => {
   const date = new Date();
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1
+  const month = String(date.getMonth() + 1).padStart(2, '0'); 
   const day = String(date.getDate()).padStart(2, '0');
   
   return `${year} . ${month} . ${day}`;
 });
 
+const API_URL = `${process.env.VUE_APP_BE_API_URL}/api`;
+
+const fetchFollowCounts = async () => {
+  try {
+    const followerResponse = await fetch(`${API_URL}/followers`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const followerData = await followerResponse.json();
+    followerCount.value = Array.isArray(followerData) ? followerData.length : 0;
+
+    const followingResponse = await fetch(`${API_URL}/following`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const followingData = await followingResponse.json();
+    followingCount.value = Array.isArray(followingData) ? followingData.length : 0;
+  } catch (error) {
+    console.error('팔로워 및 팔로잉 수 가져오기 실패:', error);
+    followerCount.value = 0;
+    followingCount.value = 0;
+  }
+};
+
+const router = useRouter()
+
 const goToFollowPage = () => {
-  // 팔로우 관리 페이지로 이동하는 함수
+  router.push('/feed/ako-stamp-follow') 
 }
+
+onMounted(() => {
+  fetchFollowCounts(); 
+});
 </script>
 
 <style scoped>
 .follow-stats {
   display: flex;
   align-items: center;
+  width: 100%;
   height: 37px;
   padding: 8px;
   border-radius: 10px;
@@ -45,7 +76,7 @@ const goToFollowPage = () => {
 .date-info {
   flex: 1;
   text-align: left;
-  color: #FF7F00; /* 날짜 색상 */
+  color: #FF7F00; 
   font-family: 'NaR';
   font-size: 0.9rem;
   padding-left: 5px;
@@ -84,4 +115,8 @@ const goToFollowPage = () => {
   font-weight: 400;
   line-height: normal;
 }
+
+.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 = () => {
@@ -72,5 +72,6 @@ const toggleCommentSection = () => {
 
 .btn button:hover {
   background: none;
+  outline: none;
 }
 </style>