[#80] 책 검색결과가 없을때 ui 표시 #93
Conversation
|
books.empty 로는 요청응답이 늦게들어와서 books 가 비어있을때 잘못 ui 표시될수 있음 -> 요청 보내는 지표를 기준으로 판단하도록 수정 필요 |
| ScrollView { | ||
| ForEach(bookSearchViewModel.books) { book in | ||
| BookRowView(viewModel: bookSearchViewModel, book: book) | ||
| if bookSearchViewModel.books.isEmpty && isSearchButtonClicked { | ||
| Text("검색 결과가 없어요!\n검색어를 다시 확인해주세요") | ||
| .font(Font.custom("Pretendard Variable", size: 14)) | ||
| .multilineTextAlignment(.center) | ||
| .foregroundColor(Color(red: 0.24, green: 0.24, blue: 0.26).opacity(0.6)) | ||
| .frame(width: 193, alignment: .top) | ||
|
|
||
| } else { | ||
| ForEach(bookSearchViewModel.books) { book in | ||
| BookRowView(viewModel: bookSearchViewModel, book: book) | ||
| } .background(.white) | ||
| } | ||
|
|
||
| } |
There was a problem hiding this comment.
현재 요청 결과 배열의 빈 값과 검색 여부를 판단하는 clicked 불타입 변수로 검색 결과의 유무를 결정하는 방식은 아래와 같은 상황에서 문제가 발생할 가능성이 있습니다:
-
문제 상황
검색 요청이 전송되었으나 결과 값이 늦게 도착할 경우, 화면에 “검색 결과 없음”이 먼저 표시되어 사용자 경험(UX)이 어색하게 느껴질 수 있을 것 같아요! -
방식 제안
검색 결과의 유무를 clicked 변수로 판단하기보다는 API 요청의 결과를 기반으로 결과가 확실히 없는 경우에만 “검색 결과 없음” 메시지를 화면에 표시하는 방식이 좋을 것 같습니다. 🐯
(+) 결과 요청이 늦게 오는 상황이 많이 생긴다면, 추가적으로 검색중 상태도 보여주는 화면을 고려해봐도 좋을 거 같아요! (with 디자인팀) (조금 나중 얘기..?)
There was a problem hiding this comment.
상세하게 피드백 주셔서 감사합니다 호랑...! 도움많이 받고있습니다.
api 요청 기반으로 ui 에 표시하는 방법을 우선적으로 구현해볼게요!
제안해주신거 고려해서 잘 구현해보겠습니다!
There was a problem hiding this comment.
더 나은 방법이 있다면 같이 의논해봐도 좋아요 🌝
There was a problem hiding this comment.
nil 관련 로직만 적용 후 새로 푸쉬 올렸습니다! 이런 화면으로 나오게 되는데 영상으로 확인해보시면 편할것같아요 :)
최대한 고려했는데..혹시 추가 필요 로직이 있으면 알려주시면 감사하겠습니다!
buttonClicked 로 판단하는 로직은 일부러 넣은게 맞습니다! (없으면 로직이 불완전하다고 판단했습니다)
(추가)
결과 요청이 늦게 오는 상황이 많이 생긴다면, 추가적으로 검색중 상태도 보여주는 화면을 고려해봐도 좋을 거 같아요! (with 디자인팀) (조금 나중 얘기..?)
이 부분에 대해 디자이너 세니와 이야기했고, 그냥 대기중이라는 택스트보다는 스켈레톤UI로 로딩화면을 시작적으로 보여주는게 낫겠다는 논의를 했슴니다!
다만 지금 로딩화면 디자인을 고민하고 적용하기보단 나중에 차차 검색 로직이랑 같이 고려해야할것같아서, 우선은 빈화면으로 두었어요 :)
- 현재 로딩화면이 크게 길지는 않아서 +_+
2024-11-22.11.33.48.mov
hyeonheebee
force-pushed
the
feat/80-BookSearchResponse_nil_Check
branch
from
928a7c3 to
a32b025
Compare
| @Published var isDelaying: Bool = false | ||
| private var debounceWorkItem: DispatchWorkItem? // 딜레이를 위한 작업 아이템 |
There was a problem hiding this comment.
아 요건 원래 새로운 로직 넣어보려고(검색어 입력후 몇초 기다렸다가 api요청하는) 추가했던 프로퍼티인데 제가 삭제하는걸 깜빡했습니다 ..! 혼란드려 죄송해요
- 참고로 노티는 지금 계속 해보고 있는데 뷰는 그렸고 설정이 제대로 안되는것같아서 오늘 내에 작업이 끝날지는..모르겠습니다 ㅠㅠ
감사합니다..! 🥹 |
📝 작업 내용
스크린샷 (선택)
💬 리뷰 요구사항(선택)