오늘 PR 두 개나 날렸어!! 열일했어!! 수민아 완전 최고야!!!!!!
1. 채팅 페이지 오류 수정: 새 채팅 삭제 시 프론트에 정상 반영, 새 채팅 비활성화 문제 해결
1. 새 채팅방 생성 후 아무 메시지도 입력하지 않아 DB에 저장되지 않은 경우 프론트에서만 제거한다.
문제: 새 채팅 생성 후 아무 메시지를 보내지 않고 삭제 버튼을 누르면 이미 삭제되었다는 오류가 뜨고, 사이드바에서 새 채팅이 사라지지 않았다.
수정: 임시 Id, 즉 'new-'로 시작되는 채팅 Id는 api 호출 없이 OnDeleteChat에 chatId를 전달하게끔 해서 api 오류 없이 프론트에서 삭제를 반영하게 된다.
수정 이후 채팅 삭제에서 오류가 없음을 확인했다.
영수증의 경우 삭제 기능이 없기 때문에 괜찮다.
또한 이 수정 이후 새 채팅방을 생성 후 삭제했을 때 다시 새 채팅방이 활성화됨을 확인했다.
2. 새 채팅방 버튼을 적절히 활성화한다.
문제 1: 채팅 페이지에서 새 채팅 생성 후 영수증 페이지에 갔다가 오면 새 채팅이 사이드바에서 사라지며 새 채팅 버튼이 비활성화 되었다. 새로고침이나 다른 페이지에 갔다 오지 않으면 계속 비활성화 되었다.
수정: 영수증 처리로 전환할 때 setLockedChatId(null);을 적용해 영수증 처리 화면에 가면 채팅 disable이 풀리게 하였다.
업무 가이드 카테고리를 선택할 때 setLockedChatId(null);을 하는 경우 사이드바에서 업무 가이드 카테고리를 선택하기만 해도 disable이 풀리므로 영수증 처리 카테고리를 선택할 때 코드를 적용했다.
문제 2: 새 채팅방을 생성하고 메시지를 보낸 경우에도 새 채팅방 버튼이 비활성화 되었다.
원래는 새 채팅방을 생성하고 메시지를 보낼 경우 DB에 저장이 되므로 새 채팅이 활성화 되어야 한다.
수정: 임시 채팅 여부와 관계 없이 메시지를 다 보내면 null로 바뀌게끔 하였다. 따라서 임시 채팅을 생성해 메시지를 보내도 setLockedChatId(null); 이 적용되어 새 채팅 버튼이 활성화 된다.
2. 영수증 화면 날짜 필터링: 날짜 선택과 검색 상태 분리, 초기화 버튼 정상 구현
수정 사항은 다음과 같다.
1. 대화 신고 내역과 영수증 관리 화면 날짜 필터링
- 날짜 선택 시 초록색 안에 있는 날짜가 바로 바뀌지 않게끔 구현하기. 검색 버튼을 누르면 필터링과 함께 한 번에 바뀌게끔 하기!
- 특히 영수증 화면 초록 박스 위에 날짜 필터링 텍스트 없애기
2. 영수증 다운로드 파일명 수정
- 다운로드 시 제목이 202593처럼 되는데, 20250903으로 바꿀 것.
영수증 다운로드 파일명을 수정하는 건 파일명을 포맷팅하는 formatDate 함수를 정의해 해결하였습니다.
대화 신고 내역과 영수증 관리 화면 날짜 필터링에서 수정사항은 아래와 같습니다.
수정 사항 요약
UI에서 날짜를 선택할 때 변하는 상태(selected)와 검색에 적용된 상태(start/end)를 분리하여 UI 선택값이 바뀌어도 요약창과 데이터는 변하지 않고, 검색 버튼을 클릭할 시에만 명시적으로 검색과 요약이 업데이트 되게 구현하였습니다.
변수 선언
1. UI에서 날짜 선택 (selectedStartDate, selectedEndDate)
- 사용자가 DataSelectBar에서 선택할 때마다 바로 바뀌는 값이다. 하지만 검색 버튼을 누르지 않은 상태에서는 검색 함수(fetchReceipts)가 호출되지 않으므로 요약창은 이 값에 반응하지 않는다.
2. 검색 버튼 클릭 -> 검색 실행 (startDate, endDate)
- 클릭 시 selectedStartDate/selectedEndDate를 startDate/endDate로 복사하며, 이제 검색 함수(fetchReceipts)가 이 값을 기준으로 API를 호출하게 된다. 총 검색 결과 요약창도 startDate/endDate를 기준으로 업데이트 된다.
수정 내용 상세
1. 날짜 선택과 검색 상태 분리
- 변경 전: startDate/endDate를 선택 시 총 검색 결과 요약 창에도 바로 반영
- 변경 후: selected 변수는 UI 선택값이고, 실제 검색에 적용되는 값은 startDate/endDate임.
2. fetchReceipts 호출 시점과 인자 조정
- 변경 전: fetchReceipts에서 전역 상태(startDate, endDate)를 바로 사용 -> 상태 업데이트가 비동기여서 클릭 두 번 필요.
- 변경 후: 검색 버튼 클릭 시 fetchReceipts(1, true, {startDate:selectedStartDate, endDate:selectedEndDate}); 처럼 직접 인자로 날짜 전달
- 효과: 검색 버튼을 한 번만 눌러도 선택한 날짜로 API 호출 가능. React 상태 비동기 문제로 발생하던 "두 번 눌러야 반영" 문제 해결.
3. 검색 조건 초기화
- 변경 전: handleClearSearch에서 상태만 초기화, API 호출은 생략
- 변경 후: 검색 조건 초기화 시 데이터도 전체 영수증 목록으로 갱신. fetchReceipts(1, true, { startDate: "", endDate: "" });
- 효과: 초기화 버튼 클릭시 전체 데이터가 리로드 되면서 확실하게 초기화가 됨.
4. DataSelectBar와 SearchBar 연결
- 변경 전: DateSelectBar에 인자로 startDate, endDate 전달
- 변경 후: DateSelectBar에 인자로 selectedStartDate, selectedEndDate 전달
- 효과: UI에서 날짜 선택이 바로 반영됨. 검색 버튼 클릭 시 올바른 값이 변경됨.
