From 39cbb5beaa36a2940dec037e85ad80393b318934 Mon Sep 17 00:00:00 2001
From: Minn-Choi <min031106@dgu.ac.kr>
Date: Wed, 20 Nov 2024 16:54:31 +0900
Subject: [PATCH 1/5] =?UTF-8?q?[Design]=20#6=20-=20=EC=95=84=EC=BD=94?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0=20=EB=B0=8F=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           |   1 -
 src/assets/images/plusBtn.svg               |  12 ++
 src/components/common/feed/CommentInput.vue | 113 +++++++++++--
 src/components/common/feed/CommentList.vue  |  40 ++++-
 src/components/common/feed/FollowStats.vue  |  14 +-
 src/components/common/feed/FriendGoal.vue   |   2 +-
 src/components/common/feed/MyGoal.vue       |   3 +-
 src/components/common/feed/SearchBar.vue    | 171 ++++++++++++++++----
 src/components/layout/Footer.vue            |   2 +-
 src/views/feed/AkoStampFollow.vue           |  18 ++-
 src/views/feed/AkoStampWriteView.vue        |  28 +++-
 src/views/feed/MainFeedPage.vue             |  43 ++++-
 12 files changed, 377 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/images/plusBtn.svg

diff --git a/package-lock.json b/package-lock.json
index f810195..bd45c60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4076,7 +4076,6 @@
       "version": "1.7.7",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
       "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
-      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/src/assets/images/plusBtn.svg b/src/assets/images/plusBtn.svg
new file mode 100644
index 0000000..7256f92
--- /dev/null
+++ b/src/assets/images/plusBtn.svg
@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_638_910)">
+<path d="M19.9999 33.6004C12.4799 33.6004 6.3999 27.5204 6.3999 20.0004C6.3999 12.4804 12.4799 6.40039 19.9999 6.40039C27.5199 6.40039 33.5999 12.4804 33.5999 20.0004C33.5999 27.5204 27.5199 33.6004 19.9999 33.6004ZM19.9999 8.00039C13.3599 8.00039 7.9999 13.3604 7.9999 20.0004C7.9999 26.6404 13.3599 32.0004 19.9999 32.0004C26.6399 32.0004 31.9999 26.6404 31.9999 20.0004C31.9999 13.3604 26.6399 8.00039 19.9999 8.00039Z" fill="#FF7F00"/>
+<path d="M12.7998 19.2002H27.1998V20.8002H12.7998V19.2002Z" fill="#FF7F00"/>
+<path d="M19.2002 12.7998H20.8002V27.1998H19.2002V12.7998Z" fill="#FF7F00"/>
+</g>
+<defs>
+<clipPath id="clip0_638_910">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/common/feed/CommentInput.vue b/src/components/common/feed/CommentInput.vue
index 0c39de9..6efc723 100644
--- a/src/components/common/feed/CommentInput.vue
+++ b/src/components/common/feed/CommentInput.vue
@@ -1,31 +1,124 @@
 <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 axios from 'axios'
 
-const selectedEmoji = ref('')
-const comment = ref('')
+const selectedEmoji = ref('') // 이모지 선택 상태
+const comment = ref('') // 댓글 내용
+const goalId = '123' // 목표 ID (수정 필요: 부모 컴포넌트에서 전달)
 
