+
- {{ nickname }}
- {{ goalContent }}
+ {{ nickname }}
+ {{ goalContent }}
@@ -20,23 +20,117 @@
@@ -55,6 +149,7 @@ const deleteGoal = () => {
display: flex;
width: 100%;
}
+
.name {
border-radius: 10px 0px 0px 10px;
background: #FF7F00;
@@ -70,13 +165,12 @@ const deleteGoal = () => {
word-wrap: break-word;
}
-
-.content{
+.content {
margin-left: 10px;
margin-right: 5px;
padding: 5px 0px;
color: #000;
- width:50%;
+ width: 50%;
font-family: 'NaL';
font-size: 15px;
font-style: normal;
@@ -88,21 +182,20 @@ const deleteGoal = () => {
display: flex;
gap: 10px;
align-items: center;
+ background: none;
+ outline: none;
}
.goal-icons button:hover {
background: none;
}
-
.comment-section {
- margin-top: 8px;
}
-.line{
+.line {
width: 1px;
height: 35px;
background: #D9D9D9;
}
-
diff --git a/src/components/common/feed/SearchBar.vue b/src/components/common/feed/SearchBar.vue
index 360d227..a1b4745 100644
--- a/src/components/common/feed/SearchBar.vue
+++ b/src/components/common/feed/SearchBar.vue
@@ -1,60 +1,192 @@
-
-
- 
+
+
+
diff --git a/src/components/layout/Footer.vue b/src/components/layout/Footer.vue
index 1b8e1a9..a34c020 100644
--- a/src/components/layout/Footer.vue
+++ b/src/components/layout/Footer.vue
@@ -55,7 +55,7 @@ const navItems = ref([
label: 'νΌλ',
icon: new URL('@/assets/Icons/akoming/bottom/feedicon.svg', import.meta.url)
.href,
- route: '/feed/ako-stamp-write'
+ route: '/feed/main'
},
{
label: 'λ§μ΄νμ΄μ§',
diff --git a/src/views/feed/AkoStampFollow.vue b/src/views/feed/AkoStampFollow.vue
index 5682ed5..f997437 100644
--- a/src/views/feed/AkoStampFollow.vue
+++ b/src/views/feed/AkoStampFollow.vue
@@ -1,11 +1,7 @@
+
+ 
+
+
+
+
+
+
+
+ {{ user.email }}
+
+
+
+ κ²μ κ²°κ³Όκ° μμ΅λλ€.
+
-
-
+
+
@@ -16,23 +12,21 @@
src="@/assets/images/back.svg"
alt="μ΄μ "
style="width: 24px; height: 24px; margin-top: 10px; margin-bottom: 20px; cursor: pointer;"
+ @click="goBack"
/>
-
@@ -29,8 +35,43 @@ import MainFooter from '@/components/layout/Footer.vue'
.feed-page {
max-width: 345px;
margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 100px;
}
.component-spacing {
- margin-bottom: 20px; /* μ»΄ν¬λνΈ μ¬μ΄μ κ°κ²© μ‘°μ */
+ margin-bottom: 20px;
}
+.Btn {
+ position: fixed;
+ bottom: 60px;
+ width: 100%;
+ max-width: 395px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ z-index: 10;
+}
+.plusMentBtn {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 87px;
+ border-radius: 50px 50px 0px 0px;
+ background: #FFF;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+ color: #FF7F00;
+ text-align: center;
+ font-family: 'NaR';
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 32px;
+ text-decoration: none;
+}
+
νλ‘μ {{ followerCount }}
-
-
+ -
-
- - {{ follower.nickname }} - - -
-
+
- + {{ follower.nickname }} + + +
@@ -40,8 +34,7 @@
νλ‘μ {{ followingCount }}
-
- -
+
-
{{ following.nickname }}
@@ -63,86 +56,73 @@ const followerCount = ref(0);
const followingCount = ref(0);
const followers = ref([]);
const followings = ref([]);
-const showFollowers = ref(true); // νλ‘μ 리μ€νΈ 보μ΄κΈ°
-const showFollowings = ref(false); // νλ‘μ 리μ€νΈ 보μ΄κΈ°
+const showFollowers = ref(true);
+const showFollowings = ref(false);
-// νλ‘μ λ° νλ‘μ μ κ°μ Έμ€κΈ° (μμ λ°μ΄ν° μ¬μ©)
-function fetchFollowerCount() {
- // μμ νλ‘μ λ°μ΄ν°
- followers.value = [
- { followingId: 1, nickname: 'λ―Έλ', email: 'follower1@example.com' },
- { followingId: 2, nickname: 'ν λ', email: 'follower2@example.com' },
- { followingId: 3, nickname: 'μνλ', email: 'follower3@example.com' },
- ];
- followerCount.value = followers.value.length;
+const API_URL = `${process.env.VUE_APP_BE_API_URL}/api`;
+
+async function fetchFollowerCount() {
+ try {
+ const response = await fetch(`${API_URL}/followers`, {
+ method: 'GET',
+ credentials: 'include'
+ });
+ const data = await response.json();
+ followers.value = data;
+ followerCount.value = data.length > 0 ? data.length : 0; // λ°°μ΄μ΄ λΉμ΄μμΌλ©΄ 0
+ } catch (error) {
+ console.error('νλ‘μ λͺ©λ‘ κ°μ Έμ€κΈ° μ€ν¨:', error);
+ followerCount.value = 0; // μλ¬ λ°μ μ 0 μ€μ
+ }
}
-function fetchFollowingCount() {
- // μμ νλ‘μ λ°μ΄ν°
- followings.value = [
- { followingId: 4, nickname: 'λκ΅μ΄', email: 'following1@example.com' },
- { followingId: 5, nickname: 'λ―Έλ', email: 'following2@example.com' },
- { followingId: 6, nickname: 'λλμ΄', email: 'following3@example.com' },
- ];
- followingCount.value = followings.value.length;
+async function fetchFollowingCount() {
+ try {
+ const response = await fetch(`${API_URL}/following`, {
+ method: 'GET',
+ credentials: 'include'
+ });
+ const data = await response.json();
+ followings.value = data;
+ followingCount.value = data.length > 0 ? data.length : 0;
+ } catch (error) {
+ console.error('νλ‘μ λͺ©λ‘ κ°μ Έμ€κΈ° μ€ν¨:', error);
+ followingCount.value = 0;
+ }
}
-// νλ‘μ μ°¨λ¨
-function blockFollower(id) {
- const index = followers.value.findIndex(follower => follower.followingId === id);
- if (index !== -1) {
- followers.value.splice(index, 1);
- followerCount.value--;
+async function blockFollower(id) {
+ try {
+ await fetch(`${API_URL}/follows/block/${id}`, {
+ method: 'DELETE',
+ credentials: 'include'
+ });
+ followers.value = followers.value.filter(follower => follower.followingId !== id);
+ followerCount.value = followers.value.length;
+ } catch (error) {
+ console.error('νλ‘μ μ°¨λ¨ μ€ν¨:', error);
}
}
-// νλ‘μ° μ·¨μ
-function unfollow(id) {
- followings.value = followings.value.filter(following => following.followingId !== id);
- followingCount.value--;
+async function unfollow(id) {
+ try {
+ await fetch(`${API_URL}/follows/${id}`, {
+ method: 'DELETE',
+ credentials: 'include'
+ });
+ followings.value = followings.value.filter(following => following.followingId !== id);
+ followingCount.value = followings.value.length;
+ } catch (error) {
+ console.error('μΈνλ‘μ° μ€ν¨:', error);
+ }
}
onMounted(() => {
fetchFollowerCount();
fetchFollowingCount();
});
-
-
-
+const goBack = () => {
+ window.history.back();
+};
+
\ No newline at end of file
diff --git a/src/views/feed/AkoStampWriteView.vue b/src/views/feed/AkoStampWriteView.vue
index a039777..9b5ce30 100644
--- a/src/views/feed/AkoStampWriteView.vue
+++ b/src/views/feed/AkoStampWriteView.vue
@@ -1,4 +1,3 @@
-
@@ -98,8 +71,7 @@ diff --git a/src/views/feed/FeedPageStyle.css b/src/views/feed/FeedPageStyle.css index 3571281..b24048b 100644 --- a/src/views/feed/FeedPageStyle.css +++ b/src/views/feed/FeedPageStyle.css @@ -1,3 +1,6 @@ +/* src/assets/styles/FeedPageStyle.css */ + +/* μμ μ€νμΌ */ .min-h-screen { background-color: #fff9f2; font-family: 'Nanum Square Round', sans-serif; @@ -92,3 +95,41 @@ h1 { color: #666666; margin-bottom: 0.5rem; } + +/* Button Styles */ +.unfollow-button { + font-size: 12.5px; + width: 70px; + height: 28px; + margin-left: 8px; + font-family: 'NaR'; + border-radius: 20px; + color: white; + font-style: normal; + font-weight: 300; + line-height: normal; + background: #FF7F00; + cursor: pointer; + transition: background-color 0.3s; +} + +.unfollow-button:hover, +.followerDelete-btn:hover { + background-color: #E0E0E0; +} + +.followerDelete-btn { + font-size: 15px; + width: 70px; + height: 28px; + margin-left: 8px; + font-family: 'NaR'; + border-radius: 20px; + color: white; + font-style: normal; + font-weight: 300; + line-height: normal; + background: #FF7F00; + cursor: pointer; + transition: background-color 0.3s; +} diff --git a/src/views/feed/MainFeedPage.vue b/src/views/feed/MainFeedPage.vue index f3c018e..17f5926 100644 --- a/src/views/feed/MainFeedPage.vue +++ b/src/views/feed/MainFeedPage.vue @@ -7,6 +7,12 @@-
{{ currentDate[0] }}
{{ currentDate[1] }}
@@ -43,9 +31,7 @@- {{ - nickname - }} + {{ nickname }} λ,
@@ -59,24 +45,11 @@ maxlength="50" rows="4" class="px-4 text-center mt-14 bg-white font-NaL border-none text-sm focus:outline-none transition duration-200 resize-none" - style=" - width: 260px; - padding: 0 10px; - background: linear-gradient( - to bottom, - transparent 19px, - rgba(169, 169, 169, 0.5) 19px, - rgba(169, 169, 169, 0.5) 20px, - transparent 20px - ); - background-size: 100% 20px; - " + style="width: 260px; padding: 0 10px; background: linear-gradient(to bottom, transparent 19px, rgba(169, 169, 169, 0.5) 19px, rgba(169, 169, 169, 0.5) 20px, transparent 20px); background-size: 100% 20px;" >
μ€λλ μ±μ₯ν΄μ!+
{{ userText.length }}/50
+ ++ μμ½μκ΅ μμ±νκΈ° + +
+
{{ comment.content }}
+