diff --git a/src/hooks/useUser.js b/src/hooks/useUser.js index 262a1883..8c53ca1f 100644 --- a/src/hooks/useUser.js +++ b/src/hooks/useUser.js @@ -27,6 +27,7 @@ const useUser = () => { isStop, tabTestsLoading, profileUrl, + nickname, } = useSelector((state) => state.user); const { data, status } = useSelector((state) => state.user.user); const logInLoading = useMemo( @@ -38,6 +39,11 @@ const useUser = () => { [data, status] ); // 로그인 상태 + const nicknameSuccess = useMemo( + () => [SUCCESS].includes(nickname.status), + [nickname.status] + ); + const dispatch = useDispatch(); const checkLogIn = () => dispatch(checkLogInAction()); @@ -84,6 +90,7 @@ const useUser = () => { putNickname, uploadImg, profileUrl, + nicknameSuccess, }; }; diff --git a/src/redux/reducer/userReducer.js b/src/redux/reducer/userReducer.js index 77f3f0f6..99b16767 100644 --- a/src/redux/reducer/userReducer.js +++ b/src/redux/reducer/userReducer.js @@ -29,8 +29,7 @@ const initialState = { profileError: false, // 닉네임 변경 - nicknameLoading: false, - nicknameError: false, + nickname: reducerUtils.init(), }; const user = createSlice({ @@ -149,7 +148,6 @@ const user = createSlice({ state.uploadLoading = true; }, uploadProfileSuccess: (state, { payload: { url } }) => { - console.log(url); state.uploadLoading = false; state.profileUrl = url; }, @@ -172,14 +170,13 @@ const user = createSlice({ // 닉네임 변경 updateNickname: (state) => { - state.nicknameLoading = true; + state.nickname = reducerUtils.loading(); }, updateNicknameSuccess: (state) => { - state.nicknameLoading = false; + state.nickname = reducerUtils.success(); }, updateNicknameError: (state) => { - state.nicknameLoading = false; - state.nicknameError = true; + state.nickname = reducerUtils.error(); }, }, diff --git a/src/redux/saga/userSaga.js b/src/redux/saga/userSaga.js index 835a576f..fe2a4046 100644 --- a/src/redux/saga/userSaga.js +++ b/src/redux/saga/userSaga.js @@ -74,10 +74,21 @@ const updateProfileSaga = createPromiseSaga( UserAPI.updateProfile ); -const updateNicknameSaga = createPromiseSaga( - updateNickname.type, - UserAPI.updateNickname -); +function* updateNicknameSaga(action) { + const { status } = yield call(UserAPI.updateNickname, action.payload); + const { success, error } = createActionString(action.type); + + if (status === SUCCESS) { + yield put({ + type: success, + }); + yield put({ + type: getUserInfo.type, + }); + } else { + yield put({ type: error }); + } +} const uploadProfileSaga = createPromiseSaga( uploadProfile.type, diff --git a/src/view/mypage/AccountManage.jsx b/src/view/mypage/AccountManage.jsx index bda30aee..1a165ab8 100644 --- a/src/view/mypage/AccountManage.jsx +++ b/src/view/mypage/AccountManage.jsx @@ -10,6 +10,7 @@ import AutosizeInput from "react-input-autosize"; import Error from "../Error"; import BottomBtn, { PageContainer } from "../../components/frame/BottomBtn"; import ManageList from "../../components/MyPage/ManageList"; +import { StyledSpinner } from "../../components/common/Loading"; const { deepGray } = theme.colors; const { lg } = theme.fontSizes; @@ -25,6 +26,7 @@ const AccountManage = () => { putNickname, uploadImg, logOut, + nicknameSuccess, } = useUser(); const fileInput = useRef(); @@ -39,6 +41,10 @@ const AccountManage = () => { profileUrl && putProfile({ profileUrl: profileUrl }); }, [profileUrl]); + useEffect(() => { + if (nicknameSuccess) setInputValue(""); + }, [nicknameSuccess, setInputValue]); + const onChange = useCallback( (e) => { setInputValue(e.target.value); @@ -52,7 +58,7 @@ const AccountManage = () => { if (!inputValue || data.nickname === inputValue) return; putNickname({ nickname: inputValue }); }, - [inputValue] + [inputValue, putNickname] ); const onKeyPress = (event) => { @@ -82,7 +88,7 @@ const AccountManage = () => { } ); }; - + console.log(nicknameSuccess); if (!loggedIn) return ; return logInLoading ? ( @@ -91,7 +97,7 @@ const AccountManage = () => {
- {data.profileImg ? ( + {profileUrl == null && data.profileImg ? ( {"이미지"} {
- + {updateUserLoading ? ( + + ) : ( + + )}