fix : setting page refactoring complete

src/main/java/com/io/realworld/domain/aggregate/user/service/UserServiceImpl.java

@@ -78,19 +78,18 @@ public class UserServiceImpl implements UserService {
     @Override
     @Transactional
     public UserResponse updateUser(UserUpdate userUpdate, UserAuth userAuth){
-        User user = userRepository.findById(userAuth.getId()).orElseThrow(() -> new CustomException(Error.USER_NOT_FOUND));
-
+        User user = userRepository.findById(userAuth.getId()).orElseThrow(() -> {throw new CustomException(Error.USER_NOT_FOUND);});
         if(userUpdate.getEmail() != null){
             userRepository.findAllByEmail(userUpdate.getEmail())
-                    .stream().filter(found -> !found.getId().equals(userRepository.findById(user.getId())))
-                        .findAny().ifPresent(found -> new CustomException(Error.DUPLICATE_EMAIL));
+                    .stream().filter(found -> !found.getId().equals(user.getId()))
+                        .findFirst().ifPresent(found ->{throw new CustomException(Error.DUPLICATE_EMAIL);} );
             user.changeEmail(userUpdate.getEmail());
         }
 
         if(userUpdate.getUsername() != null){
             userRepository.findAllByUsername(userUpdate.getUsername())
-                    .stream().filter(found -> !found.getId().equals(userRepository.findById(user.getId())))
-                    .findAny().ifPresent(found -> new CustomException(Error.DUPLICATE_EMAIL));
+                    .stream().filter(found -> !found.getId().equals(user.getId()))
+                    .findFirst().ifPresent(found -> {throw new CustomException(Error.DUPLICATE_USERNAME);});
             user.changeUsername(userUpdate.getUsername());
         }
         if(userUpdate.getPassword() != null){

src/vite-frontend/src/api/index.ts

@@ -1,13 +1,4 @@
 import axios, {AxiosResponse} from "axios";
-import { useStore } from "vuex";
-
-//TODO
-//임시방편 watch로 바라보는게 더 좋다고함. watch로 감시하자. Token
-const getToken = () => {
-    let test = useStore().getters.getToken;
-    console.log(test)
-    return test;
-}
 
 const axiosService = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL,
@@ -32,8 +23,6 @@ const getCurrentUser = async (): Promise<AxiosResponse> => {
 
 const updateUser = async (user: object): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
-    console.log(user);
-    console.log(currentToken);
     return axiosService.put('/api/user', {user}, {
         headers: {
             Authorization: "TOKEN " + currentToken,

src/vite-frontend/src/views/TheSetting.vue

@@ -8,6 +8,13 @@
           <h1 class="text-xs-center">Your Settings</h1>
 
           <form>
+            <ul class="error-messages" v-if="emailDuplicate">
+              <li align="left">email has already been taken</li>
+            </ul>
+            <ul class="error-messages" v-if="usernameDuplicate">
+              <li align="left">username has already been taken</li>
+            </ul>
+
             <fieldset>
               <fieldset class="form-group">
                 <input class="form-control" type="text" placeholder="URL of profile picture" v-model="user.image">
@@ -45,7 +52,7 @@
 import { getCurrentUser, updateUser } from "@/api";
 import { useStore } from "vuex";
 import router from "@/router";
-import { onMounted, reactive } from "vue";
+import {onMounted, reactive, ref} from "vue";
 
 export default {
   name: "TheSetting",
@@ -61,31 +68,44 @@ export default {
     const password = "";
     const store = useStore();
 
-    const getUser = (getuser: { bio: string; email: string; username: string; image: string; }) => {
+    const emailDuplicate = ref(false);
+    const usernameDuplicate = ref(false);
+
+    const getUser = async (getuser: { bio: string; email: string; username: string; image: string; }) => {
       user.bio = getuser.bio
       user.email = getuser.email
       user.username = getuser.username
       user.image = getuser.image
     }
 
+    const showEmailError = () => {
+      emailDuplicate.value = true;
+      usernameDuplicate.value = false;
+    };
+    const showUsernameError = () => {
+      usernameDuplicate.value = true;
+      emailDuplicate.value = false;
+    };
+
     const setUser = async ()  => {
       try{
-        console.log(await updateUser(user));
-        /*
         const { data } = await updateUser(user);
-        store.dispatch("LOGIN", data.user);
-        router.push({
+        await store.dispatch("LOGIN", data.user);
+        await router.push({
           name: 'Profile',
           params: {username: data.user.username}
-        })*/
-      }catch(error:any){
-        // Todo Error처리
+        })
+      }catch(error: any){
         const code = error.response.data.errors.code;
-        console.log(code);
+        if(code == "DUPLICATE_EMAIL"){
+          showEmailError();
+        }else if(code == "DUPLICATE_USERNAME"){
+          showUsernameError();
+        }
       }
     }
 
-    const logout = () =>{
+    const logout = async () =>{
       store.dispatch("LOGOUT").then(()=>{
         router.push({name: "Home"});
       })
@@ -95,15 +115,17 @@ export default {
     onMounted(async () => {
       try {
         const { data } = await getCurrentUser();
-        store.dispatch("LOGIN", data.user)
+        await store.dispatch("LOGIN", data.user)
         getUser(data.user);
       } catch (error: any) {
-        //TODO error처리
-        console.log(error);
+        const code = error.response.data.errors.code;
+        if(code == "EMAIL_NULL_OR_INVALID"){
+          await router.push({name:"home"});
+        }
       }
     })
 
-    return {user, password, url, getUser, setUser, logout};
+    return {user, password, url, emailDuplicate, usernameDuplicate, getUser, setUser, logout};
   }
 }
 </script>