From e0a0a9108e1643f7f6b9c184238e9f6982677eba Mon Sep 17 00:00:00 2001 From: Minn-Choi Date: Mon, 2 Dec 2024 14:54:39 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20api=20=EC=97=B0=EA=B2=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/feed/FollowStats.vue | 12 +- src/components/common/feed/SearchBar.vue | 133 ++++----------------- src/views/feed/AkoStampFollow.vue | 81 ++++++++++--- 3 files changed, 94 insertions(+), 132 deletions(-) diff --git a/src/components/common/feed/FollowStats.vue b/src/components/common/feed/FollowStats.vue index 1a73792..aeceb3a 100644 --- a/src/components/common/feed/FollowStats.vue +++ b/src/components/common/feed/FollowStats.vue @@ -30,19 +30,21 @@ 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; @@ -50,6 +52,8 @@ const fetchFollowCounts = async () => { } }; + + const router = useRouter() const goToFollowPage = () => { diff --git a/src/components/common/feed/SearchBar.vue b/src/components/common/feed/SearchBar.vue index a1b4745..68a14a2 100644 --- a/src/components/common/feed/SearchBar.vue +++ b/src/components/common/feed/SearchBar.vue @@ -1,29 +1,17 @@ @@ -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 오류가 발생했습니다.") } } @@ -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; -} diff --git a/src/views/feed/AkoStampFollow.vue b/src/views/feed/AkoStampFollow.vue index 3f6b508..f653642 100644 --- a/src/views/feed/AkoStampFollow.vue +++ b/src/views/feed/AkoStampFollow.vue @@ -17,11 +17,11 @@
-
+
팔로워 {{ followerCount }}
-
    +
    • {{ follower.nickname }} @@ -62,53 +62,99 @@ 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) { @@ -116,6 +162,7 @@ async function unfollow(id) { } } + onMounted(() => { fetchFollowerCount(); fetchFollowingCount(); @@ -124,4 +171,4 @@ onMounted(() => { const goBack = () => { window.history.back(); }; - \ No newline at end of file +