fix: 사이트관리 목록의 검색조건이 수정 화면을 거치면 사라지는 문제 수정

[wantaekchoi]

수정 사유 Reason for modification

• 버그수정 Bug fixes
• 기능개선 Enhancements
• 기능추가 Adding features
• 기타 Others

수정된 소스 내용 Modified source

사이트관리의 회원관리·게시판생성관리·게시판사용관리에서 목록의 검색조건이 수정 화면을 거치면 사라집니다. 2페이지에서 항목을 열고 목록 을 누르면 1페이지로 돌아옵니다.

세 목록은 이전 검색조건을 복원하도록 선언돼 있습니다.

const [searchCondition, setSearchCondition] = useState(
  location.state?.searchCondition || {
    pageIndex: 1,
    searchCnd: "0",
    searchWrd: "",
  }
); // 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시

EgovAdminMemberList.jsx:16, EgovAdminBoardList.jsx:17, EgovAdminUsageList.jsx:20

그런데 이 목록으로 이동하면서 searchCondition 을 실어 보내는 곳이 없습니다. 세 목록 주소로 가는 경로는 헤더·좌측메뉴의 메뉴 링크와 수정 화면의 복귀 열 곳뿐입니다. 메뉴 링크는 새로 들어오는 자리라 조건이 없어야 맞습니다. 나머지 열 곳이 모두 조건 없이 이동합니다.

• EgovAdminMemberEdit.jsx:210·232·265·510
• EgovAdminBoardEdit.jsx:173·194·227·507
• EgovAdminUsageEdit.jsx:128·332

그래서 위 location.state?.searchCondition 은 항상 undefined 이고 목록은 매번 초기값으로 조회됩니다.

조건을 건네주는 쪽은 이미 있습니다

세 목록 모두 항목 링크에는 searchCondition 을 실어 보냅니다(EgovAdminMemberList.jsx:77, EgovAdminBoardList.jsx:75, EgovAdminUsageList.jsx:76). 검색어 입력칸도 복원된 값을 표시하도록 배선돼 있습니다(EgovAdminMemberList.jsx:170, EgovAdminBoardList.jsx:163, EgovAdminUsageList.jsx:161). 보내는 쪽과 받는 쪽이 있고 돌아오는 쪽만 없습니다.

검색조건이 풀리는 문제는 이슈 #92 에 bug 로 보고된 적이 있습니다. 그쪽 재현은 브라우저 뒤로가기입니다. 뒤이은 6ec2fa1 이 useListNavigation 을 만들어 공지사항·사이트갤러리 계열 네 쌍에 복원을 붙였고 이 세 화면은 그때 함께 다뤄지지 않았습니다.

다만 회원관리·게시판생성관리 목록이 싣는 값은 searchCondition state 인데 이 state 는 setSearchCondition 이 한 번도 호출되지 않아 마운트 시 값에서 바뀌지 않습니다. 조회와 페이지 이동은 retrieveList({ ...searchCondition, pageIndex: passedPage, ... }) 로 새 조건을 만들어 요청만 하고 state 에는 반영하지 않습니다. 그래서 2페이지에서 항목을 열어도 1페이지 조건이 실립니다.

게시판사용관리 목록은 같은 자리에서 실제 요청에 쓴 조건을 싣습니다.

// EgovAdminUsageList.jsx:76
searchCondition: srchCnd,

검색유형 select 에는 복원 배선이 빠져 있습니다

복원이 동작하는 형제 네 곳은 검색유형 select 에도 defaultValue 를 둡니다(admin/notice/EgovAdminNoticeList.jsx:148, admin/gallery/EgovAdminGalleryList.jsx:148, inform/notice/EgovNoticeList.jsx:150, inform/gallery/EgovGalleryList.jsx:150). 이번 세 목록의 select 에만 없습니다(EgovAdminMemberList.jsx:150, EgovAdminBoardList.jsx:143, EgovAdminUsageList.jsx:143).

복원이 안 되던 동안에는 드러나지 않던 자리입니다. 복원만 켜면 페이지 이동이 searchCnd: cndRef.current.value 로 조건을 만드는 탓에, 복귀 직후 페이지를 한 번 더 넘길 때 검색유형이 초기값으로 되돌아갑니다.

/api/members?pageIndex=2&searchCnd=1&searchWrd=홍길동
/api/members?pageIndex=3&searchCnd=0&searchWrd=홍길동

이 배선도 함께 넣었습니다.

수정

수정 화면 세 곳은 목록으로 돌아가는 경로에 받은 조건을 함께 넘기도록 했습니다.

const searchCondition = location.state?.searchCondition;
...
navigate({ pathname: URL.ADMIN_MEMBERS }, { state: { searchCondition } });
...
<Link to={URL.ADMIN_MEMBERS} state={{ searchCondition }} ... >

