Skip to content

Commit 6ec2fa1

Browse files
yongfire38yongfire38
committed
Fix: 페이지 뒤로가기 라우팅 유지 불가 현상 수정
1 parent 0bd48f7 commit 6ec2fa1

9 files changed

Lines changed: 130 additions & 125 deletions

‎src/hooks/useListNavigation.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { useState } from 'react';
2+
import { useLocation, useNavigate } from 'react-router-dom';
3+
4+
/**
5+
* 리스트 페이지의 네비게이션 관리를 위한 커스텀 훅
6+
* 페이지네이션, 검색, URL 쿼리 파라미터 관리를 담당
7+
*/
8+
export function useListNavigation(defaultBbsId) {
9+
const location = useLocation();
10+
const navigate = useNavigate();
11+
12+
// URL 쿼리 파라미터에서 검색 조건 추출
13+
const getSearchConditionFromURL = () => {
14+
const searchParams = new URLSearchParams(location.search);
15+
return {
16+
bbsId: defaultBbsId,
17+
pageIndex: parseInt(searchParams.get('page')) || 1,
18+
searchCnd: searchParams.get('searchCnd') || "0",
19+
searchWrd: searchParams.get('searchWrd') || "",
20+
};
21+
};
22+
23+
const [searchCondition, setSearchCondition] = useState(
24+
location.state?.searchCondition || getSearchConditionFromURL()
25+
);
26+
27+
// URL 쿼리 파라미터 업데이트
28+
const updateURL = (newSearchCondition) => {
29+
const searchParams = new URLSearchParams();
30+
if (newSearchCondition.pageIndex > 1) searchParams.set('page', newSearchCondition.pageIndex);
31+
if (newSearchCondition.searchCnd !== "0") searchParams.set('searchCnd', newSearchCondition.searchCnd);
32+
if (newSearchCondition.searchWrd) searchParams.set('searchWrd', newSearchCondition.searchWrd);
33+
34+
const newURL = `${location.pathname}${searchParams.toString() ? '?' + searchParams.toString() : ''}`;
35+
navigate(newURL, { replace: true });
36+
};
37+
38+
// 페이지 이동 핸들러
39+
const handlePageMove = (pageIndex, cndRef, wrdRef, retrieveList) => {
40+
const newSearchCondition = {
41+
...searchCondition,
42+
pageIndex,
43+
searchCnd: cndRef.current.value,
44+
searchWrd: wrdRef.current.value,
45+
};
46+
47+
updateURL(newSearchCondition);
48+
retrieveList(newSearchCondition);
49+
setSearchCondition(newSearchCondition);
50+
};
51+
52+
// 검색 핸들러
53+
const handleSearch = (cndRef, wrdRef, retrieveList) => {
54+
const newSearchCondition = {
55+
...searchCondition,
56+
pageIndex: 1,
57+
searchCnd: cndRef.current.value,
58+
searchWrd: wrdRef.current.value,
59+
};
60+
61+
updateURL(newSearchCondition);
62+
retrieveList(newSearchCondition);
63+
setSearchCondition(newSearchCondition);
64+
};
65+
66+
// 상세 페이지에서 목록으로 돌아갈 때의 URL 생성
67+
const getBackToListURL = (baseURL, searchCondition) => {
68+
const searchParams = new URLSearchParams();
69+
if (searchCondition?.pageIndex > 1) searchParams.set('page', searchCondition.pageIndex);
70+
if (searchCondition?.searchCnd !== "0") searchParams.set('searchCnd', searchCondition.searchCnd);
71+
if (searchCondition?.searchWrd) searchParams.set('searchWrd', searchCondition.searchWrd);
72+
73+
return `${baseURL}${searchParams.toString() ? '?' + searchParams.toString() : ''}`;
74+
};
75+
76+
return {
77+
searchCondition,
78+
setSearchCondition,
79+
handlePageMove,
80+
handleSearch,
81+
getBackToListURL
82+
};
83+
}
84+
85+
export default useListNavigation;

