From e5fa155a5a6a87546767e574c5b8d02831b4a95d Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 28 Oct 2024 16:45:43 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20UI=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20js=20=EB=A1=9C=EC=A7=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/mypage/MypageScript.js | 27 ++++++++++++++--
 src/views/login/mypage/MypageView.vue  | 43 ++++++++++++++++++++------
 tailwind.config.js                     |  3 ++
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/views/login/mypage/MypageScript.js b/src/views/login/mypage/MypageScript.js
index 863c0a5..6594ac3 100644
--- a/src/views/login/mypage/MypageScript.js
+++ b/src/views/login/mypage/MypageScript.js
@@ -126,7 +126,28 @@ export async function updatePassword() {
   }
 }
 
-// 유저 프로필 수정 (추가적인 프로필 수정 함수가 필요하다면 여기에 작성)
-export async function updateProfile() {
-  // 프로필 수정 로직 작성
+// 유저 프로필 수정
+export async function updateProfile(profileData) {
+  const url = `${process.env.VUE_APP_BE_API_URL}/api/users/profile`
+  const options = {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json'
+      // 필요한 경우 인증 토큰 추가
+      // 'Authorization': `Bearer ${token}`,
+    },
+    body: JSON.stringify(profileData)
+  }
+
+  try {
+    const response = await fetch(url, options)
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
+    }
+    const data = await response.json()
+    return data
+  } catch (error) {
+    console.error('There was a problem with the fetch operation:', error)
+    throw error
+  }
 }
diff --git a/src/views/login/mypage/MypageView.vue b/src/views/login/mypage/MypageView.vue
index c199d4e..22932a0 100644
--- a/src/views/login/mypage/MypageView.vue
+++ b/src/views/login/mypage/MypageView.vue
@@ -16,21 +16,40 @@
             님의 <br />마이페이지
           </h1>
 
-          <h2 class="mb-2 text-lg font-semibold font-nanum-square-round">
-            나의 아코자국들
-          </h2>
-          <ul v-if="goals.length > 0" class="space-y-3">
+          <ul v-if="goals.length > 0" class="space-y-3 p-4 bg-white rounded-lg">
+            <h2
+              class="mb-2 text-lg font-semibold font-nanum-square-round"
+              style="margin-bottom: -50px"
+            >
+              나의 아코자국들
+            </h2>
             <li
               v-for="(goal, index) in goals"
               :key="index"
-              class="p-3 bg-white rounded-lg"
+              class="flex items-center justify-between"
             >
-              <p class="text-sm font-nanum-square-round">{{ goal.content }}</p>
-              <p class="text-xs text-gray-500">
-                {{ formatDate(goal.createdAt) }}
+              <!-- 날짜 부분: 주황색 정사각형 -->
+              <p
+                class="text-xxs font-nanum-square-round flex-shrink-0 mr-2 p-1 rounded-sm text-center"
+                style="
+                  background-color: #ff7f00;
+                  color: white;
+                  width: 30px;
+                  height: 30px;
+                "
+              >
+                {{ formatDate2(goal.createdAt) }}
+              </p>
+
+              <!-- 목표 내용 부분 -->
+              <p
+                class="text-sm font-nanum-square-round flex-grow text-left ml-3"
+              >
+                {{ goal.content }}
               </p>
             </li>
           </ul>
+
           <p v-else class="text-sm font-nanum-square-round">
             아직 목표 기록이 없습니다.
           </p>
@@ -235,6 +254,10 @@ const formatDate = (date) => {
   const options = { month: 'long', day: 'numeric' }
   return new Date(date).toLocaleDateString('ko-KR', options)
 }
-</script>
 
-<style scoped></style>
+// 날짜 형식 포맷
+const formatDate2 = (date) => {
+  const options = { month: '2-digit', day: '2-digit' } // 'MM.DD' 형식
+  return new Date(date).toLocaleDateString('ko-KR', options).replace(/\//g, '.')
+}
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index ed912be..c2d3c9f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,9 @@ module.exports = {
       },
       colors: {
         customBg: '#FFF9F2'
+      },
+      fontSize: {
+        xxs: '0.625rem' // 10px
       }
     }
   },