릴리스: v0.1.43 토스트와 즐겨찾기 추가

frontend/src/views/ProfileView.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
 
 const router = useRouter()
 const auth = useAuthStore()
+const toast = useToast()
 
 const error = ref('')
 const saving = ref(false)
@@ -13,6 +15,12 @@ const nickname = ref('')
 const previewUrl = ref('')
 const avatarFile = ref(null)
 
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
+
 const avatarUrl = computed(() => {
   if (previewUrl.value) return previewUrl.value
   if (!auth.user?.avatarSrc) return ''
@@ -55,6 +63,7 @@ async function saveProfile() {
       URL.revokeObjectURL(previewUrl.value)
       previewUrl.value = ''
     }
+    toast.success('프로필을 저장했어요.')
   } catch (e2) {
     error.value = '프로필 저장에 실패했어요.'
   } finally {
@@ -66,7 +75,6 @@ async function saveProfile() {
 <template>
   <section class="wrap">
     <h2 class="title">프로필</h2>
-    <div v-if="error" class="error">{{ error }}</div>
 
     <div class="card" v-if="auth.user">
       <div class="row">
@@ -102,13 +110,6 @@ async function saveProfile() {
   font-size: 26px;
   letter-spacing: -0.02em;
 }
-.error {
-  margin-bottom: 10px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-}
 .card {
   max-width: 520px;
   border: 1px solid rgba(255, 255, 255, 0.12);