feat(user_settings): enhance profile edit functionality (#1346)

* feat(user_settings): enhance profile edit functionality

* feat(user_settings): enhance profile edit functionality

---------

Co-authored-by: 申永范-UX <[email protected]>

Author: youngbeom-shin

frontend/src/assets/stylesheets/element-plus/button.css

@@ -120,6 +120,127 @@
   box-shadow: var(--shadow-xs);
 }
 
+/* btn-outline */
+.btn-outline {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-700);
+}
+
+.btn-outline:hover {
+  background-color: var(--Gray-50);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-800);
+}
+
+.btn-outline:focus {
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+}
+
+.btn-outline[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+}
+
+/* btn-outline-primary */
+.btn-outline-primary {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-700);
+}
+
+.btn-outline-primary:hover {
+  background-color: var(--Brand-50);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-800);
+}
+
+.btn-outline-primary:focus {
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(77, 106, 214, 0.24);
+}
+
+.btn-outline-primary[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+}
+
+/* btn-outline-danger */
+.btn-outline-danger {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Error-300);
+  color: var(--Error-700);
+}
+
+.btn-outline-danger:hover {
+  background-color: var(--Error-50);
+  border: 1px solid var(--Error-300);
+  color: var(--Error-800);
+}
+
+.btn-outline-danger:focus {
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+}
+
+.btn-outline-danger[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+}
+
+/* btn-ghost */
+.btn-ghost {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--Gray-600);
+  box-shadow: none;
+}
+
+.btn-ghost:hover {
+  background-color: var(--Gray-50);
+  border: 1px solid transparent;
+  color: var(--Gray-700);
+}
+
+.btn-ghost[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-ghost-primary */
+.btn-ghost-primary {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--Brand-700);
+}
+
+.btn-ghost-primary:hover {
+  background-color: var(--Brand-50);
+  border: 1px solid transparent;
+  color: var(--Brand-800);
+}
+
+.btn-ghost-primary[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-ghost-danger */
+.btn-ghost-danger {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--Error-700);
+}
+
+.btn-ghost-danger:hover {
+  background-color: var(--Error-50);
+  border: 1px solid transparent;
+  color: var(--Error-800);
+}
+
+.btn-ghost-danger[disabled] {
+  color: var(--Gray-400);
+}
+
 /* btn-tertiary-gray */
 .btn-tertiary-gray {
   color: var(--Gray-600);
@@ -193,6 +314,7 @@
 /* sm size button */
 .btn-primary.btn-sm,
 .btn-danger.btn-sm,
+.btn-outline-danger.btn-sm,
 .btn-secondary-gray.btn-sm,
 .btn-secondary-color.btn-sm,
 .btn-tertiary-gray.btn-sm,
@@ -356,4 +478,3 @@
   text-align: center;
   justify-content: center;
 }
-

frontend/src/components/__tests__/user_settings/ProfileEdit.spec.js

@@ -158,7 +158,7 @@ describe('ProfileEdit.vue', () => {
     const clickSpy = vi.spyOn(wrapper.vm.fileInput, 'click')
 
     // Find and click the upload avatar button
-    await wrapper.find('.btn.btn-primary.btn-sm').trigger('click')
+    await wrapper.find('.btn.btn-secondary-gray.btn-sm').trigger('click')
 
     expect(clickSpy).toHaveBeenCalled()
   })
@@ -168,7 +168,7 @@ describe('ProfileEdit.vue', () => {
 
     wrapper.vm.profileData.avatar.value = 'https://example.com/avatar.jpg'
 
-    await wrapper.find('.btn-secondary-gray.btn-sm').trigger('click')
+    await wrapper.find('.btn.btn-outline-danger.btn-sm').trigger('click')
 
     await wrapper.vm.$nextTick()
 

frontend/src/components/user_settings/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="z-20 bg-white border-b border-gray-100">
+  <div class="z-20 bg-white border-gray-100">
     <div class="sticky top-14 pt-6 w-72 rounded-md mx-6 md:w-full md:mx-0">
       <div
         @click="clickProfile"