Skip to content

Commit

Permalink
fix: api 연결 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@Minn-Choi
Minn-Choi committed Dec 2, 2024
1 parent 8a752b5 commit e0a0a91
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 132 deletions.
12 changes: 8 additions & 4 deletions src/components/common/feed/FollowStats.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
133 changes: 22 additions & 111 deletions src/components/common/feed/SearchBar.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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 {
Expand Down Expand Up @@ -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>
81 changes: 64 additions & 17 deletions src/views/feed/AkoStampFollow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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();
Expand All @@ -124,4 +171,4 @@ onMounted(() => {
const goBack = () => {
window.history.back();
};
</script>
</script>

0 comments on commit e0a0a91

Please sign in to comment.