회원관리·게시판생성관리 목록은 항목 링크가 싣는 값을 게시판사용관리 목록과 같은 srchCnd 로 맞췄습니다. 이 변경으로 retrieveList 의 useCallback 안에서 searchCondition 을 쓰지 않아 의존성 배열에서도 뺐습니다. npm run lint 가 --max-warnings 0 이라 남겨두면 react-hooks/exhaustive-deps 경고로 실패합니다. 게시판사용관리 목록의 의존성 배열이 이미 [listTag] 입니다.

두 목록의 검색유형 select 에는 형제와 같은 defaultValue={searchCondition.searchCnd} 를 넣었습니다. 게시판사용관리 목록은 option 이 하나뿐이라 그대로 두었습니다.

범위

• 삭제 후 복귀(EgovAdminMemberEdit.jsx:265, EgovAdminBoardEdit.jsx:227)는 조건을 싣지 않고 두었습니다. 마지막 페이지의 마지막 항목을 지우면 빈 페이지로 돌아옵니다. 복원이 동작하는 형제도 삭제 복귀에는 조건을 싣지 않습니다(admin/notice/EgovAdminNoticeDetail.jsx:68).
• 세 목록의 등록 버튼은 조건을 싣지 않으므로(EgovAdminMemberList.jsx:196, EgovAdminBoardList.jsx:189, EgovAdminUsageList.jsx:187) 신규 등록 후 복귀는 기존과 같이 초기 조건으로 조회됩니다.
• 메뉴에서 목록에 들어와 항목을 열고 브라우저 뒤로가기로 돌아오면 조건은 그대로 초기화됩니다. 뒤로가기가 복원되는 쪽은 조건을 URL 쿼리에 남기는 useListNavigation 의 메커니즘이고 이 변경은 라우터 state 로 돌려주는 기존 선언을 발동시키는 데까지입니다.
• 오늘의행사·주간행사·일정관리 목록에도 같은 복원 선언이 있으나 그쪽은 상세 화면이 조건을 건네받는 부분부터 없습니다. 복원 경로를 새로 놓는 일이라 이 변경에 넣지 않았습니다.
• 공지사항·사이트갤러리 계열은 상세의 목록 링크가 getBackToListURL 로 조건을 URL 쿼리에 실어 돌려줍니다(inform/notice/EgovNoticeDetail.jsx:211). 그 계열의 저장·삭제 복귀도 조건을 싣지 않지만 메커니즘이 달라 별개로 두었습니다.

JUnit 테스트 JUnit tests

• JUnit 테스트 JUnit tests
• 수동 테스트 Manual testing

src/pages/admin/EgovAdminEditBackToList.test.jsx 를 추가했습니다. 수정 전에는 여덟 건 모두 실패합니다.

 ❯ src/pages/admin/EgovAdminEditBackToList.test.jsx (8 tests | 8 failed) 1397ms
     × '회원관리' — 목록에서 받은 검색조건을 목록으로 되돌려준다 68ms
     × '게시판생성관리' — 목록에서 받은 검색조건을 목록으로 되돌려준다 31ms
     × '게시판사용관리' — 목록에서 받은 검색조건을 목록으로 되돌려준다 26ms
     × '회원관리' — 2페이지에서 항목을 열면 그 페이지 조건이 함께 넘어간다 65ms
     × '게시판생성관리' — 2페이지에서 항목을 열면 그 페이지 조건이 함께 넘어간다 58ms
     × '회원관리' — 페이지를 더 넘겨도 검색유형이 유지된다 28ms
     × '게시판생성관리' — 페이지를 더 넘겨도 검색유형이 유지된다 26ms
     × 2페이지에서 항목을 열고 목록으로 돌아오면 2페이지를 다시 조회한다 1093ms

 Test Files  1 failed (1)
      Tests  8 failed (8)

마지막 한 건은 목록에서 2페이지로 이동해 항목을 열고 목록 으로 돌아오는 왕복을 그대로 따라갑니다. 복귀 후 다시 2페이지를 조회하는지 확인합니다. 저장·삭제 후 복귀는 테스트로 덮지 않았습니다.

수정 후에는 전부 통과합니다.

 Test Files  14 passed (14)
      Tests  61 passed (61)

npm run lint 는 경고 없이, npm run build 는 성공으로 끝납니다.

테스트 브라우저 Test Browser

• Chrome
• Firefox
• Edge
• Safari
• Opera
• Internet Explorer
• 기타 Others

해당 없음 (jsdom 렌더링으로 확인)

테스트 스크린샷 또는 캡처 영상 Test screenshots or captured video

위 테스트 출력으로 대신합니다.

[eGovFrameSupport]

표준프레임워크에 대한 지속적인 참여에
대단히 감사드립니다.