디지털 자산 관리 시스템 고도화

문제

Redux 기반 전역 로딩과 앱별 API 요청 처리, 기존 UI가 강하게 결합되어 있었습니다. 신규 기능을 개발하면서 상태 관리 구조도 바꿔야 했습니다.

신규 기능 개발과 구조 변경을 함께 진행해야 했습니다. 전체 화면을 한 번에 교체하지 않고, 신규 화면과 연결된 페이지부터 전환한 뒤 나머지를 페이지 단위로 이관했습니다.

구현

신규 화면과 그에 영향을 받는 페이지부터 새 구조로 전환했습니다. 요구사항 개발을 마친 뒤 나머지 화면을 페이지 단위로 이관했습니다.

Redux 기반 비동기 처리와 앱별 요청 코드를 정리하고, OpenAPI 스펙 기반 Hey API 코드 생성기와 공통 API 클라이언트로 요청·응답 DTO 타입을 맞췄습니다.

API 조회 결과는 TanStack Query로 관리하고, 공유하거나 복원할 화면 조건은 URL에 저장했습니다. UI 상태는 공유 범위에 따라 Zustand와 useState를 나누어 사용하고, 폼 입력과 검증은 React Hook Form·Zod로 관리했습니다.

문제

테이블·팝업·선택 메뉴·입력 폼이 화면마다 다르게 구현되어 있었습니다. 목록의 컨텍스트 메뉴와 툴바 액션도 여러 곳에서 관리해 같은 기능을 수정할 때 관련 코드를 함께 찾아야 했습니다.

구현

TanStack Table 기반 공용 테이블에 가상·무한 스크롤, 열 너비 조절과 로컬 스토리지 저장, 좌측 고정 체크박스 열, 행 펼침 기능을 구현해 관리 화면과 자산·사용자 목록에 적용했습니다.

여러 곳에 중복된 정의를 한곳에서 관리하는 SSOT(Single Source of Truth) 방식으로 정리했습니다. 목록의 컨텍스트 메뉴와 툴바가 같은 액션 정의를 참조하도록 바꾼 것도 그중 하나입니다.

팝업·선택 메뉴·입력 요소를 공용 컴포넌트로 교체하고, 검색어·필터·탭의 세션 상태 유지와 날짜·시간 처리를 공용 모듈로 분리했습니다.

구형 UI·목업·미참조 이미지·중복 export와 미사용 의존성을 삭제하고, 다른 화면에 영향을 주던 스타일을 정리했습니다. 색상 토큰을 맞추고 Next.js·TypeScript·Zod·TanStack Table 업데이트와 암묵적 any 정리도 진행했습니다.

문제

폴더·파일 외에 클래스와 인스턴스를 다루면서, 목록에서 자산 유형을 구분하고 어떤 항목을 상속받는지 확인할 수 있어야 했습니다.

구현

AI로 들여쓰기와 연결선이 있는 UI 프로토타입을 빠르게 만들어 클라이언트에게 보여주고, 이를 바탕으로 상속 관계를 표현하는 목록을 구현했습니다.

폴더는 회색 폴더 아이콘, 클래스는 파란색 C, 인스턴스는 보라색 I로 구분했습니다. 파일은 PNG처럼 확장자가 표시된 파일 아이콘을 사용해 목록에서 유형을 알아볼 수 있게 했습니다.

문제

워크스페이스 권한과 사용자별 권한을 여러 곳에서 관리하고 있어, 관련 설정을 확인하고 수정하려면 화면을 오가야 했습니다.

구현

워크스페이스 권한과 사용자별 권한을 한 페이지에서 확인하고 변경할 수 있도록 UI와 사용 흐름을 설계했습니다. 프로토타입으로 화면 구성을 검토하며 권한 관리 화면을 구현했습니다.