[Feat] 마이페이지 UI 및 프로필 수정 js 로직 수정 중

CSID-DGU · Oct 28, 2024 · e5fa155 · e5fa155
1 parent 497eb75
commit e5fa155
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git 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
@@ -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
@@ -11,6 +11,9 @@ module.exports = {
       },
       colors: {
         customBg: '#FFF9F2'
+      },
+      fontSize: {
+        xxs: '0.625rem' // 10px
       }
     }
   },