릴리스: v1.2.19 왼쪽 레일 검색과 즐겨찾기 정리

frontend/src/views/ProfileView.vue

@@ -70,6 +70,12 @@ async function saveProfile() {
     saving.value = false
   }
 }
+
+async function logout() {
+  await auth.logout()
+  toast.success('로그아웃했어요.')
+  router.push('/')
+}
 </script>
 
 <template>
@@ -93,9 +99,12 @@ async function saveProfile() {
         <label class="label">아바타 업로드</label>
         <input class="file" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
         <div class="hint">파일 선택은 미리보기만 바뀌고, 실제 반영은 저장 버튼을 눌렀을 때 진행됩니다.</div>
-        <button class="saveBtn" :disabled="saving" @click="saveProfile">
-          {{ saving ? '저장중...' : '프로필 저장' }}
-        </button>
+        <div class="actions">
+          <button class="saveBtn" :disabled="saving" @click="saveProfile">
+            {{ saving ? '저장중...' : '프로필 저장' }}
+          </button>
+          <button class="logoutBtn" type="button" @click="logout">로그아웃</button>
+        </div>
       </div>
     </div>
   </section>
@@ -188,7 +197,6 @@ async function saveProfile() {
   font-size: 13px;
 }
 .saveBtn {
-  margin-top: 12px;
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.14);
@@ -197,4 +205,19 @@ async function saveProfile() {
   cursor: pointer;
   font-weight: 800;
 }
+.actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.logoutBtn {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(239, 68, 68, 0.24);
+  background: rgba(239, 68, 68, 0.12);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  font-weight: 800;
+}
 </style>