Sat Mar 21 9:28 PM(ing : 0s)
CareUP
프로젝트 개요현장 근로자의 건강 데이터를 수집·모니터링하여 중대재해 리스크를 선제적으로 관리하는 통합 솔루션
프로젝트 과정초기에는 2인 팀으로 기획 및 설계를 진행하였고, 이후 1인 체제 전환 후 프로젝트 개발과 품질 검증(QA)을 주도. 현재는 유지보수 및 고도화 업데이트를 담당하고 있음.
기술 스택React + Vite 기반의 SPA 환경에서 상태 관리(Recoil, React Query), 스타일링(styled-components), 데이터 시각화(Nivo), API 통신 및 인증(axios, react-cookie), 파일 저장(xlsx, file-saver), 데이터 유효성 검증(zod), AI 이미지 분석(AWS Rekognition)까지 통합한 모던 웹 프로젝트
담당 업무

- 프로젝트 초기 기획 및 기술 명세서 작성 주도

- 전반적인 페이지 UI/UX 개발 및 기능 구현 담당

- 유지보수 및 기능 고도화 업데이트 지속 수행

- SOLID 원칙 기반으로 프로젝트 아키텍처를 설계하여, 추가 투입 개발자의 코드 이해 및 수정 편의성 확보

트러블 슈팅
팝업 페이지 오픈 시 기존 페이지 필터/정렬 기준 초기화 문제문제

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

원인 분석

팝업 오픈 시 새로운 라우트 이동 또는 내부 상태 초기화 과정에서, URL에 저장되지 않은 필터/정렬 상태(state)가 소멸되면서 발생.

문제 해결 및 성과

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

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

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

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

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

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

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

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

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

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