[FEATURE] 디자인 시스템 컴포넌트 구현

[generalChang]

Summary

• 디자인시스템 컴포넌트를 구현합니다.
• 코멘트 or 논의를 통해 각자 구현할 컴포넌트를 분배한 뒤,
  아래 컴포넌트에 본인의 이름을 추가적으로 명시하여 작업할 수 있도록 하면 좋을 것 같습니다.

Components

• AppBar
• NavigationBar
• Badge
• Bottom Sheet
• Button
• Chip
• TabBar, Segment
• Radio, Checkbox
• Tag
• Text Field
• Search Bar
• Snack Bar
• Progress Indicator
• Photo
• Dialog
• Hexagon Grid
• Map(marker, location, etc)
• Profile Photo

고려사항

• Segment는 사실상 TabBar와 유사해서 TabBar 구현 담당자가 같이 구현해도 좋을 것 같습니다
• 각 컴포넌트의 이름은 Custom{component name}으로 지어도 괜찮을 것 같습니다
  • CustomRadio, CustomLinearProgressIndicator
• Bottom Navigation Bar를 구현할때 각 아이템에 해당하는 화면들은 Route를 갖는 페이지이면 좋을 것 같습니다. (구현 담당자님 확인필요)
• Button이 굉장히 많은데요, 각 Button별로 위젯 클래스를 만들어도 좋을 것 같습니다. (구현 담당자님 확인필요)

Ref

• Figma UI kit component

[generalChang]

작업 분배

@isdebrave : AppBar ~ TabBar, Segment
@generalChang : 나머지 컴포넌트

[generalChang]

@isdebrave
고려사항 업데이트 하였습니다. 시간되실때 확인해주세요 😁

[isdebrave]

@generalChang
확인했습니다!
Bottom Navigation Bar를 구현할때 각 아이템에 해당하는 화면들은 Route를 갖는 페이지이면 좋을 것 같습니다.

말씀하신 의도가 네비게이션 아이템을 눌렀을 때, 해당 페이지가 나오도록 구현하면 좋겠다는 뜻인가요?

[generalChang]

@generalChang 확인했습니다! Bottom Navigation Bar를 구현할때 각 아이템에 해당하는 화면들은 Route를 갖는 페이지이면 좋을 것 같습니다.

말씀하신 의도가 네비게이션 아이템을 눌렀을 때, 해당 페이지가 나오도록 구현하면 좋겠다는 뜻인가요?

네베게이션 아이템을 눌렀을때 해당 페이지로의 전환이 되었으면 좋겠다는 의미였습니다!

BottomNavigationBar - TabBarView 조합으로 구현하면 되지않나라고 질문해주실 수 있을 것 같은데요,
이 조합 역시 탭간 이동과 페이지 전환은 전혀 문제가 없지만 딥링크를 통해 각 탭에 해당하는 페이지로 이동하는 것을 구현한다고 하였을때
번거로울 것 같다고 생각하였습니다!

그래서 각 아이템에 해당하는 페이지가 경로를 갖도록 구현하면 추후 구현할지 안할지는 정해지지않은 딥링킹을
원활하게 구현할 수 있지 않을까라는 생각이 들어 요청드렸습니다!

[isdebrave]

@generalChang
이해했습니다! 좋은 의견이네요 :)

[generalChang]

3월 29일 변경사항

• 피그마 디자인 컴포넌트에 다이얼로그가 추가되었습니다.
• 이 UI는 @generalChang 님이 구현 완료하였습니다.

[generalChang]

4월 3일 변경사항

• 피그마 디자인 컴포넌트에 펜타곤이 추가되었습니다.
• 개발적으론 편의상 Hexagon Grid라고 호칭합니다.
• 이 UI는 @isdebrave 님이 구현하실 예정입니다.

[generalChang]

4월 7일 변경사항

• 피그마 디자인 컴포넌트에 Map이 추가되었습니다.
• 이 UI는 @generalChang 님이 구현하실 예정입니다.
• 양이 많은 관계로 한번에 구현하지 않을 수도 있습니다.