[Feat] ExploreShortcutView 관련 UI 구현

[JMM00]

📌 해결하려는 이슈

• closes [Feat] ExploreShortcutView 관련 UI 구현 #518

✨핵심적인 변경사항

• ExploreShortcutView

  • PromotionSection / PromotionCard
    • 기존 AdminCurationCell에서 PromotionCard로 변경하여 새롭게 구현했습니다.
    • 기존 Curation 데이터를 기준으로 작업했으며, 현재 데이터 구조 상 shortDescription의 부재로 추후 적용이 필요합니다.
    • 추후 배경 이미지 적용이 별도로 필요합니다.
  • 단축어 셀
    • 셀 타입을 ordered/unordered 로 구분하여 구현했습니다.
  • 단축어 리스트
    • 기존에 SectionType이 존재하여 ExploreShortcutSectionType으로 명명하여 [.new, .mostDownloaded, .mostloved] 의 세가지 타입으로 나눠서 정의했습니다.
    • 추후 SectionType으로 이름 변경이 필요합니다.
  • 검색바
    • section header로 적용되어있으며 현재 배경색에 opacity 적용으로 별도의 배경색 지정이 필요합니다.
    • 검색바 접근 시 화면 동작 방식에 대해서 논의가 필요합니다.

• ExpandedRankingView

  • 해당 화면에서 사용되는 셀을 구현했습니다.
  • 우측 상단 버튼의 기능과 아이콘 셀의 디자인 확인이 필요합니다.
  • 각 리스트 타입 별 나열되는 수는 추후 적용이 필요합니다.

🔖 그 외 변경사항

• SCZ+Color
  • 스타일 가이드와 피그마 변수들을 참고하여 색상을 적용하기 위해 임의로 추가했습니다.
  • 추가된 색상은 모두 이 파일에서 코드 상으로 정의되었습니다.
  • 추후 구조 변경 또는 삭제 될 파일입니다.
• Promotion Card 배경이미지 추가
• OrderedCell 순서 배경 이미지 (Seal) 추가

📱 스크린샷

스크린샷1	스크린샷2	new!!!

New!!

• 캐러셀이 조작하기 어렵다는 반응이 있어서 TabView를 이용한 방식으로 변경했습니다. 다만 이 방식은 좌우에 이전/다음 셀을 노출하는게 불가능해서 조작감을 확인 해보고 더 나은 쪽으로 반영해야할 것 같습니다.

[HanGyeongjun]

수고하셨습니다!
SCZColor가 생겨서 새로운 색상 사용하는 데 수월해지겠네요..! 다크모드 대응과 다양한 그라디언트도 다 적용되어 있어서 편하게 쓸 수 있을 것 같습니다.

수정 요청

• CardSection에서 카드 양쪽이 잘리는 현상이 발생합니다! padding 값 적용 위치 수정해서 왼쪽 오른쪽 스크롤 했을 때 개별 카드가 화면 끝까지 보여야 할 것 같습니다

• 색상 적용 중 SCZColor로 적용되지 않은 부분들 수정 부탁드림니당
• 텍스트 TextLiteral로 분리 부탁드립니다

제안/질문

• PromotionSection의 가로 캐로셀의 동작이 일반적인 사용 패턴에서 불편하게 느껴질 수 있을 것 같습니다..! 지금 스크롤이 절반 이상 되었을 떄 다음 카드로 스냅되는 것으로 보이는데 생각보다 신경 써서 카드를 넘겨야 다음으로 넘어가네요😭 약간 빠르게 넘기다 보면 종종 원래 위치로 되돌아오는 현상이 생깁니다. 다른 분들 의견도 들어봐야 할 것 같아요.
• 공통적으로 디자인에 사용되는 요소들을 extension등으로 분리해 재사용성을 높이는 방향이 좋을 것 같습니다!
  • RoundedRectangle 및 윤곽선 : [Feat] 커뮤니티 탭 및 글쓰기 view 구현 #516 에서 extension으로 구현해놨습니다
  • 숫자 seal?
  • 그라디언트 적용 : SCZColor서 이미 같은 기능을 하는 것으로 보이는데 맞나요?
• 화면의 Background 색상은 다음 태스크에서 적용 예정이신가요?

[JMM00]

@HanGyeongjun
디자인 수정사항 말고 레이아웃만 봐주시겠어요? 아직 디자인 확정사항 아니고 색상 확정아니고, 익스텐션 제작된게 없어서 제가 작업하기 편하려고 임의로 작성해서 사용했다고 적어뒀습니다~
카드섹션은 어떤 상황에서 말하는건지 모르겠어요 다시 한번 설명 부탁드립니다

확정된 익스텐션 존재한다면 먼저 pr올려주시면 더 좋을 것 같네요

[HanGyeongjun]

@HanGyeongjun 디자인 수정사항 말고 레이아웃만 봐주시겠어요? 아직 디자인 확정사항 아니고 색상 확정아니고, 익스텐션 제작된게 없어서 제가 작업하기 편하려고 임의로 작성해서 사용했다고 적어뒀습니다~ 카드섹션은 어떤 상황에서 말하는건지 모르겠어요 다시 한번 설명 부탁드립니다

확정된 익스텐션 존재한다면 먼저 pr올려주시면 더 좋을 것 같네요

SCZColor가 임의로 만드신거긴 한데 사용 방법도 편리하고 다양한 색상 사용에 대응이 가능할 것 같아서 저는 계속 유지해도 좋을 것 같다는 의견이었습니다! 사용 색상 확정되면 그 부분만 수정해서 그대로 쓰면 될 것 같아요.
지난번에 티모가 색상 hex값으로 사용하자고 하신 기억도 있어서 괜찮아 보임니당

