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] =?UTF-8?q?[Design]=20#6=20-=20=EC=95=84=EC=BD=94=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94=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>