닉네임 변경 처리 수정

src/apis/Users.js

@@ -42,7 +42,7 @@ export const UserChangeNickName = async (token, params) => {
 			headers: { Authorization: `Bearer ${token}` },
 		});
 
-		return res;
+		return res.data;
 	} catch (e) {
 		if (e instanceof Error) {
 			throw new Error('UserChangeNickName Error', e);

src/components/DataManage/NicknameChangeModal.js

@@ -2,16 +2,19 @@ import { styled } from 'styled-components';
 import { useEffect, useState } from 'react';
 
 import { Title } from '../../styles/Components';
-import { TextInput, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
+import { TextInput, BtnWrapper } from '../../styles/Components';
 import Button from '../../components/common/button/Button';
 import Modal from '../../components/common/modal/Modal';
 import { UserChangeNickName } from '../../apis';
+import { alertTypes } from '../../assets/data/types';
+import { useAlert } from '../../context/AlertProvider';
+import { useLoading } from '../../context/LoadingProvider';
 
 const NicknameChangeModal = ({ pwPop, handleClick, dataList }) => {
+	const {showModal, showToast} = useAlert();
+	const {withLoading} = useLoading();
+
 	let nickName = dataList.char_info && dataList.char_info.character_name;
-	const [modifyModal, setModifyModal] = useState('hidden');
-	const [completeModal, setCompleteModal] = useState('hidden');
-	const [completeText, setCompleteText] = useState('');
 
 	const [resultData, setResultData] = useState({
 		guid: '',
@@ -20,42 +23,42 @@ const NicknameChangeModal = ({ pwPop, handleClick, dataList }) => {
 	});
 
 	useEffect(() => {
-		setResultData({ ...resultData, guid: dataList.user_info && dataList.user_info.aid, nickname: dataList.char_info && dataList.char_info.character_name });
+		setResultData({ ...resultData,
+			guid: dataList.user_info && dataList.user_info.aid,
+			nickname: dataList.char_info && dataList.char_info.character_name
+		});
 	}, [dataList]);
 
-	// 수정 모달창
+	const handleSubmit = async (type, param = null) => {
-	const handleModifyModal = () => {
+		switch (type) {
-		if (modifyModal === 'hidden') {
+
-			setModifyModal('view');
+			case "nicknameChangeSubmit":
-		} else {
+				showModal('NICKNAME_CHANGES_CONFIRM', {
-			setModifyModal('hidden');
+					type: alertTypes.confirm,
+					onConfirm: () => handleSubmit('nicknameChange')
+				});
+				break;
+
+			case "nicknameChange":
+				const token = sessionStorage.getItem('token');
+
+				await withLoading(async () => {
+					return await UserChangeNickName(token, resultData);
+				}).then(data =>{
+					console.log(data);
+					if(data.result === 'ERROR'){
+						showToast(data.data.message, {type: alertTypes.error});
+					}else{
+						showToast('NICKNAME_CHANGES_COMPLETE', {type: alertTypes.success});
+					}
+				}).catch(error => {
+					showToast(error, {type: alertTypes.error});
+				}).finally(() => {
+					handleClick();
+				});
+				break;
 		}
-	};
+	}
-
-	// 완료 모달창
-	const handleCompleteModal = () => {
-		if (completeModal === 'hidden') {
-			setCompleteModal('view');
-		} else {
-			setCompleteModal('hidden');
-
-			handleClick();
-			completeText === '변경이 완료되었습니다.' && window.location.reload();
-		}
-	};
-
-	// 수정
-	const handleModifyNotice = async () => {
-		const token = sessionStorage.getItem('token');
-
-		const message = await UserChangeNickName(token, resultData);
-
-		// console.log(message);
-		message.data.data.message !== '수정 하였습니다.' ? setCompleteText('변경 닉네임이 이미 존재합니다.\n다시 시도해주세요.') : setCompleteText('변경이 완료되었습니다.');
-
-		handleCompleteModal();
-		handleModifyModal();
-	};
 
 	return (
 		<>
@@ -82,29 +85,7 @@ const NicknameChangeModal = ({ pwPop, handleClick, dataList }) => {
 				</PwSetTable>
 				<BtnWrapper $justify="center" $gap="10px">
 					<Button theme="line" text="취소" handleClick={handleClick} />
-					<Button theme="primary" text="변경하기" handleClick={handleModifyModal} />
+					<Button theme="primary" text="변경하기" handleClick={() => handleSubmit('nicknameChangeSubmit')} />
-				</BtnWrapper>
-			</Modal>
-
-			{/* 확인 모달 */}
-			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={modifyModal}>
-				<BtnWrapper $justify="flex-end">
-					<ButtonClose onClick={handleModifyModal} />
-				</BtnWrapper>
-				<ModalText $align="center">닉네임을 변경하시겠습니까?</ModalText>
-				<BtnWrapper $gap="10px">
-					<Button text="취소" theme="line" size="large" width="100%" handleClick={handleModifyModal} />
-					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleModifyNotice} />
-				</BtnWrapper>
-			</Modal>
-			{/* 완료 모달 */}
-			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={completeModal}>
-				<BtnWrapper $justify="flex-end">
-					<ButtonClose onClick={handleCompleteModal} />
-				</BtnWrapper>
-				<ModalText $align="center">{completeText}</ModalText>
-				<BtnWrapper $gap="10px">
-					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleCompleteModal} />
 				</BtnWrapper>
 			</Modal>
 		</>

src/components/DataManage/UserDefaultInfo.js

@@ -193,10 +193,10 @@ const UserDefaultInfo = ({ userInfo }) => {
 							<td colSpan="3">
 								{dataList.char_info && dataList.char_info.character_name}
 								<EditButton
-									hidden={true}
+									// hidden={true}
 									onClick={e => {
 										e.preventDefault();
-										handleModalClose('pwChange');
+										handleModalView('pwChange');
 									}}></EditButton>
 							</td>
 						</tr>
@@ -219,7 +219,13 @@ const UserDefaultInfo = ({ userInfo }) => {
 					</tbody>
 				</UserInfoTable>
 			</div>
-			<NicknameChangeModal pwPop={modalState.pwChangeModal} handleClick={() => handleModalClose('pwChange')} dataList={dataList} />
+			<NicknameChangeModal
+				pwPop={modalState.pwChangeModal}
+				handleClick={() => {
+					handleModalClose('pwChange');
+					fetchData();
+				}}
+				dataList={dataList} />
 		</>
 	);
 };

src/i18n.js

@@ -44,6 +44,9 @@ const resources = {
 			WARNING_TYPE_CHECK: '타입을 확인해주세요.',
 			DATE_START_DIFF_END_WARNING :"종료일은 시작일보다 하루 이후여야 합니다.",
 			SEARCH_REQUIRED_WARNING:"필수 입력 항목을 확인해주세요.",
+			//user
+			NICKNAME_CHANGES_CONFIRM: '닉네임을 변경하시겠습니까?',
+			NICKNAME_CHANGES_COMPLETE: '닉네임 변경이 완료되었습니다.',
 			//table
 			TABLE_ITEM_DELETE_TITLE: "선택 삭제",
 			TABLE_BUTTON_DETAIL_TITLE: "상세보기",
@@ -148,7 +151,11 @@ const resources = {
 			FILE_BUSINESS_LOG: 'Caliverse_Log.xlsx',
 			FILE_BATTLE_EVENT: 'Caliverse_Battle_Event.xlsx',
 			//서버 에러메시지
-			DYNAMODB_NOT_USER: '유저 정보를 확인해주세요.'
+			DYNAMODB_NOT_USER: '유저 정보를 확인해주세요.',
+			NICKNAME_EXIT_ERROR: '해당 닉네임이 존재합니다.',
+			NICKNAME_NUMBER_ERROR: '닉네임은 첫번째 글자에 숫자를 허용하지 않습니다.',
+			NICKNAME_SPECIALCHAR_ERROR: '닉네임은 특수문자를 사용할 수 없습니다.',
+			NICKNAME_LANGTH_ERROR: '닉네임은 최소 2글자에서 최대 12글자까지 허용 합니다.'
 		}
 	},
 	en: {