기존 페이지(리스트 화면 등)에서 필터링/정렬 기준을 설정한 상태에서 팝업(오버레이 페이지)을 오픈할 경우, 필터 및 정렬 조건이 초기화되어 사용자가 다시 리스트를 설정해야 하는 불편이 발생함.

필터 및 정렬 옵션 변경 시, 쿼리 파라미터(Query Parameters)에 즉시 상태를 반영하도록 수정

→ 사용자가 설정한 필터 및 정렬 조건을 페이지 이동 이후에도 안정적으로 유지

팝업을 오픈할 때, 기존 쿼리스트링을 유지한 채 새로운 경로만 추가

→ 팝업 오픈 시 기존 리스트 상태가 초기화되지 않고 그대로 유지

팝업을 닫을 때, 오버레이 관련 파라미터만 제거하고 나머지 필터/정렬 상태는 유지

→ 팝업 종료 후에도 사용자가 이전에 보던 리스트 화면을 동일한 상태로 바로 확인 가능

리스트 페이지는 useSearchParams를 활용하여 항상 URL 기반으로 초기 상태를 구성

→ 새로고침, 재방문 시에도 일관된 리스트 화면 제공

팝업 컴포넌트는 기존 페이지 상태를 건드리지 않고, 쿼리스트링만 조작하는 형태로 상태를 분리

→ 코드 복잡도를 낮추고, 팝업 및 리스트 컴포넌트의 유지보수성을 크게 향상

Export 팝업(모달)에서 사용자가 Export할 데이터를 필터링하거나 선택할 때마다 모달 전체가 리렌더링되면서 화면이 깜빡이는 현상이 발생함.

Export 데이터 조회 쿼리에서 suspense 옵션을 제거하고, 일반 react-query 쿼리로 수정

→ 데이터 리페치 시에도 모달이 언마운트되지 않아 깜빡임 현상 제거

enabled 옵션을 활용하여 사용자가 특정 조작(필터/선택) 시에만 데이터 Fetch를 트리거하도록 변경

→ 불필요한 리렌더링을 최소화하여 성능 최적화

모달 내 사용자 조작(필터/선택)과 화면 반응(데이터 갱신)을 자연스럽게 연결

→ Export UX 품질 개선 및 사용자 만족도 향상

기존에는 상담일지 데이터를 단순 문자열(string) 형태로 저장 및 관리했음.

상담 항목이 다양하고 복잡해지면서, 어떤 정보가 어떤 항목에 해당하는지 구분이 어려워졌고, 조회, 수정, 다운로드 과정에서 데이터 정합성 문제가 발생하기 시작함.

상담 데이터를 구조화하기 위해 LogContentType이라는 명확한 타입을 도입

→ 각 상담 항목을 타입 기반으로 구분하여 관리 가능

string과 structured object 간 변환을 지원하는 유틸리티 함수 구현

serializeLogContent 함수: 객체를 DB 저장 및 다운로드용 문자열로 변환

deserializeLogContent 함수: 문자열을 화면 표시용 객체로 변환

→ 상담일지 데이터를 구조화된 형태로 안전하게 저장 및 표시

데이터 조회, 수정, 다운로드 시 항목별 접근이 가능해짐

→ 기능 확장(필터링, 검색 등)이 용이해지고 유지보수성 향상

기존 문자열 데이터도 deserialize 처리로 자연스럽게 이전 호환성 유지

→ 기존 데이터 마이그레이션 없이 신구 데이터 통합 관리 가능

Nivo 차트를 이용해 데이터를 시각화할 때, 날짜 범위 변경 시 다음과 같은 문제가 발생함:

데이터 렌더링이 순간적으로 어색하게 깨지거나 끊김.

스크롤이 생겼다가 사라지는 과정에서 차트 왼쪽 일부 데이터가 잘리거나 밀림.

데이터 변경 시 Nivo의 transition/motion 애니메이션이 동작하면서 레이아웃이 일시적으로 불안정해짐.

스크롤 위치 변경으로 인해 차트 렌더링 초기화가 완벽하게 이뤄지지 않음.

Nivo 차트의 motionConfig를 'gentle'로 설정

→ 데이터 변경 시 애니메이션 속도를 부드럽게 조정하여 급격한 레이아웃 깨짐 현상 완화

useEffect를 활용하여 데이터가 변경될 때마다 차트 컴포넌트의 스크롤을 자동으로 왼쪽(최초 위치)으로 이동

→ 날짜 범위 변경 시 스크롤이 초기화되어 데이터가 잘리거나 밀리는 문제 방지

데이터 변경 흐름과 렌더링 흐름을 정리하여 차트의 초기 상태를 항상 일관성 있게 유지

→ 차트 UX 및 가독성 개선, 사용자 편의성 향상