Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

kuring-95 알림 구독 화면 2.0 디자인 적용 #84

Merged
merged 27 commits into from
Jan 20, 2024

Conversation

mwy3055
Copy link
Member

@mwy3055 mwy3055 commented Jan 5, 2024

https://kuring.atlassian.net/browse/KURING-95?atlOrigin=eyJpIjoiYTgwNGUyYzk3NmZiNDVjYmFkYmI5NDcwNmM0YjRhZGUiLCJwIjoiaiJ9

알림 구독 화면에 2.0 디자인을 적용했습니다.

디자인

_2024_01_05_21_44_08_79.mp4

구현 상세

  • 색깔은 Figma에 이름이 있는 경우 theme/Color.kt 파일에 이름으로 추가했고, 그렇지 않은 경우에는 Color(0xFFFFFFFF) 식으로 하드코딩했습니다. 향후 테마가 완성되면 수정할 예정입니다.
  • 텍스트 스타일은 Figma의 dev mode에서 제공하는 코드를 그대로 사용했습니다.
    image
  • Padding, 간격 등은 Figma에 적용된 값을 그대로 하드코딩했습니다. 나중에 폴더블이나 태블릿 화면도 디자인되면 좋을 것 같습니다.
  • 공통으로 사용될 여지가 많은 컴포넌트는 :common:designsystem 모듈에 구현했습니다. (Top app bar 등)

그 밖에 궁금하신 점이 있다면 코멘트로 남겨 주세요.

변경사항

커밋 수는 많은데, 리소스 커밋 때문에 많아 보이는 것으로 실제 로직 코드는 얼마 되지 않습니다.

  • 3670f13: 일반 카테고리 화면에서 사용할 아이콘 png 파일을 추가했습니다.

  • ead00bf: 알림 구독 레이아웃 파일에서 ComposeView 외의 모든 뷰를 제거했습니다.

  • afe2a77: 일반 카테고리 구독 화면에서, 카테고리 하나를 나타내는 ui model 클래스를 추가했습니다.

  • 4592ef3: ViewModel에서 ui model 클래스를 활용하여 일반 카테고리 데이터를 노출하도록 수정했습니다.

  • 966d4bf: (:common:designsystem) Compose Preview 어노테이션을 추가했습니다.

  • 22ec52a: 일반 카테고리 하나를 구독하는 composable을 작성했습니다.
    image

  • 0641625: 학과 카테고리 구독 화면에서, 학과 하나를 나타내는 ui model 클래스를 추가했습니다.

  • 7710694: 학과 카테고리 하나를 구독하는 composable을 작성했습니다.
    image

  • c4b3cd9: ViewModel에 학과 카테고리를 구독하는 비즈니스 로직 함수를 작성했습니다.

  • 5aa1cb0: 구독 화면을 구현하던 레거시 composable 코드를 제거했습니다.

  • aabe3c6: 일반/학과 카테고리 탭을 나타내는 데이터 클래스를 작성했습니다.

  • 8ae4ea6: 알림 구독 화면에서 사용할 UiState 클래스를 작성했습니다. 이 클래스는 ViewModelStateFlow에 의해 UI에 노출됩니다.

  • 29d430c: 구독 화면 composable이 UiState 클래스를 매개변수로 받도록 수정했습니다.

  • 82e5bc7: (:common:designsystem) 2.0 디자인에서 자주 사용되는 Top app bar를 추가했습니다.
    image

  • 1c23aed: (gradle) :common:designsystem 모듈의 minSdk를 23에서 24(다른 모든 모듈의 minSdk)로 수정했습니다. 모듈을 만들 때 빠트린 듯합니다.

  • b3337bf: (:common:designsystem) 2.0 디자인에서 흔히 사용될 CTA 버튼을 구현했습니다.
    image

  • 28d0763: 알림 구독 화면 composable 전체를 구현했습니다.

  • 825f843: 알림 구독 화면 composable을 Activity와 연결했습니다.

  • ed328ce: 공지 구독 화면을 띄우는 함수를 KuringNavigation에 추가했습니다. 앱을 처음 실행했을 때, 알림 구독 화면에서 공지 구독 창으로 갈 수 있게 하기 위해서입니다.

  • 8dfc30a: 알림 구독 화면에서 공지 구독 화면으로 가는 코드를 작성했습니다.

  • 83c1a3a: 공지 구독 화면에서 구독한 학과가 알림 구독 화면에서 보이지 않던 문제를 해결했습니다.

  • 6f2b28d: 알림 구독 화면에서 선택한 학과가 알림 구독되지 않던 문제를 해결했습니다.

  • ebabe5f: 레거시 코드 중 더 이상 사용하지 않는 코드를 제거했습니다.

mwy3055 added 24 commits January 3, 2024 15:40
UI 코드는 나중에 알림 수정 화면 migration이 끝나면 삭제할 예정이다.
함수 파라미터 상 도메인 Department를 가지고 있어야 하는 경우가 있어서, 일부 변수에는 ui model 대신 Department 클래스를 사용하였다.
구독 편집 화면에서 보여줄 데이터를 담고 있는 UiState 클래스를 추가하였다.
텍스트, 일반적인 composable 둘 다 action으로 사용할 수 있도록 오버로딩하였다.
모든 모듈이 24로 설정되어 있는데, 혼자서만 23으로 설정되어 있던 오류를 수정했다.
@@ -36,12 +38,11 @@ class EditSubscriptionViewModel @Inject constructor(

private val disposable = CompositeDisposable()

private val initialCategories = MutableStateFlow(mutableSetOf<SubscriptionUiModel>())
private val initialCategories = MutableStateFlow(emptyList<NormalSubscriptionUiModel>())
private val initialDepartments = MutableStateFlow(mutableSetOf<Department>())
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어차피 순서대로 보여줄 거라 굳이 Set을 사용할 필요가 없다고 생각했습니다. (학사 -> 취창업 -> ...)

val CaptionGray1: Color
@Composable get() = Color(0xFF868A92)
val CaptionGray2: Color
@Composable get()=Color(0xFFAEB1B6)
Copy link
Member Author

@mwy3055 mwy3055 Jan 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figma에 이름이 등록되어 있는 색깔이라 변수로 추가했습니다.
image

)
}
}
}

private fun onSubscriptionComplete() {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존에 구현되어 있던 전환 로직을 함수로 분리해서 그대로 사용했습니다.

Copy link
Member

@yeon-kyu yeon-kyu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일단 지금까지 본 부분까지 리뷰드립니다. 빌드해서 봤을때 너무 잘동작하고 좋은 UI 인것 같아요~

Copy link
Member

@yeon-kyu yeon-kyu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰가 늦어져서 죄송합니다. 2.0 초기 PR이라 조금 더 꼼꼼하게 보려고했어요 (핑계아님)

Copy link
Member

@yeon-kyu yeon-kyu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구두로 설명 감사합니다 LGTM!

@mwy3055 mwy3055 merged commit 127fc0d into 2.0/base Jan 20, 2024
@mwy3055 mwy3055 deleted the 2.0/edit-subscription branch January 20, 2024 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants