Optimistic UI 기법으로 버튼 기능 구현

1. 사용자가 버튼을 클릭 2. 서버에 신호가 전달 3. 서버에서 응답을 보낸다 4. 응답 결과를 보여주는 페이지가 새로 로딩된다.

1. 사용자가 버튼을 클릭 2. 버튼이 비활성화 되면서, 스피너가 버튼 위에 보이고 서버와 통신이 이뤄짐을 알려준다. 3. 서버에 신호가 전달 4. 서버에서 응답을 보낸다. 5. 응답에 따라 버튼과 페이지의 모습이 업데이트 된다.

사용자 측면 1. 사용자가 버튼을 클릭한다. 2. 버튼은 바로 성공일때와 같은 시각적 상태를 반영한다. 개발자 측면 1. 사용자가 버튼을 클릭한다. 2. 버튼은 바로 성공일때와 같은 시각적 상태를 반영한다. 3. 서버에 신호가 전달. 4. 서버에서 페이지로 응답을 보낸다. 5. 대부분의 경우 응답이 성공적일 것이므로, 사용자는 문제가 없다. 6. 실패한 경우에 시스템은 오류를 반환한다.

Future<void> toggleLike({ required int contentIdx, }) async { List<FeedData>? currentList = state.itemList; int targetIdx = -1; if (ref.read(firstFeedDetailStateProvider) != null && currentList != null) { targetIdx = currentList.indexWhere((element) => element.idx == contentIdx); if (targetIdx != -1) { // 좋아요 상태를 변경하기 전의 상태를 저장합니다. if (!_initialLikeStates.containsKey(contentIdx)) { _initialLikeStates[contentIdx] = currentList[targetIdx].likeState == 1; } bool isCurrentlyLiked = currentList[targetIdx].likeState == 1; currentList[targetIdx] = currentList[targetIdx].copyWith( likeState: isCurrentlyLiked ? 0 : 1, likeCnt: isCurrentlyLiked ? currentList[targetIdx].likeCnt! - 1 : currentList[targetIdx].likeCnt! + 1, ); state.notifyListeners(); saveLike = currentList[targetIdx].likeState; } } handleLikeAction( contentIdx: contentIdx, likeState: saveLike, ); }

void handleLikeAction({ required int contentIdx, required int? likeState, }) { // 디바운스 타이머 설정 EasyDebounce.debounce( 'handleLikeAction', const Duration( milliseconds: 500, ), () async { // 초기 상태와 현재 상태를 비교합니다. bool initialLikeState = _initialLikeStates[contentIdx] ?? false; if (likeState == 1 && !initialLikeState) { // 좋아요 상태가 되었다면 API 호출 await postLike(contentIdx: contentIdx); } else if (likeState == 0 && initialLikeState) { // 좋아요 취소 상태가 되었다면 API 호출 await deleteLike(contentIdx: contentIdx); } // 처리 후 초기 상태 정보 삭제 _initialLikeStates.remove(contentIdx); saveLike = null; }, ); }

Future<ResponseModel> postLike({ required contentIdx, }) async { try { final result = await FeedRepository(dio: ref.read(dioProvider)).postLike(contentIdx: contentIdx); return result; } on APIException catch (apiException) { await ref.read(aPIErrorStateProvider.notifier).apiErrorProc(apiException); throw apiException.toString(); } catch (e) { print('postLike error $e'); rethrow; } } ---------------------------------------------------------------- Future<ResponseModel> deleteLike({ required contentIdx, }) async { try { final result = await FeedRepository(dio: ref.read(dioProvider)).deleteLike(contentsIdx: contentIdx); return result; } on APIException catch (apiException) { await ref.read(aPIErrorStateProvider.notifier).apiErrorProc(apiException); throw apiException.toString(); } catch (e) { print('deleteLike error $e'); rethrow; } }