배포

package.json

@@ -10,6 +10,7 @@
     "dev": "concurrently \"npm run serve\" \"npm run backend\""
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "core-js": "^3.8.3",

src/components/common/feed/CommentInput.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="comment-input">
     <select v-model="selectedEmoji">
+      <option value="" disabled selected hidden><img src="../../../assets/images/smile.svg"></option>
       <option value="😊">😊</option>
       <option value="👍">👍</option>
       <option value="❤️">❤️</option>
     </select>
     <input type="text" v-model="comment" placeholder="댓글 입력" />
-    <button @click="submitComment">작성</button>
+    <button @click="submitComment"><img src="../../../assets/images/add.svg"></button>
   </div>
 </template>
 

src/components/common/feed/FollowStats.vue

@@ -2,27 +2,30 @@
   <div class="follow-stats" @click="goToFollowPage">
     <div class="date-info">{{ formattedDate }}</div>
     <div class="follow-info">
-      <span>팔로워 {{ followerCount }}명</span>
-      <span>팔로잉 {{ followingCount }}명</span>
-      <span class="arrow-icon">›</span>
+      <span class="follower-text">팔로워</span> 
+      <span class="follower-count">{{ followerCount }}명</span>
+      <span class="following-text">팔로잉</span>
+      <span class="following-count">{{ followingCount }}명</span>
+      <img src="../../../assets/images/next.svg">
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const followerCount = ref(0) // API에서 받아오는 팔로워 수
 const followingCount = ref(0) // API에서 받아오는 팔로잉 수
 
 // 현재 날짜를 포맷팅
