[Next.js] - 공지상세 페이지 검색 조건 및 페이지 유지 흐름 개선

공지사항 페이지 기능 정리

1. 검색 조건(q) 및 현재 페이지(page) 유지 처리

• 상세 페이지 진입 시 URL에 다음 파라미터를 포함:
  • noticeSeqno: 글 번호
  • page: 현재 페이지
  • q: 검색 조건(JSON 직렬화 후 encodeURIComponent 처리)
• 예시:

  
  router.push(
    `/user/notice/detail?noticeSeqno=${row.noticeSeqno}&page=${currentPage}&q=${encodeURIComponent(JSON.stringify(serializeSearchFormToJson(searchFormRef)))}`
  );
      

2. 상세 페이지에서 목록 페이지로 돌아갈 때 검색 & 페이지 복원

• 디테일 페이지에서 목록 버튼 클릭 시:

  
  const page = searchParams.get("page") || "1";
  const q = searchParams.get("q") || "";
  router.push(`/user/notice/list?page=${page}&q=${q}`);
      

3. useEffect의 자동 재조회 로직 제거

• 페이지 번호만 바뀌었을 때 목록 자동 조회 로직(useEffect)을 제거함으로써, 쿼리스트링 기반으로 fetchFindList 호출 타이밍 제어 가능
• 예전 코드:

  
  useEffect(() => {
    fetchFindList(currentPage);
  }, [currentPage, resetTrigger]);
      

• → 위 로직 제거하고, router.push 후 직접 fetchFindList 호출하도록 변경

4. @NotBlank 이슈 (제목, 내용 공백 허용 문제)

• 디테일 페이지 접근 시 @NotBlank 제약이 걸린 필드들이 null이어서 예외 발생
• 임시 해결책:
  • form에 <input type="hidden" name="noticeTitle" value="..." /> 등 추가
  • 그러나 onSubmit이 없는 상태라 바로 넘어가지 않음
  • 정석적 접근은 상세 조회용 DTO와 등록/수정용 DTO를 분리

5. 기타 개선사항

• 상세 페이지에서도 page와 q 유지하도록 수정 페이지 이동 시 포함
• 예:

  
  router.push(
    `/admin/notice/edit?noticeSeqno=${row.noticeSeqno}&page=${currentPage}&q=${q}`
  );
      

---

마무리
오늘 작업은 "검색 조건 및 페이지 유지 흐름 개선", "디테일/수정/목록 간 연동 안정화", "불 필요한 useEffect 제거" 중심으로 진행하였으며, 흔하게 겪는 UX 문제 해결 경험으로 매우 중요하다 생각 합니다.