[FE] 대시보드 카드 편집 API 연동 및 에러 fallback 처리#304
Merged
Conversation
- EditCardProvider에 드래그앤드랍 관련 상태 추가 - 대시보드 편집 영역 상수 및 타입 정의 - 대시보드 카드 타입에 드래그 상태 및 고스트 상태 추가
- 드래그앤드랍에서 충돌 로직을 계산할 때 grid 배열 시 코드가 복잡해지기 때문에 수정함
- 대시보드에서 카드의 위치와 크기를 계산하는 훅을 추가함 - 카드를 absolute 포지션으로 배치하고, 마우스 위치를 통해 그리드 셀을 도출해내는 로직을 위해 필요
- PlusIconButton과 TrashCanIconButton에서 클릭 이벤트가 부모 요소로 전파되지 않도록 수정 - 사용자 경험 개선을 위해 버튼 클릭 시 의도한 동작만 수행하도록 함
- 카드 밀어내기 알고리즘 구현 - 그리드 셀에 카드 위치 계산 기능 추가 - 드래그 이벤트 핸들러 구현 - dx, dy로 된 방향 객체 리터럴 선언
- 카드 편집 뷰에 드래그 앤 드롭 이벤트 핸들러 추가 - 미니 뷰에 드래그 앤 드롭 관련 상태 및 핸들러 통합 - 드래그 중인 카드의 시각적 피드백을 위한 Ghost 컴포넌트 추가
- 스로틀링을 통해 불필요한 함수 호출 방지 - 새로운 스로틀 유틸리티 함수 추가
…hub.com/softeerbootcamp-7th/Team3-Checkmate into feature/#50-dashboard-edit-api
- 대시보드 카드 목록을 저장하는 뮤테이션 추가 - 성공 시 쿼리 무효화 및 이전 페이지로 이동
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
frontend/src/components/dashboard/dashboard-tabs-provider/DashboardTabsProvider.tsx
Show resolved
Hide resolved
frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/dashboard/dashboard-main/DashboardMainSuspense.tsx
Outdated
Show resolved
Hide resolved
mskwon02
reviewed
Feb 20, 2026
| buttonText = '다시 시도', | ||
| onClickButton, | ||
| resetErrorBoundary, | ||
| }: ErrorFallbackProps) => { |
Collaborator
There was a problem hiding this comment.
p5] 기존 코드에서 에러 메시지랑, 버튼 클릭 헨들러를 props로 추가로 받으셨네요! 범용성이 더 좋아진 것 같습니다 굳굳굳!
lee0jae330
approved these changes
Feb 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣ 변경 사항
#️⃣ 작업 상세 내용
1. 대시보드 및 카드 레이아웃 API 연동
useSuspenseQuery와useMutation을 사용하여 서버 상태를 관리하며, 카드 편집 완료 시invalidateQueries를 통해 최신 데이터를 유지합니다.2. 상태 관리 및 컨텍스트 리팩터링
Local Storage에 현재 선택된 대시보드 ID를 저장하여 페이지 새로고침 시에도 탭 상태가 유지되도록 했습니다. 특정 대시보드에서 카드 편집을 마치고 돌아왔을 때, 홈 대시보드로 돌아가는 것이 UX를 해친다고 생각했습니다.3. 에러 핸들링 및 UI 컴포넌트 보강
EditCardProvider에서 유효성 여부를 체크하고, 유효하지 않은 경우 에러를 던집니다.EditCardProvider가 유효성을 검증합니다.ErrorFallback과FetchBoundary를 분리하여 네트워크 에러와 런타임 에러를 분리해서 처리했습니다.shadcn/ui기반의Skeleton컴포넌트를 추가하고DashboardMainSuspense를 통해 데이터 패칭 중 사용자 경험을 개선했습니다.참고사항
대시보드 탭 정보 API 연동([FE] 3-2-1. 대시보드 탭 목록 조회 및 편집 API 연동 #43) PR에 디펜던시가 있습니다.#️⃣ 관련 이슈