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

fix: api 연결 수정
CSID-DGU · Dec 2, 2024 · c5c313e · c5c313e
2 parents 4e3e7ea + e0a0a91
commit c5c313e
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 132 deletions.
diff --git a/src/components/common/feed/FollowStats.vue b/src/components/common/feed/FollowStats.vue
@@ -30,26 +30,30 @@ const formattedDate = computed(() => {
 
 const fetchFollowCounts = async () => {
   try {
-    const followerResponse = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/followers`, {
+    const followerResponse = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/followers`, {
       method: 'GET',
       credentials: 'include',
     });
     const followerData = await followerResponse.json();
-    followerCount.value = Array.isArray(followerData) ? followerData.length : 0;
+    followerCount.value = followerData.count || 0; 
+    console.log('팔로워 데이터:', followerData);
 
-    const followingResponse = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/following`, {
+    const followingResponse = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/following`, {
       method: 'GET',
       credentials: 'include',
     });
     const followingData = await followingResponse.json();
-    followingCount.value = Array.isArray(followingData) ? followingData.length : 0;
+    followingCount.value = followingData.count || 0;
+    console.log('팔로잉 데이터:', followingData);
   } catch (error) {
     console.error('팔로워 및 팔로잉 수 가져오기 실패:', error);
     followerCount.value = 0;
     followingCount.value = 0;
   }
 };
 
