도대체 CRM 만들겠다고 한지가 언제인데 이제서야 리드 CRUD를 끝냈다.. ㅎr..
오늘 했던 것들을 정리해보려고 한다.
모달에 대한 고민
1. 리드 삭제 모달창
2. 리드 수정 모달창
3. 리드 생성 모달창
리드에서 사용할 모달창은 총 3개가 있었고
나는 위에 세 가지가 모달창이라는 이유로 하나의 컴포넌트로 만들고 싶어서
엄청 오래 고민하고 말하자면 뻘짓 도 진짜 오래 많이 했다.
삭제 모달창에는 데이터를 내려주거나 받아올 필요가 없었고 버튼 함수만 내려주면 됐다.
근데 리드를 수정하거나 생성할 때는 버튼에 데이터를 같이 넘겨줘야 했다.
왜냐면 LeadList 컴포넌트에서 수정/생성을 한 후에 새로운 데이터 리스트를 보여줘야 했기 때문이다.
그래서 최종적으로는 ConfirmModal 이랑 LeadFormModal 이라는 컴포넌트 두 개로 나눴다.
ConfirmModal: 현재는 삭제 기능만 있지만action에 따라서 다양한 기능을 하게 할 것LeadFormModal: 리드에 대한Form은LeadForm이라는 하위 컴포넌트로 실행하기 때문에 컴포넌트 이름을FormModal로 변경해서 다른 오브젝트에서도 사용할 예정이다.
props 는 이런 식으로 넘겨줬다
selectedItem 이 있으면 edit, 없으면 create 로 해서 input 값을 설정해줬다.
데이터 정렬 기능 추가
리드 리스트를 정렬할 수 있도록 기능을 추가했다. 디자인은 어떻게 해야 할 지 아직 감이 안 잡힌다..
LeadList 컴포넌트에서 상태를 추가했고 그 상태를 통해서 선택된 정렬 기준과 보여줄 데이터를 결정한다.
CRM 소프트웨어의 경우에는 여러 사람이 동시에 사용하는 경우가 많기 때문에
정렬을 했을 때 기존의 데이터만 정렬을 하는 게 아니라 새로 데이터를 가져온 후에 정렬을 하게 했다.
// 정렬 팝업 상태
const [sortingFilter, setSortingFilter] = useState('createdAt')
const [sortingPopupIsOpen, setSortingPopupIsOpen] = useState(false)sortingFilter 상태를 굳이 사용하고 싶지는 않았지만
리드 리스트에 사용되는 data 또한 상태기 때문에 리렌더링 되었을 때
기존에 선택했던 기준 필드가 바뀌는 문제가 있어서 그 점을 보완하려고 추가를 했다.
upsert를 해보자
upsert 기능을 추가하면서 어려웠던 점은
- 생성/수정을 한 후에 해당 문서를 디테일 화면에 보여주는 것
- 모달창에 대한 부분
이었다.
모달창에 대한 부분은 위에 기재한 것처럼 selectedItem 을 통해서 해결을 했는데
해당 문서를 디테일 화면에 보여주는 부분이 좀 오래 걸렸다.
기존에 데이터를 불러오는 getLeads() 함수가 있어서 그걸 이용하려고 했다.
const [data, setData] = useState([])
const [selectedObj, setSelectedObj] = useState({})
const [detailOpen, setDetailOpen] = useState(false)data: 리드 리스트를 뿌려주기 위한 데이터, 화면이 렌더링 될 때getLeads함수를 통해setData됨selectedObj: 리스트에서 선택한 레코드에 대한 css 설정과LeadDetail컴포넌트에 전달하여 상세페이지를 보여주기 위한 데이터detailOpen: 상세페이지 open / close에 대한 상태
그래서 위 상태와 함수들을 사용해서 수정/생성 > 데이터 불러오기 > 해당 id를 가진 레코드를 setSelectedObj
의 순서대로 처리하려고 했는데 자꾸 이전의 값이 뜨고 새로 수정한 부분은 뜨지 않았다.
해결은 기존에 있던 함수를 사용하지 않고 handleUpsert 함수 안에서
데이터 불러오기 > set 을 전부 넣었더니 새로운 값을 확인할 수 있었다.
문제가 있었던 경우에는 기존에 열려있던 상세페이지의 값이 바뀌지는 않았지만
다시 그 레코드의 상세 페이지를 열었을 때는 새로운 값으로 바뀌어 있었다.
내가 놓친 리액트의 상태값에 대한 부분이 있는 것 같은데 이 점은 추후에 알아봐야겠다.
간단하게 수정한 것들
1. 생성일자 외 수정일자 추가 및 초단위 추가
createdAt 필드만 생성했는데 이제 수정도 가능하니까 modifiedAt 필드를 추가했다.
그리고 분단위까지만 일자에 추가를 했더니 정렬했을 때 같은 분에 만들어진 리드들이 순서가 왔다갔다했다.
그래서 초 단위까지 추가해서 리스트가 변하지 않도록 했다.
앞으로 수정 필요한 것들
오늘 하면서 수정 필요할 것 같다고 느꼈던 것들 수정할 것!
컴포넌트 나누기
LeadList 컴포넌트에서 나눌 수 있는 컴포넌트들이 있을 것 같다.
최대한 나눠서 다른 오브젝트에서도 사용할 수 있는 컴포넌트 요소들을 만들면 담에 편할듯!
정렬 팝업 외부 영역 누르면 닫게 하기
컴포넌트 생성해서 감싸면 되지 않을까 라는 생각
