#559 fix : url_queryString (#560)

sdp-tech · Nov 4, 2023 · cb66be6 · cb66be6
1 parent 3d182d1
commit cb66be6
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 101 deletions.
diff --git a/src/components/Admin/CurationFormPage.jsx b/src/components/Admin/CurationFormPage.jsx
@@ -180,13 +180,11 @@ export default function CurationForm({id}) {
   const [open, setOpen] = useState(false);
   const [size, setSize] = useState("");
   const location = useLocation();
-  const queryString = qs.parse(location.search, {
-      ignoreQueryPrefix: true
-    });
   const request = Request(navigate);
   const ref = useRef();
   const myEmail = localStorage.getItem('email');
   const [message, setMessage] = useState(false);
+  const [page, setPage] = useState(1);
 
   const uploadCuration = async () => {
     const formData = new FormData();
@@ -260,10 +258,10 @@ export default function CurationForm({id}) {
 
   useEffect(() => {
     handleSearchToggle();
-  }, [open, queryString.page]);
+  }, [open, page]);
 
   useEffect(() =>{
-    queryString.page = 1;
+    setPage(1);
   },[open, search]) // 검색할 때마다 페이지 번호 1로 수정
 
   const handleOpen = value => {
@@ -285,11 +283,11 @@ export default function CurationForm({id}) {
     } //초기화 방지
     setSearchToggle(true);
     const response = await request.get("/stories/story_search/", {
-      page:queryString.page,
+      page:page,
       search: search,
     }, null);
 
-    search ? setSearchParams({page:queryString.page, search: search}) : setSearchParams({page:queryString.page}); 
+    search ? setSearchParams({page:page, search: search}) : setSearchParams({page:page}); 
     setItem(response.data.data.results);
     setPageCount(response.data.data.count);
   };
@@ -365,7 +363,8 @@ export default function CurationForm({id}) {
                 <Pagination
                 total={pageCount}
                 limit={limit}
-                page={queryString.page}
+                page={page}
+                setPage={setPage}
               />
               </Modal.Body>
               <Modal.Footer>

diff --git a/src/components/Curation/components/CurationMoreView.jsx b/src/components/Curation/components/CurationMoreView.jsx
@@ -117,6 +117,7 @@ const CurationMoreView = () => {
   const queryString = qs.parse(location.search, {
       ignoreQueryPrefix: true
     });
+  const [page, setPage] = useState(1);
   // const token = cookies.name; // 쿠키에서 id 를 꺼내기
   const token = localStorage.getItem("accessTK"); //localStorage에서 accesstoken꺼내기
   const request = Request(navigate);
@@ -126,14 +127,14 @@ const CurationMoreView = () => {
     setSearch(e.target.value);
   };
   useEffect(() =>{
-   if (search) queryString.page = 1;
+   if (search) setPage(1);
   },[search]) // 검색할 때마다 페이지 번호 1로 수정
 
   // page가 변경될 때마다 page를 붙여서 api 요청하기
   useEffect(() => {
     handleSearchToggle();
     checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
-  }, [queryString.page]);
+  }, [page]);
 
 
   const handleSearchToggle = async (e) => {
@@ -148,10 +149,14 @@ const CurationMoreView = () => {
       searched = search.trim();
     }
       const response = await request.get("/curations/admin_curations/", {
-      page: queryString.page,
+      page: page,
       search: searched
     }, null);
-      if(search.length !== 0) {setSearchParams({page:queryString.page, search: search});}
+    const params = {
+      page: page
+    }
+      if(search) params.search = search;
+      setSearchParams(params);
       setItem(response.data.data.results);
       setPageCount(response.data.data.count);
     }
@@ -191,7 +196,8 @@ const CurationMoreView = () => {
             <Pagination
               total={pageCount}
               limit={limit}
-              page={queryString.page}
+              page={page}
+              setPage={setPage}
             />
             {isSasmAdmin ? (
               <AdminButton

diff --git a/src/components/Curation/components/CurationUserMoreView.jsx b/src/components/Curation/components/CurationUserMoreView.jsx
@@ -6,10 +6,8 @@ import Loading from "../../common/Loading";
 import SearchBar from "../../common/SearchBar";
 import searchBlack from "../../../assets/img/search_black.svg";
 import Request from "../../../functions/common/Request";
-import { useCookies } from "react-cookie";
 import checkSasmAdmin from "../../Admin/Common";
 import Pagination from "../../common/Pagination";
-import qs from 'qs';
 import AdminButton from "../../Admin/components/AdminButton";
 
 const Section = styled.div`
@@ -116,9 +114,7 @@ const CurationUserMoreView = () => {
   const [isVerified, setIsVerified] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
-  const queryString = qs.parse(location.search, {
-      ignoreQueryPrefix: true
-    });
+  const [page, setPage] = useState(1);
   const token = localStorage.getItem("accessTK"); //localStorage에서 accesstoken꺼내기
   const request = Request(navigate);
 
@@ -137,15 +133,15 @@ const CurationUserMoreView = () => {
   }
 
   useEffect(() =>{
-    if (search) queryString.page = 1;
+    if (search) setPage(1);
    },[search]) // 검색할 때마다 페이지 번호 1로 수정
 
   // page가 변경될 때마다 page를 붙여서 api 요청하기
   useEffect(() => {
     handleSearchToggle();
     checkVerfied();
     checkSasmAdmin(token, setLoading, navigate).then((result) => setIsSasmAdmin(result));
-  }, [queryString.page]);
+  }, [page]);
 
   const handleSearchToggle = async (e) => {
     if(e) e.preventDefault();
@@ -159,10 +155,14 @@ const CurationUserMoreView = () => {
       searched = search.trim();
     }
     const response = await request.get("/curations/verified_user_curations/", {
-      page: queryString.page,
+      page: page,
       search: searched
     }, null);
-    if(search) setSearchParams({page:queryString.page, search: search});
+    const params = {
+      page: page
+    }
+    if(search) params.search = search;
+    setSearchParams(params);
     setItem(response.data.data.results);
     setPageCount(response.data.data.count);
     setLoading(false);
@@ -203,7 +203,8 @@ const CurationUserMoreView = () => {
             <Pagination
               total={pageCount}
               limit={limit}
-              page={queryString.page}
+              page={page}
+              setPage={setPage}
             />
             {isSasmAdmin&&isVerified ? (
               <AdminButton

diff --git a/src/components/SpotMap/DataContainer.jsx b/src/components/SpotMap/DataContainer.jsx
@@ -52,6 +52,7 @@ export default function DataContainer({ Location }) {
     const [checkedList, setCheckedList] = useState('');
     const [loading, setLoading] = useState(true);
     const navigate = useNavigate();
+    const [page, setPage] = useState(1);
     const token = localStorage.getItem("accessTK"); //localStorage에서 accesstoken꺼내기
     const request = Request(navigate);
     const [placeData, setPlaceData] = useState({
@@ -90,7 +91,7 @@ export default function DataContainer({ Location }) {
         const queryParams = {
             left: location.state?.lat || searchHere.lat,
             right: location.state?.lng || searchHere.lng,
-            page: queryString.page,
+            page: page,
             search: location.state?.name || localStorage.getItem("place_name") || search.trim(),
             filter: checkedList
         }    
@@ -101,7 +102,12 @@ export default function DataContainer({ Location }) {
                 search: queryParams.search, // gotomap으로 넘어왔을 때
                 filter: queryParams.filter
             });
-
+        const params = {
+            page: page
+        }
+        if (search) params.search = search;
+        if (checkedList) params.checkedList = checkedList;
+        setSearchParams(params);
         setPlaceData({
             total: response_list.data.data.count,
             MapList: response_list.data.data.results,
@@ -124,8 +130,8 @@ export default function DataContainer({ Location }) {
     }, [searchHere, checkedList, queryString.page]);
 
     useEffect(() => {
-        queryString.page = 1
-    },[checkedList]);
+        setPage(1);
+    },[checkedList, search]);
 
     //page, 검색어, 체크리스트 변경시 작동
     useEffect(() => {
@@ -134,7 +140,7 @@ export default function DataContainer({ Location }) {
             setCategoryNum(7);
         }
         getList();
-    }, [searchHere, search, checkedList, queryString.page]);
+    }, [searchHere, search, checkedList, page]);
 
     return (
         <>
@@ -153,8 +159,8 @@ export default function DataContainer({ Location }) {
                 <FilterOptions>
                     <CategorySelector checkedList={checkedList} onCheckedElement={onCheckedElement} />
                 </FilterOptions>
-                <SpotList categoryNum={categoryNum} placeData={placeData.MapList} setTemp={setTemp}></SpotList>
-                <Pagination total={placeData.total} limit={20} page={queryString.page}/>
+                <SpotList categoryNum={categoryNum} placeData={placeData.MapList} setTemp={setTemp} searchParams={searchParams}setSearchParams={setSearchParams}></SpotList>
+                <Pagination total={placeData.total} limit={20} page={page} setPage={setPage}/>
                 {
                     isSasmAdmin &&
                     <AdminButton
@@ -167,7 +173,7 @@ export default function DataContainer({ Location }) {
                     </AdminButton>
                 }
             </ListWrapper>
-            <Map categoryNum={categoryNum} placeData={placeData.MapList} temp={temp} setTemp={setTemp} setSearchHere={setSearchHere} />
+            <Map categoryNum={categoryNum} placeData={placeData.MapList} temp={temp} setTemp={setTemp} setSearchHere={setSearchHere} searchParams={searchParams} />
         </>
     )
 }
diff --git a/src/components/SpotMap/Map.jsx b/src/components/SpotMap/Map.jsx
@@ -85,7 +85,7 @@ const ControllerWrapper = styled.div`
   }
 `;
 
-const Markers = ({ navermaps, left, right, title, id, category, categoryNum, setTemp }) => {
+const Markers = ({ navermaps, left, right, title, id, category, categoryNum, setTemp, searchParams }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const location = useLocation();
   const queryString = qs.parse(location.search, {
@@ -125,7 +125,7 @@ const Markers = ({ navermaps, left, right, title, id, category, categoryNum, set
   const handleClick = () => {
     MarkerChange();
     setModalOpen(true);
-    navigate(`/map?page=${queryString.page}&place=${title}`);
+    navigate(`?${searchParams.toString()}&place=${title}`);
   };
 
   // 상세보기 모달 닫기 이벤트
@@ -242,7 +242,7 @@ const Markers = ({ navermaps, left, right, title, id, category, categoryNum, set
   );
 };
 
-const NaverMapAPI = ({ placeData, temp, setTemp, setSearchHere, categoryNum }) => {
+const NaverMapAPI = ({ placeData, temp, setTemp, setSearchHere, categoryNum, searchParams }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const navermaps = useNavermaps();
@@ -355,6 +355,7 @@ const NaverMapAPI = ({ placeData, temp, setTemp, setSearchHere, categoryNum }) =
                 category={itemdata.category}
                 navermaps={navermaps}
                 key={`marker_${itemdata.id}`}
+                searchParams={searchParams}
               />
         ))}
           <Marker
@@ -374,7 +375,7 @@ const NaverMapAPI = ({ placeData, temp, setTemp, setSearchHere, categoryNum }) =
   );
 };
 
-export default function Map({ placeData, temp, setTemp, setSearchHere, categoryNum }) {
+export default function Map({ placeData, temp, setTemp, setSearchHere, categoryNum, searchParams }) {
 
   const markerData = placeData.map(data => {
      return {
@@ -406,6 +407,7 @@ export default function Map({ placeData, temp, setTemp, setSearchHere, categoryN
               temp={temp}
               setTemp={setTemp}
               setSearchHere={setSearchHere}
+              searchParams={searchParams}
             />
           </MapDiv>
       </MapSection>

diff --git a/src/components/SpotMap/SpotList.jsx b/src/components/SpotMap/SpotList.jsx
@@ -77,7 +77,7 @@ const SpotsWrapper = styled.div`
   }
 `;
 
-export default function SpotList({ setTemp, placeData, categoryNum }) {
+export default function SpotList({ setTemp, placeData, categoryNum, searchParams, setSearchParams }) {
   return (
     <SpotListSection>
       {/* 데이터 없을때 장소가 없습니다 띄우기 */}
@@ -92,7 +92,7 @@ export default function SpotList({ setTemp, placeData, categoryNum }) {
             :
             placeData.map((itemdata) => {
               return (
-                <ItemCard categoryNum={categoryNum} setTemp={setTemp} key={`itemcard_${itemdata.id}`} placeData={itemdata} />
+                <ItemCard categoryNum={categoryNum} setTemp={setTemp} key={`itemcard_${itemdata.id}`} placeData={itemdata} searchParams={searchParams} setSearchParams={setSearchParams} />
               );
             })
         }

diff --git a/src/components/SpotMap/SpotList/ItemCard.jsx b/src/components/SpotMap/SpotList/ItemCard.jsx
@@ -106,7 +106,7 @@ const DetailBox = styled.div`
   position: absolute;
 `;
 
-export default function ItemCard({ placeData, categoryNum, setTemp }) {
+export default function ItemCard({ placeData, categoryNum, setTemp, searchParams, setSearchParams }) {
   const [like, setLike] = useState(false);
   const location = useLocation();
   const queryString = qs.parse(location.search, {
@@ -194,12 +194,12 @@ export default function ItemCard({ placeData, categoryNum, setTemp }) {
   return (
     <div ref={node}>
       <StyledCard key={Date.now()}>
-        <ImgLink to={`/map?page=${queryString.page}&place=${placeData.place_name}`} onClick={handleClick}>
+        <ImgLink to={`?${searchParams.toString()}&place=${placeData.place_name}`} onClick={handleClick}>
           <img src={placeData.rep_pic} className="itemcard_image" alt="placeImage" width="100%" height="100%" />
         </ImgLink>
         <TextBox>
           <TitleBox>
-            <TitleLink to={`/map?page=${queryString.page}&place=${placeData.place_name}`} onClick={handleClick}>
+            <TitleLink to={`?${searchParams.toString()}&place=${placeData.place_name}`} onClick={handleClick}>
               {placeData.place_name}
             </TitleLink>
             <LikeButton style={{ position: "absolute", right: "5%", bottom: "15%" }}>