-const submitComment = () => {
-  /* 댓글 제출 */
+// 이모지를 숫자로 매핑하는 객체
+const emojiMap = {
+  '😊': 0,
+  '👍': 1,
+  '❤️': 2,
+  '😎': 3,
+  '😍': 4
 }
+
+// 댓글 제출 함수
+const submitComment = async () => {
+  if (!comment.value.trim()) {
+    alert('댓글을 입력하세요.')
+    return
+  }
+
+  try {
+    const token = localStorage.getItem('authToken') // 저장된 토큰 가져오기
+    if (!token) {
+      alert('로그인이 필요합니다.')
+      return
+    }
+
+    // 이모지를 숫자로 변환
+    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1; // 선택된 이모지가 없으면 -1로 처리
+
+    const payload = {
+      emoji: emojiNumber, // 숫자로 된 이모지 값
+      content: comment.value,
+    }
+
+    // 요청 전에 콘솔로 값 확인
+    console.log("요청할 Payload:", payload);
+
+    const response = await axios.post(
+      `/api/goals/${goalId}/comments`,
+      payload,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`, // 인증 헤더 추가
+        },
+      }
+    )
+
+    if (response.status === 201) {
+      alert('댓글이 성공적으로 추가되었습니다!')
+      selectedEmoji.value = ''
+      comment.value = ''
+    }
+  } 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>
+</style>
\ No newline at end of file
diff --git a/src/components/common/feed/CommentList.vue b/src/components/common/feed/CommentList.vue
index 78083e4..4f663b5 100644
--- a/src/components/common/feed/CommentList.vue
+++ b/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>
diff --git a/src/components/common/feed/FollowStats.vue b/src/components/common/feed/FollowStats.vue
index 6ccbeef..da33264 100644
--- a/src/components/common/feed/FollowStats.vue
+++ b/src/components/common/feed/FollowStats.vue
@@ -6,13 +6,14 @@
       <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 { useRouter } from 'vue-router'
 
 const followerCount = ref(0) // API에서 받아오는 팔로워 수
 const followingCount = ref(0) // API에서 받아오는 팔로잉 수
@@ -27,8 +28,10 @@ const formattedDate = computed(() => {
   return `${year} . ${month} . ${day}`;
 });
 
+const router = useRouter()
+
 const goToFollowPage = () => {
-  // 팔로우 관리 페이지로 이동하는 함수
+  router.push('/feed/ako-stamp-follow') // 팔로우 관리 페이지로 이동
 }
 </script>
 
@@ -36,6 +39,7 @@ const goToFollowPage = () => {
 .follow-stats {
   display: flex;
   align-items: center;
+  width: 100%;
   height: 37px;
   padding: 8px;
   border-radius: 10px;
@@ -84,4 +88,8 @@ const goToFollowPage = () => {
   font-weight: 400;
   line-height: normal;
 }
-</style>
+
+.na{
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/feed/FriendGoal.vue b/src/components/common/feed/FriendGoal.vue
index 9981b2f..134dd90 100644
--- a/src/components/common/feed/FriendGoal.vue
+++ b/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 = () => {
diff --git a/src/components/common/feed/MyGoal.vue b/src/components/common/feed/MyGoal.vue
index 07af965..c7f3725 100644
--- a/src/components/common/feed/MyGoal.vue
+++ b/src/components/common/feed/MyGoal.vue
@@ -25,7 +25,7 @@ import CommentInput from './CommentInput.vue'
 import CommentList from './CommentList.vue'
 
 const nickname = ref('민달팽럴')
-const goalContent = ref('포기하지 않고 긍정적으로 오늘의 할일을 마무리하자냥냥걸')
+const goalContent = ref('포기하지 않고 긍정적으로 오늘의 할일을 마무리하자')
 const showCommentSection = ref(false)
 
 const toggleCommentSection = () => {
@@ -96,7 +96,6 @@ const deleteGoal = () => {
 
 
 .comment-section {
-  margin-top: 8px;
 }
 
 .line{
diff --git a/src/components/common/feed/SearchBar.vue b/src/components/common/feed/SearchBar.vue
index 360d227..f8d0de4 100644
--- a/src/components/common/feed/SearchBar.vue
+++ b/src/components/common/feed/SearchBar.vue
@@ -1,60 +1,165 @@
 <template>
-  <div class="search-bar">
-    <input
-      type="text"
-      v-model="nickname"
-      placeholder="친구 닉네임 검색"
-      @input="searchFriend"
-    />
-    <img src="../../../assets/images/search.svg" class="search-icon">
+  <div class="search-modal">
+    <div class="search-bar">
+      <input class="textinput"
+        type="text"
+        v-model="email"
+        placeholder="친구의 이메일을 입력하세요"
+      />
+      <img src="../../../assets/images/search.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">
+      검색 결과가 없습니다.
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 
-const nickname = ref('')
+// 임시 데이터
+const email = ref('')
+const allUsers = [
+  { id: 1, nickname: '홍길동', email: 'hong', isFollowing: false },
+  { id: 2, nickname: '김철수', email: 'kim', isFollowing: true },
+  { id: 3, nickname: '박영희', email: 'park@dgu.ac.kr', isFollowing: false },
+  { id: 4, nickname: '이민호', email: 'lee@example.com', isFollowing: false },
+  { id: 5, nickname: '최지우', email: 'choi@example.com', isFollowing: true },
+  { id: 6, nickname: '장동건', email: 'jang@example.com', isFollowing: false },
+  { id: 7, nickname: '송혜교', email: 'pong@example.com', isFollowing: true },
+  { id: 8, nickname: '박보검', email: 'parkbo@dgu.ac.kr', isFollowing: true }
+]
+const searchResults = ref([])
+const searched = ref(false)
+
+const searchFriend = async () => {
+  searched.value = false // 검색 시작 전에 결과를 비워두기 위해 false로 설정
+
+  // 이메일 입력이 없으면 결과를 초기화하고 반환
+  if (!email.value) {
+    searchResults.value = []
+    searched.value = true
+    return
+  }
 
-const searchFriend = () => {
-  // 친구 검색 로직 추가
+  // 이메일이 있을 경우 해당 이메일을 가진 사용자만 필터링 (완전 일치 검색)
+  searchResults.value = allUsers.filter(user => user.email === email.value)
+  searched.value = true // 검색 완료 후 결과 표시
+}
+
+
+const followUser = async (user) => {
+  user.isFollowing = true
 }
 </script>
 
 <style scoped>
-.search-bar {
-  height: 33px;
+.search-modal {
+  width: 100%;
+  padding: 0 20px;
   border-radius: 10px;
-  border: 1px solid #D9D9D9;
-  background: #FFF;
-  font-family: 'NaL';
-  box-shadow: none;
-  display: flex; /* 플렉스 박스를 사용하여 아이템을 가로로 정렬 */
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap:3px;
+  font-family: 'NaR';
+}
+
+.textinput {
+  background-color: white;
+  outline: none;
+  border: none; 
+  box-shadow: none; 
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #FFFFFF;
+  padding: 5px;
 }
 
 .search-bar input {
-  height: 32px;
-  width: 90%;
-  border-radius: 10px;
-  background: #FFF;
-  border: 1px solid #FFFFFF;
-  font-family: 'NaL';
-  box-shadow: none;
-  padding-left: 8px;
+  flex: 1;
+  border: none;
+  outline: none;
+  padding: 5px;
+  font-size: 14px;
 }
 
 .search-bar input::placeholder {
   color: #878282;
-  text-align: center;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 32px;
 }
 
-.search-icon{
+.search-icon {
+  width: 20px;
+  height: 20px;
   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/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..3c004ad 100644
--- a/src/views/feed/AkoStampFollow.vue
+++ b/src/views/feed/AkoStampFollow.vue
@@ -16,6 +16,7 @@
           src="@/assets/images/back.svg"
           alt="이전"
           style="width: 24px; height: 24px; margin-top: 10px; margin-bottom: 20px; cursor: pointer;"
+          @click="goBack"
         />
 
         <div class="bg-white rounded-2xl mb-4" style="height: 300px; display: flex; justify-content: center;">
@@ -57,18 +58,17 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import Footer from '@/components/layout/Footer.vue';
 
 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' },
@@ -78,7 +78,6 @@ function fetchFollowerCount() {
 }
 
 function fetchFollowingCount() {
-  // 임시 팔로잉 데이터
   followings.value = [
     { followingId: 4, nickname: '동국이', email: 'following1@example.com' },
     { followingId: 5, nickname: '미니', email: 'following2@example.com' },
@@ -87,7 +86,6 @@ function fetchFollowingCount() {
   followingCount.value = followings.value.length;
 }
 
-// 팔로워 차단
 function blockFollower(id) {
   const index = followers.value.findIndex(follower => follower.followingId === id);
   if (index !== -1) {
@@ -96,12 +94,16 @@ function blockFollower(id) {
   }
 }
 
-// 팔로우 취소
 function unfollow(id) {
   followings.value = followings.value.filter(following => following.followingId !== id);
   followingCount.value--;
 }
 
+const router = useRouter();
+const goBack = () => {
+  router.back(); 
+};
+
 onMounted(() => {
   fetchFollowerCount();
   fetchFollowingCount();
@@ -145,4 +147,4 @@ onMounted(() => {
   cursor: pointer;
   transition: background-color 0.3s;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/feed/AkoStampWriteView.vue b/src/views/feed/AkoStampWriteView.vue
index a039777..27c0deb 100644
--- a/src/views/feed/AkoStampWriteView.vue
+++ b/src/views/feed/AkoStampWriteView.vue
@@ -1,4 +1,3 @@
-<!-- 로그인하고 id값 불러오는 것과 등록 테스트 해야함 -->
 <template>
   <div class="min-h-screen bg-[#FFF9F2] font-pretendard flex justify-center">
     <div
@@ -16,6 +15,7 @@
         <img
           src="@/assets/images/back.svg"
           alt="이전"
+          @click="goBack" 
           style="
             width: 24px;
             height: 24px;
@@ -118,21 +118,41 @@ const userId = 1
 const registerGoal = async () => {
   if (userText.value.trim() !== '') {
     try {
+      const token = localStorage.getItem('authToken') // 저장된 토큰을 가져옵니다.
+      if (!token) {
+        alert('로그인이 필요합니다.')
+        return
+      }
+
       const response = await axios.post(
         `${process.env.VUE_APP_BE_API_URL}/api/goals`,
         {
-          userId: userId,
-          content: userText.value
+          content: userText.value // 전송할 데이터
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${token}` // 토큰을 Authorization 헤더에 추가
+          }
         }
       )
+
       alert(`목표가 등록되었습니다: ${response.data.content}`)
       userText.value = ''
     } catch (error) {
       console.error('목표 등록 오류:', error)
-      alert('목표 등록에 실패했습니다. 다시 시도해주세요.')
+      if (error.response && error.response.status === 401) {
+        alert('인증에 실패했습니다. 다시 로그인해주세요.')
+      } else {
+        alert('목표 등록에 실패했습니다. 다시 시도해주세요.')
+      }
     }
   } else {
     alert('문구를 입력해주세요.')
   }
 }
