[feat] alert to modal

my-trash-bin · Dec 15, 2023 · e5860df · e5860df
1 parent 16c28eb
commit e5860df
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 190 deletions.
diff --git a/project/frontend/src/app/2fa/page.tsx b/project/frontend/src/app/2fa/page.tsx
@@ -10,13 +10,13 @@ function TwofactorPage() {
   const { api } = useContext(ApiContext);
   const router = useRouter();
   const [password, setPassword] = useState('');
-  const { openIsInvalidPassword } = useToast();
+  const { openMessage } = useToast();
   function handlePassword(e: React.ChangeEvent<HTMLInputElement>) {
     setPassword(e.target.value);
   }
   const handleSubmitClick = useCallback(async () => {
     if (!password) {
-      alert('비밀번호가 입력되지 않았습니다.');
+      openMessage('비밀번호를 입력해주세요!');
       return;
     }
     try {
@@ -30,15 +30,15 @@ function TwofactorPage() {
       }
     } catch (error: any) {
       if (error.status === 422) {
-        openIsInvalidPassword();
+        openMessage('비밀번호가 틀렸습니다!');
       } else if (error.status === 401) {
-        alert('JWT가 올바르지 않습니다.');
+        openMessage('로그인이 필요합니다!');
       } else if (error.status === 403) {
-        alert('JWT Phase가 올바르지 않습니다.');
+        openMessage('이미 로그인 되어있습니다!');
       }
       console.error('Error 2fa login:', error);
     }
-  }, [api, password, router, openIsInvalidPassword]);
+  }, [api, password, router, openMessage]);
 
   return (
     <div className="min-h-screen flex items-center justify-center font-jeonju">

diff --git a/project/frontend/src/components/channel/SelectPenalty.tsx b/project/frontend/src/components/channel/SelectPenalty.tsx
@@ -5,21 +5,21 @@ export function SelectPenalty({
   channelId,
   memberId,
 }: Readonly<{ channelId: string; memberId: string }>) {
-  const { openIsKickUser, openIsBanUser, openIsMuteUser, openIsPromoteUser } = useToast();
+  const { openMessage } = useToast();
   const kickBanPromote = (actionType: string) => {
     getSocket().emit('kickBanPromote', {
       actionType,
       channelId,
       memberId,
     });
     if (actionType === 'KICK') {
-      openIsKickUser();
+      openMessage('유저를 내보냈습니다!');
     } else if (actionType === 'BANNED') {
-      openIsBanUser();
+      openMessage('유저를 차단했습니다!');
     } else if (actionType === 'MUTE') {
-      openIsMuteUser();
+      openMessage('유저의 입을 1분간 막았습니다!');
     } else if (actionType === 'PROMOTE') {
-      openIsPromoteUser();
+      openMessage('유저를 관리자로 임명했습니다!');
     }
   };
 

diff --git a/project/frontend/src/components/channel/modals/EnterPasswordModal.tsx b/project/frontend/src/components/channel/modals/EnterPasswordModal.tsx
@@ -15,7 +15,7 @@ export function EnterPasswordModal({
   targetChannelId: string;
 }>) {
   const { api } = useContext(ApiContext);
-  const { openIsBan, openIsInvalidPassword } = useToast();
+  const { openMessage } = useToast();
   const router = useRouter();
   const closeModal = () => {
     setIsModalOpen(false);
@@ -38,11 +38,11 @@ export function EnterPasswordModal({
     } catch (error: any) {
       console.error('Error participate channel:', error);
       if (error?.error.message === '밴된 유저는 채널에 들어갈 수 없습니다.')
-        openIsBan();
+        openMessage('방장이 거부합니다 ㅠ');
       else if (error?.error.message === '올바른 비밀번호 입력이 필요합니다.')
-        openIsInvalidPassword();
+        openMessage('비밀번호가 틀렸어요!');
     }
-  }, [api, targetChannelId, password, router, openIsBan, openIsInvalidPassword]);
+  }, [api, targetChannelId, password, router, openMessage]);
 
   return (
     <ModalLayout

diff --git a/project/frontend/src/components/channel/modals/ParticipationModal.tsx b/project/frontend/src/components/channel/modals/ParticipationModal.tsx
@@ -1,9 +1,9 @@
 import { ApiContext } from '@/app/_internal/provider/ApiContext';
+import useToast from '@/components/common/useToast';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useCallback, useContext } from 'react';
 import { ModalLayout } from './ModalLayout';
-import useToast from '@/components/common/useToast';
 
 export function ParticipationModal({
   isModalOpen,
@@ -23,7 +23,7 @@ export function ParticipationModal({
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  const { openIsBan, openIsFull } = useToast();
+  const { openMessage } = useToast();
 
   const participateChannel = useCallback(async () => {
     try {
@@ -37,10 +37,10 @@ export function ParticipationModal({
       setMyChannel(true);
     } catch (error: any) {
       if (error?.error.message === '밴된 유저는 채널에 들어갈 수 없습니다.') {
-        openIsBan();
+        openMessage('방장이 거부합니다 ㅠ');
         setIsModalOpen(false);
       } else if (error?.error.message === '최대 사용자 수 초과') {
-        openIsFull();
+        openMessage('방에 더이상 자리가 없어요!');
         setIsModalOpen(false);
       }
     }
@@ -51,8 +51,7 @@ export function ParticipationModal({
     router,
     setIsModalOpen,
     setMyChannel,
-    openIsBan,
-    openIsFull,
+    openMessage,
   ]);
 
   return (

diff --git a/project/frontend/src/components/channel/modals/SettingModal.tsx b/project/frontend/src/components/channel/modals/SettingModal.tsx
@@ -35,7 +35,7 @@ export function SettingModal({
   const [passwordValid, setPasswordValid] = useState(
     channelType !== ChannelType.PROTECTED,
   );
-  const { openSuccessChangeChannnal, openFailChangeChannnal } = useToast();
+  const { openMessage } = useToast();
 
   const channelTypeChangeEvent = (channelType: ChannelType) => {
     switch (channelType) {
@@ -58,10 +58,10 @@ export function SettingModal({
   const mutation = useMutation(api.channelControllerChannelUpdate, {
     onSuccess: () => {
       closeModal();
-      openSuccessChangeChannnal();
+      openMessage('채널 설정 변경!');
     },
     onError: () => {
-      openFailChangeChannnal();
+      openMessage('채널 설정 변경에 실패했습니다!');
     },
   });
 

diff --git a/project/frontend/src/components/common/Navbar.tsx b/project/frontend/src/components/common/Navbar.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import { use, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import InviteModal from '../game/InviteModal';
 import MatchingModal from '../game/MatchingModal';
 import useNotAllowedPong from '../game/notAllowedPong';
@@ -23,19 +23,7 @@ const Navbar = () => {
   const router = useRouter();
   const { setIsPlayer1 } = useStore();
   const { isOpen, closeToast } = useNotAllowedPong();
-  const { isBan, isFull, closeIsBan, closeIsFull,
-    isInvalidPassword, closeIsInvalidPassword,
-    isSuccessChangeChannnal, closeSuccessChangeChannnal,
-    isFailChangeChannnal, closeFailChangeChannnal,
-    isMute, closeIsMute,
-    isOut, closeIsOut,
-    isKick, closeIsKick,
-    isPromote, closeIsPromote,
-    isKickUser, closeIsKickUser,
-    isBanUser, closeIsBanUser,
-    isMuteUser, closeIsMuteUser,
-    isPromoteUser, closeIsPromoteUser,
-   } = useToast();
+  const { message, closeMessage } = useToast();
 
   useEffect(() => {
     const handlePlayerRole = (role: string) => {
@@ -54,56 +42,8 @@ const Navbar = () => {
   }, [isOpen, closeToast]);
 
   useEffect(() => {
-    setTimeout(() => closeIsBan(), 2000);
-  }, [isBan, closeIsBan]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsFull(), 2000);
-  }, [isFull, closeIsFull]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsMute(), 2000);
-  }, [isMute, closeIsMute]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsInvalidPassword(), 2000);
-  }, [isInvalidPassword, closeIsInvalidPassword]);
-
-  useEffect(() => {
-    setTimeout(() => closeSuccessChangeChannnal(), 2000);
-  }, [isSuccessChangeChannnal, closeSuccessChangeChannnal]);
-
-  useEffect(() => {
-    setTimeout(() => closeFailChangeChannnal(), 2000);
-  }, [isFailChangeChannnal, closeFailChangeChannnal]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsOut(), 2000);
-  }, [isOut, closeIsOut]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsKick(), 2000);
-  }, [isKick, closeIsKick]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsPromote(), 2000);
-  }, [isPromote, closeIsPromote]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsKickUser(), 2000);
-  }, [isKickUser, closeIsKickUser]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsBanUser(), 2000);
-  }, [isBanUser, closeIsBanUser]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsMuteUser(), 2000);
-  }, [isMuteUser, closeIsMuteUser]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsPromoteUser(), 2000);
-  }, [isPromoteUser, closeIsPromoteUser]);
+    setTimeout(() => closeMessage(), 2000);
+  }, [message, closeMessage]);
 
   useEffect(() => {
     const handleGoPong = (data: {
@@ -147,19 +87,7 @@ const Navbar = () => {
     'fixed w-[300px] h-[100px] left-1/2 p-sm transform -translate-x-1/2 translate-y-1/2 flex justify-center items-center bg-default border-3 border-dark-purple text-dark-purple rounded-md z-50 text-h3';
   return (
     <>
-      {isBan && <div className={css}>방장이 거부합니다 ㅠ</div>}
-      {isKick && <div className={css}>방장이 나가라고 합니다!</div>}
-      {isPromote && <div className={css}>관리자가 되었습니다!</div>}
-      {isKickUser && <div className={css}>유저를 내보냈습니다!</div>}
-      {isBanUser && <div className={css}>유저를 차단했습니다!</div>}
-      {isMuteUser && <div className={css}>유저의 입을 1분간 막았습니다!</div>}
-      {isPromoteUser && <div className={css}>유저를 관리자로 만들었습니다!</div>}
-      {isOut && <div className={css}>채널에서 나갔습니다!</div>}
-      {isMute && <div className={css}>방장이 1분간 조용히 하래요 ㅠ</div>}
-      {isSuccessChangeChannnal && <div className={css}>방을 변경했습니다!</div>}
-      {isFailChangeChannnal && <div className={css}>방 변경에 실패했습니다!</div>}
-      {isInvalidPassword && <div className={css}>비밀번호가 틀렸습니다!</div>}
-      {isFull && <div className={css}>방에 더이상 자리가 없어요!</div>}
+      {message && <div className={css}>{message}</div>}
       {isOpen && <div className={css}>게임이 시작되지 않았어요!</div>}
       {errorMessage && <div className={css}>{errorMessage}</div>}
       {isNewFriendOpen && (

diff --git a/project/frontend/src/components/common/useToast.tsx b/project/frontend/src/components/common/useToast.tsx
@@ -1,88 +1,15 @@
 import { create } from 'zustand';
 
 interface Toast {
-  isBan: boolean;
-  openIsBan: () => void;
-  closeIsBan: () => void;
-  isFull: boolean;
-  openIsFull: () => void;
-  closeIsFull: () => void;
-  isInvalidPassword: boolean;
-  openIsInvalidPassword: () => void;
-  closeIsInvalidPassword: () => void;
-  isSuccessChangeChannnal: boolean;
-  openSuccessChangeChannnal: () => void;
-  closeSuccessChangeChannnal: () => void;
-  isFailChangeChannnal: boolean;
-  openFailChangeChannnal: () => void;
-  closeFailChangeChannnal: () => void;
-  isMute: boolean;
-  openIsMute: () => void;
-  closeIsMute: () => void;
-  isOut: boolean;
-  openIsOut: () => void;
-  closeIsOut: () => void;
-  isKick: boolean;
-  openIsKick: () => void;
-  closeIsKick: () => void;
-  isPromote: boolean;
-  openIsPromote: () => void;
-  closeIsPromote: () => void;
-  isKickUser: boolean;
-  openIsKickUser: () => void;
-  closeIsKickUser: () => void;
-  isBanUser: boolean;
-  openIsBanUser: () => void;
-  closeIsBanUser: () => void;
-  isMuteUser: boolean;
-  openIsMuteUser: () => void;
-  closeIsMuteUser: () => void;
-  isPromoteUser: boolean;
-  openIsPromoteUser: () => void;
-  closeIsPromoteUser: () => void;
+  message?: string;
+  openMessage: (message: string) => void;
+  closeMessage: () => void;
 }
 
 const useToast = create<Toast>((set) => {
   return {
-    isBan: false,
-    openIsBan: () => set({ isBan: true }),
-    closeIsBan: () => set({ isBan: false }),
-    isFull: false,
-    openIsFull: () => set({ isFull: true }),
-    closeIsFull: () => set({ isFull: false }),
-    isInvalidPassword: false,
-    openIsInvalidPassword: () => set({ isInvalidPassword: true }),
-    closeIsInvalidPassword: () => set({ isInvalidPassword: false }),
-    isSuccessChangeChannnal: false,
-    openSuccessChangeChannnal: () => set({ isSuccessChangeChannnal: true }),
-    closeSuccessChangeChannnal: () => set({ isSuccessChangeChannnal: false }),
-    isFailChangeChannnal: false,
-    openFailChangeChannnal: () => set({ isFailChangeChannnal: true }),
-    closeFailChangeChannnal: () => set({ isFailChangeChannnal: false }),
-    isMute: false,
-    openIsMute: () => set({ isMute: true }),
-    closeIsMute: () => set({ isMute: false }),
-    isOut: false,
-    openIsOut: () => set({ isOut: true }),
-    closeIsOut: () => set({ isOut: false }),
-    isKick: false,
-    openIsKick: () => set({ isKick: true }),
-    closeIsKick: () => set({ isKick: false }),
-    isPromote: false,
-    openIsPromote: () => set({ isPromote: true }),
-    closeIsPromote: () => set({ isPromote: false }),
-    isKickUser: false,
-    openIsKickUser: () => set({ isKickUser: true }),
-    closeIsKickUser: () => set({ isKickUser: false }),
-    isBanUser: false,
-    openIsBanUser: () => set({ isBanUser: true }),
-    closeIsBanUser: () => set({ isBanUser: false }),
-    isMuteUser: false,
-    openIsMuteUser: () => set({ isMuteUser: true }),
-    closeIsMuteUser: () => set({ isMuteUser: false }),
-    isPromoteUser: false,
-    openIsPromoteUser: () => set({ isPromoteUser: true }),
-    closeIsPromoteUser: () => set({ isPromoteUser: false }),
+    openMessage: (message) => set({ message: message }),
+    closeMessage: () => set({ message: undefined }),
   };
 });
 

diff --git a/project/frontend/src/components/dm/message/MessageSendBox.tsx b/project/frontend/src/components/dm/message/MessageSendBox.tsx
@@ -16,12 +16,12 @@ export function MessageSendBox({
   targetUserId?: string;
 }) {
   const [message, setMessage] = useState<string>('');
-  const { openIsMute } = useToast();
+  const { openMessage } = useToast();
   useEffect(() => {
     const socket = getSocket();
     socket.on('exception', (data: any) => {
       if (data.message === '뮤트 상태의 유저입니다.') {
-        openIsMute();
+        openMessage('방장이 1분간 조용히 하래요 ㅠ');
       }
     });
     return () => {

diff --git a/project/frontend/src/components/profile/ProfileEditModal.tsx b/project/frontend/src/components/profile/ProfileEditModal.tsx
@@ -5,6 +5,7 @@ import { ApiContext } from '../../app/_internal/provider/ApiContext';
 import { ModalLayout } from '../channel/modals/ModalLayout';
 import { Button } from '../common/Button';
 import { avatarToUrl } from '@/app/_internal/util/avatarToUrl';
+import useToast from '../common/useToast';
 
 interface ModalProfileProps {
   isOpen: boolean;
@@ -27,6 +28,7 @@ export const ProfileEditModal: React.FC<ModalProfileProps> = ({
   const [isChanged, setIsChanged] = useState(false);
   const [newData, setNewData] = useState<UserProfileDto>(defaultData);
   const [password, setPassword] = useState('');
+  const { openMessage } = useToast();
 
   useEffect(() => {
     setIsChanged(false);
@@ -55,9 +57,7 @@ export const ProfileEditModal: React.FC<ModalProfileProps> = ({
       onClose();
     } catch (error: any) {
       if (error.status === 400) {
-        alert(
-          '비밀번호는 6-12자의 영문, 숫자, 하이픈(-), 언더스코어(_)만 사용 가능합니다',
-        );
+        openMessage('비밀번호는 6-12자의 영문, 숫자, 하이픈(-), 언더스코어(_)만 사용 가능합니다');
       }
       console.error('Error send password:', error);
     }