From 732fe2cc480d8be9a740eefb37dd87be2e5a4628 Mon Sep 17 00:00:00 2001 From: MatchaKim Date: Sun, 7 Sep 2025 17:18:35 +0900 Subject: [PATCH 1/2] refactor: extract BoardList component and clean up API fetch logic --- src/api/services/mainPage.js | 20 +++++ src/pages/main/EgovMain.jsx | 108 ++++++------------------- src/pages/main/fragments/BoardList.jsx | 34 ++++++++ 3 files changed, 77 insertions(+), 85 deletions(-) create mode 100644 src/api/services/mainPage.js create mode 100644 src/pages/main/fragments/BoardList.jsx diff --git a/src/api/services/mainPage.js b/src/api/services/mainPage.js new file mode 100644 index 0000000..b7b277a --- /dev/null +++ b/src/api/services/mainPage.js @@ -0,0 +1,20 @@ +import * as EgovNet from "@/api/egovFetch"; + +export const fetchMainPage = async () => { + const retrieveListURL = "/mainPage"; + const requestOptions = { + method: "GET", + headers: { + "Content-type": "application/json", + }, + }; + + return new Promise((resolve, reject) => { + EgovNet.requestFetch( + retrieveListURL, + requestOptions, + (resp) => resolve(resp), + (err) => reject(err) + ); + }); +}; diff --git a/src/pages/main/EgovMain.jsx b/src/pages/main/EgovMain.jsx index 30a0e28..32b069c 100644 --- a/src/pages/main/EgovMain.jsx +++ b/src/pages/main/EgovMain.jsx @@ -1,12 +1,12 @@ import { useState, useEffect, useCallback } from "react"; import { Link, useLocation } from "react-router-dom"; -import * as EgovNet from "@/api/egovFetch"; import URL from "@/constants/url"; import simpleMainIng from "/assets/images/img_simple_main.png"; import initPage from "@/js/ui"; - +import { fetchMainPage } from "@/api/services/mainPage"; +import BoardList from "./fragments/BoardList"; function EgovMain(props) { console.group("EgovMain"); console.log("[Start] EgovMain ------------------------------"); @@ -15,12 +15,8 @@ function EgovMain(props) { const location = useLocation(); console.log("EgovMain [location] : ", location); - // eslint-disable-next-line no-unused-vars - const [noticeBoard, setNoticeBoard] = useState(); - // eslint-disable-next-line no-unused-vars - const [gallaryBoard, setGallaryBoard] = useState(); - const [noticeListTag, setNoticeListTag] = useState(); - const [gallaryListTag, setGallaryListTag] = useState(); + const [noticeBoardList, setNoticeBoardList] = useState([]); + const [gallaryBoardList, setGallaryBoardList] = useState([]); useEffect(() => { initPage(); @@ -28,70 +24,13 @@ function EgovMain(props) { const retrieveList = useCallback(() => { console.groupCollapsed("EgovMain.retrieveList()"); - - const retrieveListURL = "/mainPage"; - const requestOptions = { - method: "GET", - headers: { - "Content-type": "application/json", - }, - }; - - EgovNet.requestFetch( - retrieveListURL, - requestOptions, + fetchMainPage().then( (resp) => { - setNoticeBoard(resp.result.notiList); - setGallaryBoard(resp.result.galList); - - let mutNotiListTag = []; - mutNotiListTag.push(
  • 검색된 결과가 없습니다.
    • ); // 게시판 목록 초기값 - - // 리스트 항목 구성 - resp.result.notiList.forEach(function (item, index) { - if (index === 0) mutNotiListTag = []; // 목록 초기화 - mutNotiListTag.push( -
  • - - {item.nttSj} - {item.frstRegisterPnttm} - -
    • - ); - }); - setNoticeListTag(mutNotiListTag); - - let mutGallaryListTag = []; - mutGallaryListTag.push(
  • 검색된 결과가 없습니다.
    • ); // 게시판 목록 초기값 - - // 리스트 항목 구성 - resp.result.galList.forEach(function (item, index) { - if (index === 0) mutGallaryListTag = []; // 목록 초기화 - mutGallaryListTag.push( -
  • - - {item.nttSj} - {item.frstRegisterPnttm} - -
    • - ); - }); - setGallaryListTag(mutGallaryListTag); + setNoticeBoardList(resp.result.notiList); + setGallaryBoardList(resp.result.galList); }, - function (resp) { - console.log("err response : ", resp); + (err) => { + console.error("err response : ", err); } ); console.groupEnd("EgovMain.retrieveList()"); @@ -128,21 +67,20 @@ function EgovMain(props) {
    -
    -

    공지사항

    -
      {noticeListTag}
    - - 더보기 - -
    - -
    -

    갤러리

    -
      {gallaryListTag}
    - - 더보기 - -
    + +
    diff --git a/src/pages/main/fragments/BoardList.jsx b/src/pages/main/fragments/BoardList.jsx new file mode 100644 index 0000000..4b8d3bd --- /dev/null +++ b/src/pages/main/fragments/BoardList.jsx @@ -0,0 +1,34 @@ +import { Link } from "react-router-dom"; + +function BoardList({ title, items = [], detailUrl, moreUrl, className }) { + return ( +
    +

    {title}

    + + + 더보기 + +
    + ); +} + +export default BoardList; From 7afe5a024d401d5371c0bb79484a574624d980ee Mon Sep 17 00:00:00 2001 From: MatchaKim Date: Sun, 7 Sep 2025 17:33:22 +0900 Subject: [PATCH 2/2] refactor: optimize unnecessary logic --- src/pages/main/EgovMain.jsx | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/pages/main/EgovMain.jsx b/src/pages/main/EgovMain.jsx index 32b069c..04bd14a 100644 --- a/src/pages/main/EgovMain.jsx +++ b/src/pages/main/EgovMain.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback } from "react"; +import { useState, useEffect } from "react"; import { Link, useLocation } from "react-router-dom"; import URL from "@/constants/url"; @@ -18,27 +18,22 @@ function EgovMain(props) { const [noticeBoardList, setNoticeBoardList] = useState([]); const [gallaryBoardList, setGallaryBoardList] = useState([]); - useEffect(() => { - initPage(); - }); - - const retrieveList = useCallback(() => { + const retrieveList = async () => { console.groupCollapsed("EgovMain.retrieveList()"); - fetchMainPage().then( - (resp) => { - setNoticeBoardList(resp.result.notiList); - setGallaryBoardList(resp.result.galList); - }, - (err) => { - console.error("err response : ", err); - } - ); + try { + const resp = await fetchMainPage(); + setNoticeBoardList(resp.result.notiList); + setGallaryBoardList(resp.result.galList); + } catch (err) { + console.error("err response : ", err); + } console.groupEnd("EgovMain.retrieveList()"); - }, []); + }; useEffect(() => { + initPage(); retrieveList(); - }, [retrieveList]); + }, []); console.log("------------------------------EgovMain [End]"); console.groupEnd("EgovMain");