+
+// 이전 페이지로 돌아가는 함수
+const goBack = () => {
+  window.history.back()
+}
 </script>
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 @@
         <FollowStats class="component-spacing" />
         <MyGoal class="component-spacing" />
         <FriendGoal class="component-spacing" />
+        <div class='Btn'>
+          <router-link to="/feed/ako-stamp-write" class="plusMentBtn">
+            아코자국 작성하기
+            <img src="@/assets/images/plusBtn.svg" alt="플러스버튼" />
+          </router-link>
+        </div>
         <MainFooter />
       </div>
     </div>
@@ -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;
+}
+
 </style>

From e98113bcf6209c514d78f90bb64f18e3367d5a91 Mon Sep 17 00:00:00 2001
From: Minn-Choi <min031106@dgu.ac.kr>
Date: Fri, 29 Nov 2024 15:08:47 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         | 379 +++++++++++++++++++++-
 package.json                              |   2 +
 src/assets/images/plusBtn2.svg            |   5 +
 src/components/common/feed/FriendGoal.vue |   1 +
 src/components/common/feed/MyGoal.vue     |   2 +
 src/components/common/feed/SearchBar.vue  |  25 +-
 src/views/feed/AkoStampFollow.vue         |  59 +---
 src/views/feed/FeedPageStyle.css          |  41 +++
 8 files changed, 452 insertions(+), 62 deletions(-)
 create mode 100644 src/assets/images/plusBtn2.svg

diff --git a/package-lock.json b/package-lock.json
index bd45c60..74666ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,10 +17,12 @@
         "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",
         "vue-router": "^4.0.3",
+        "vue-styled-components": "^1.6.0",
         "vue-svg-loader": "^0.16.0",
         "vuex": "^4.0.0"
       },
@@ -1737,6 +1739,24 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2690,6 +2710,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3993,6 +4018,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
     "node_modules/async": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
@@ -4320,6 +4350,11 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4490,6 +4525,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5307,6 +5350,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -5320,6 +5371,14 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -5488,6 +5547,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "license": "MIT"
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -6153,6 +6222,25 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -7191,6 +7279,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.4.tgz",
+      "integrity": "sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg=="
+    },
     "node_modules/fast-uri": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.2.tgz",
@@ -7221,6 +7314,26 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "dependencies": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      }
+    },
+    "node_modules/fbjs/node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+    },
     "node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -7654,6 +7767,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glamor": {
+      "version": "2.20.40",
+      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
+      "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
+      "dependencies": {
+        "fbjs": "^0.8.12",
+        "inline-style-prefixer": "^3.0.6",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.10",
+        "through": "^2.3.8"
+      }
+    },
+    "node_modules/glamor/node_modules/css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
+    "node_modules/glamor/node_modules/inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
+      "dependencies": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -8161,6 +8304,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8269,6 +8417,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -8628,7 +8785,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -8734,12 +8890,29 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "dependencies": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
+    "node_modules/isomorphic-fetch/node_modules/node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "dependencies": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -8944,7 +9117,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -9215,6 +9387,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
     "node_modules/lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -9257,6 +9434,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.zipobject": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/lodash.zipobject/-/lodash.zipobject-4.1.3.tgz",
+      "integrity": "sha512-A9SzX4hMKWS25MyalwcOnNoplyHbkNVsjidhTp8ru0Sj23wY9GWBKS8gAIGDSAqeWjIjvE4KBEl24XXAs+v4wQ=="
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -9476,6 +9658,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -11415,7 +11608,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -11506,6 +11698,24 @@
         "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -11634,6 +11844,36 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -12182,6 +12422,15 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "license": "ISC"
     },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -12423,6 +12672,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -12442,6 +12696,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12903,6 +13162,65 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -12920,6 +13238,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -13493,6 +13816,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -13680,6 +14008,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -14180,6 +14533,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-styled-components": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vue-styled-components/-/vue-styled-components-1.6.0.tgz",
+      "integrity": "sha512-FtkR9GsbAl8u8uIYc8uV/8uE5NRfgQgeHUexcnXv6uOyVf9UOo70GkkKcCwhmwwXtiLfyGhzjdgsKbCrIv66oA==",
+      "dependencies": {
+        "glamor": "^2.20.40",
+        "inline-style-prefixer": "^6.0.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.zipobject": "^4.1.3",
+        "stylis": "^3.5.4"
+      }
+    },
+    "node_modules/vue-styled-components/node_modules/stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
     "node_modules/vue-svg-loader": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
