Refactor[MAIN]: rewrite imperative logic to declarative React style

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)
+    );
+  });
+};

src/pages/main/EgovMain.jsx

@@ -1,12 +1,12 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } 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,91 +15,25 @@ 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();
-
-  useEffect(() => {
-    initPage();
-  });
+  const [noticeBoardList, setNoticeBoardList] = useState([]);
+  const [gallaryBoardList, setGallaryBoardList] = useState([]);
 
-  const retrieveList = useCallback(() => {
+  const retrieveList = async () => {
     console.groupCollapsed("EgovMain.retrieveList()");
-
-    const retrieveListURL = "/mainPage";
-    const requestOptions = {
-      method: "GET",
-      headers: {
-        "Content-type": "application/json",
-      },
-    };
-
-    EgovNet.requestFetch(
-      retrieveListURL,
-      requestOptions,
-      (resp) => {
-        setNoticeBoard(resp.result.notiList);
-        setGallaryBoard(resp.result.galList);
-
-        let mutNotiListTag = [];
-        mutNotiListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값
-
-        // 리스트 항목 구성
-        resp.result.notiList.forEach(function (item, index) {
-          if (index === 0) mutNotiListTag = []; // 목록 초기화
-          mutNotiListTag.push(
-            <li key={item.nttId}>
-              <Link
-                to={{ pathname: URL.INFORM_NOTICE_DETAIL }}
-                state={{
-                  nttId: item.nttId,
-                  bbsId: item.bbsId,
-                }}
-              >
-                {item.nttSj}
-                <span>{item.frstRegisterPnttm}</span>
-              </Link>
-            </li>
-          );
-        });
-        setNoticeListTag(mutNotiListTag);
-
-        let mutGallaryListTag = [];
-        mutGallaryListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값
-
-        // 리스트 항목 구성
-        resp.result.galList.forEach(function (item, index) {
-          if (index === 0) mutGallaryListTag = []; // 목록 초기화
-          mutGallaryListTag.push(
-            <li key={item.nttId}>
-              <Link
-                to={{ pathname: URL.INFORM_GALLERY_DETAIL }}
-                state={{
-                  nttId: item.nttId,
-                  bbsId: item.bbsId,
-                }}
-              >
-                {item.nttSj}
-                <span>{item.frstRegisterPnttm}</span>
-              </Link>
-            </li>
-          );
-        });
-        setGallaryListTag(mutGallaryListTag);
-      },
-      function (resp) {
-        console.log("err response : ", resp);
-      }
-    );
+    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");
@@ -128,21 +62,20 @@ function EgovMain(props) {
                 </li>
               </ul>
               <div className="list">
-                <div className="notice">
-                  <h2 className="blind">공지사항</h2>
-                  <ul>{noticeListTag}</ul>
-                  <Link to={URL.INFORM_NOTICE} className="more">
-                    더보기
-                  </Link>
-                </div>
-
-                <div className="gallary">
-                  <h2 className="blind">갤러리</h2>
-                  <ul>{gallaryListTag}</ul>
-                  <Link to={URL.INFORM_GALLERY} className="more">
-                    더보기
-                  </Link>
-                </div>
+                <BoardList
+                  title="공지사항"
+                  items={noticeBoardList}
+                  detailUrl={URL.INFORM_NOTICE}
+                  moreUrl={URL.INFORM_NOTICE}
+                  className="notice"
+                />
+                <BoardList
+                  title="갤러리"
+                  items={gallaryBoardList}
+                  detailUrl={URL.INFORM_GALLERY}
+                  moreUrl={URL.INFORM_GALLERY}
+                  className="gallary"
+                />
               </div>
             </div>
 

src/pages/main/fragments/BoardList.jsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+
+function BoardList({ title, items = [], detailUrl, moreUrl, className }) {
+  return (
+    <div className={className}>
+      <h2 className="blind">{title}</h2>
+      <ul>
+        {items.length > 0 ? (
+          items.map((item) => (
+            <li key={item.nttId}>
+              <Link
+                to={{ pathname: detailUrl }}
+                state={{
+                  nttId: item.nttId,
+                  bbsId: item.bbsId,
+                }}
+              >
+                {item.nttSj}
+                <span>{item.frstRegisterPnttm}</span>
+              </Link>
+            </li>
+          ))
+        ) : (
+          <li>검색된 결과가 없습니다.</li>
+        )}
+      </ul>
+      <Link to={moreUrl} className="more">
+        더보기
+      </Link>
+    </div>
+  );
+}
+
+export default BoardList;