[AN/USER] feat: 검색 화면을 구현한다.(#784) #799

SeongHoonC · 2024-03-20T06:07:51Z

📌 관련 이슈

closed: [AN] 검색 화면을 구현한다. #784

✨ PR 세부 내용

1. ClearEditText

처음엔 Material Design 의 EditText 를 사용하려 했으나 디자인이 원하는 대로 커스텀되지 않았습니다.

따라서 입력중인 문자열을 clear 할 수 있는 Custom EditText 를 넣었습니다.
박상권님 코드를 사용했습니다.

https://gun0912.tistory.com/56

2. 복잡한 화면

화면 상태가 좀 복잡합니다.

최근 검색어 화면

최근 검색어 성공 RecentSearchSuccess & Empty
최근 검색어 성공 RecentSearchSuccess & NotEmpty

검색 중 : Loading
검색 성공

검색 성공 SearchSuccess & Empty
검색 성공 SearchSuccess & NotEmpty

검색 결과가 없어요 까지만 구현되어있고 추가 요청하러가기는 구현하지 않았습니다.

sealed interface SearchUiState {
    object Loading : SearchUiState

    data class RecentSearchSuccess(
        val recentSearchQueries: List<RecentSearchItemUiState>,
    ) : SearchUiState

    data class SearchSuccess(
        val searchedFestivals: List<FestivalSearchItemUiState>,
        val searchedArtists: List<ArtistSearchItemUiState>,
        val searchedSchools: List<SchoolSearchItemUiState>,
    ) : SearchUiState

    object Error : SearchUiState

    val shouldShowRecentSearchSuccessNotEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isNotEmpty()
    val shouldShowEmptyRecentSearchSuccessEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isEmpty()
    val shouldShowEmptyRecentSearchSuccess get() = this is RecentSearchSuccess
    val shouldShowSearchSuccess get() = this is SearchSuccess
    val shouldShowLoading get() = this is Loading
    val shouldShowError get() = this is Error
}

3. 상태 저장 문제

뷰페이저와 탭 레이아웃을 TabLayoutMediator 로 attach 해서 축제, 아티스트, 학교 화면을 전환시킵니다.

[검색] -(�목록 선택)-> [상세] - (뒤로가기 클릭)-> [검색]

이렇게 이동하거나 구성변경 발생시 탭 포지션이 0으로 초기화되는 문제가 있었습니다. 그래서 해당 상태를 ItemSearchScreenUiState 객체를 뷰모델 프로퍼티로 저장합니다.

이 부분도 uiState 로 관리하려고 했으나 분리하지않으면 로직 관리가 힘들고 사이드 이팩트가 발생해서 분리했습니다.

아직 고치지 못한 부분이 홈 화면을 갔다오거나 핸드폰 껐다가키면 초기화 됩니다. restarted 되면 발생하는 것으로 예상 (고쳐보려고했는데 모르겠습니다.. 구성 변경은 대응이 되는데 왜...)

다행히 고쳤습니다..휴

4. 최근 검색어는 Room 으로 저장합니다.

searchQuery 가 primary_key 이고 createdAt 시간과 함께 저장합니다. 시간순으로 내림차순 불러옵니다.

시연 영상

KakaoTalk_Video_2024-03-20-15-06-54.mp4

re4rk

고생하셨습니다!
코드가 엄청깔끔하네요! 생각 엄청하신게 느껴집니다!

re4rk · 2024-03-22T13:33:06Z

android/festago/presentation/src/main/res/layout/item_search_festival.xml

+            style="@style/B3Medium14Lh14"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@{@string/festival_list_tv_date_range_format(item.startDate.format(DateTimeFormatter.ofPattern(@string/festival_list_tv_date_format)),item.endDate.format(DateTimeFormatter.ofPattern(@string/festival_list_tv_date_format)))}"


BindingAdapter가 마려워지네요 ㅋㅋㅋ

re4rk · 2024-03-22T13:42:51Z

...esentation/src/main/java/com/festago/festago/presentation/ui/search/uistate/SearchUiState.kt

+
+    val shouldShowRecentSearchSuccessNotEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isNotEmpty()
+    val shouldShowEmptyRecentSearchSuccessEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isEmpty()
+    val shouldShowEmptyRecentSearchSuccess get() = this is RecentSearchSuccess


네이밍은 shouldShowEmptyRecentSearchSuccess인데 내용은 Empty랑 관련 없는 것같습니다!
다음과 같은 네이밍은 어떤가요?

Suggested change

val shouldShowEmptyRecentSearchSuccess get() = this is RecentSearchSuccess

val shouldShowRecentSearchSuccess get() = this is RecentSearchSuccess

re4rk · 2024-03-22T13:44:36Z

...esentation/src/main/java/com/festago/festago/presentation/ui/search/uistate/SearchUiState.kt

+    val shouldShowRecentSearchSuccessNotEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isNotEmpty()
+    val shouldShowEmptyRecentSearchSuccessEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isEmpty()


Suggested change

val shouldShowRecentSearchSuccessNotEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isNotEmpty()

val shouldShowEmptyRecentSearchSuccessEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isEmpty()

val shouldShowNotEmptyRecentSearchSuccess get() = this is RecentSearchSuccess && recentSearchQueries.isNotEmpty()

val shouldShowEmptyRecentSearchSuccess get() = this is RecentSearchSuccess && recentSearchQueries.isEmpty()

과 같은 네이밍은 어떤가요??

re4rk · 2024-03-22T13:50:17Z

...o/presentation/src/main/java/com/festago/festago/presentation/ui/customview/ClearEditText.kt

+import androidx.core.graphics.drawable.DrawableCompat
+import com.festago.festago.presentation.R
+
+class ClearEditText : AppCompatEditText, TextWatcher, OnTouchListener, OnFocusChangeListener {


오 깔끔하네요 이렇게 만드니까

re4rk · 2024-03-22T13:50:48Z

...o/presentation/src/main/java/com/festago/festago/presentation/ui/customview/ClearEditText.kt

+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
+
+    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(


자바 문법 같은데 코틀린은 생성자 하나로 합칠 수 있지 않나요?

constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr)```

수정해봤는데 제대로 동작을 안해서 되돌렸는데.. 다시 해보겠습니다!!

re4rk · 2024-03-22T13:52:28Z

.../src/main/java/com/festago/festago/presentation/ui/home/festivallist/FestivalListFragment.kt

@@ -188,7 +188,8 @@ class FestivalListFragment : Fragment() {
    }

    private fun showSchoolDetail() {
-        findNavController().navigate(actionFestivalListFragmentToSchoolDetailFragment(0))
+//        findNavController().navigate(actionFestivalListFragmentToSchoolDetailFragment(0))


주석 제거 해도 될 것같습니다!

re4rk · 2024-03-22T14:03:01Z

...tago/presentation/src/main/java/com/festago/festago/presentation/ui/search/SearchFragment.kt

+    }
+
+    private fun initSearchTab() {
+        binding.vpSearch.doOnNextLayout {


뭔가 고급져보이는 방식이네요

EmilyCh0

리뷰 너무 늦어져서 죄송합니다.. 🥲 깔끔하네요 LGTM 👍👍

EmilyCh0 · 2024-03-29T14:59:23Z

android/festago/presentation/src/main/res/layout/fragment_search.xml

+            <androidx.cardview.widget.CardView
+                android:id="@+id/cvSearch"
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:layout_marginVertical="12dp"
+                android:layout_marginStart="16dp"
+                android:layout_marginEnd="16dp"
+                android:backgroundTint="@color/background_gray_03"
+                android:elevation="0dp"
+                app:cardCornerRadius="1000dp"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/ivBack"
+                app:layout_constraintTop_toTopOf="parent">


android:outlineProvider="none" 속성 추가해서 그림자 없애는 게 어떨까요?

EmilyCh0 · 2024-03-29T15:02:13Z

android/festago/data/src/main/java/com/festago/festago/data/repository/FakeSearchRepository.kt

+        if (times % 5 == 0) {
+            return Result.failure(Exception())
+        }


왜 가끔 Error로 넘어가는건가 했네요 🤣

EmilyCh0 · 2024-03-29T15:49:11Z

android/festago/presentation/src/main/res/layout/fragment_search.xml

+        <TextView
+            android:id="@+id/tvRecentSearchEmpty"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="32dp"
+            android:text="@string/search_tv_recent_search_empty"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tvRecentSearch"
+            app:visibility="@{uiState.shouldShowEmptyRecentSearchSuccess}" />


font 설정해주세요!

SeongHoonC added 30 commits March 13, 2024 14:39

feat(RecentSearchQuery): 최근검색어 도메인 모델 정의

297ca64

feat(data): Room 의존성 추가

9a90406

feat(RecentSearchRepository): 최근검색어 저장소 정의

49eea4e

feat(RecentSearchQueryEntity): 최근검색어 entity 정의

f9a9bc5

feat(RecentSearchQueryEntity): 최근검색어 dao 정의

6d1c8dc

feat(DefaultRecentSearchRepository): 최근검색어 Default 저장소 정의

919abd1

feat(DefaultRecentSearchRepository): 최근검색어 저장소 의존성 주입

af01257

feat(FestagoDatabase): 페스타고 데이터베이스 정의

f434031

feat(DaosModule): 최근검색어 Dao 모듈 정의

2d7b021

feat(DatabaseModule): FestagoDatabase 모듈 정의

7383906

feat(RecentSearchQueryDao): 최근 검색어 목록을 flow 가 아닌 단일 요청으로 변경

7299a59

feat(SearchViewModel): 검색 ViewModel 생성

6a12d25

feat(SearchUiState): 검색 화면의 상태에 따라 다른 화면을 보여준다

71a3b74

feat(recentsearch): 최근검색어 뷰홀더 및 어댑터 정의

c9caa61

feat(custom): custom clearEditText 추가

b886d73

fix(room): 룸 instant 타입 인자 오류 수정

aacafe4

feat: 검색 클릭시 검색 화면으로 이동

92b65f0

feat: 검색 화면 최근 검색 기록 보기 구현

62b0c12

refactor: 주석 제거

15c2265

feat: 사용하지않는 의존성 제거

e8c841d

feat: 아티스트, 학교 검색 모델 정의

d9b3ed2

feat: 검색 저장소 역할 정의

f9a7bf3

feat: 가짜 검색 저장소 구현

467ae4d

feat: 최근 검색어 도메인 모델 kotlin Instant 제거

7161edc

feat: 최근 검색어는 단일 결과를 반환한다

b06ba2b

feat(SearchUiState): 검색 화면 상태 정의

3282b5a

feat(FakeSearchRepository): 가짜 검색 저장소 저장소 주입

7bdb25b

feat(SearchEvent): 검색 화면 이벤트 정의

207f8ef

feat(SearchViewModel): 뷰모델 검색 기능 작성

c2780a3

feat(FakeSearchRepository): 가짜 검색 저장소가 요청마다 다른 결과를 뱉는다

fcca6af

SeongHoonC added 8 commits March 20, 2024 00:10

feat(SearchFragment): 검색 화면 상태에 따라 뷰 그리기 적용

71d041e

refactor(SearchFragment): remove unused import

fedcadf

refactor(ArtistAdapter): reformat ktlint

8e71f71

feat(SchoolSearchResponse): 학교 검색 응답 정의

fbdf673

feat(ArtistSearchResponse): 아티스트 검색 응답 정의

30e158e

feat(SearchRetrofitService): 검색 Retrofit service 정의

86ee872

feat(FakeSearchRepository): 가짜 검색 객체가 오류를 뱉도록 변경

42bac4b

feat(DefaultSearchRepository): 검색 저장소 정의

9231234

SeongHoonC added AN 안드로이드에 관련된 작업 USER labels Mar 20, 2024

SeongHoonC self-assigned this Mar 20, 2024

SeongHoonC linked an issue Mar 20, 2024 that may be closed by this pull request

[AN] 검색 화면을 구현한다. #784

Closed

github-actions bot requested review from EmilyCh0 and re4rk March 20, 2024 06:08

SeongHoonC added 3 commits March 20, 2024 15:33

refactor(SchoolSearchItemUiState): ktlint check

c0a20fa

fix(SearchFragment): 검색 화면 탭 포지션 강제 초기화 문제 해결

85e53d5

feat: 디자인과 다른 아이콘 크기 반영

4bf4fde

re4rk approved these changes Mar 22, 2024

View reviewed changes

SeongHoonC added 7 commits March 24, 2024 15:52

refator(SearchUiState): 검색 상태 확인 커스텀 게터 이름 수정

49db2d9

refator(SearchUiState): 상태 확인 커스텀 게터 이름 변경

2af29a1

refator(FestivalListFragment): 사용하지 않는 대학교 상세 이동 제거

4b3e9ac

feat(FestagoButton): 페스타고 커스텀 버튼 생성

edff851

feat: 검색 결과가 없으면 검색 추가를 권장한다.

973a1ce

feat(ClearEditText): 검색 시 키보드 및 이벤트 컨트롤

c6d596b

feat: 버튼 클릭 시 검색어 요청으로 이동

d014ad4

EmilyCh0 approved these changes Mar 29, 2024

View reviewed changes

SeongHoonC added 2 commits March 31, 2024 22:32

feat: 검색창 그림자를 제거한다.

a2151f5

feat: 최근 검색어 텍스트 font 적용

c0a7f47

SeongHoonC merged commit ca21e27 into dev Apr 1, 2024
1 check passed

SeongHoonC deleted the feat/#784 branch April 1, 2024 06:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[AN/USER] feat: 검색 화면을 구현한다.(#784) #799

[AN/USER] feat: 검색 화면을 구현한다.(#784) #799

SeongHoonC commented Mar 20, 2024 •

edited

Loading

re4rk left a comment

re4rk Mar 22, 2024

re4rk Mar 22, 2024

re4rk Mar 22, 2024

re4rk Mar 22, 2024

re4rk Mar 22, 2024

SeongHoonC Mar 24, 2024

re4rk Mar 22, 2024

re4rk Mar 22, 2024

EmilyCh0 left a comment

EmilyCh0 Mar 29, 2024

EmilyCh0 Mar 29, 2024

EmilyCh0 Mar 29, 2024

	val shouldShowEmptyRecentSearchSuccess get() = this is RecentSearchSuccess
	val shouldShowRecentSearchSuccess get() = this is RecentSearchSuccess

		val shouldShowRecentSearchSuccessNotEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isNotEmpty()
		val shouldShowEmptyRecentSearchSuccessEmpty get() = this is RecentSearchSuccess && recentSearchQueries.isEmpty()


		constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

		constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(

[AN/USER] feat: 검색 화면을 구현한다.(#784) #799

[AN/USER] feat: 검색 화면을 구현한다.(#784) #799

Conversation

SeongHoonC commented Mar 20, 2024 • edited Loading

📌 관련 이슈

✨ PR 세부 내용

1. ClearEditText

2. 복잡한 화면

3. 상태 저장 문제

4. 최근 검색어는 Room 으로 저장합니다.

시연 영상

re4rk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EmilyCh0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeongHoonC commented Mar 20, 2024 •

edited

Loading