-const formattedDate = ref(
-  new Date().toLocaleDateString('ko-KR', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  })
-)
+const formattedDate = computed(() => {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1
+  const day = String(date.getDate()).padStart(2, '0');
+  
+  return `${year} . ${month} . ${day}`;
+});
 
 const goToFollowPage = () => {
   // 팔로우 관리 페이지로 이동하는 함수
@@ -33,16 +36,19 @@ const goToFollowPage = () => {
 .follow-stats {
   display: flex;
   align-items: center;
+  height: 37px;
   padding: 8px;
-  background-color: #f6f6f6;
-  font-family: 'NanumSquareRound', sans-serif;
+  border-radius: 10px;
+  background: #FFF;
 }
 
 .date-info {
   flex: 1;
   text-align: left;
-  color: #333;
+  color: #FF7F00; /* 날짜 색상 */
+  font-family: 'NaR';
   font-size: 0.9rem;
+  padding-left: 5px;
 }
 
 .follow-info {
@@ -60,4 +66,22 @@ const goToFollowPage = () => {
   font-size: 1rem;
   color: #999;
 }
+
+.follower-text,
+.following-text {
+  color: #000;
+  font-family: 'NaR';
+  font-size: 15px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.follower-count,
+.following-count {
+  color: #000;
+  font-family: 'NaB';
+  font-size: 15px;
+  font-weight: 400;
+  line-height: normal;
+}
 </style>

src/components/common/feed/FriendGoal.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="friend-goal">
     <div class="goal-content">
-      <span>{{ friendNickname }}의 목표: {{ friendGoalContent }}</span>
-      <button @click="toggleCommentSection">💬</button>
+      <span class="friendName">{{ friendNickname }}</span> 
+      <span class="friendContent">{{ friendGoalContent }}</span>
+      <button class="btn" @click="toggleCommentSection"><img src='../../../assets/images/comment.svg'></button>
     </div>
 
     <CommentInput v-if="showCommentSection" />
@@ -15,8 +16,8 @@ import { ref } from 'vue'
 import CommentInput from './CommentInput.vue'
 import CommentList from './CommentList.vue'
 
-const friendNickname = ref('친구 닉네임')
-const friendGoalContent = ref('친구의 오늘 목표')
+const friendNickname = ref('토니')
+const friendGoalContent = ref('이따 상록원에서 밥먹을사람? 김치철판어쩌고저쩌고')
 const showCommentSection = ref(false)
 
 const toggleCommentSection = () => {
@@ -28,13 +29,48 @@ const toggleCommentSection = () => {
 .friend-goal {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
+  width: 100%;
+  border-radius: 10px;
+  background: #FFF;
+  height: 100%;
 }
 
 .goal-content {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   width: 100%;
 }
+
+.friendName {
+  border-radius: 10px 0px 0px 10px;
+  background: #FF7F00;
+  color: #FFF;
+  text-align: center;
+  font-family: 'NaB';
+  font-size: 11px;
+  width: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  word-wrap: break-word;
+}
+
+
+.friendContent{
+  margin-left: 10px;
+  margin-right: 5px;
+  padding: 5px 0px;
+  color: #000;
+  width:70%;
+  font-family: 'NaL';
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.btn button:hover {
+  background: none;
+}
 </style>

src/components/common/feed/MyGoal.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="my-goal">
     <div class="goal-content">
-      <span>{{ nickname }}의 목표: {{ goalContent }}</span>
+      <span class="name">{{ nickname }}</span> 
+      <span class="content"> {{ goalContent }}</span>
       <div class="goal-icons">
-        <button @click="toggleCommentSection">💬</button>
-        <button @click="editGoal">✏️</button>
-        <button @click="deleteGoal">🗑️</button>
+        <button @click="toggleCommentSection"><img src='../../../assets/images/comment.svg'></button>
+        <div class='line'></div>
+        <button @click="editGoal"><img src='../../../assets/images/write.svg'></button>
+        <div class='line'></div>
+        <button @click="deleteGoal"><img src='../../../assets/images/delete.svg'></button>
       </div>
     </div>
 
@@ -21,8 +24,8 @@ import { ref } 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 toggleCommentSection = () => {
@@ -43,21 +46,63 @@ const deleteGoal = () => {
   flex-direction: column;
   gap: 8px;
   width: 100%;
+  border-radius: 10px;
+  background: #FFF;
+  height: 100%;
 }
 
 .goal-content {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
   width: 100%;
 }
+.name {
+  border-radius: 10px 0px 0px 10px;
+  background: #FF7F00;
+  color: #FFF;
+  text-align: center;
+  font-family: 'NaB';
+  font-size: 11px;
+  width: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  word-wrap: break-word;
+}
+
+
+.content{
+  margin-left: 10px;
+  margin-right: 5px;
+  padding: 5px 0px;
+  color: #000;
+  width:50%;
+  font-family: 'NaL';
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
 
 .goal-icons {
   display: flex;
-  gap: 4px;
+  gap: 10px;
+  align-items: center;
+}
+
+.goal-icons button:hover {
+  background: none;
 }
 
+
 .comment-section {
   margin-top: 8px;
 }
+
+.line{
+  width: 1px;
+  height: 35px;
+  background: #D9D9D9;
+}
+
 </style>

src/components/common/feed/SearchBar.vue

@@ -6,6 +6,7 @@
       placeholder="친구 닉네임 검색"
       @input="searchFriend"
     />
+    <img src="../../../assets/images/search.svg" class="search-icon">
   </div>
 </template>
 
@@ -20,10 +21,40 @@ const searchFriend = () => {
 </script>
 
 <style scoped>
+.search-bar {
+  height: 33px;
+  border-radius: 10px;
+  border: 1px solid #D9D9D9;
+  background: #FFF;
+  font-family: 'NaL';
+  box-shadow: none;
+  display: flex; /* 플렉스 박스를 사용하여 아이템을 가로로 정렬 */
+  align-items: center;
+  gap:3px;
+}
+
 .search-bar input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  height: 32px;
+  width: 90%;
+  border-radius: 10px;
+  background: #FFF;
+  border: 1px solid #FFFFFF;
+  font-family: 'NaL';
+  box-shadow: none;
+  padding-left: 8px;
+}
+
+.search-bar input::placeholder {
+  color: #878282;
+  text-align: center;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 32px;
 }
+
+.search-icon{
+  cursor: pointer;
+}
+
 </style>