Feature/ann type

src/components/home/InformationContainer.jsx

@@ -1,48 +1,59 @@
+import { ANNOUNCE_URL, SERVICE_CENTER_URL } from "constants/url";
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { getAnnounceListAPI } from "services/home/announce";
+import { getQnAListAPI } from "services/home/serviceCenter";
 import "styles/components/home/InformationContainer.scss";
+import { formatDate } from "utils/time";
 
 export const InformationContainer = () => {
   const [data, setData] = useState([]);
   const [navType, setNavType] = useState("notice"); // 상태로 관리
+
+  const fetchNotices = async (page = 1, sort = "DATE_DESC", type = "") => {
+    try {
+      const res = await getAnnounceListAPI({
+        keyword: "",
+        page: page - 1, // 서버는 0부터 시작
+        sort,
+        type: type,
+      });
+
+      if (res?.content && res.content.length > 0) {
+        setData(res.content.slice(0, 5));
+      } else {
+        setData([]);
+      }
+    } catch (err) {
+      console.error("공지사항 조회 에러");
+    }
+  };
+
+  const fetchQnAList = async (keyword = "", page = 1, sort = "DATE_DESC") => {
+    try {
+      let res;
+
+      res = await getQnAListAPI({
+        keyword,
+        page: page - 1,
+        sort,
+      });
+
+      if (res?.content && res.content.length > 0) {
+        setData(res.content.slice(0, 5));
+      } else {
+        setData([]);
+      }
+    } catch (err) {
+      console.error("문의목록 조회 에러");
+    }
+  };
+
   useEffect(() => {
     if (navType === "notice") {
-      // 공지사항 더미 데이터
-      setData([
-        { title: "상대방에게 욕설, 비난이 담긴 채팅 신고", date: "2025.06.21" },
-        { title: "2025. 07. 21 업데이트 안내", date: "2025.06.21" },
-        { title: "AI 업그레이드 안내", date: "2025.06.21" },
-        { title: "2026. 08. 21 점검 안내", date: "2025.06.21" },
-        { title: "상대방에게 욕설, 비난이 담긴 채팅 신고", date: "2025.06.21" },
-      ]);
+      fetchNotices();
     } else if (navType === "help") {
-      // 고객센터 더미 데이터
-      setData([
-        {
-          title: "게임이 실행되지 않아요0",
-          date: "2025.06.21",
-          answered: true,
-        },
-        {
-          title: "게임이 실행되지 않아요1",
-          date: "2025.06.21",
-          answered: false,
-        },
-        {
-          title: "게임이 실행되지 않아요2",
-          date: "2025.06.21",
-          answered: true,
-        },
-        {
-          title: "게임이 실행되지 않아요3",
-          date: "2025.06.21",
-          answered: false,
-        },
-        {
-          title: "게임이 실행되지 않아요4",
-          date: "2025.06.21",
-          answered: true,
-        },
-      ]);
+      fetchQnAList();
     }
   }, [navType]);
   return (
@@ -75,12 +86,26 @@ export const InformationContainer = () => {
                 ) : (
                   <span className="answer-wait">답변대기</span>
                 ))}
-              <span className="title">{item.title}</span>
-              <span className="date">{item.date}</span>
+              {navType === "help" ? (
+                <Link
+                  className="title"
+                  to={`${SERVICE_CENTER_URL}/${item.inquiryId}`}
+                >
+                  {item.title}
+                </Link>
+              ) : (
+                <Link
+                  className="title"
+                  to={`${ANNOUNCE_URL}/${item.notificationId}`}
+                >
+                  {item.title}
+                </Link>
+              )}
+              <span className="date">{formatDate(item.createdAt)}</span>
             </li>
           ))
         ) : (
-          <h2>공지사항이 존재하지 않습니다.</h2>
+          <h2>게시글이 존재하지 않습니다.</h2>
         )}
       </ul>
     </div>

