마이페이지,계정관리 fix

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,
   };
 };
 

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();
     },
   },
 

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,

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 <Error code={403} />;
   return logInLoading ? (
     <Loading loading={updateUserLoading} />
@@ -91,7 +97,7 @@ const AccountManage = () => {
       <ProfileBox>
         <div>
           <Profile isHover={isHover}>
-            {data.profileImg ? (
+            {profileUrl == null && data.profileImg ? (
               <img
                 src={data.profileImg}
                 alt={"이미지"}
@@ -119,13 +125,18 @@ const AccountManage = () => {
           </SvgBox>
         </div>
         <Form onSubmit={onSubmitNick}>
-          <AutosizeInput
-            name="form-field-name"
-            placeholder={data.nickname}
-            value={inputValue}
-            onChange={onChange}
-            inputStyle={inputStyle}
-          />
+          {updateUserLoading ? (
+            <StyledSpinner />
+          ) : (
+            <AutosizeInput
+              name="form-field-name"
+              placeholder={data.nickname}
+              value={inputValue}
+              onChange={onChange}
+              inputStyle={inputStyle}
+              maxLength="15"
+            />
+          )}
           <Button type="submit">
             <SVG
               type={ENUM.CONFIRM}

src/view/mypage/MypageMain.jsx

@@ -99,7 +99,7 @@ const MypageMain = memo((props) => {
             <InfoSubBox>
               <InfoInBox>
                 <InfoTitle>참여 테스트</InfoTitle>
-                <InfoCnt>{data.participantsCnt}개</InfoCnt>
+                <InfoCnt>{data.testParticipantsCnt}개</InfoCnt>
               </InfoInBox>
             </InfoSubBox>
           </InfoArea>