@@ -14711,7 +15081,6 @@
       "version": "3.6.20",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
       "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/whatwg-url": {
diff --git a/package.json b/package.json
index 1101089..e799d03 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,12 @@
     "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",
     "vue-router": "^4.0.3",
+    "vue-styled-components": "^1.6.0",
     "vue-svg-loader": "^0.16.0",
     "vuex": "^4.0.0"
   },
diff --git a/src/assets/images/plusBtn2.svg b/src/assets/images/plusBtn2.svg
new file mode 100644
index 0000000..f3c9224
--- /dev/null
+++ b/src/assets/images/plusBtn2.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 8V16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 12H16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/common/feed/FriendGoal.vue b/src/components/common/feed/FriendGoal.vue
index 134dd90..0a12c27 100644
--- a/src/components/common/feed/FriendGoal.vue
+++ b/src/components/common/feed/FriendGoal.vue
@@ -72,5 +72,6 @@ const toggleCommentSection = () => {
 
 .btn button:hover {
   background: none;
+  outline: none;
 }
 </style>
diff --git a/src/components/common/feed/MyGoal.vue b/src/components/common/feed/MyGoal.vue
index c7f3725..9c79f07 100644
--- a/src/components/common/feed/MyGoal.vue
+++ b/src/components/common/feed/MyGoal.vue
@@ -88,6 +88,8 @@ const deleteGoal = () => {
   display: flex;
   gap: 10px;
   align-items: center;
+  background: none;
+  outline: none;
 }
 
 .goal-icons button:hover {
diff --git a/src/components/common/feed/SearchBar.vue b/src/components/common/feed/SearchBar.vue
index f8d0de4..d6eaf2c 100644
--- a/src/components/common/feed/SearchBar.vue
+++ b/src/components/common/feed/SearchBar.vue
@@ -6,7 +6,7 @@
         v-model="email"
         placeholder="친구의 이메일을 입력하세요"
       />
-      <img src="../../../assets/images/search.svg" class="search-icon" @click="searchFriend" />
+      <img src="../../../assets/images/plusBtn2.svg" class="search-icon" @click="searchFriend" />
     </div>
 
     <!-- 검색 결과 리스트 -->
@@ -32,6 +32,7 @@
 
 <script setup>
 import { ref } from 'vue'
+import axios from 'axios' // axios import
 
 // 임시 데이터
 const email = ref('')
@@ -58,11 +59,21 @@ const searchFriend = async () => {
     return
   }
 
-  // 이메일이 있을 경우 해당 이메일을 가진 사용자만 필터링 (완전 일치 검색)
-  searchResults.value = allUsers.filter(user => user.email === email.value)
-  searched.value = true // 검색 완료 후 결과 표시
-}
+  try {
+    // 이메일을 서버로 보내는 POST 요청
+    const response = await axios.post('/api/follows', { email: email.value })
+    alert("팔로우 되었습니다")
+    console.log('응답:', response.data)
 
+    // 응답 결과에 따라 검색을 진행 (예시로 서버 응답으로 검색 결과 사용)
+    searchResults.value = allUsers.filter(user => user.email === email.value)
+    searched.value = true
+  } catch (error) {
+    alert("API 오류")
+    console.error('API 요청 오류:', error)
+    searched.value = true
+  }
+}
 
 const followUser = async (user) => {
   user.isFollowing = true
@@ -110,8 +121,8 @@ const followUser = async (user) => {
 }
 
 .search-icon {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
 }
 
diff --git a/src/views/feed/AkoStampFollow.vue b/src/views/feed/AkoStampFollow.vue
index 3c004ad..5309b6f 100644
--- a/src/views/feed/AkoStampFollow.vue
+++ b/src/views/feed/AkoStampFollow.vue
@@ -58,8 +58,8 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
 import Footer from '@/components/layout/Footer.vue';
+import './FeedPageStyle.css';
 
 const followerCount = ref(0);
 const followingCount = ref(0);
@@ -88,63 +88,22 @@ function fetchFollowingCount() {
 
 function blockFollower(id) {
   const index = followers.value.findIndex(follower => follower.followingId === id);
-  if (index !== -1) {
-    followers.value.splice(index, 1);
-    followerCount.value--;
-  }
+  if (index !== -1) followers.value.splice(index, 1);
+  followerCount.value = followers.value.length;
 }
 
 function unfollow(id) {
-  followings.value = followings.value.filter(following => following.followingId !== id);
-  followingCount.value--;
+  const index = followings.value.findIndex(following => following.followingId === id);
+  if (index !== -1) followings.value.splice(index, 1);
+  followingCount.value = followings.value.length;
 }
 
-const router = useRouter();
-const goBack = () => {
-  router.back(); 
-};
-
 onMounted(() => {
   fetchFollowerCount();
   fetchFollowingCount();
 });
-</script>
 
-<style scoped>
-.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;
+const goBack = () => {
+  window.history.back()
 }
-</style>
\ No newline at end of file
+</script>
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;
+}

From f00b2cafb5a18b70974d87294d780bc495dc2518 Mon Sep 17 00:00:00 2001
From: Minn-Choi <min031106@dgu.ac.kr>
Date: Fri, 29 Nov 2024 22:02:15 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/feed/FollowStats.vue |  43 ++++++--
 src/components/common/feed/SearchBar.vue   |  66 +++++++-----
 src/views/feed/AkoStampFollow.vue          | 107 +++++++++++--------
 src/views/feed/AkoStampWriteView.vue       | 113 +++++++++++----------
 4 files changed, 198 insertions(+), 131 deletions(-)

diff --git a/src/components/common/feed/FollowStats.vue b/src/components/common/feed/FollowStats.vue
index da33264..11b1547 100644
--- a/src/components/common/feed/FollowStats.vue
+++ b/src/components/common/feed/FollowStats.vue
@@ -12,27 +12,54 @@
 </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') // 팔로우 관리 페이지로 이동
+  router.push('/feed/ako-stamp-follow') 
 }
+
+onMounted(() => {
+  fetchFollowCounts(); 
+});
 </script>
 
 <style scoped>
