diff --git a/package-lock.json b/package-lock.json index bae6af1..5ed0a4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "egovframe-template-simple-react", "version": "0.0.0", "dependencies": { + "axios": "^1.12.2", "qs": "^6.14.0", "react": "^18.3.1", "react-datepicker": "^4.25.0", @@ -2328,10 +2329,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true, - "optional": true, - "peer": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/available-typed-arrays": { "version": "1.0.7", @@ -2348,6 +2346,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz", + "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.4", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2599,9 +2624,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, - "optional": true, - "peer": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -2875,9 +2897,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, - "optional": true, - "peer": true, "engines": { "node": ">=0.4.0" } @@ -3121,7 +3140,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -3593,6 +3611,26 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.11", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", + "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz", @@ -3900,7 +3938,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", - "dev": true, "dependencies": { "has-symbols": "^1.0.3" }, @@ -4892,9 +4929,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, - "optional": true, - "peer": true, "engines": { "node": ">= 0.6" } @@ -4903,9 +4937,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, - "optional": true, - "peer": true, "dependencies": { "mime-db": "1.52.0" }, @@ -5352,6 +5383,12 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index 901ab1f..9f3f457 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "version": "0.0.0", "type": "module", "dependencies": { + "axios": "^1.12.2", "qs": "^6.14.0", "react": "^18.3.1", "react-datepicker": "^4.25.0", @@ -35,4 +36,4 @@ "test:run": "vitest run" }, "proxy": "http://localhost:8080" -} \ No newline at end of file +} diff --git a/src/api/axiosInstance/axiosInstance.js b/src/api/axiosInstance/axiosInstance.js new file mode 100644 index 0000000..c08d91f --- /dev/null +++ b/src/api/axiosInstance/axiosInstance.js @@ -0,0 +1,9 @@ +import axios from "axios"; +import { SERVER_URL } from "../../config"; + +const api = axios.create({ + baseURL: SERVER_URL, + withCredentials: true, +}); + +export default api; diff --git a/src/api/axiosInstance/index.js b/src/api/axiosInstance/index.js new file mode 100644 index 0000000..cc3e30b --- /dev/null +++ b/src/api/axiosInstance/index.js @@ -0,0 +1,8 @@ +import { requestInterceptor } from "./interceptor/requestInterceptor"; +import { responseInterceptor } from "./interceptor/responseInterceptor"; +import axiosInstance from "./axiosInstance"; + +axiosInstance.interceptors.request.use(requestInterceptor); +axiosInstance.interceptors.response.use(responseInterceptor); + +export default axiosInstance; diff --git a/src/api/axiosInstance/interceptor/requestInterceptor.js b/src/api/axiosInstance/interceptor/requestInterceptor.js new file mode 100644 index 0000000..8099c54 --- /dev/null +++ b/src/api/axiosInstance/interceptor/requestInterceptor.js @@ -0,0 +1,16 @@ +import { getSessionItem } from "@/utils/storage"; + +export const requestInterceptor = (config) => { + const sessionUser = getSessionItem("loginUser"); + const jToken = getSessionItem("jToken"); + + if (sessionUser?.id) { + config.headers.Authorization = jToken; + } + + return config; +}; + +export const requestInterceptorError = (error) => { + throw error; +}; diff --git a/src/api/axiosInstance/interceptor/responseInterceptor.js b/src/api/axiosInstance/interceptor/responseInterceptor.js new file mode 100644 index 0000000..6de45c4 --- /dev/null +++ b/src/api/axiosInstance/interceptor/responseInterceptor.js @@ -0,0 +1,26 @@ +import URL from "@/constants/url"; +import CODE from "@/constants/code"; +import { setSessionItem } from "@/utils/storage"; + +export const responseInterceptor = (response) => { + const resp = response.data; + + if (Number(resp.resultCode) === Number(CODE.RCV_ERROR_AUTH)) { + alert("Login Alert"); + setSessionItem("loginUser", { id: "" }); + window.location.href = URL.LOGIN; + throw new Error("인증 오류"); + } + + return resp; +}; + +export const responseInterceptorError = (error) => { + console.error("There was an error!", error); + + if (error.message.includes("Network Error")) { + alert("서버와의 연결이 원활하지 않습니다. 서버를 확인하세요."); + } + + throw error; +}; diff --git a/src/api/egovFetch.jsx b/src/api/egovFetch.jsx deleted file mode 100644 index a5d8f9f..0000000 --- a/src/api/egovFetch.jsx +++ /dev/null @@ -1,64 +0,0 @@ -import { SERVER_URL } from "../config"; - -import URL from "@/constants/url"; -import CODE from "@/constants/code"; - -export function requestFetch(url, requestOptions, handler, errorHandler) { - console.groupCollapsed("requestFetch"); - console.log("requestFetch [URL] : ", SERVER_URL + url); - console.log("requestFetch [requestOption] : ", requestOptions); - - //CORS ISSUE 로 인한 조치 - origin 및 credentials 추가 - // origin 추가 - if (!requestOptions["origin"]) { - requestOptions = { ...requestOptions, origin: SERVER_URL }; - } - // credentials 추가 - if (!requestOptions["credentials"]) { - requestOptions = { ...requestOptions, credentials: "include" }; - } - - fetch(SERVER_URL + url, requestOptions) - .then((response) => { - // response Stream. Not completion object - //console.log("requestFetch [Response Stream] ", response); - return response.json(); - }) - .then((resp) => { - if (Number(resp.resultCode) === Number(CODE.RCV_ERROR_AUTH)) { - alert("Login Alert"); //index.jsx라우터파일에 jwtAuthentication 함수로 공통 인증을 사용하는 코드 추가로 alert 원상복구 - sessionStorage.setItem("loginUser", JSON.stringify({ id: "" })); - window.location.href = URL.LOGIN; - return false; - } else { - return resp; - } - }) - .then((resp) => { - console.groupCollapsed("requestFetch.then()"); - console.log("requestFetch [response] ", resp); - if (typeof handler === "function") { - handler(resp); - } else { - console.log("egov fetch handler not assigned!"); - } - console.groupEnd("requestFetch.then()"); - }) - .catch((error) => { - console.error("There was an error!", error); - if (error === "TypeError: Failed to fetch") { - alert("서버와의 연결이 원활하지 않습니다. 서버를 확인하세요."); - } - - if (typeof errorHandler === "function") { - errorHandler(error); - } else { - console.error("egov error handler not assigned!"); - alert("ERR : " + error.message); - } - }) - .finally(() => { - console.log("requestFetch finally end"); - console.groupEnd("requestFetch"); - }); -} diff --git a/src/api/http.js b/src/api/http.js new file mode 100644 index 0000000..0087248 --- /dev/null +++ b/src/api/http.js @@ -0,0 +1,25 @@ +import axiosInstance from "./axiosInstance"; + +// GET +export const getApi = async (url, params = {}) => { + const res = await axiosInstance.get(url, { params }); + return res; +}; + +// POST +export const postApi = async (url, body = {}) => { + const res = await axiosInstance.post(url, body); + return res; +}; + +// PUT +export const putApi = async (url, body = {}) => { + const res = await axiosInstance.put(url, body); + return res; +}; + +// DELETE +export const deleteApi = async (url, params = {}) => { + const res = await axiosInstance.delete(url, { params }); + return res; +}; diff --git a/src/api/services/EgovAdminBoardList.js b/src/api/services/EgovAdminBoardList.js new file mode 100644 index 0000000..1ef74e5 --- /dev/null +++ b/src/api/services/EgovAdminBoardList.js @@ -0,0 +1,6 @@ +import { getApi } from "../http"; + +export const fetchAdminBoardList = (srchCnd) => { + const retrieveListURL = "/bbsMaster"; + return getApi(retrieveListURL, { srchCnd }); +}; diff --git a/src/api/services/EgovHeader.js b/src/api/services/EgovHeader.js new file mode 100644 index 0000000..45be568 --- /dev/null +++ b/src/api/services/EgovHeader.js @@ -0,0 +1,6 @@ +import { getApi } from "../http"; +export const logOut = () => { + // 로그인 정보 존재할 때 + const logOutUrl = "/auth/logout"; + return getApi(logOutUrl); +}; diff --git a/src/api/services/EgovLoginContent.js b/src/api/services/EgovLoginContent.js new file mode 100644 index 0000000..b3bd91b --- /dev/null +++ b/src/api/services/EgovLoginContent.js @@ -0,0 +1,6 @@ +import { postApi } from "../http"; + +export const login = (userInfo) => { + const loginUrl = "/auth/login-jwt"; + return postApi(loginUrl, userInfo); +}; diff --git a/src/api/services/EgovMain.js b/src/api/services/EgovMain.js new file mode 100644 index 0000000..d8d2d6c --- /dev/null +++ b/src/api/services/EgovMain.js @@ -0,0 +1,5 @@ +import { getApi } from "../http"; +export const fetchMainPage = () => { + const retrieveListURL = "/mainPage"; + return getApi(retrieveListURL); +}; diff --git a/src/api/services/mainPage.js b/src/api/services/mainPage.js deleted file mode 100644 index b7b277a..0000000 --- a/src/api/services/mainPage.js +++ /dev/null @@ -1,20 +0,0 @@ -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/components/EgovHeader.jsx b/src/components/EgovHeader.jsx index 2fa0d18..290d0c1 100644 --- a/src/components/EgovHeader.jsx +++ b/src/components/EgovHeader.jsx @@ -1,13 +1,12 @@ import { Link, NavLink, useNavigate } from "react-router-dom"; -import * as EgovNet from "@/api/egovFetch"; - import URL from "@/constants/url"; import CODE from "@/constants/code"; import logoImg from "/assets/images/logo_w.png"; import logoImgMobile from "/assets/images/logo_m.png"; import { getSessionItem, setSessionItem } from "@/utils/storage"; +import { logOut } from "@/api/services/EgovHeader"; function EgovHeader() { console.group("EgovHeader"); @@ -29,30 +28,22 @@ function EgovHeader() { document.querySelector(".btnAllMenu").title = "전체메뉴 닫힘"; document.querySelector(".all_menu.Mobile").classList.add("closed"); }; - const logOutHandler = () => { + const logOutHandler = async () => { // 로그인 정보 존재할 때 - const logOutUrl = "/auth/logout"; - const requestOptions = { - headers: { - "Content-type": "application/json", - }, - credentials: "include", - }; - EgovNet.requestFetch(logOutUrl, requestOptions, function (resp) { - console.log("===>>> logout resp= ", resp); - if (parseInt(resp.resultCode) === parseInt(CODE.RCV_SUCCESS)) { - //onChangeLogin({ loginVO: {} }); - setSessionItem("loginUser", { id: "" }); - setSessionItem("jToken", null); - window.alert("로그아웃되었습니다!"); - navigate(URL.MAIN); - // PC와 Mobile 열린메뉴 닫기 - document.querySelector(".all_menu.WEB").classList.add("closed"); - document.querySelector(".btnAllMenu").classList.remove("active"); - document.querySelector(".btnAllMenu").title = "전체메뉴 닫힘"; - document.querySelector(".all_menu.Mobile").classList.add("closed"); - } - }); + const resp = await logOut(); + console.log("===>>> logout resp= ", resp); + if (parseInt(resp.resultCode) === parseInt(CODE.RCV_SUCCESS)) { + //onChangeLogin({ loginVO: {} }); + setSessionItem("loginUser", { id: "" }); + setSessionItem("jToken", null); + window.alert("로그아웃되었습니다!"); + navigate(URL.MAIN); + // PC와 Mobile 열린메뉴 닫기 + document.querySelector(".all_menu.WEB").classList.add("closed"); + document.querySelector(".btnAllMenu").classList.remove("active"); + document.querySelector(".btnAllMenu").title = "전체메뉴 닫힘"; + document.querySelector(".all_menu.Mobile").classList.add("closed"); + } }; console.log("------------------------------EgovHeader [End]"); diff --git a/src/pages/admin/board/EgovAdminBoardList.jsx b/src/pages/admin/board/EgovAdminBoardList.jsx index 88c400f..859f6c0 100644 --- a/src/pages/admin/board/EgovAdminBoardList.jsx +++ b/src/pages/admin/board/EgovAdminBoardList.jsx @@ -1,7 +1,7 @@ import { useState, useEffect, useCallback, useRef } from "react"; import { Link, useLocation } from "react-router-dom"; -import * as EgovNet from "@/api/egovFetch"; +import { fetchAdminBoardList } from "@/api/services/EgovAdminBoardList"; import URL from "@/constants/url"; import { default as EgovLeftNav } from "@/components/leftmenu/EgovLeftNavAdmin"; @@ -33,71 +33,57 @@ function EgovAdminBoardList(props) { const [listTag, setListTag] = useState([]); const retrieveList = useCallback( - (srchCnd) => { + async (srchCnd) => { console.groupCollapsed("EgovAdminBoardList.retrieveList()"); - const retrieveListURL = "/bbsMaster" + EgovNet.getQueryString(srchCnd); - - const requestOptions = { - method: "GET", - headers: { - "Content-type": "application/json", - }, - }; - - EgovNet.requestFetch( - retrieveListURL, - requestOptions, - (resp) => { - setPaginationInfo(resp.result.paginationInfo); - - let mutListTag = []; - listTag.push( -

- 검색된 결과가 없습니다. -

- ); // 게시판 목록 초기값 - - const resultCnt = parseInt(resp.result.resultCnt); - const currentPageNo = resp.result.paginationInfo.currentPageNo; - const pageSize = resp.result.paginationInfo.pageSize; - - // 리스트 항목 구성 - resp.result.resultList.forEach(function (item, index) { - if (index === 0) mutListTag = []; // 목록 초기화 - const listIdx = itemIdxByPage( - resultCnt, - currentPageNo, - pageSize, - index - ); - - mutListTag.push( - -
{listIdx}
-
{item.bbsNm}
-
{item.bbsTyCodeNm}
-
{item.bbsAttrbCodeNm}
-
{item.frstRegisterPnttm}
-
{item.useAt === "Y" ? "사용" : "사용안함"}
- - ); - }); - - setListTag(mutListTag); - }, - function (resp) { - console.log("err response : ", resp); - } - ); + try { + const resp = await fetchAdminBoardList(srchCnd); + setPaginationInfo(resp.result.paginationInfo); + + let mutListTag = []; + listTag.push( +

+ 검색된 결과가 없습니다. +

+ ); // 게시판 목록 초기값 + + const resultCnt = parseInt(resp.result.resultCnt); + const currentPageNo = resp.result.paginationInfo.currentPageNo; + const pageSize = resp.result.paginationInfo.pageSize; + + // 리스트 항목 구성 + resp.result.resultList.forEach(function (item, index) { + if (index === 0) mutListTag = []; // 목록 초기화 + const listIdx = itemIdxByPage( + resultCnt, + currentPageNo, + pageSize, + index + ); + + mutListTag.push( + +
{listIdx}
+
{item.bbsNm}
+
{item.bbsTyCodeNm}
+
{item.bbsAttrbCodeNm}
+
{item.frstRegisterPnttm}
+
{item.useAt === "Y" ? "사용" : "사용안함"}
+ + ); + }); + setListTag(mutListTag); + } catch (err) { + console.error("err response : ", err); + } console.groupEnd("EgovAdminBoardList.retrieveList()"); }, [listTag, searchCondition] diff --git a/src/pages/login/EgovLoginContent.jsx b/src/pages/login/EgovLoginContent.jsx index 3520ad7..3700220 100644 --- a/src/pages/login/EgovLoginContent.jsx +++ b/src/pages/login/EgovLoginContent.jsx @@ -1,12 +1,12 @@ import { useState, useEffect, useRef } from "react"; import { useLocation, useNavigate } from "react-router-dom"; -import * as EgovNet from "@/api/egovFetch"; import URL from "@/constants/url"; import CODE from "@/constants/code"; import { getLocalItem, setLocalItem, setSessionItem } from "@/utils/storage"; import SnsNaverBt from "@/components/sns/SnsNaverBt"; import SnsKakaoBt from "@/components/sns/SnsKakaoBt"; +import { login } from "@/api/services/EgovLoginContent"; function EgovLoginContent(props) { console.group("EgovLoginContent"); @@ -43,7 +43,7 @@ function EgovLoginContent(props) { let idFlag = getLocalItem(KEY_SAVE_ID_FLAG); if (idFlag === null) { setSaveIDFlag(false); - + idFlag = false; } else { setSaveIDFlag(idFlag); @@ -75,20 +75,11 @@ function EgovLoginContent(props) { } } }; - const submitFormHandler = () => { + const submitFormHandler = async () => { console.log("EgovLoginContent submitFormHandler()"); - const loginUrl = "/auth/login-jwt"; - - const requestOptions = { - method: "POST", - headers: { - "Content-type": "application/json", - }, - body: JSON.stringify(userInfo), - }; - - EgovNet.requestFetch(loginUrl, requestOptions, (resp) => { + try { + const resp = await login(userInfo); let resultVO = resp.resultVO; let jToken = resp?.jToken || null; @@ -108,7 +99,9 @@ function EgovLoginContent(props) { } else { alert(resp.resultMessage); } - }); + } catch (err) { + console.error("err response : ", err); + } }; console.log("------------------------------EgovLoginContent [End]"); diff --git a/src/pages/main/EgovMain.jsx b/src/pages/main/EgovMain.jsx index 04bd14a..cef9daf 100644 --- a/src/pages/main/EgovMain.jsx +++ b/src/pages/main/EgovMain.jsx @@ -5,7 +5,7 @@ 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 { fetchMainPage } from "@/api/services/EgovMain"; import BoardList from "./fragments/BoardList"; function EgovMain(props) { console.group("EgovMain");