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

feat: improve the side navigation ui #650

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Conversation

kbsat
Copy link
Contributor

@kbsat kbsat commented Oct 2, 2022

Resolves #617

해결하려는 문제가 무엇인가요?

  • 워크숍 요구사항에서 나온 요구사항 중 관리자 페이지의 Flow를 잘 이해하지 못하겠다는 의견과 좌측 탭 메뉴 각각이 하는 역할이 무엇인지 헷갈린다는 의견이 나왔고 이를 해결하고자 했습니다.

어떻게 해결했나요?

  • 사용자를 고려해볼 때 기수관리, 모집관리, 평가관리 와 같은 기능들은 특정 관리자만 사용할 메뉴이므로 하단으로 내리고 선발 진행과 관련된 사항을 상위에 위치시켜보았습니다.
  • 아코디언을 사용하고있던 지난 메뉴를 콤보박스를 활용하는 형태로 개선해보았습니다.
  • 아코디언 방식에서 사용하던 Anchor 대신 RouterLink를 사용하여 화면이 새로고침되는 것을 막아보았습니다.
    • path가 들어가는 동적인 RouterLink 설정을 위해 VerticalLayout과 HasUrlParameter 를 하나로 묶는 추상클래스인 HasUrlParamLayout 을 생성했습니다.

🚨🚨주의 : 아직 관리자 탭은 머지가 되지 않았기 때문에 클릭 시 메일 관리 페이지가 보입니다. 이후 관리자 기능 머지 후에 수정이 필요합니다
(10.26) 새로 리베이스 하면서 AdministratorsView로 이동되는 것도 반영했습니다.

어떤 부분에 집중하여 리뷰해야 할까요?

  • 네이밍과 패키지 위치가 적절한지에 대해서 리뷰해주세요.
  • 코틀린스럽게 개선할 부분이 있다면 리뷰해주세요.
  • 바딘의 부적절한 사용이 있다면 리뷰해주세요.
  • 실행시켜서 사용해보시고 불편한 부분을 리뷰해주세요. ( 영상자료도 사이드 내비게이션 UI를 개선한다. #617 에 있음 )

RCA 룰

r: 꼭 반영해 주세요. 적극적으로 고려해 주세요. (Request changes)
c: 웬만하면 반영해 주세요. (Comment)
a: 반영해도 좋고 넘어가도 좋습니다. 그냥 사소한 의견입니다. (Approve)

@kbsat kbsat self-assigned this Oct 2, 2022
Copy link
Contributor

@dongho108 dongho108 left a comment

Choose a reason for hiding this comment

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

안녕하세요 로마 페퍼~
관리자 메뉴탭 UI 구성부터 구현까지 하시느라 정말정말 고생 많으셨습니다..
저는 이게 바딘으로 가능할거라고 의심했는데 역시 로마페퍼 조합은 레전드네요.

코드는 깔끔하게 짜셔서 가독성 위주로 코멘트 남겨봤습니다.
제가 의도와 다르게 해석했다면 답글만 달아주시고 반영하지 않으셔도 괜찮습니다. 😁

}
}

private fun createMenu(list: List<MenuItem>): Tabs {
Copy link
Contributor

Choose a reason for hiding this comment

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

a: 호출하는 메서드와 가깝게 두면 읽기가 더 편할 것 같아요!
(다른 메서드들도 마찬가지로요!)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

메서드 위치를 수정해보았습니다 😊

Comment on lines +21 to +23
private val topMenu = createMenu(createTopMenuItems())
private val bottomMenu = createMenu(createBottomMenuItems())
Copy link
Contributor

Choose a reason for hiding this comment

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

a: topMenu, bottomMenu 보다 더 직관적인 변수명으로 짓는 것이 어떨까요?
ex) topMenu : 선발진행관련 변수명

Copy link
Contributor Author

Choose a reason for hiding this comment

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

지금은 선발진행관련 메뉴 아이템들이 해당 공간에 존재하지만 추후 어떤 메뉴 아이템이 들어올지 변경될 수 있고 그렇다면 네이밍 또한 변할 것 같아 이렇게 포괄적인 네이밍을 지었던 것 같습니다.

import com.vaadin.flow.component.tabs.Tabs
import support.views.createTabs

private const val UNSELECT_ALL: Int = -1
Copy link
Contributor

Choose a reason for hiding this comment

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

UNSELECT_ALL 이라는 네이밍과 -1 이라는 값이 잘 이해가 가지 않아요.
사용하는 곳에서는 현재 선택된 INDEX를 -1 로 바꾸로 바꾸는 용도로 사용하는 것 같아서요!
a: 만약 다른 메뉴에서 현재 선택된 INDEX 를 -1로 바꾸는 것이면 UNSELECTED 정도가 괜찮지 않을까요?
(제가 잘못 이해한 것일수도 있습니다. 😅)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

바딘에서 제공하는 Tabs에 나와있는 setSelectedIndex의 javaDocs에는 -1 to unselect all 이라고 적혀있어서 이를 참고해서 네이밍했습니다 😋

@lokba
Copy link
Contributor

lokba commented Oct 4, 2022

PR 제목 수정해주세요. imporve -> improve

@kbsat kbsat changed the title feat: imporve the side navigation ui feat: improve the side navigation ui Oct 5, 2022
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.

3 participants