[feat/#513] ♻️ Refactor: 대기방 버그픽스, 리팩토링

Team-WeQuiz · May 30, 2024 · 32cb046 · 32cb046
1 parent caffc71
commit 32cb046
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 27 deletions.
diff --git a/chatty-fe/src/app/(game)/enter-room/[id]/_component/NicknameModal/NicknameModal.tsx b/chatty-fe/src/app/(game)/enter-room/[id]/_component/NicknameModal/NicknameModal.tsx
@@ -29,7 +29,8 @@ const NicknameModal = ({
       alert('닉네임을 입력해주세요.');
       return;
     }
-    router.push(`/waiting-room/${roomId}?nickname=${nickname}`);
+    const encodedNickname = encodeURIComponent(nickname);
+    router.push(`/waiting-room/${roomId}?nickname=${encodedNickname}`);
     closeModal();
   };
 

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/_components/ChatInput/ChatInput.tsx b/chatty-fe/src/app/(game)/waiting-room/[id]/_components/ChatInput/ChatInput.tsx
@@ -36,6 +36,7 @@ const ChatInput = ({
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+
     e.preventDefault();
 
     if (!message) return;

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/_components/QuizInfoCard/QuizInfoCard.tsx b/chatty-fe/src/app/(game)/waiting-room/[id]/_components/QuizInfoCard/QuizInfoCard.tsx
@@ -21,10 +21,14 @@ const QuizInfoCard = ({
   roomId,
   isSubscribed,
   setRoomCode,
+  isSolo,
+  isConnected,
 }: {
   roomId: number;
   isSubscribed: boolean;
   setRoomCode: (code: string) => void;
+  isSolo: boolean;
+  isConnected: boolean;
 }) => {
   const [data, setData] = useState<QuizInfo>(initialData);
   const { accessToken } = useAuthStore();
@@ -33,6 +37,7 @@ const QuizInfoCard = ({
 
   useEffect(() => {
     const fetchData = async () => {
+      console.log("소켓 연결~~~~");
       try {
         const response: QuizInfo = await getQuizInfo(roomId, accessToken);
         setData(response);
@@ -51,14 +56,15 @@ const QuizInfoCard = ({
           isFull: false,
           code: '',
         });
-        alert(error.message);
+        if (isSolo) alert('오랫동안 접속하지 않아 방이 삭제되었습니다.');
+        else alert('존재하지 않는 방입니다. 로비로 이동합니다.');
         router.push('/main-lobby');
       }
     };
-    if (accessToken && isSubscribed) {
+    if (isConnected && accessToken && isSubscribed) {
       fetchData();
     }
-  }, [isSubscribed, accessToken]);
+  }, [isConnected, isSubscribed, accessToken]);
 
   return (
     <div className={styles.infoCard}>

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/_components/QuizSummaryCard/QuizSummaryCard.tsx b/chatty-fe/src/app/(game)/waiting-room/[id]/_components/QuizSummaryCard/QuizSummaryCard.tsx
@@ -10,7 +10,7 @@ const QuizSummaryCard = ({ summary }: { summary: string }) => {
     const interval = setInterval(() => {
       setText((prevText) => {
         let newText = '';
-        newText = prevText + summary[i];
+        newText = prevText + summary.charAt(i);
         i++;
         return newText;
       });

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/_components/ReadyButton/ReadyButton.css.ts b/chatty-fe/src/app/(game)/waiting-room/[id]/_components/ReadyButton/ReadyButton.css.ts
@@ -13,7 +13,7 @@ export const readyContainer = style({
     '(max-width: 768px)': {
       padding: 4,
       flexDirection: 'column',
-      overflow: 'clip',
+      overflow: 'visible',
       height: '100%',
       gap: 5,
     },
@@ -24,6 +24,22 @@ export const readyButtonWrapper = style({
   width: '100%',
 });
 
+export const shareButtonWrapper = style({
+  position: 'relative',
+});
+
+const float = keyframes({
+  '0%': {
+    transform: 'translateY(0)',
+  },
+  '50%': {
+    transform: 'translateY(-10px)',
+  },
+  '100%': {
+    transform: 'translateY(0)',
+  },
+});
+
 export const readyStatus = style({
   fontSize: 30,
   fontFamily: 'var(--bagel-font)',
@@ -80,6 +96,46 @@ export const shareButton = style({
   },
 });
 
+export const toolTip = style({
+  position: 'absolute',
+  width: 120,
+  top: -50,
+  left: 'calc(50% - 60px)',
+  padding: 8,
+  borderRadius: 8,
+  backgroundColor: '#fff',
+  animation: `${float} 1s infinite`,
+  visibility: 'hidden',
+  opacity: 0,
+  transition: 'opacity 0.3s',
+  boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+  zIndex: 3,
+  selectors: {
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: '100%',
+      left: '50%',
+      marginLeft: '-5px',
+      borderWidth: '5px',
+      borderStyle: 'solid',
+      borderColor: '#fff transparent transparent transparent',
+    },
+    [`${shareButtonWrapper}:hover &`]: {
+      visibility: 'visible',
+      opacity: 0.9,
+    },
+  },
+});
+
+export const toolTipText = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignContent: 'center',
+  textAlign: 'center',
+  fontSize: 12,
+});
+
 export const modalContent = style({
   display: 'flex',
   flexDirection: 'column',

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/_components/ReadyButton/ReadyButton.tsx b/chatty-fe/src/app/(game)/waiting-room/[id]/_components/ReadyButton/ReadyButton.tsx
@@ -23,9 +23,11 @@ const ReadyButton = ({
   toggleBlock: boolean;
   code: string;
 }) => {
-  const { userStatuses, allUsersReady } = useWaitingStore();
+  const { userStatuses } = useWaitingStore();
   const [isReady, setIsReady] = useState<boolean>(false);
   const { Modal, isOpen, openModal, closeModal } = useModal();
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
 
   useEffect(() => {
     setIsReady(
@@ -41,6 +43,10 @@ const ReadyButton = ({
     });
   };
 
+  useEffect(() => {
+    if (!isOpen) setIsCopied(false);
+  }, [isOpen]);
+
   return (
     <>
       <div className={styles.readyContainer}>
@@ -59,15 +65,20 @@ const ReadyButton = ({
             </span>
           </GradButton>
         </div>
-        <GradButton rounded onClick={openModal}>
-          <Image
-            src="/images/share.svg"
-            alt="share"
-            width={28}
-            height={28}
-            className={styles.shareButton}
-          />
-        </GradButton>
+        <div className={styles.shareButtonWrapper}>
+          <GradButton rounded onClick={openModal}>
+            <Image
+              src="/images/share.svg"
+              alt="share"
+              width={28}
+              height={28}
+              className={styles.shareButton}
+            />
+          </GradButton>
+          <div className={`${styles.toolTip}`}>
+            <span className={styles.toolTipText}>코드를 공유해<br/>친구를 초대해보세요!</span>
+          </div>
+        </div>
       </div>
       <Modal isOpen={isOpen} onClose={closeModal}>
         <div className={styles.modalContent}>
@@ -89,10 +100,14 @@ const ReadyButton = ({
                 borderRadius={12}
                 endAdornment={
                   <button
-                    onClick={() => navigator.clipboard.writeText(code)}
+                    onClick={() => {
+                      setIsCopied(false);
+                      navigator.clipboard.writeText(code);
+                      setIsCopied(true);
+                    }}
                     className={styles.copyButton}
                   >
-                    복사하기
+                    복사하기 {isCopied ? '✅' : '\u00A0\u00A0\u00A0'}
                   </button>
                 }
               />

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/page.css.ts b/chatty-fe/src/app/(game)/waiting-room/[id]/page.css.ts
@@ -94,7 +94,7 @@ export const buttonWrapper = style({
       position: 'absolute',
       right: 0,
       width: 80,
-      height: "100%",
+      height: '100%',
     },
   },
 });

diff --git a/chatty-fe/src/app/(game)/waiting-room/[id]/page.tsx b/chatty-fe/src/app/(game)/waiting-room/[id]/page.tsx
@@ -11,15 +11,28 @@ import useAuthStore from '@/app/_store/useAuthStore';
 import useWaitingStore from '@/app/_store/useWaitingStore';
 import ReadyButton from './_components/ReadyButton/ReadyButton';
 import QuizSummaryCard from './_components/QuizSummaryCard/QuizSummaryCard';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 import { UserStatus } from '@/app/_types/WaitingStatus';
 import { startQuiz } from '@/app/_api/quiz';
 import { useRouter } from 'next/navigation';
 
 const WaitingRoom = ({ params }: { params: { id: number } }) => {
   const { id: userId } = useUserInfoStore();
   const searchParams = useSearchParams();
-  const nickname = searchParams.get('nickname');
+  //닉네임
+  const [nickname, setNickname] = useState<string>('');
+
+  useEffect(() => {
+    const nicknameFromUrl = decodeURIComponent(
+      searchParams.get('nickname') || '',
+    );
+    if (nicknameFromUrl === '' || nicknameFromUrl.length > 10) {
+      alert('올바르지 않은 닉네임 형식입니다');
+      router.push('/main-lobby');
+      return;
+    }
+    setNickname(decodeURIComponent(searchParams.get('nickname') || ''));
+  }, [searchParams]);
 
   const [isConnected, setIsConnected] = useState(false);
   const [isSubscribed, setIsSubscribed] = useState(false);
@@ -47,7 +60,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
   useEffect(() => {
     setCountdown(3);
     let timer: NodeJS.Timeout | null = null;
-    if (isQuizReady && allUsersReady) {
+    if (quizSummary && isQuizReady && allUsersReady) {
       timer = setInterval(() => {
         setCountdown((prevCount) => {
           const nextCount = prevCount - 1;
@@ -74,7 +87,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
     return () => {
       if (timer) clearInterval(timer);
     };
-  }, [isQuizReady, allUsersReady]);
+  }, [isQuizReady, allUsersReady, quizSummary]);
 
   useEffect(() => {
     const subscribeToStatus = (roomId: number) => {
@@ -105,7 +118,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
         (message) => {
           const data = JSON.parse(message.body);
           console.log('Received description message:', data);
-          setQuizSummary(data.description);
+          if (quizSummary === '') setQuizSummary(data.description);
         },
       );
     };
@@ -140,6 +153,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
 
     stompClient.onDisconnect = () => {
       console.log('Disconnected from WebSocket');
+      setIsConnected(false);
     };
 
     stompClient.onConnect = () => {
@@ -154,7 +168,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
       joinRoom(params.id);
     };
 
-    if (accessToken && userId) stompClient.activate();
+    if (accessToken && userId && nickname !== '') stompClient.activate();
 
     return () => {
       stompClient.deactivate();
@@ -166,7 +180,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
       <div className={styles.roomContainer}>
         <div className={styles.wideArea}>
           <div className={styles.userList}>
-            <UserList isQuizReady={isQuizReady} />
+            <UserList isQuizReady={quizSummary !== '' && isQuizReady} />
           </div>
           <div className={styles.chattingArea}>
             <ChatInput
@@ -182,6 +196,8 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
               roomId={params.id}
               isSubscribed={isSubscribed}
               setRoomCode={setRoomCode}
+              isSolo={userStatuses.length < 2}
+              isConnected={isConnected}
             />
             <QuizSummaryCard summary={quizSummary} />
           </div>
@@ -197,7 +213,7 @@ const WaitingRoom = ({ params }: { params: { id: number } }) => {
         </div>
         {isReady && (
           <div className={styles.readyStatus}>
-            {isQuizReady && allUsersReady ? (
+            {quizSummary && isQuizReady && allUsersReady ? (
               <span className={styles.readyStatusText}>
                 {countdown > 0 ? countdown : '퀴즈 시작 !'}
               </span>