‎src/pages/admin/gallery/EgovAdminGalleryDetail.jsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState, useEffect } from "react";
22

33
import { Link, useLocation, useNavigate } from "react-router-dom";
4+
import { useListNavigation } from "@/hooks/useListNavigation";
45

56
import * as EgovNet from "@/api/egovFetch";
67
import URL from "@/constants/url";
@@ -25,6 +26,9 @@ function EgovAdminGalleryDetail(props) {
2526
const nttId = location.state?.nttId;
2627
const searchCondition = location.state?.searchCondition;
2728

29+
// 공통 네비게이션 훅 사용 (목록으로 돌아가기 URL 생성용)
30+
const { getBackToListURL } = useListNavigation(bbsId);
31+
2832
const [masterBoard, setMasterBoard] = useState({});
2933
const [boardDetail, setBoardDetail] = useState({});
3034
const [boardAttachFiles, setBoardAttachFiles] = useState();
@@ -199,12 +203,7 @@ function EgovAdminGalleryDetail(props) {
199203
)}
200204
<div className="right_col btn1">
201205
<Link
202-
to={{ pathname: URL.ADMIN_GALLERY }}
203-
state={{
204-
nttId: nttId,
205-
bbsId: bbsId,
206-
searchCondition: searchCondition,
207-
}}
206+
to={getBackToListURL(URL.ADMIN_GALLERY, searchCondition)}
208207
className="btn btn_blue_h46 w_100"
209208
>
210209
목록

‎src/pages/admin/gallery/EgovAdminGalleryList.jsx‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState, useEffect, useCallback, useRef } from "react";
2-
import { Link, useLocation } from "react-router-dom";
2+
import { Link } from "react-router-dom";
3+
import { useListNavigation } from "@/hooks/useListNavigation";
34