src/components/home/RankingPreview.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { getRankingListAPI } from "services/home/ranking";
+import { getMyRankingAPI, getRankingListAPI } from "services/home/ranking";
 import "styles/components/home/RankingPreview.scss";
 import { getAuthToken } from "utils/token";
 export const RankingPreview = () => {
@@ -18,8 +18,9 @@ export const RankingPreview = () => {
         const { accessToken } = getAuthToken();
 
         if (accessToken) {
-          const myRes = 0;
+          const myRes = await getMyRankingAPI();
           const me = myRes?.data || myRes;
+          console.log(myRes);
 
           if (me) {
             setMyScore(me.exp);

src/components/lobby/LobbyNavBar.jsx

@@ -2,7 +2,7 @@ import {
   GAME1_ROBBY_URL,
   GAME2_ROBBY_URL,
   MY_PAGE_URL,
-  MY_RECORD_URL,
+  // MY_RECORD_URL,
   SETTING_URL,
 } from "constants/url";
 import { useEffect, useState } from "react";
@@ -21,10 +21,10 @@ const gameNav = [
 ];
 
 const myInfoNav = [
-  {
-    title: "전적",
-    url: MY_RECORD_URL,
-  },
+  // {
+  //   title: "전적",
+  //   url: MY_RECORD_URL,
+  // },
   {
     title: "내 정보",
     url: MY_PAGE_URL,

src/pages/home/AnnouncePage.jsx

@@ -27,9 +27,10 @@ const AnnouncePage = () => {
   // URL 파라미터에서 page, sort 가져오기
   const currentPage = Number(searchParams.get("page")) || 1;
   const sortOrder = searchParams.get("sort") || "DATE_DESC";
+  const tabType = searchParams.get("type") || "";
 
   /** 공지사항 API 호출 */
-  const fetchNotices = async (page = 1, sort = "DATE_DESC") => {
+  const fetchNotices = async (page = 1, sort = "DATE_DESC", type = "") => {
     try {
       setLoading(true);
       setError(null);
@@ -38,6 +39,7 @@ const AnnouncePage = () => {
         keyword: "",
         page: page - 1, // 서버는 0부터 시작
         sort,
+        type: type,
       });
 
       if (res?.content && res.content.length > 0) {
@@ -56,31 +58,41 @@ const AnnouncePage = () => {
   };
 
   /** 페이지/정렬 변경 시 URL 갱신 */
-  const updateSearchParams = (page = currentPage, sort = sortOrder) => {
-    setSearchParams({ page: String(page), sort });
+  const updateSearchParams = (
+    page = currentPage,
+    sort = sortOrder,
+    type = tabType
+  ) => {
+    setSearchParams({ page: String(page), sort, type });
   };
 
   /** 페이지 이동 핸들러 */
   const handlePageChange = (newPage) => {
-    updateSearchParams(newPage, sortOrder);
+    updateSearchParams(newPage, sortOrder, tabType);
   };
 
   /** 정렬 변경 핸들러 */
   const handleSortChange = (order) => {
     const newOrder = order === "DATE_DESC" ? "DATE_DESC" : "DATE_ASC";
-    updateSearchParams(1, newOrder); // 정렬 바꾸면 1페이지로 이동
+    updateSearchParams(1, newOrder, tabType); // 정렬 바꾸면 1페이지로 이동
   };
 
   /** 탭 클릭 시 1페이지로 리셋 */
   const handleTabClick = (tabName) => {
     setActiveTab(tabName);
-    updateSearchParams(1, sortOrder);
+    let newType = "";
+    if (tabName === "이벤트") {
+      newType = "EVENT";
+    } else if (tabName === "업데이트") {
+      newType = "UPDATE";
+    }
+    updateSearchParams(1, sortOrder, newType);
   };
 
   /** URL 변경 시마다 데이터 다시 불러오기 */
   useEffect(() => {
-    fetchNotices(currentPage, sortOrder);
-  }, [currentPage, sortOrder]);
+    fetchNotices(currentPage, sortOrder, tabType);
+  }, [currentPage, sortOrder, tabType]);
 
   return (
     <div className="announce-page-container">

src/styles/components/home/InformationContainer.scss

@@ -63,7 +63,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
 
     .info-item {
       display: flex;
@@ -81,6 +81,9 @@
       .title {
         flex: 1;
         text-align: left;
+
+        text-decoration: none;
+        color: inherit;
       }
 
       .date {
@@ -107,4 +110,4 @@
       }
     }
   }
-}
+}