0722
진행상황
- [ x ] 트리구조 데이터 시각화 완료
- 이슈: 셀 수정 시 버그 발생(테크니컬 이슈, 금방 해결 예정)
- 다음 관건은 클릭 가능한 셀을 눌렀을 때 하이라이팅을 어떻게 해줄 것인가? 임
- HBL > 그림과 같이 동일한 HBL의 하위 row을 추가하고자 했을 때
- 그리드 안에서 빈 row를 추가하여 작성하고 (자동)저장으로 POST, ~~GET으로~~ 확인하는 프로세스
- 별도의 추가 버튼을 만들어 모달로 추가(POST)하고 ~~GET으로~~ 다시 불러오는 프로세스 나중에 row reordering이 생긴다면 흐름 상 자연스러운 건 1번
- row reordering도 구현할게 많다
- MBL을 드래그하면 해당하는 HBL, PO가 모두 잡혀야 함
- HBL을 드래그하면 해당하는 PO가 모두 잡혀야 함
- = column간 위계설정도 논의해서 확정지어야함(피라미드) 단순히 값만 추가하는게 아니라 다른 비즈니스 로직(e.g. PO-Container 매칭)이 필요한 열일 수도 있다면 2번으로 할 수 밖에 없음
- 그렇다면 추가 버튼을 '어디에 어떻게 언제' 보여줄 것인가?
- column 우클릭(headerRow + cell)
- ~~화면 하단에 추가버튼을 보여주고 한 row를 통째로 추가하게 하는 방법도 있음~~
- 처음부터 모든 값을 다 입력해야한다는 점에서 BOMP의 사용 의미가 퇴색될 듯
- 추가로 새로운 row에 값을 입력했을 때의 기대 액션
- 우선 row마다 자동완성이 필요할 수 있다
- 특정 값으로 확정되면, 우측 하위 요소들은 상위 특정 값의 식별자를 파라미터로 삼아 좁혀 검색해야 한다
- 기존 값을 입력하면 위 예시처럼 나뉘는게 아니라 자동으로 병합되어야한다(그러면 수동 병합 기능은 제공하지 않을 것인가?)
- 그렇다면 반대로 신규 하위 row를 추가하려면?
- 셀을 클릭하고 엔터를 누르거나
- 우클릭 후 "신규 행 추가" 따위의 버튼을 눌러 추가한다
- HBL > 그림과 같이 동일한 HBL의 하위 row을 추가하고자 했을 때
- 수정/삭제 임시 상태 시각화?
- 현재는
const [data, setData] = useState<FlattenedDataNode[]>(result);useState로 관리하고 있음 - 셀 값을 수정하면 곧바로 상태에 덮어씌워지게 됨
- 이러면 전체 값을 넘기게 됨(변경한 값만 넘겨주려면 순회하면서 바뀐곳만 찾아주는 계산을 별도로 해야함)
- 상태를 2개 두는건 어떨까?
- 위 2차원 그리드 렌더용 상태는 그대로 두고, 수정 및 삭제가 완료되면 위 상태와 더불어 변화된 값만 저장하는 1차원 배열 상태를 두는 방안
useState<{rowId, columnId, type, previousCell, newCell}[]>형태가 될 것(라이브러리 타입 인터페이스 있음)- (자동)저장 시에는 1차원 배열 상태 값들만 보내면 됨(검색, 필터, 정렬 정보와 함께)
- 현재는
- headerRow에 필터, 정렬 기능 추가 필요
- 좌측에 숫자 인덱스 column 필요
- 되돌리기(ctrl+z) - 히스토리와 연동
- 컬럼 커스터마이징 뷰가 BOMP에도 있어야하지 않을까
자동완성 => 클라쪽에서도 캐싱필요함(변경없으면 보내지 않아야 함) 노드간 부모자식 존재를 알도록 해서 순회를 돌지 않게 해야한다 참조를 잘 활용할 것 첫 로딩에 모든 데이터 세팅을 완료해놓고, 사용할 때엔 시간 복잡도를 최소화 수정/삭제하고 GET 안함. 비용이 너무 큼. 사용자 액션에 집중해서
결국 내가 집중해야하는 것은 '성능' 브라우저에서 이렇게 복잡하고 거대한 데이터를 프로그램으로 제어할 때 사용자가 불편함을 느끼지 않으려면 UX를 해치지 않도록 성능을 적절히 분배해야 한다
- 유저의 데이터 갖고놀기에만 집중 셀 클릭 시 전체 그룹을 어떻게 파악해서 식별화할 것인가?