여기 양쪽 부분에서 카드가 끝까지 보여야 할 것 같습니다! 지금은 양쪽 padding 때문에 끝까지 나타나지 않네요

익스텐션은 지금 작업중인 브랜치라 오늘 밤 중에 pr 올릴 수 있을 것 같아요😭

[JMM00]

@HanGyeongjun 디자인 수정사항 말고 레이아웃만 봐주시겠어요? 아직 디자인 확정사항 아니고 색상 확정아니고, 익스텐션 제작된게 없어서 제가 작업하기 편하려고 임의로 작성해서 사용했다고 적어뒀습니다~ 카드섹션은 어떤 상황에서 말하는건지 모르겠어요 다시 한번 설명 부탁드립니다
확정된 익스텐션 존재한다면 먼저 pr올려주시면 더 좋을 것 같네요

SCZColor가 임의로 만드신거긴 한데 사용 방법도 편리하고 다양한 색상 사용에 대응이 가능할 것 같아서 저는 계속 유지해도 좋을 것 같다는 의견이었습니다! 사용 색상 확정되면 그 부분만 수정해서 그대로 쓰면 될 것 같아요. 지난번에 티모가 색상 hex값으로 사용하자고 하신 기억도 있어서 괜찮아 보임니당

여기 양쪽 부분에서 카드가 끝까지 보여야 할 것 같습니다! 지금은 양쪽 padding 때문에 끝까지 나타나지 않네요

익스텐션은 지금 작업중인 브랜치라 오늘 밤 중에 pr 올릴 수 있을 것 같아요😭

공통으로 적용해야하는 익스텐션을 먼저 작업중이셨다면 브랜치를 분리해서 먼저 올려줬으면 더 좋았을 것 같네요
저 부분이 왜 보여야하는걸까요..? 스크롤이 안되는 영역이 아닌데요..?

[teethemoji]

수고하셨습니다! SCZColor가 생겨서 새로운 색상 사용하는 데 수월해지겠네요..! 다크모드 대응과 다양한 그라디언트도 다 적용되어 있어서 편하게 쓸 수 있을 것 같습니다.

수정 요청

• CardSection에서 카드 양쪽이 잘리는 현상이 발생합니다! padding 값 적용 위치 수정해서 왼쪽 오른쪽 스크롤 했을 때 개별 카드가 화면 끝까지 보여야 할 것 같습니다

* 색상 적용 중 SCZColor로 적용되지 않은 부분들 수정 부탁드림니당 * 텍스트 TextLiteral로 분리 부탁드립니다

제안/질문

• PromotionSection의 가로 캐로셀의 동작이 일반적인 사용 패턴에서 불편하게 느껴질 수 있을 것 같습니다..! 지금 스크롤이 절반 이상 되었을 떄 다음 카드로 스냅되는 것으로 보이는데 생각보다 신경 써서 카드를 넘겨야 다음으로 넘어가네요😭 약간 빠르게 넘기다 보면 종종 원래 위치로 되돌아오는 현상이 생깁니다. 다른 분들 의견도 들어봐야 할 것 같아요.

• 공통적으로 디자인에 사용되는 요소들을 extension등으로 분리해 재사용성을 높이는 방향이 좋을 것 같습니다!

  • RoundedRectangle 및 윤곽선 : [Feat] 커뮤니티 탭 및 글쓰기 view 구현 #516 에서 extension으로 구현해놨습니다
  • 숫자 seal?
  • 그라디언트 적용 : SCZColor서 이미 같은 기능을 하는 것으로 보이는데 맞나요?

• 화면의 Background 색상은 다음 태스크에서 적용 예정이신가요?

@HanGyeongjun 디자인 수정사항 말고 레이아웃만 봐주시겠어요? 아직 디자인 확정사항 아니고 색상 확정아니고, 익스텐션 제작된게 없어서 제가 작업하기 편하려고 임의로 작성해서 사용했다고 적어뒀습니다~ 카드섹션은 어떤 상황에서 말하는건지 모르겠어요 다시 한번 설명 부탁드립니다
확정된 익스텐션 존재한다면 먼저 pr올려주시면 더 좋을 것 같네요

SCZColor가 임의로 만드신거긴 한데 사용 방법도 편리하고 다양한 색상 사용에 대응이 가능할 것 같아서 저는 계속 유지해도 좋을 것 같다는 의견이었습니다! 사용 색상 확정되면 그 부분만 수정해서 그대로 쓰면 될 것 같아요. 지난번에 티모가 색상 hex값으로 사용하자고 하신 기억도 있어서 괜찮아 보임니당
여기 양쪽 부분에서 카드가 끝까지 보여야 할 것 같습니다! 지금은 양쪽 padding 때문에 끝까지 나타나지 않네요
익스텐션은 지금 작업중인 브랜치라 오늘 밤 중에 pr 올릴 수 있을 것 같아요😭

공통으로 적용해야하는 익스텐션을 먼저 작업중이셨다면 브랜치를 분리해서 먼저 올려줬으면 더 좋았을 것 같네요 저 부분이 왜 보여야하는걸까요? 스크롤이 안되는 영역이 아닌데요..?

저부분이 잘리면 곤란합니다..! 갑작스럽게 뚝 끊기게 되면 배경색상과의 이질감이 생겨서 시선이 쏠리게 되고 앱 자체의 완성도도 낮아보여요.
최상단 ScrollView에 .scrollClipDisabled(disabled) modifier를 적용하시면 해결될 것 같습니다.

[JMM00]

.scrollClipDisabled(disabled)

해당 모디파이어는 버전이 안맞아서 적용이 안되고 맞춰서 반영하겠습니다

[teethemoji]

수고하셨습니다 엘리👍

[HanGyeongjun]

수고하셨습니다!