45
import * as EgovNet from "@/api/egovFetch";
56
import URL from "@/constants/url";
@@ -15,23 +16,13 @@ function EgovAdminGalleryList(props) {
1516
console.log("[Start] EgovAdminGalleryList ------------------------------");
1617
console.log("EgovAdminGalleryList [props] : ", props);
1718

18-
const location = useLocation();
19-
console.log("EgovAdminGalleryList [location] : ", location);
20-
2119
const cndRef = useRef();
2220
const wrdRef = useRef();
2321

2422
const bbsId = GALLERY_BBS_ID;
2523

26-
// eslint-disable-next-line no-unused-vars
27-
const [searchCondition, setSearchCondition] = useState(
28-
location.state?.searchCondition || {
29-
bbsId: bbsId,
30-
pageIndex: 1,
31-
searchCnd: "0",
32-
searchWrd: "",
33-
}
34-
); // 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시
24+
// 공통 네비게이션 훅 사용
25+
const { searchCondition, handlePageMove, handleSearch } = useListNavigation(bbsId);
3526
const [masterBoard, setMasterBoard] = useState({});
3627
const [paginationInfo, setPaginationInfo] = useState({});
3728

@@ -189,12 +180,7 @@ function EgovAdminGalleryList(props) {
189180
<button
190181
type="button"
191182
onClick={() => {
192-
retrieveList({
193-
...searchCondition,
194-
pageIndex: 1,
195-
searchCnd: cndRef.current.value,
196-
searchWrd: wrdRef.current.value,
197-
});
183+
handleSearch(cndRef, wrdRef, retrieveList);
198184
}}
199185
>
200186
조회
@@ -234,12 +220,7 @@ function EgovAdminGalleryList(props) {
234220
<EgovPaging
235221
pagination={paginationInfo}
236222
moveToPage={(passedPage) => {
237-
retrieveList({
238-
...searchCondition,
239-
pageIndex: passedPage,
240-
searchCnd: cndRef.current.value,
241-
searchWrd: wrdRef.current.value,
242-
});
223+
handlePageMove(passedPage, cndRef, wrdRef, retrieveList);
243224
}}
244225
/>
245226
{/* <!--/ Paging --> */}

‎src/pages/admin/notice/EgovAdminNoticeDetail.jsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState, useEffect } from "react";
22

33
import { Link, useLocation, useNavigate } from "react-router-dom";
4+
import { useListNavigation } from "@/hooks/useListNavigation";
45

56
import * as EgovNet from "@/api/egovFetch";
67
import URL from "@/constants/url";
@@ -24,6 +25,9 @@ function EgovAdminNoticeDetail(props) {
2425
const nttId = location.state?.nttId;
2526
const searchCondition = location.state?.searchCondition;
2627

28+
// 공통 네비게이션 훅 사용 (목록으로 돌아가기 URL 생성용)
29+
const { getBackToListURL } = useListNavigation(bbsId);
30+
2731
const [masterBoard, setMasterBoard] = useState({});
2832
const [boardDetail, setBoardDetail] = useState({});
2933
const [boardAttachFiles, setBoardAttachFiles] = useState();
@@ -194,12 +198,7 @@ function EgovAdminNoticeDetail(props) {
194198
)}
195199
<div className="right_col btn1">
196200
<Link
197-
to={{ pathname: URL.ADMIN_NOTICE }}
198-
state={{
199-
nttId: nttId,
200-
bbsId: bbsId,
201-
searchCondition: searchCondition,
202-
}}
201+
to={getBackToListURL(URL.ADMIN_NOTICE, searchCondition)}
203202
className="btn btn_blue_h46 w_100"
204203
>
205204
목록

‎src/pages/admin/notice/EgovAdminNoticeList.jsx‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState, useEffect, useCallback, useRef } from "react";
2-
import { Link, useLocation } from "react-router-dom";
2+
import { Link } from "react-router-dom";
3+
import { useListNavigation } from "@/hooks/useListNavigation";
34

45
import * as EgovNet from "@/api/egovFetch";
56
import URL from "@/constants/url";
@@ -15,23 +16,13 @@ function EgovAdminNoticeList(props) {
1516
console.log("[Start] EgovAdminNoticeList ------------------------------");
1617
console.log("EgovAdminNoticeList [props] : ", props);
1718

18-
const location = useLocation();
19-
console.log("EgovAdminNoticeList [location] : ", location);
20-
2119
const cndRef = useRef();
2220
const wrdRef = useRef();
2321

2422
const bbsId = NOTICE_BBS_ID;
2523

26-
// eslint-disable-next-line no-unused-vars
27-
const [searchCondition, setSearchCondition] = useState(
28-
location.state?.searchCondition || {
29-
bbsId: bbsId,
30-
pageIndex: 1,
31-
searchCnd: "0",
32-
searchWrd: "",
33-
}
34-
); // 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시
24+
// 공통 네비게이션 훅 사용
25+
const { searchCondition, handlePageMove, handleSearch } = useListNavigation(bbsId);
3526
const [masterBoard, setMasterBoard] = useState({});
3627
const [paginationInfo, setPaginationInfo] = useState({});
3728

@@ -189,12 +180,7 @@ function EgovAdminNoticeList(props) {
189180
<button
190181
type="button"
191182
onClick={() => {
192-
retrieveList({
193-
...searchCondition,
194-
pageIndex: 1,
195-
searchCnd: cndRef.current.value,
196-
searchWrd: wrdRef.current.value,
197-
});
183+
handleSearch(cndRef, wrdRef, retrieveList);
198184
}}
199185
>
200186
조회
@@ -234,12 +220,7 @@ function EgovAdminNoticeList(props) {
234220
<EgovPaging
235221
pagination={paginationInfo}
236222
moveToPage={(passedPage) => {
237-
retrieveList({
238-
...searchCondition,
239-
pageIndex: passedPage,
240-
searchCnd: cndRef.current.value,
241-
searchWrd: wrdRef.current.value,
242-
});
223+
handlePageMove(passedPage, cndRef, wrdRef, retrieveList);
243224
}}
244225
/>
245226
{/* <!--/ Paging --> */}

‎src/pages/inform/gallery/EgovGalleryDetail.jsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState, useEffect } from "react";
22

33
import { Link, useLocation, useNavigate } from "react-router-dom";
4+
import { useListNavigation } from "@/hooks/useListNavigation";
45

56
import * as EgovNet from "@/api/egovFetch";
67
import URL from "@/constants/url";
@@ -29,6 +30,9 @@ function EgovGalleryDetail(props) {
2930
const nttId = location.state?.nttId;
3031
const searchCondition = location.state?.searchCondition;
3132

33+
// 공통 네비게이션 훅 사용 (목록으로 돌아가기 URL 생성용)
34+
const { getBackToListURL } = useListNavigation(bbsId);
35+
3236
const [masterBoard, setMasterBoard] = useState({});
3337
const [user, setUser] = useState({});
3438
const [boardDetail, setBoardDetail] = useState({});
@@ -221,12 +225,7 @@ function EgovGalleryDetail(props) {
221225
</Link>
222226
)}
223227
<Link
224-
to={{ pathname: URL.INFORM_GALLERY }}
225-
state={{
226-
nttId: nttId,
227-
bbsId: bbsId,
228-
searchCondition: searchCondition,
229-
}}
228+
to={getBackToListURL(URL.INFORM_GALLERY, searchCondition)}
230229
className="btn btn_blue_h46 w_100"
231230
>
232231
목록

‎src/pages/inform/gallery/EgovGalleryList.jsx‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState, useEffect, useCallback, useRef } from "react";
2-
import { Link, useLocation } from "react-router-dom";
2+
import { Link } from "react-router-dom";
3+
import { useListNavigation } from "@/hooks/useListNavigation";
34

45
import * as EgovNet from "@/api/egovFetch";
56
import URL from "@/constants/url";
@@ -15,23 +16,13 @@ function EgovGalleryList(props) {
1516
console.log("[Start] EgovGalleryList ------------------------------");
1617
console.log("EgovGalleryList [props] : ", props);
1718

18-
const location = useLocation();
19-
console.log("EgovGalleryList [location] : ", location);
20-
2119
const cndRef = useRef();
2220
const wrdRef = useRef();
2321

2422
const bbsId = GALLERY_BBS_ID;
2523

26-
// eslint-disable-next-line no-unused-vars
27-
const [searchCondition, setSearchCondition] = useState(
28-
location.state?.searchCondition || {
29-
bbsId: bbsId,
30-
pageIndex: 1,
31-
searchCnd: "0",
32-
searchWrd: "",
33-
}
34-
); // 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시
24+
// 공통 네비게이션 훅 사용
25+
const { searchCondition, handlePageMove, handleSearch } = useListNavigation(bbsId);
3526
const [masterBoard, setMasterBoard] = useState({});
3627
const [user, setUser] = useState({});
3728
const [paginationInfo, setPaginationInfo] = useState({});
@@ -191,12 +182,7 @@ function EgovGalleryList(props) {
191182
<button
192183
type="button"
193184
onClick={() => {
194-
retrieveList({
195-
...searchCondition,
196-
pageIndex: 1,
197-
searchCnd: cndRef.current.value,
198-
searchWrd: wrdRef.current.value,
199-
});
185+
handleSearch(cndRef, wrdRef, retrieveList);
200186
}}
201187
>
202188
조회
@@ -236,12 +222,7 @@ function EgovGalleryList(props) {
236222
<EgovPaging
237223
pagination={paginationInfo}
238224
moveToPage={(passedPage) => {
239-
retrieveList({
240-
...searchCondition,
241-
pageIndex: passedPage,
242-
searchCnd: cndRef.current.value,
243-
searchWrd: wrdRef.current.value,
244-
});
225+
handlePageMove(passedPage, cndRef, wrdRef, retrieveList);
245226
}}
246227
/>
247228
{/* <!--/ Paging --> */}

0 commit comments

Comments
 (0)