branch: 공지사항페이지 api 연동 by cryingdryice · Pull Request #61 · GotchaAI/FE-WEB

cryingdryice · 2025-11-05T07:24:20Z

구현 내용

공지사항 목록 api 연동
공지사항 조회 api 연동

github-actions · 2025-11-05T07:25:36Z

Visit the preview URL for this PR (updated for commit 68b2d02):

https://web-deploy-9d41a--pr61-feature-announce-lis-yn0fkrtq.web.app

_{(expires Tue, 18 Nov 2025 09:55:27 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 4a5d43964536093bf8932015bdd49b24c5b660ce}

…ture/announce_list

whitecity01

현재 데이터를 추가해 보고 테스팅 해본 결과 두 번째 페이지에서 detail 접속 후 x 버튼을 누르면 1페이지로 이동하고 있습니다. 확인 부탁드립니다.

whitecity01 · 2025-11-06T15:31:58Z

src/components/home/AnnounceSortButton.jsx

  return (
    <div className="announce-sort">
      <button
-        className={sortOrder === "old" ? "active" : ""}
-        onClick={() => onChange("old")}
+        className={sortOrder === "DATE_ASC" ? "active" : ""}
+        onClick={() => onChange("DATE_ASC")}
      >
        오래된 순
      </button>
      <button
-        className={sortOrder === "new" ? "active" : ""}
-        onClick={() => onChange("new")}
+        className={sortOrder === "DATE_DESC" ? "active" : ""}
+        onClick={() => onChange("DATE_DESC")}
      >
        최신 순
      </button>


최신/오래된 순 정렬 버튼은 재사용성 있는 컴포넌트 같은데 common 컴포넌트로 분리하는 건 어떨까요?

저도 분리하는 편이 좋아보입니다

분리해두었습니다~

whitecity01 · 2025-11-06T15:41:47Z

src/pages/home/AnnounceDetailPage.jsx

+  if (loading) {
+    return (
+      <div className="announce-detail-page-container">
+        <h1 className="announce-detail-title">공지사항</h1>
+        <div className="announce-detail-loading">로딩 중...</div>
+      </div>
+    );
+  }

-  const closeDetailpage = () => {
-    naviate(-1);
-  };
+  if (error) {
+    return (
+      <div className="announce-detail-page-container">
+        <h1 className="announce-detail-title">공지사항</h1>
+        <div className="announce-detail-error">{error}</div>
+      </div>
+    );
+  }
+
+  if (!notice) {
+    return (
+      <div className="announce-detail-page-container">
+        <h1 className="announce-detail-title">공지사항</h1>
+        <div className="announce-detail-empty">
+          공지사항을 찾을 수 없습니다.
+        </div>
+      </div>
+    );
+  }



반복되는 코드가 많아보이는데 함수화나 컴포넌트로 분리 해보는건 어떨까요?

코드 간소화해두었습니다!

whitecity01 · 2025-11-06T15:45:56Z

src/pages/home/AnnouncePage.jsx

-              className="announce-item"
-            >
+          notices.map((notice) => (
+            <div key={notice.notificationId} className="announce-item">


현재 정수 값으로 key 를 설정하고 있는 것으로 보입니다.

수정했습니다~

whitecity01 · 2025-11-06T15:48:09Z

src/pages/home/AnnouncePage.jsx

+  /** ✅ 공지사항 API 호출 */
+  const fetchNotices = async (page = 1, sort = sortOrder) => {
+    try {
+      setLoading(true);
+      setError(null);

-  const sortedNotices = [...filteredNotices].sort((a, b) => {
-    if (sortOrder === "new")
-      return new Date(b.createdAt) - new Date(a.createdAt);
-    return new Date(a.createdAt) - new Date(b.createdAt);
-  });
+      const res = await getAnnounceListAPI({
+        keyword: "",
+        page: page - 1, // 서버는 0부터 시작
+        sort,
+      });

-  const totalPages = Math.max(1, Math.ceil(sortedNotices.length / PAGE_SIZE));
-  const startIndex = (currentPage - 1) * PAGE_SIZE;
-  const currentItems = sortedNotices.slice(startIndex, startIndex + PAGE_SIZE);
+      console.log(res.page.totalPages);
+
+      // ✅ 응답 데이터 안전 처리
+      if (res?.content && res.content.length > 0) {
+        setNotices(res.content);
+        setTotalPages(res.page.totalPages);
+      } else {
+        setNotices([]);
+        setTotalPages(0); // ✅ 페이지가 없으면 0으로
+      }
+    } catch (err) {
+      setError("공지사항을 불러오는 중 오류가 발생했습니다.");
+      setTotalPages(0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /** ✅ 최초 로드 및 정렬/페이지 변경 시 다시 호출 */


그 지피티 주석 냄새가 살짝 나는데 아니죠/??

sernan96

더미데이터로 테스트해본 결과 공지사항의 페이지네이션이 동작을 하지 않고 있습니다. !!

cryingdryice · 2025-11-11T09:50:01Z

현재 데이터를 추가해 보고 테스팅 해본 결과 두 번째 페이지에서 detail 접속 후 x 버튼을 누르면 1페이지로 이동하고 있습니다. 확인 부탁드립니다.

페이지,정렬 옵션이 url쿼리에 포함되지 않아 생긴 문제였습니다! 추가해두었습니다.

cryingdryice added 3 commits November 5, 2025 15:53

feat: 공지사항 api 연결

ba13967

feat: 공지사항 조회 api 연결

eeef0af

feat: url 분리

62418a0

Merge branch 'develop' of https://github.com/GotchaAI/FE-WEB into fea…

6e28af9

…ture/announce_list

whitecity01 reviewed Nov 6, 2025

View reviewed changes

sernan96 reviewed Nov 7, 2025

View reviewed changes

feat: url쿼리 추가

95f08e4

cryingdryice added 2 commits November 11, 2025 18:50

feat: 컴포넌트 분리

4352db6

docs: 주석수정

68b2d02

cryingdryice merged commit f324446 into develop Nov 11, 2025
2 checks passed

cryingdryice deleted the feature/announce_list branch November 18, 2025 12:14

Conversation

cryingdryice commented Nov 5, 2025

구현 내용

Uh oh!

github-actions bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

whitecity01 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sernan96 left a comment

Choose a reason for hiding this comment

Uh oh!

cryingdryice commented Nov 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Nov 5, 2025 •

edited

Loading