홈(모임 목록) 페이지 UI 개발!

[cys4585]

PR의 목적이 무엇인가요?

홈(모임 목록) 페이지의 UI를 개발했어요! (정적 UI만 개발했습니다. 동적 처리 로직은 별도의 이슈를 생성하도록 하겠습니다 🫡)

이슈 ID는 무엇인가요?

• 홈(모임 목록) UI 개발 #145

설명

• primary 색상 적용: 디자인 상의 기본 색상이 정의되었기 때문에 해당 색상(orange)을 적용했어요!
• 홈 페이지 UI 및 모임 카드 UI 변경된 스타일 요구사항 반영: 홈 페이지(MainPage)와 컴포넌트( MoimCardList, MoimTabBar 등)를 수정 및 생성하였습니다!
• 나의모임 필터링 컴포넌트 구현: 나의 모임의 경우 다가오는 모임, 지난 모임을 필터링할 수 있다는 요구사항이 있어요! 해서 태그 컴포넌트(MyMoimListFilters)를 만들었습니다! 컴포넌트 관계 구조는 조금 더 고민을 해봐야할 것 같아요! API 연동을 포함한 로직 처리 개발을 하면서 조금 더 고민해보겠습니다!

MoimTabBar

MoimCardList

MyMoimListFilters

질문 혹은 공유 사항 (Optional)

진행하면서

1. Home Layout 구조 변경
   • 기존의 TabBar가 Main 내부에 하드코딩 되어 있었어요. 이를 별도의 Layout(Nav)으로 분리하고, TabBar 컴포넌트를 주입하도록 했어요.
   • MoimTabBar의 theme.typography.s1이 이상하게 적용됩니다. Pretendard가 제대로 적용되지 않는게 문제 같기도..?
2. SVG를 별도로 컴포넌트 만든 이유: color를 theme의 semantic 시스템을 따르도록 하기 위해서에요 :)
   • 개인적으로는 컴포넌트로 만드는 것이 svg 파일을 두고 loader로 인식하는 방식보다 더 유연하게 사용할 수 있을 것 같다고 생각합니다!
3. MoimCard 컴포넌트
   • Heart Icon 적용 조금 이상하게 됩니다.. → Chat GPT로 해결! (figma 시안과 약~간은 다르지만 큰 문제 없다고 생각해요 ~)
   • detailnfo에 theme.typography.b3도 이상하게 적용됩니다. 역시 Pretendard가 제대로 적용되지 않는게 문제..?
4. MyMoimFilterTag 컴포넌트
   • Tag라는 컴포넌트가 이미 존재했고, 그 컴포넌트가 모임 상태를 나타내는 태그인 것을 확인했어요. 통합을 해야할까 고민을 했지만, 모임 상태 태그와 나의 모임 목록 필터링 태그는 UI 모양만 똑같지 근본적으로는 다른 성격의 컴포넌트라 판단했어요. 예를 들면 상태 태그에 대한 디자인 요구사항이 바뀐다고 해서 나의 모임 목록 필터링 태그의 디자인 요구사항이 바뀌지는 않는 것이에요! 그래서 별도의 컴포넌트를 만들기로 결정했습니다.
   • 별개로 Tag라는 추상 컴포넌트를 공용 스페이스에 두고, 이를 활용하는 MoimListFilterTag, MoimStatusTag, MoimCategoryTag와 같이, 관심사별로 컴포넌트를 만들어 각각의 스페이스에 숨겨두어야 한다고 생각해요. 이는 나중에 따로 이야기를 나눠봅시다~ 🙂

(이 이슈와는 별개로)

정적인 UI와 동적인 로직을 별개의 이슈로 관리하기로 했었는데, 효과적이지 못한 것 같다는 생각이 듭니다! Feature 단위로 이슈를 생성하고 작업하는 게 작업 플로우가 자연스럽지 않을까요??? 동의하신다면 다음 스프린트에는 다른 작업 단위를 실험해보는 것도 좋을 것 같아요~

[hoyeonyy]

조금 이상하네요