+
+
 const router = useRouter()
 
 const goToFollowPage = () => {

diff --git a/src/components/common/feed/SearchBar.vue b/src/components/common/feed/SearchBar.vue
@@ -1,29 +1,17 @@
 <template>
   <div class="search-modal">
     <div class="search-bar">
-      <input class="textinput"
+      <input
+        class="textinput"
         type="text"
         v-model="email"
         placeholder="친구의 이메일을 입력하세요"
       />
-      <img src="../../../assets/images/plusBtn2.svg" class="search-icon" @click="searchFriend" />
-    </div>
-
-    <div class="search-results" v-if="searched && searchResults.length > 0">
-      <div v-for="user in searchResults" :key="user.id" class="user-item">
-        <span>{{ user.email }}</span>
-        <button
-          :class="{'following': user.isFollowing}"
-          :disabled="user.isFollowing"
-          @click="followUser(user)"
-        >
-          {{ user.isFollowing ? '팔로우' : '팔로우' }}
-        </button>
-      </div>
-    </div>
-
-    <div v-if="searched && searchResults.length === 0" class="no-results">
-      검색 결과가 없습니다.
+      <img
+        src="../../../assets/images/plusBtn2.svg"
+        class="search-icon"
+        @click="followUser"
+      />
     </div>
   </div>
 </template>
@@ -32,66 +20,37 @@
 import { ref } from 'vue'
 
 const email = ref('')
-const searchResults = ref([])
-const searched = ref(false)
-
-const searchFriend = async () => {
-  searched.value = false 
 
-  if (!email.value) {
-    searchResults.value = []
-    searched.value = true
+const followUser = async () => {
+  if (!email.value.trim()) {
+    alert("이메일을 입력하세요.")
     return
   }
 
   try {
     const response = await fetch(
-      `${process.env.VUE_APP_BE_API_URL}/api/follow`, 
+      `${process.env.VUE_APP_BE_API_URL}/api/follows`,
       {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ email: email.value }), 
-        credentials: 'include' 
+        body: JSON.stringify({ email: email.value.trim() }),
+        credentials: 'include',
       }
     )
 
     if (response.ok) {
-      const data = await response.json() 
-      searchResults.value = data.users
-      searched.value = true
+      alert("팔로우가 완료되었습니다.")
+      email.value = '' 
+    } else if (response.status === 404) {
+      alert("사용자를 찾을 수 없습니다.")
     } else {
-      alert("검색 결과가 없습니다.")
-      searchResults.value = []
-      searched.value = true
+      alert("팔로우에 실패했습니다.")
     }
   } catch (error) {
-    alert("API 오류")
-    console.error('API 요청 오류:', error)
-    searched.value = true
-  }
-}
-
-const followUser = async (user) => {
-  try {
-    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follow`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ userId: user.id }), 
-      credentials: 'include'
-    })
-
-    if (response.ok) {
-      user.isFollowing = true
-    } else {
-      alert('팔로우 실패')
-    }
-  } catch (error) {
-    console.error('팔로우 요청 오류:', error)
-    alert('팔로우 요청에 실패했습니다.')
+    console.error("API 요청 오류:", error)
+    alert("API 오류가 발생했습니다.")
   }
 }
 </script>
@@ -112,8 +71,8 @@ const followUser = async (user) => {
 .textinput {
   background-color: white;
   outline: none;
-  border: none; 
-  box-shadow: none; 
+  border: none;
+  box-shadow: none;
 }
 
 .search-bar {
@@ -141,52 +100,4 @@ const followUser = async (user) => {
   height: 24px;
   cursor: pointer;
 }
-
-.search-results {
-  width: 100%;
-  margin-top: 10px;
-  font-family: 'NaR';
-}
-
-.user-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  font-family: 'NaR';
-}
-
-.user-item span {
-  font-size: 14px;
-  color: #333;
-}
-
-.user-item button {
-  background-color: #ff9100;
-  color: #fff;
-  font-family: 'NaR';
-  border: none;
-  border-radius: 15px;
-  padding: 5px 10px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.user-item button.following {
-  background-color: #d9d9d9;
-  color: #666;
-  cursor: default;
-}
-
-.user-item button:not(.following):hover {
-  background-color: #ff7300;
-}
-
-.no-results {
-  color: #878282;
-  font-size: 14px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
 </style>
diff --git a/src/views/feed/AkoStampFollow.vue b/src/views/feed/AkoStampFollow.vue
@@ -17,11 +17,11 @@
 
         <div class="bg-white rounded-2xl mb-4" style="height: 300px; display: flex; justify-content: center;">
           <div class="follower font-NaL" style="width:50%; display: flex; flex-direction: column; align-items: center; margin-top:10px;">
-            <div @click="showFollowers = true; showFollowings = false" style="cursor: pointer;">
+            <div @click="showFollowers = true; showFollowings = false" style="cursor: pointer; z-index: 200;">
               팔로워 {{ followerCount }}
             </div>
             <div class="followerline" :style="{ width: '100%', height: '2px', background: showFollowers ? '#FF7F00' : '#B3B3B3', marginBottom: '15px' }"></div>
-            <ul v-show="showFollowers && followers.length > 0" style="padding: 20; width: 240%; z-index: 200;">
+            <ul v-show="showFollowers && followers.length > 0" style="margin-left: 155px; padding: 20; width: 150%; z-index: 200;">
               <li v-for="follower in followers" :key="follower.followingId" class="flex justify-between items-center mb-4">
                 <span class='font-NaR'>{{ follower.nickname }}</span>
                 <button @click="blockFollower(follower.followingId)" class="followerDelete-btn">삭제</button>
@@ -62,60 +62,107 @@ const showFollowings = ref(false);
 
 async function fetchFollowerCount() {
   try {
-    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/followers`, {
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/followers`, {
       method: 'GET',
       credentials: 'include'
     });
     const data = await response.json();
-    followers.value = data;
-    followerCount.value = data.length > 0 ? data.length : 0; // 배열이 비어있으면 0
+
+    // API 응답 데이터 로그 출력
+    console.log("팔로워 응답 데이터:", data);
+    
+    if (data && Array.isArray(data.follows) && data.follows.length > 0) {
+      followers.value = data.follows.map(follower => ({
+        followingId: follower.followingId,
+        nickname: follower.nickname, // nickname이 제대로 들어오는지 확인
+        email: follower.email,
+      })) || [];
+    } else {
+      followers.value = []; // 데이터가 없으면 빈 배열
+    }
+    followerCount.value = data.count || 0; // 팔로워 수
   } catch (error) {
     console.error('팔로워 목록 가져오기 실패:', error);
-    followerCount.value = 0; // 에러 발생 시 0 설정
+    followerCount.value = 0;
   }
 }
 
+// 팔로잉 데이터 받아오기
 async function fetchFollowingCount() {
   try {
-    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/following`, {
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/following`, {
       method: 'GET',
       credentials: 'include'
     });
     const data = await response.json();
-    followings.value = data;
-    followingCount.value = data.length > 0 ? data.length : 0;
+
+    // API 응답 데이터 로그 출력
+    console.log("팔로잉 응답 데이터:", data);
+    
+    if (data && Array.isArray(data.follows) && data.follows.length > 0) {
+      followings.value = data.follows.map(following => ({
+        followingId: following.followingId,
+        nickname: following.nickname, // nickname이 제대로 들어오는지 확인
+        email: following.email,
+      })) || [];
+    } else {
+      followings.value = []; // 데이터가 없으면 빈 배열
+    }
+    followingCount.value = data.count || 0; // 팔로잉 수
   } catch (error) {
     console.error('팔로잉 목록 가져오기 실패:', error);
-    followingCount.value = 0; 
+    followingCount.value = 0;
   }
 }
 
+
 async function blockFollower(id) {
   try {
-    await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/block/${id}`, {
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/block`, {
       method: 'DELETE',
-      credentials: 'include'
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', 
+      body: JSON.stringify({
+        followerId: id,
+      }),
     });
-    followers.value = followers.value.filter(follower => follower.followingId !== id);
-    followerCount.value = followers.value.length;
+
+    if (response.ok) {
+      followers.value = followers.value.filter(follower => follower.followingId !== id);
+      followerCount.value = followers.value.length;
+    } else {
+      console.error('팔로워 차단 요청 실패:', response.status, response.statusText);
+    }
   } catch (error) {
     console.error('팔로워 차단 실패:', error);
   }
 }
 
+
 async function unfollow(id) {
   try {
-    await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows/${id}`, {
+
+    await fetch(`${process.env.VUE_APP_BE_API_URL}/api/follows`, {
       method: 'DELETE',
-      credentials: 'include'
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        followingId: id
+      }),
     });
+
     followings.value = followings.value.filter(following => following.followingId !== id);
     followingCount.value = followings.value.length;
   } catch (error) {
     console.error('언팔로우 실패:', error);
   }
 }
 
+
 onMounted(() => {
   fetchFollowerCount();
   fetchFollowingCount();
@@ -124,4 +171,4 @@ onMounted(() => {
 const goBack = () => {
   window.history.back();
 };
-</script>
+</script>