@@ -49,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;
@@ -92,4 +119,4 @@ const goToFollowPage = () => {
 .na{
   cursor: pointer;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/common/feed/SearchBar.vue b/src/components/common/feed/SearchBar.vue
index d6eaf2c..a1b4745 100644
--- a/src/components/common/feed/SearchBar.vue
+++ b/src/components/common/feed/SearchBar.vue
@@ -9,7 +9,6 @@
       <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>
@@ -23,7 +22,6 @@
       </div>
     </div>
 
-    <!-- 검색 결과가 없을 경우 -->
     <div v-if="searched && searchResults.length === 0" class="no-results">
       검색 결과가 없습니다.
     </div>
@@ -32,27 +30,14 @@
 
 <script setup>
 import { ref } from 'vue'
-import axios from 'axios' // axios import
 
-// 임시 데이터
 const email = ref('')
-const allUsers = [
-  { id: 1, nickname: '홍길동', email: 'hong', isFollowing: false },
-  { id: 2, nickname: '김철수', email: 'kim', isFollowing: true },
-  { id: 3, nickname: '박영희', email: 'park@dgu.ac.kr', isFollowing: false },
-  { id: 4, nickname: '이민호', email: 'lee@example.com', isFollowing: false },
-  { id: 5, nickname: '최지우', email: 'choi@example.com', isFollowing: true },
-  { id: 6, nickname: '장동건', email: 'jang@example.com', isFollowing: false },
-  { id: 7, nickname: '송혜교', email: 'pong@example.com', isFollowing: true },
-  { id: 8, nickname: '박보검', email: 'parkbo@dgu.ac.kr', isFollowing: true }
-]
 const searchResults = ref([])
 const searched = ref(false)
 
 const searchFriend = async () => {
-  searched.value = false // 검색 시작 전에 결과를 비워두기 위해 false로 설정
+  searched.value = false 
 
-  // 이메일 입력이 없으면 결과를 초기화하고 반환
   if (!email.value) {
     searchResults.value = []
     searched.value = true
@@ -60,14 +45,27 @@ const searchFriend = async () => {
   }
 
   try {
-    // 이메일을 서버로 보내는 POST 요청
-    const response = await axios.post('/api/follows', { email: email.value })
-    alert("팔로우 되었습니다")
-    console.log('응답:', response.data)
-
-    // 응답 결과에 따라 검색을 진행 (예시로 서버 응답으로 검색 결과 사용)
-    searchResults.value = allUsers.filter(user => user.email === email.value)
-    searched.value = true
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/follow`, 
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email: email.value }), 
+        credentials: 'include' 
+      }
+    )
+
+    if (response.ok) {
+      const data = await response.json() 
+      searchResults.value = data.users
+      searched.value = true
+    } else {
+      alert("검색 결과가 없습니다.")
+      searchResults.value = []
+      searched.value = true
+    }
   } catch (error) {
     alert("API 오류")
     console.error('API 요청 오류:', error)
@@ -76,7 +74,25 @@ const searchFriend = async () => {
 }
 
 const followUser = async (user) => {
-  user.isFollowing = true
+  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('팔로우 요청에 실패했습니다.')
+  }
 }
 </script>
 
diff --git a/src/views/feed/AkoStampFollow.vue b/src/views/feed/AkoStampFollow.vue
index 5309b6f..f997437 100644
--- a/src/views/feed/AkoStampFollow.vue
+++ b/src/views/feed/AkoStampFollow.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="min-h-screen bg-[#FFF9F2] font-pretendard flex justify-center">
-    <div
-      class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen relative overflow-y-auto"
-    >
-      <header
-        class="bg-white shadow-sm py-3 px-4 fixed top-0 left-1/2 transform -translate-x-1/2 w-[395px] min-w-[340px] z-10"
-      >
+    <div class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen relative overflow-y-auto">
+      <header class="bg-white shadow-sm py-3 px-4 fixed top-0 left-1/2 transform -translate-x-1/2 w-[395px] min-w-[340px] z-10">
         <div class="flex items-center justify-between">
           <img src="@/assets/images/Akoming.svg" alt="로고" class="h-8" />
         </div>
@@ -20,20 +16,17 @@
         />
 
         <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;">
               팔로워 {{ followerCount }}
             </div>
             <div class="followerline" :style="{ width: '100%', height: '2px', background: showFollowers ? '#FF7F00' : '#B3B3B3', marginBottom: '15px' }"></div>
-            <div style="width: 150%; margin-left: 90%; z-index:20;">
-              <ul v-show="showFollowers" style="padding: 20; width: 100%;">
-                <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>
-                </li>
-              </ul>
-            </div>
+            <ul v-show="showFollowers && followers.length > 0" style="padding: 20; width: 240%; 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>
+              </li>
+            </ul>
           </div>
 
           <div class="following font-NaL" style="width:50%; display: flex; flex-direction: column; align-items: center; margin-top:10px;">
@@ -41,8 +34,7 @@
               팔로잉 {{ followingCount }}
             </div>
             <div class="followingline" :style="{ width: '100%', height: '2px', background: showFollowings ? '#FF7F00' : '#B3B3B3', marginBottom: '15px' }"></div>
-            <div style="width: 100%;"></div>
-            <ul v-show="showFollowings" style="padding-right: 110%; width: 260%;">
+            <ul v-show="showFollowings && followings.length > 0" style="padding-right: 110%; width: 260%;">
               <li v-for="following in followings" :key="following.followingId" class="flex justify-between items-center mb-4">
                 <span class='font-NaR'>{{ following.nickname }}</span>
                 <button @click="unfollow(following.followingId)" class="unfollow-button">팔로우 취소</button>
@@ -59,43 +51,70 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import Footer from '@/components/layout/Footer.vue';
-import './FeedPageStyle.css';
 
 const followerCount = ref(0);
 const followingCount = ref(0);
 const followers = ref([]);
 const followings = ref([]);
 const showFollowers = ref(true);
-const showFollowings = ref(false); 
+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 = followers.value.length;
+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) {
-  const index = followings.value.findIndex(following => following.followingId === id);
-  if (index !== -1) followings.value.splice(index, 1);
-  followingCount.value = followings.value.length;
+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(() => {
@@ -104,6 +123,6 @@ onMounted(() => {
 });
 
 const goBack = () => {
-  window.history.back()
-}
-</script>
+  window.history.back();
+};
+</script>
\ No newline at end of file
diff --git a/src/views/feed/AkoStampWriteView.vue b/src/views/feed/AkoStampWriteView.vue
index 27c0deb..a6ff3a1 100644
--- a/src/views/feed/AkoStampWriteView.vue
+++ b/src/views/feed/AkoStampWriteView.vue
@@ -16,26 +16,14 @@
           src="@/assets/images/back.svg"
           alt="이전"
           @click="goBack" 
-          style="
-            width: 24px;
-            height: 24px;
-            margin-top: 10px;
-            margin-bottom: 20px;
-            cursor: pointer;
-          "
+          style="width: 24px; height: 24px; margin-top: 10px; margin-bottom: 20px; cursor: pointer;"
         />
 
         <div class="bg-white rounded-2xl" style="height: 600px">
           <div class="mb-6 text-center p-4 flex items-center justify-between">
             <p
               class="mb-2 text-[#FF7F00] text-left mt-4 text-lg text-gray-600 padding font-NaR"
-              style="
-                font-size: 30px;
-                color: #ff7f00;
-                font-style: normal;
-                font-weight: 400;
-                line-height: normal;
-              "
+              style="font-size: 30px; color: #ff7f00; font-style: normal; font-weight: 400; line-height: normal;"
             >
               <span class="text-[25px]"> {{ currentDate[0] }} </span><br />
               {{ currentDate[1] }}<br />
@@ -43,9 +31,7 @@
             </p>
 
             <p class="text-2xl text-right text-gray-800 font-NaL">
-              <span class="text-[#00000] font-bold font-NaL">{{
-                nickname
-              }}</span>
+              <span class="text-[#00000] font-bold font-NaL">{{ nickname }}</span>
               님,<br />
               오늘도 성장해요!
             </p>
@@ -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;"
               ></textarea>
             </div>
 
-            <p
-              class="text-[#B3B3B3] mt-1 font-NaL text-sm text-right px-5 pb-12"
-            >
+            <p class="text-[#B3B3B3] mt-1 font-NaL text-sm text-right px-5 pb-12">
               {{ userText.length }}/50
             </p>
           </div>
@@ -98,10 +71,11 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import axios from 'axios'
 import Footer from '@/components/layout/Footer.vue'
 
+// 날짜 계산하기
 const currentDate = computed(() => {
   const now = new Date()
   const year = now.getFullYear()
@@ -110,40 +84,66 @@ const currentDate = computed(() => {
   return [year, month, day]
 })
 
-const nickname = ref('닉네임')
+const nickname = ref('')
 const userText = ref('')
 
-const userId = 1
+// 사용자 정보 가져오기
+const fetchUserData = async () => {
+  try {
+    const token = localStorage.getItem('authToken') // 저장된 토큰을 가져옵니다.
+    if (!token) {
+      alert('로그인이 필요합니다.')
+      return
+    }
+
+    const response = await axios.get(
+      `${process.env.VUE_APP_BE_API_URL}/api/user/me`, // 인증된 사용자 정보를 가져옵니다.
+      {
+        headers: {
+          Authorization: `Bearer ${token}` // 토큰을 Authorization 헤더에 추가
+        }
+      }
+    )
+    nickname.value = response.data.nickname
+  } catch (error) {
+    console.error('사용자 정보 가져오기 오류:', error)
+    if (error.response && error.response.status === 401) {
+      alert('인증에 실패했습니다. 다시 로그인해주세요.')
+    } else {
+      alert('사용자 정보 가져오기 실패. 다시 시도해주세요.')
+    }
+  }
+}
 
+// 목표 등록하기
 const registerGoal = async () => {
   if (userText.value.trim() !== '') {
     try {
-      const token = localStorage.getItem('authToken') // 저장된 토큰을 가져옵니다.
-      if (!token) {
-        alert('로그인이 필요합니다.')
-        return
+      const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: userText.value // 전송할 데이터
+        }),
+        credentials: 'include'
+      })
+
+      if (!response.ok) {
+        throw new Error('목표 등록 실패')
       }
 
-      const response = await axios.post(
-        `${process.env.VUE_APP_BE_API_URL}/api/goals`,
-        {
-          content: userText.value // 전송할 데이터
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}` // 토큰을 Authorization 헤더에 추가
-          }
-        }
-      )
+      const data = await response.json()
 
-      alert(`목표가 등록되었습니다: ${response.data.content}`)
+      alert(`목표가 등록되었습니다: ${data.content}`)
       userText.value = ''
     } catch (error) {
       console.error('목표 등록 오류:', error)
-      if (error.response && error.response.status === 401) {
-        alert('인증에 실패했습니다. 다시 로그인해주세요.')
-      } else {
+      if (error.message === '목표 등록 실패') {
         alert('목표 등록에 실패했습니다. 다시 시도해주세요.')
+      } else {
+        alert('목표 등록 오류가 발생했습니다. 다시 시도해주세요.')
       }
     }
   } else {
@@ -155,4 +155,9 @@ const registerGoal = async () => {
 const goBack = () => {
   window.history.back()
 }
+
+// 컴포넌트가 마운트되었을 때 사용자 정보 가져오기
+onMounted(() => {
+  fetchUserData()
+})
 </script>

From 09027e7e33423e51bf89245fd2b633604315ae88 Mon Sep 17 00:00:00 2001
From: yebin-jeong <2022112390@dgu.ac.kr>
Date: Sat, 30 Nov 2024 23:11:43 +0900
Subject: [PATCH 4/5] =?UTF-8?q?[Feature]=20#26=20-=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/akopolio/Edit/edit.js     | 3 ++-
 src/views/akopolio/create/create.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js
index 308ebb3..dd08647 100644
--- a/src/views/akopolio/Edit/edit.js
+++ b/src/views/akopolio/Edit/edit.js
@@ -141,12 +141,13 @@ export default {
       images.value.splice(index, 1);
     };
     
+    const prefix = 'images';
     const uploadImages = async () => {
       const uploadedUrls = [];
       for (const image of images.value) {
         try {
           const { data } = await axios.post(
-            `${process.env.VUE_APP_BE_API_URL}/api/get-presigned-url`,
+            `${process.env.VUE_APP_BE_API_URL}/file/${prefix}/presigned-url`,
             {
               fileName: image.name,
               fileType: image.file.type,
diff --git a/src/views/akopolio/create/create.js b/src/views/akopolio/create/create.js
index 53b8618..1897d31 100644
--- a/src/views/akopolio/create/create.js
+++ b/src/views/akopolio/create/create.js
@@ -119,6 +119,7 @@ export default {
         this.images.splice(index, 1);
       },
     async uploadImages() {
+      const prefix = 'images';
       const uploadedUrls = [];
       
       for (const image of this.images) {
@@ -126,7 +127,7 @@ export default {
           // 1. 프리사인드 URL 요청
           
           const { data } = await axios.post(
-            `${process.env.VUE_APP_BE_API_URL}/api/get-presigned-url`, 
+            `${process.env.VUE_APP_BE_API_URL}/file/${prefix}/presigned-url`,
             {
               fileName: image.name,
               fileType: image.type,

From 747d7912a09f721001007787997262bd719b936e Mon Sep 17 00:00:00 2001
From: Minn-Choi <min031106@dgu.ac.kr>
Date: Mon, 2 Dec 2024 10:38:53 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20api=EC=97=B0=EA=B2=B0=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/feed/CommentInput.vue |  42 +++----
 src/components/common/feed/MyGoal.vue       | 126 +++++++++++++++++---
 src/views/feed/AkoStampWriteView.vue        |  83 ++++++-------
 3 files changed, 163 insertions(+), 88 deletions(-)

diff --git a/src/components/common/feed/CommentInput.vue b/src/components/common/feed/CommentInput.vue
index 6efc723..7b933b3 100644
--- a/src/components/common/feed/CommentInput.vue
+++ b/src/components/common/feed/CommentInput.vue
@@ -21,14 +21,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import axios from 'axios'
+import { ref, onMounted } from 'vue'
 
-const selectedEmoji = ref('') // 이모지 선택 상태
-const comment = ref('') // 댓글 내용
-const goalId = '123' // 목표 ID (수정 필요: 부모 컴포넌트에서 전달)
+const selectedEmoji = ref('')
+const comment = ref('')
+const goalId = '123'
 
-// 이모지를 숫자로 매핑하는 객체
 const emojiMap = {
   '😊': 0,
   '👍': 1,
@@ -37,7 +35,6 @@ const emojiMap = {
   '😍': 4
 }
 
-// 댓글 제출 함수
 const submitComment = async () => {
   if (!comment.value.trim()) {
     alert('댓글을 입력하세요.')
@@ -45,44 +42,39 @@ const submitComment = async () => {
   }
 
   try {
-    const token = localStorage.getItem('authToken') // 저장된 토큰 가져오기
-    if (!token) {
-      alert('로그인이 필요합니다.')
-      return
-    }
-
-    // 이모지를 숫자로 변환
-    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1; // 선택된 이모지가 없으면 -1로 처리
+    const emojiNumber = emojiMap[selectedEmoji.value] ?? -1
 
     const payload = {
-      emoji: emojiNumber, // 숫자로 된 이모지 값
+      emoji: emojiNumber,
       content: comment.value,
     }
 
-    // 요청 전에 콘솔로 값 확인
-    console.log("요청할 Payload:", payload);
+    console.log("요청할 Payload:", payload)
 
-    const response = await axios.post(
-      `/api/goals/${goalId}/comments`,
-      payload,
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId}/comments`,
       {
+        method: 'POST',
         headers: {
-          Authorization: `Bearer ${token}`, // 인증 헤더 추가
+          'Content-Type': 'application/json',
         },
+        credentials: 'include',
+        body: JSON.stringify(payload), 
       }
     )
 
-    if (response.status === 201) {
+    if (response.ok) {
       alert('댓글이 성공적으로 추가되었습니다!')
       selectedEmoji.value = ''
       comment.value = ''
+    } else {
+      alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
     }
   } catch (error) {
     console.error('댓글 전송 중 오류:', error)
     alert('댓글 추가 중 문제가 발생했습니다. 다시 시도해주세요.')
   }
 }
-
 </script>
 
 <style scoped>
@@ -121,4 +113,4 @@ const submitComment = async () => {
   border: none;
   box-shadow: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/common/feed/MyGoal.vue b/src/components/common/feed/MyGoal.vue
index 9c79f07..7184019 100644
--- a/src/components/common/feed/MyGoal.vue
+++ b/src/components/common/feed/MyGoal.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="my-goal">
     <div class="goal-content">
-      <span class="name">{{ nickname }}</span> 
-      <span class="content"> {{ goalContent }}</span>
+      <span class="name">{{ nickname }}</span>
+      <span class="content">{{ goalContent }}</span>
       <div class="goal-icons">
         <button @click="toggleCommentSection"><img src='../../../assets/images/comment.svg'></button>
         <div class='line'></div>
@@ -20,23 +20,117 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import CommentInput from './CommentInput.vue'
 import CommentList from './CommentList.vue'
 
-const nickname = ref('민달팽럴')
-const goalContent = ref('포기하지 않고 긍정적으로 오늘의 할일을 마무리하자')
+// 목표 관련 상태 변수
+const nickname = ref('')
+const goalContent = ref('')
 const showCommentSection = ref(false)
+const goalId = ref('') // 목표 ID
 
-const toggleCommentSection = () => {
-  showCommentSection.value = !showCommentSection.value
+// 목표를 불러오는 함수
+const fetchGoalData = async () => {
+  try {
+    // 세션의 userId를 이용하여 목표를 조회
+    const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', // 쿠키 인증을 포함
+    })
+
+    if (response.ok) {
+      const data = await response.json()
+      // 첫 번째 목표를 가져왔다고 가정하고 데이터를 설정
+      if (data.length > 0) {
+        const goal = data[0] // 첫 번째 목표 가져오기 (여러 목표일 경우 필요에 따라 수정)
+        nickname.value = goal.nickname
+        goalContent.value = goal.content
+        goalId.value = goal.id
+      }
+    } else {
+      alert('목표를 가져오는 데 실패했습니다.')
+    }
+  } catch (error) {
+    console.error('목표 불러오기 오류:', error)
+    alert('목표를 불러오는 중 오류가 발생했습니다.')
+  }
 }
 
-const editGoal = () => {
-  /* 목표 수정 */
+// 목표 수정 함수
+const editGoal = async () => {
+  const updatedContent = prompt('목표를 수정하세요', goalContent.value)
+  if (updatedContent && updatedContent !== goalContent.value) {
+    try {
+      const response = await fetch(
+        `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId.value}`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include', // 쿠키 인증을 포함
+          body: JSON.stringify({
+            content: updatedContent,
+          }),
+        }
+      )
+
+      if (response.ok) {
+        goalContent.value = updatedContent
+        alert('목표가 수정되었습니다.')
+      } else {
+        alert('목표 수정 중 문제가 발생했습니다.')
+      }
+    } catch (error) {
+      console.error('목표 수정 오류:', error)
+      alert('목표 수정 중 오류가 발생했습니다.')
+    }
+  }
 }
-const deleteGoal = () => {
-  /* 목표 삭제 */
+
+// 목표 삭제 함수
+const deleteGoal = async () => {
+  const confirmDelete = confirm('목표를 삭제하시겠습니까?')
+  if (confirmDelete) {
+    try {
+      const response = await fetch(
+        `${process.env.VUE_APP_BE_API_URL}/api/goals/${goalId.value}`,
+        {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include', // 쿠키 인증을 포함
+        }
+      )
+
+      if (response.ok) {
+        alert('목표가 삭제되었습니다.')
+        goalContent.value = '' // 삭제 후 내용 비우기
+        nickname.value = ''
+        goalId.value = ''
+      } else {
+        alert('목표 삭제 중 문제가 발생했습니다.')
+      }
+    } catch (error) {
+      console.error('목표 삭제 오류:', error)
+      alert('목표 삭제 중 오류가 발생했습니다.')
+    }
+  }
+}
+
+// 목표 데이터 불러오기
+onMounted(() => {
+  fetchGoalData()
+})
+
+// 댓글 섹션 토글
+const toggleCommentSection = () => {
+  showCommentSection.value = !showCommentSection.value
 }
 </script>
 
@@ -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;
@@ -96,14 +190,12 @@ const deleteGoal = () => {
   background: none;
 }
 
-
 .comment-section {
 }
 
-.line{
+.line {
   width: 1px;
   height: 35px;
   background: #D9D9D9;
 }
-
 </style>
diff --git a/src/views/feed/AkoStampWriteView.vue b/src/views/feed/AkoStampWriteView.vue
index a6ff3a1..9b5ce30 100644
--- a/src/views/feed/AkoStampWriteView.vue
+++ b/src/views/feed/AkoStampWriteView.vue
@@ -15,7 +15,7 @@
         <img
           src="@/assets/images/back.svg"
           alt="이전"
-          @click="goBack" 
+          @click="goBack"
           style="width: 24px; height: 24px; margin-top: 10px; margin-bottom: 20px; cursor: pointer;"
         />
 
@@ -72,10 +72,8 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import axios from 'axios'
 import Footer from '@/components/layout/Footer.vue'
 
-// 날짜 계산하기
 const currentDate = computed(() => {
   const now = new Date()
   const year = now.getFullYear()
@@ -87,76 +85,69 @@ const currentDate = computed(() => {
 const nickname = ref('')
 const userText = ref('')
 
-// 사용자 정보 가져오기
 const fetchUserData = async () => {
   try {
-    const token = localStorage.getItem('authToken') // 저장된 토큰을 가져옵니다.
-    if (!token) {
-      alert('로그인이 필요합니다.')
-      return
-    }
-
-    const response = await axios.get(
-      `${process.env.VUE_APP_BE_API_URL}/api/user/me`, // 인증된 사용자 정보를 가져옵니다.
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/users/profile`,
       {
-        headers: {
-          Authorization: `Bearer ${token}` // 토큰을 Authorization 헤더에 추가
-        }
+        method: 'GET',
+        credentials: 'include', 
       }
     )
-    nickname.value = response.data.nickname
-  } catch (error) {
-    console.error('사용자 정보 가져오기 오류:', error)
-    if (error.response && error.response.status === 401) {
-      alert('인증에 실패했습니다. 다시 로그인해주세요.')
+
+    if (response.ok) {
+      const data = await response.json()
+      nickname.value = data.nickname
     } else {
-      alert('사용자 정보 가져오기 실패. 다시 시도해주세요.')
+      console.error('사용자 정보 불러오기 실패:', response.status, response.statusText)
+      if (response.status === 401) {
+        alert('인증에 실패했습니다. 다시 로그인해주세요.')
+        window.location.href = '/login'
+      } else {
+        alert('사용자 정보 가져오기 실패. 다시 시도해주세요.')
+      }
     }
+  } catch (error) {
+    console.error('사용자 정보 가져오기 오류:', error)
+    alert('사용자 정보 가져오기 오류가 발생했습니다.')
   }
 }
 
-// 목표 등록하기
 const registerGoal = async () => {
   if (userText.value.trim() !== '') {
     try {
-      const response = await fetch(`${process.env.VUE_APP_BE_API_URL}/api/goals`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          content: userText.value // 전송할 데이터
-        }),
-        credentials: 'include'
-      })
+      const response = await fetch(
+        `${process.env.VUE_APP_BE_API_URL}/api/goals`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ content: userText.value }),
+          credentials: 'include',
+        }
+      )
 
-      if (!response.ok) {
-        throw new Error('목표 등록 실패')
+      if (response.ok) {
+        const data = await response.json()
+        alert(`목표가 등록되었습니다: ${data.content}`)
+        userText.value = ''
+      } else {
+        alert('목표 등록에 실패했습니다.')
       }
-
-      const data = await response.json()
-
-      alert(`목표가 등록되었습니다: ${data.content}`)
-      userText.value = ''
     } catch (error) {
       console.error('목표 등록 오류:', error)
-      if (error.message === '목표 등록 실패') {
-        alert('목표 등록에 실패했습니다. 다시 시도해주세요.')
-      } else {
-        alert('목표 등록 오류가 발생했습니다. 다시 시도해주세요.')
-      }
+      alert('목표 등록 오류가 발생했습니다. 다시 시도해주세요.')
     }
   } else {
     alert('문구를 입력해주세요.')
   }
 }
 
-// 이전 페이지로 돌아가는 함수
 const goBack = () => {
   window.history.back()
 }
 
-// 컴포넌트가 마운트되었을 때 사용자 정보 가져오기
 onMounted(() => {
   fetchUserData()
 })