diff --git a/package.json b/package.json index f268cf9..25e2572 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react-calendar": "^4.6.0", "react-cookie": "^6.1.1", "react-dom": "^18.2.0", + "react-query": "^3.39.3", "react-redux": "^8.0.5", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", diff --git a/src/App.tsx b/src/App.tsx index 8046769..3b66cc2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ /** @jsxImportSource @emotion/react */ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { css } from "@emotion/react"; import logo from "./logo.svg"; import "./App.css"; diff --git a/src/components/main/EventTemplate.tsx b/src/components/main/EventTemplate.tsx index 126d82d..6c6cbba 100644 --- a/src/components/main/EventTemplate.tsx +++ b/src/components/main/EventTemplate.tsx @@ -8,28 +8,32 @@ import { EventTemplateProps } from "../../@types/typs"; import Card from "../common/Card"; import { useNavigate } from "react-router-dom"; import NotData from "../common/NotData"; -import API from "../../utils/api"; +import API, { CACHE_TIME, STALE_TIME } from "../../utils/api"; +import { useQuery } from "react-query"; export default function EventTemplate({ text, type }: EventTemplateProps) { const navigate = useNavigate(); - const [dataList, setDataList] = useState([]); + // const [dataList, setDataList] = useState([]); const category = type === "EVENT" ? "program" : "booth"; + let dataList = null; - const getInfo = async () => { - await API.get(`/api/v2/${category}/list`, { - params: { page: 0, type: type, size: 3 }, - }).then((res) => { - if (type === "EVENT") { - setDataList(res.data.programList); - } else { - setDataList(res.data.boothResList); - } - }); - }; + const { isLoading, error, data } = useQuery({ + queryKey: [category, type], + queryFn: () => + API.get(`/api/v2/${category}/list`, { + params: { page: 0, type: type, size: 3 }, + }), + staleTime: STALE_TIME, + cacheTime: CACHE_TIME, + }); - useEffect(() => { - getInfo(); - }, []); + if (!isLoading) { + if (type === "EVENT") { + dataList = data?.data.programList; + } else { + dataList = data?.data.boothResList; + } + } return (
- {dataList.length ? ( + {dataList ? ( dataList.map((data: any) => ( { export default function Search() { const path = useLocation().pathname; const navigate = useNavigate(); - const [notice, setNotice] = useState(""); + let notice = null; const [keyword, setKeyword] = useState(""); const [program, setProgram] = useState([]); const [booth, setBooth] = useState([]); @@ -200,16 +201,23 @@ export default function Search() { }); }; - const getNotice = async () => { - await API.get(`/api/v2/guide/list`, { + const getNotice = () => { + return API.get(`/api/v2/guide/list`, { params: { page: 0, size: 1 }, - }).then((res) => { - if (res.data.guideResList.length > 0) { - setNotice(res.data.guideResList[0].content); - } }); }; + const noticeData = useQuery({ + queryKey: ["notice"], + queryFn: getNotice, + staleTime: STALE_TIME, + cacheTime: CACHE_TIME, + }); + + if (!noticeData.isLoading) { + notice = noticeData.data?.data.guideResList[0].content; + } + const createResult = () => { const arr: any[] = []; program.map((data) => @@ -245,12 +253,6 @@ export default function Search() { } }, [keyword]); - useEffect(() => { - if (path === "/") { - getNotice(); - } - }, []); - useEffect(() => { setResult(createResult()); }, [program, booth]); @@ -349,10 +351,10 @@ export default function Search() { )}
- {path === "/" && ( - 0 ? notice : "아직 등록된 공지사항이 없어요"} - /> + {path === "/" && notice ? ( + + ) : ( + )} ); diff --git a/src/index.tsx b/src/index.tsx index a03ac8f..3145665 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,17 +6,22 @@ import reportWebVitals from "./reportWebVitals"; import { Provider } from "react-redux"; import { store } from "./app/store"; import { CookiesProvider } from "react-cookie"; +import { QueryClient, QueryClientProvider } from "react-query"; + +const queryClient = new QueryClient(); const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( // - - - - - + + + + + + + // ); diff --git a/src/utils/api.tsx b/src/utils/api.tsx index 3f1f7b1..7b3bd2c 100644 --- a/src/utils/api.tsx +++ b/src/utils/api.tsx @@ -1,5 +1,8 @@ import axios from "axios"; +export const STALE_TIME = 1000 * 60 * 5; // 5m +export const CACHE_TIME = 1000 * 60 * 5; // 5m + const API = axios.create({ // 로컬 방식에서 사용을 할 때는 아래 API를 이용해주세요 baseURL: process.env.REACT_APP_SERVER_CODE, diff --git a/yarn.lock b/yarn.lock index eb33aec..2220435 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1113,6 +1113,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" + integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.3.3": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" @@ -3121,6 +3128,11 @@ bfj@^7.0.2: jsonpath "^1.1.1" tryer "^1.0.1" +big-integer@^1.6.16: + version "1.6.51" + resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686" + integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg== + big.js@^5.2.2: version "5.2.2" resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" @@ -3191,6 +3203,20 @@ braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" +broadcast-channel@^3.4.1: + version "3.7.0" + resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937" + integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg== + dependencies: + "@babel/runtime" "^7.7.2" + detect-node "^2.1.0" + js-sha3 "0.8.0" + microseconds "0.2.0" + nano-time "1.0.0" + oblivious-set "1.0.0" + rimraf "3.0.2" + unload "2.2.0" + browser-process-hrtime@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" @@ -3942,7 +3968,7 @@ detect-newline@^3.0.0: resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA== -detect-node@^2.0.4: +detect-node@^2.0.4, detect-node@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1" integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g== @@ -6306,6 +6332,11 @@ jiti@^1.18.2: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42" integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA== +js-sha3@0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840" + integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -6654,6 +6685,14 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" +match-sorter@^6.0.2: + version "6.3.1" + resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda" + integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw== + dependencies: + "@babel/runtime" "^7.12.5" + remove-accents "0.4.2" + mdn-data@2.0.14: version "2.0.14" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" @@ -6704,6 +6743,11 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.2" picomatch "^2.3.1" +microseconds@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39" + integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA== + mime-db@1.52.0, "mime-db@>= 1.43.0 < 2": version "1.52.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" @@ -6806,6 +6850,13 @@ mz@^2.7.0: object-assign "^4.0.1" thenify-all "^1.0.0" +nano-time@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef" + integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA== + dependencies: + big-integer "^1.6.16" + nanoid@^3.3.6: version "3.3.6" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" @@ -6989,6 +7040,11 @@ object.values@^1.1.0, object.values@^1.1.6: define-properties "^1.2.0" es-abstract "^1.22.1" +oblivious-set@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566" + integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw== + obuf@^1.0.0, obuf@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e" @@ -8019,6 +8075,15 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-query@^3.39.3: + version "3.39.3" + resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35" + integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g== + dependencies: + "@babel/runtime" "^7.5.5" + broadcast-channel "^3.4.1" + match-sorter "^6.0.2" + react-redux@^8.0.5: version "8.1.2" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188" @@ -8255,6 +8320,11 @@ relateurl@^0.2.7: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog== +remove-accents@0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" + integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA== + renderkid@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a" @@ -8352,7 +8422,7 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -rimraf@^3.0.0, rimraf@^3.0.2: +rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== @@ -9389,6 +9459,14 @@ universalify@^2.0.0: resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717" integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ== +unload@2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7" + integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA== + dependencies: + "@babel/runtime" "^7.6.2" + detect-node "^2.0.4" + unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"