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 ? (
{