[GGFE-247] 아이템 사용 alert 메시지 정리

components/modal/store/inventory/ChangeIdColorModal.tsx

@@ -5,6 +5,7 @@ import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { userState } from 'utils/recoil/layout';
 import { modalState } from 'utils/recoil/modal';
+import { ITEM_ALERT_MESSAGE } from 'constants/store/itemAlertMessage';
 import {
   ModalButtonContainer,
   ModalButton,
@@ -40,13 +41,15 @@ type errorPayload = {
   code: errorCodeType;
 };
 
+const { COMMON, ID_COLOR } = ITEM_ALERT_MESSAGE;
+
 const errorMessages: Record<errorCodeType, string> = {
-  IT200: '사용할 수 없는 아이템입니다.',
-  RC200: '이미 사용한 아이템입니다.',
-  RC100: '사용할 수 없는 아이템입니다.',
-  RC403: '사용할 수 없는 아이템입니다.',
-  UR100: 'USER NOT FOUND', // setError로 alert 띄우지 않고 처리
-  UR403: '유효하지 않은 색깔입니다.',
+  IT200: COMMON.ITEM_ERROR,
+  RC200: COMMON.USED_ERROR,
+  RC100: COMMON.ITEM_ERROR,
+  RC403: COMMON.ITEM_ERROR,
+  UR100: COMMON.USER_ERROR, // setError로 alert 띄우지 않고 처리
+  UR403: ID_COLOR.INVALID_ERROR,
 };
 
 export default function ChangeIdColorModal({
@@ -71,7 +74,7 @@ export default function ChangeIdColorModal({
     setIsLoading(true);
     try {
       await instance.patch('/pingpong/users/text-color', data);
-      alert('아이디 색상이 변경되었습니다.');
+      alert(ID_COLOR.SUCCESS);
     } catch (error: unknown) {
       if (isAxiosError<errorPayload>(error) && error.response) {
         const { code } = error.response.data;

components/modal/store/inventory/ChangeProfileBackgroundModal.tsx

@@ -5,6 +5,7 @@ import { Modal } from 'types/modalTypes';
 import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
+import { ITEM_ALERT_MESSAGE } from 'constants/store/itemAlertMessage';
 import {
   ModalButtonContainer,
   ModalButton,
@@ -30,12 +31,14 @@ type errorPayload = {
   code: errorCodeType;
 };
 
+const { COMMON } = ITEM_ALERT_MESSAGE;
+
 const errorMessages: Record<errorCodeType, string> = {
-  IT200: '사용할 수 없는 아이템입니다 (｡•́︿•̀｡)',
-  RC200: '이미 사용한 아이템입니다 (｡•́︿•̀｡)',
-  RC100: '사용할 수 없는 아이템입니다 (｡•́︿•̀｡)',
-  RC403: '사용할 수 없는 아이템입니다 (｡•́︿•̀｡)',
-  UR100: 'USER NOT FOUND',
+  IT200: COMMON.ITEM_ERROR,
+  RC200: COMMON.USED_ERROR,
+  RC100: COMMON.ITEM_ERROR,
+  RC403: COMMON.ITEM_ERROR,
+  UR100: COMMON.USER_ERROR, // setError로 alert 띄우지 않고 처리
 };
 
 export default function ChangeProfileBackgroundModal({

components/modal/store/inventory/ChangeProfileEdgeModal.tsx

@@ -5,6 +5,7 @@ import { Modal } from 'types/modalTypes';
 import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
+import { ITEM_ALERT_MESSAGE } from 'constants/store/itemAlertMessage';
 import {
   ModalButtonContainer,
   ModalButton,
@@ -30,12 +31,14 @@ type errorPayload = {
   code: errorCodeType;
 };
 
+const { COMMON } = ITEM_ALERT_MESSAGE;
+
 const errorMessages: Record<errorCodeType, string> = {
-  IT200: '사용할 수 없는 아이템입니다 (｡•́︿•̀｡)',
-  RC200: '이미 사용한 아이템입니다 (｡•́︿•̀｡)',
-  RC100: '사용할 수 없는 아이템입니다 (｡•́︿•̀｡)',
-  RC403: '사용할 수 없는 아이템입니다 (｡•́︿•̀｡)',
-  UR100: 'USER NOT FOUND',
+  IT200: COMMON.ITEM_ERROR,
+  RC200: COMMON.USED_ERROR,
+  RC100: COMMON.ITEM_ERROR,
+  RC403: COMMON.ITEM_ERROR,
+  UR100: COMMON.USER_ERROR, // setError로 alert 띄우지 않고 처리
 };
 
 export default function ChangeProfileEdgeModal({

components/modal/store/inventory/EditMegaphoneModal.tsx

@@ -5,6 +5,7 @@ import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { userState } from 'utils/recoil/layout';
 import { modalState } from 'utils/recoil/modal';
+import { ITEM_ALERT_MESSAGE } from 'constants/store/itemAlertMessage';
 import { MegaphoneItem } from 'components/Layout/MegaPhone';
 import {
   ModalButtonContainer,
@@ -38,10 +39,12 @@ type errorPayload = {
   code: errorCodeType;
 };
 
+const { EDIT_MEGAPHONE } = ITEM_ALERT_MESSAGE;
+
 const errorMessages: Record<errorCodeType, string> = {
-  ME200: '확성기를 찾을 수 없습니다.',
-  RC500: '삭제할 수 없는 확성기입니다.',
-  RC200: '삭제할 수 없는 확성기입니다.',
+  ME200: EDIT_MEGAPHONE.NOT_FOUND_ERROR,
+  RC500: EDIT_MEGAPHONE.ITEM_ERROR,
+  RC200: EDIT_MEGAPHONE.ITEM_ERROR,
 };
 
 export default function EditMegaphoneModal({ receiptId }: EditMegaphoneProps) {
@@ -73,7 +76,7 @@ export default function EditMegaphoneModal({ receiptId }: EditMegaphoneProps) {
     instance
       .delete(`/pingpong/megaphones/${megaphoneData.megaphoneId}`)
       .then(() => {
-        alert('확성기가 삭제되었습니다.');
+        alert(EDIT_MEGAPHONE.SUCCESS);
       })
       .catch((error: unknown) => {
         if (isAxiosError<errorPayload>(error) && error.response) {

components/modal/store/inventory/NewMegaphoneModal.tsx

@@ -5,6 +5,7 @@ import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { userState } from 'utils/recoil/layout';
 import { modalState } from 'utils/recoil/modal';
+import { ITEM_ALERT_MESSAGE } from 'constants/store/itemAlertMessage';
 import { MegaphoneItem } from 'components/Layout/MegaPhone';
 import {
   ModalButtonContainer,
@@ -42,13 +43,15 @@ type errorPayload = {
   code: errorCodeType;
 };
 
+const { COMMON, MEGAPHONE } = ITEM_ALERT_MESSAGE;
+
 const errorMessages: Record<errorCodeType, string> = {
-  ME200: '23:55-00:05 사이에는 확성기 사용이 불가능합니다.',
-  RC100: '아이템을 찾을 수 없습니다.',
-  RC500: '사용 불가능한 아이템입니다.',
-  IT200: '사용 불가능한 아이템입니다.',
-  RC200: '이미 등록한 확성기 아이템입니다.',
-  CM007: '확성기에 등록할 수 있는 글자수는 1 이상 30 이하입니다.',
+  ME200: MEGAPHONE.TIME_ERROR,
+  RC100: COMMON.ITEM_ERROR,
+  RC500: COMMON.ITEM_ERROR,
+  IT200: COMMON.ITEM_ERROR,
+  RC200: COMMON.USED_ERROR,
+  CM007: MEGAPHONE.FORMAT_ERROR,
 };
 
 export default function NewMegaphoneModal({ receiptId }: NewMegaphoneProps) {
@@ -59,7 +62,7 @@ export default function NewMegaphoneModal({ receiptId }: NewMegaphoneProps) {
   const setError = useSetRecoilState(errorState);
   async function handleUseMegaphone() {
     if (content.length === 0) {
-      alert('확성기 내용을 입력해주세요.');
+      alert(MEGAPHONE.NULL_ERROR);
       return;
     }
     const data: UseMegaphoneRequest = {
@@ -69,7 +72,7 @@ export default function NewMegaphoneModal({ receiptId }: NewMegaphoneProps) {
     setIsLoading(true);
     try {
       await instance.post('/pingpong/megaphones', data);
-      alert('확성기가 등록되었습니다.');
+      alert(MEGAPHONE.SUCCESS);
     } catch (error: unknown) {
       if (isAxiosError<errorPayload>(error) && error.response) {
         const { code } = error.response.data;

components/modal/store/inventory/ProfileImageModal.tsx

@@ -8,6 +8,7 @@ import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { userState } from 'utils/recoil/layout';
 import { modalState } from 'utils/recoil/modal';
+import { ITEM_ALERT_MESSAGE } from 'constants/store/itemAlertMessage';
 import {
   ModalButtonContainer,
   ModalButton,
@@ -45,23 +46,17 @@ type errorPayload = {
   code: errorCodeType;
 };
 
-const message = {
-  SUCCESS: '프로필 이미지가 변경되었습니다.',
-  ITEM_ERROR: '사용할 수 없는 아이템입니다.',
-  USER_ERROR: 'USER NOT FOUND',
-  NULL_ERROR: '이미지를 선택해주세요.',
-  FORMAT_ERROR: '프로필 이미지는 50KB 이하의 jpeg 파일만 업로드 가능합니다.',
-};
+const { COMMON, PROFILE } = ITEM_ALERT_MESSAGE;
 
 const errorMessage: Record<errorCodeType, string> = {
-  IT200: message.ITEM_ERROR,
-  RC200: message.ITEM_ERROR,
-  RC100: message.ITEM_ERROR,
-  RC403: message.ITEM_ERROR,
-  UR100: message.USER_ERROR, // alert을 띄우지 않고 setError만 호출
-  UR200: message.NULL_ERROR,
-  UR401: message.FORMAT_ERROR,
-  UR402: message.FORMAT_ERROR,
+  IT200: COMMON.ITEM_ERROR,
+  RC200: COMMON.ITEM_ERROR,
+  RC100: COMMON.ITEM_ERROR,
+  RC403: COMMON.ITEM_ERROR,
+  UR100: COMMON.USER_ERROR, // alert을 띄우지 않고 setError만 호출
+  UR200: PROFILE.NULL_ERROR,
+  UR401: PROFILE.FORMAT_ERROR,
+  UR402: PROFILE.FORMAT_ERROR,
 };
 
 export default function ProfileImageModal({ receiptId }: ProfileImageProps) {
@@ -76,7 +71,7 @@ export default function ProfileImageModal({ receiptId }: ProfileImageProps) {
 
   async function handleProfileImageUpload() {
     if (!imgData) {
-      alert(message.NULL_ERROR);
+      alert(PROFILE.NULL_ERROR);
       return;
     }
     setIsLoading(true);
@@ -93,7 +88,7 @@ export default function ProfileImageModal({ receiptId }: ProfileImageProps) {
         new Blob([imgData], { type: 'image/jpeg' })
       );
       await instance.post('/pingpong/users/profile-image', formData);
-      alert(message.SUCCESS);
+      alert(PROFILE.SUCCESS);
     } catch (error: unknown) {
       if (isAxiosError<errorPayload>(error) && error.response) {
         const { code } = error.response.data;

constants/store/itemAlertMessage.ts

@@ -0,0 +1,31 @@
+const SAD_EMOJI = '(｡•́︿•̀｡)' + ' ';
+const HAPPY_EMOJI = '(｡•̀ᴗ-)✧' + ' ';
+
+export const ITEM_ALERT_MESSAGE = {
+  COMMON: {
+    ITEM_ERROR: SAD_EMOJI + '사용할 수 없는 아이템입니다.',
+    USED_ERROR: SAD_EMOJI + '이미 사용한 아이템입니다.',
+    USER_ERROR: HAPPY_EMOJI + 'USER NOT FOUND',
+  },
+  ID_COLOR: {
+    SUCCESS: HAPPY_EMOJI + '아이디 색상이 변경되었습니다.',
+    INVALID_ERROR: SAD_EMOJI + '유효하지 않은 색깔입니다.',
+  },
+  MEGAPHONE: {
+    SUCCESS: HAPPY_EMOJI + '확성기가 등록되었습니다.',
+    TIME_ERROR: SAD_EMOJI + '23:55-00:05 사이에는 확성기 사용이 불가능합니다.',
+    FORMAT_ERROR: SAD_EMOJI + '확성기에는 30자 이하의 문장만 입력 가능합니다.',
+    NULL_ERROR: SAD_EMOJI + '입력된 내용이 없습니다.',
+  },
+  EDIT_MEGAPHONE: {
+    SUCCESS: HAPPY_EMOJI + '확성기가 삭제되었습니다.',
+    NOT_FOUND_ERROR: SAD_EMOJI + '확성기를 찾을 수 없습니다.',
+    ITEM_ERROR: SAD_EMOJI + '삭제할 수 없는 확성기입니다.',
+  },
+  PROFILE: {
+    SUCCESS: HAPPY_EMOJI + '프로필 이미지가 변경되었습니다.',
+    NULL_ERROR: SAD_EMOJI + '이미지를 선택해주세요.',
+    FORMAT_ERROR:
+      SAD_EMOJI + '프로필 이미지는 50KB 이하의 jpeg 파일만 업로드 가능합니다.',
+  },
+};