Merge remote-tracking branch 'origin/develop' into feat/#172-change-p…

…assword-api

package.json

@@ -23,7 +23,8 @@
     "@tanem/react-nprogress": "^5.0.51",
     "@tanstack/react-query": "^5.14.2",
     "@yourssu/design-system-react": "^1.1.2",
-    "@yourssu/logging-system-react": "^1.0.0",
+    "@yourssu/logging-system-react": "^1.1.0",
+    "@yourssu/utils": "^0.2.1",
     "axios": "^1.6.2",
     "date-fns": "^3.6.0",
     "react": "^18.2.0",

src/home/components/Notification/Notification.tsx

@@ -1,7 +1,9 @@
-import { useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 
 import { IcNoticeLine } from '@yourssu/design-system-react';
+import { ErrorBoundary } from 'react-error-boundary';
 
+import { useGetAnnouncement } from '@/home/hooks/useGetAnnouncement';
 import { useInterval } from '@/hooks/useInterval';
 
 import {
@@ -12,65 +14,75 @@ import {
   StyledNotificationContainer,
 } from './Notification.style';
 
-const Dummy = [
-  '그거 아시나요?? 지금은 2월이라는 거? 당연함 2월임',
-  '안녕하세요~~ 공지입니다.',
-  '가나다라마바사아자차카타파하갸냐댜랴먀뱌샤야쟈챠캬탸퍄햐거너더러머버서어저처커터퍼허겨녀뎌려며벼셔여져쳐켜텨펴혀',
-  '이거슨 테스트여',
-];
-
-// TODO: 추후 공지사항 API 연결 확인 필요
-export const Notification = () => {
-  const [currentIndex, setCurrentIndex] = useState(1);
+const NotificationContent = () => {
+  const { data: announcements } = useGetAnnouncement();
+  const [currentIndex, setCurrentIndex] = useState(0);
   const [activeTransition, setActiveTransition] = useState(true);
   const slideRef = useRef<HTMLDivElement>(null);
-  const notificationArray = [Dummy[Dummy.length - 1], ...Dummy, Dummy[0]].map(
-    (notification, index) => ({
-      id: index + 1,
-      notification,
-    })
-  );
+
+  const notificationArray =
+    announcements.length > 0
+      ? [...announcements, announcements[0]].map((announcement, index) => ({
+          id: index + 1,
+          notification: announcement.title,
+        }))
+      : [];
 
   useInterval(() => setCurrentIndex((prev) => prev + 1), 5000);
 
-  const InfiniteSlideHandler = (nextIndex: number) => {
-    setTimeout(() => {
-      if (slideRef.current) {
-        setActiveTransition(false);
-      }
-      setCurrentIndex(nextIndex);
+  useEffect(() => {
+    const handleInfiniteSlide = (nextIndex: number) => {
       setTimeout(() => {
         if (slideRef.current) {
-          setActiveTransition(true);
+          setActiveTransition(false);
         }
-      }, 100);
-    }, 500);
-  };
-
-  if (currentIndex === notificationArray.length - 1) {
-    InfiniteSlideHandler(1);
-  }
+        setCurrentIndex(nextIndex);
+        setTimeout(() => {
+          if (slideRef.current) {
+            setActiveTransition(true);
+          }
+        }, 100);
+      }, 500);
+    };
+    if (currentIndex === notificationArray.length - 1) {
+      handleInfiniteSlide(0);
+    }
+  }, [currentIndex, notificationArray.length]);
 
-  if (currentIndex === 0) {
-    InfiniteSlideHandler(Dummy.length);
-  }
+  return (
+    <StyledNotificationContainer>
+      {announcements.length === 0 ? (
+        <StyledNotification>공지사항이 없습니다.</StyledNotification>
+      ) : (
+        <StyledNotificationArray
+          ref={slideRef}
+          $length={notificationArray.length}
+          $currentIndex={currentIndex}
+          $active={activeTransition}
+        >
+          {notificationArray.map((item) => (
+            <StyledNotification key={item.id}>{item.notification}</StyledNotification>
+          ))}
+        </StyledNotificationArray>
+      )}
+    </StyledNotificationContainer>
+  );
+};
 
+export const Notification = () => {
   return (
     <StyledContainer>
       <StyledInnerContainer>
         <IcNoticeLine size="2.25rem" />
-        <StyledNotificationContainer>
-          <StyledNotificationArray
-            ref={slideRef}
-            $length={notificationArray.length}
-            $currentIndex={currentIndex}
-            $active={activeTransition}
-          >
-            {notificationArray.map((item) => (
-              <StyledNotification key={item.id}>{item.notification}</StyledNotification>
-            ))}
-          </StyledNotificationArray>
-        </StyledNotificationContainer>
+        <ErrorBoundary
+          fallbackRender={({ error }) => (
+            <StyledNotification>Error: {error.message}</StyledNotification>
+          )}
+        >
+          <Suspense fallback={<StyledNotification>로딩중...</StyledNotification>}>
+            <NotificationContent />
+          </Suspense>
+        </ErrorBoundary>
       </StyledInnerContainer>
     </StyledContainer>
   );

src/home/hooks/useGetAnnouncement.ts

@@ -1,12 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { getAnnouncement } from '@/home/apis/getAnnouncement';
 
 export const useGetAnnouncement = () => {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: ['announcement'],
-    queryFn: () => {
-      return getAnnouncement();
-    },
+    queryFn: getAnnouncement,
+    select: (data) => data.announcementList,
   });
 };

src/home/types/announcement.type.ts

@@ -1,3 +1,8 @@
+export interface Announcement {
+  id: number;
+  title: string;
+}
+
 export interface AnnouncementResponse {
-  // TODO: 추후 API 관련 타입 정의 필요
+  announcementList: Announcement[];
 }

src/main.tsx

@@ -1,16 +1,20 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { YDSWrapper } from '@yourssu/design-system-react';
+import { YLSWrapper } from '@yourssu/logging-system-react';
 import ReactDOM from 'react-dom/client';
 
 import { App } from './App';
 import './index.css';
 
 const queryClient = new QueryClient();
+const baseURL = import.meta.env.VITE_API_YLS_URL;
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
-    <YDSWrapper>
-      <App />
-    </YDSWrapper>
+    <YLSWrapper baseURL={baseURL}>
+      <YDSWrapper>
+        <App />
+      </YDSWrapper>
+    </YLSWrapper>
   </QueryClientProvider>
 );