Merge pull request #122 from prgrms-web-devcourse-final-project/80-fe…

…at-toast-ui-setting feat/#80-toast UI setting, backgroundImage 경고 문제 해결
prgrms-web-devcourse-final-project · Dec 9, 2024 · 6bba112 · 6bba112
2 parents 5bf27a7 + ce143e7
commit 6bba112
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 138 deletions.
diff --git a/app/(nav)/home/page.tsx b/app/(nav)/home/page.tsx
@@ -18,35 +18,7 @@ import WaitingRoomWebSocket from '@/lib/websocket/waittingRoomWebsocket';
 
 import { toast } from 'react-hot-toast';
 import LocationListBottomSheet from '@/components/Common/BottomSheet/LocationListBottomSheet';
-
-interface InviteToastProps {
-  message: string;
-  onAccept: () => void;
-  onReject: () => void;
-  toastId: string;
-}
-
-const InviteToast = ({ message, onAccept, onReject }: InviteToastProps) => {
-  return (
-    <div className="bg-white rounded-lg shadow-lg p-4 max-w-sm w-full mx-auto">
-      <p className="text-gray-800 mb-4">{message}</p>
-      <div className="flex justify-end space-x-2">
-        <button
-          onClick={onReject}
-          className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
-        >
-          거절
-        </button>
-        <button
-          onClick={onAccept}
-          className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
-        >
-          수락
-        </button>
-      </div>
-    </div>
-  );
-};
+import { InviteToast } from '@/components/Layout/Home/InviteToast/InviteToast';
 
 const handleRegularNotification = (notification: NotificationMessage) => {
   toast(
@@ -65,68 +37,6 @@ const handleRegularNotification = (notification: NotificationMessage) => {
     }
   );
 };
-//   notification: NotificationMessage,
-//   router: AppRouterInstance,
-//   addMessageFn: (message: any) => void
-// ) => {
-//   toast.custom(
-//     (t) => (
-//       <InviteToast
-//         message={`${notification.groupName}에서 ${notification.senderNickName}님이 ${notification.action}`}
-//         onAccept={async () => {
-//           const stompClient = new Client({
-//             brokerURL: `${process.env.NEXT_PUBLIC_GROUP_WS_URL}/group-service/connect`,
-//           });
-
-//           // 연결 시도 전에 이벤트 핸들러 설정
-//           stompClient.onConnect = () => {
-//             console.log('WebSocket 연결 성공');
-
-//             // 구독 설정
-//             const subscription = stompClient.subscribe(
-//               `${process.env.NEXT_PUBLIC_GROUP_SUBSCRIBE}/${notification.groupId}`,
-//               (message: { body: string }) => {
-//                 console.log('Received message:', message.body);
-//                 const parsedMessage = JSON.parse(message.body);
-//                 addMessageFn({
-//                   ...parsedMessage,
-//                   timestamp: Date.now(),
-//                 });
-//               }
-//             );
-//             console.log('구독 설정 완료');
-//           };
-
-//           stompClient.onConnect = () => {
-//             stompClient.subscribe(
-//               `${process.env.NEXT_PUBLIC_GROUP_SUBSCRIBE}/${notification.groupId}`,
-//               (message: { body: string }) => {
-//                 console.log('Received message:', message.body);
-//                 const parsedMessage = JSON.parse(message.body);
-//                 addMessageFn({
-//                   ...parsedMessage,
-//                   timestamp: Date.now(),
-//                 });
-//               }
-//             );
-//           };
-//           stompClient.activate();
-//           router.push(`/game/${notification.groupId}/waitingRoom`);
-//           toast.dismiss(t.id);
-//         }}
-//         onReject={() => {
-//           toast.dismiss(t.id);
-//         }}
-//         toastId={t.id}
-//       />
-//     ),
-//     {
-//       position: 'top-center',
-//       duration: 30000,
-//     }
-//   );
-// };
-// ... existing code ...
 
 const handleInvitation = (
   notification: NotificationMessage,
@@ -162,55 +72,33 @@ const handleInvitation = (
 
 const connectSSE = (userId: string) => {
   const { setEventSource } = useSSEStore.getState();
-  let retryCount = 0;
-  const MAX_RETRIES = 3;
-  let retryTimeout: NodeJS.Timeout;
-
-  const connect = () => {
-    try {
-      const url = `/api/notification-service/connect/${encodeURIComponent(userId)}`;
-      console.log('SSE 연결 시도:', url);
-
-      const eventSource = new EventSource(url, {
-        withCredentials: true,
-      });
 
-      eventSource.onopen = () => {
-        console.log('SSE 연결 성공');
-        retryCount = 0;
-      };
+  try {
+    const url = `/api/notification-service/connect/${encodeURIComponent(userId)}`;
+    console.log('SSE 연결 시도:', url);
 
-      eventSource.onerror = (error) => {
-        console.error('SSE 연결 에러:', error);
+    const eventSource = new EventSource(url, {
+      withCredentials: true,
+    });
 
-        if (eventSource.readyState === EventSource.CLOSED) {
-          eventSource.close();
-          setEventSource(null);
-
-          if (retryCount < MAX_RETRIES) {
-            retryCount++;
-            const delay = Math.min(1000 * Math.pow(2, retryCount), 10000);
-            console.log(
-              `재연결 시도 ${retryCount}/${MAX_RETRIES} (${delay / 1000}초 후)`
-            );
-
-            clearTimeout(retryTimeout);
-            retryTimeout = setTimeout(connect, delay);
-          } else {
-            console.error('최대 재시도 횟수 도달');
-            toast.error('실시간 알림 연결에 실패했습니다');
-          }
-        }
-      };
+    eventSource.onopen = () => {
+      console.log('SSE 연결 성공');
+    };
 
-      return eventSource;
-    } catch (error) {
-      console.error('SSE 초기화 실패:', error);
-      return null;
-    }
-  };
+    eventSource.onerror = (error) => {
+      console.error('SSE 연결 에러:', error);
+      if (eventSource.readyState === EventSource.CLOSED) {
+        eventSource.close();
+        setEventSource(null);
+        toast.error('실시간 알림 연결이 끊어졌습니다');
+      }
+    };
 
-  return connect();
+    return eventSource;
+  } catch (error) {
+    console.error('SSE 초기화 실패:', error);
+    return null;
+  }
 };
 
 const Home = () => {

diff --git a/components/Common/RoomButton/RoomButton.styles.ts b/components/Common/RoomButton/RoomButton.styles.ts
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 // import CardBackground from '@/styles/Icon/CardBackGround.png';
 
-export const RoomButtonWrapper = styled.div<{ backgroundImage: string }>`
+export const RoomButtonWrapper = styled.div<{ $backgroundImage: string }>`
   width: 163px;
   height: 139px;
   border-radius: 12px;
-  background-image: url(${(props) => props.backgroundImage});
+  background-image: url(${(props) => props.$backgroundImage});
 `;
 
 export const RoomButtonLayout = styled.div`

diff --git a/components/Common/RoomButton/RoomButton.tsx b/components/Common/RoomButton/RoomButton.tsx
@@ -32,7 +32,7 @@ const RoomButton = ({
     artboards[Math.floor(Math.random() * artboards.length)];
 
   return (
-    <RoomButtonWrapper backgroundImage={randomArtboard.src}>
+    <RoomButtonWrapper $backgroundImage={randomArtboard.src}>
       <RoomButtonLayout>
         <RoomTitle>{title}</RoomTitle>
         <RoomPerson>