[WEAV-50] Design System - Toast 구현

[jisu15-kim]

구현사항

• Toast 구현
• Up / Down 애니메이션 구현 (2초 뒤 자동 사라짐)

사용예시

ZStack {
    DesignCore.Colors.background
    CTAButton(title: "Show Toast") {
        isPresent.toggle()
    }
    .padding(.horizontal, 36)
}
.toast(
    message: "나이를 입력해주세요",
    isPresent: $isPresent
)

고민

• 이렇게 �구현한 방법으로 다른 경우들도 대응이 될까?
• UIKit으로 UIWindow 를 깔고 구현하는 방법도 있을 것 같은데 필요하게 되면 바꾸자.

스크린샷(선택)

Toast

Summary by CodeRabbit

• 신규 기능

  • 경고 기능에 대한 새로운 이미지 세트 추가.
  • SwiftUI를 위한 토스트 알림 컴포넌트 추가.
  • 디자인 미리보기에서 토스트 알림 미리보기 기능 추가.
  • 사용자에게 "나이를 입력해주세요"라는 메시지를 표시하는 토스트 메시지 표시 기능 추가.

• 문서화

  • DesignToastView에 대한 미리보기 제공.

[coderabbitai]

Walkthrough

이번 변경 사항은 디자인 시스템에 새로운 알림 이미지 세트와 스위프트UI 기반의 토스트 알림 컴포넌트를 추가하는 것입니다. Contents.json 파일이 알림 이미지 세트에 추가되었고, ToastView.swift 파일에서 토스트 알림을 표시하는 뷰 수정자가 정의되었습니다. 또한, 디자인 미리보기 기능에 토스트 알림을 위한 새로운 케이스가 추가되었으며, 이를 위한 뷰도 새로 생성되었습니다.

Changes

파일 경로	변경 요약
Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/alert.imageset/Contents.json	새로운 Contents.json 파일 추가, 알림 이미지 정의 (alert.png, [email protected], [email protected]) 포함.
Projects/DesignSystem/DesignCore/Sources/Toast/ToastView.swift	ToastViewModifier, Toast 구조체 추가 및 View 확장에서 toast 메서드 추가.
Projects/Features/DesignPreview/Sources/DesignPreview.swift	PreviewTypes 열거형에 toast 케이스 추가, 해당 뷰와 연결.
Projects/Features/DesignPreview/Sources/DesignToastView.swift	새로운 DesignToastView 구조체 추가, 토스트 메시지 표시를 위한 상태 변수 및 버튼 포함.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DesignToastView
    participant ToastViewModifier

    User->>DesignToastView: Show Toast Button Clicked
    DesignToastView->>ToastViewModifier: Toggle isPresent
    ToastViewModifier->>User: Display Toast Message
    Note right of User: Toast appears and fades out after 2 seconds

Loading

Poem

🐰
토스트가 나타나고,
알림이 반짝여,
디자인의 향연 속,
즐거움이 넘쳐!
새로운 이미지와 함께,
모두가 행복해,
귀여운 토끼가 춤춰요! 🌟

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d797f88 and 6e7ac2a.

Files ignored due to path filters (3)

• Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/alert.imageset/alert.png is excluded by !**/*.png
• Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/alert.imageset/[email protected] is excluded by !**/*.png
• Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/alert.imageset/[email protected] is excluded by !**/*.png

Files selected for processing (4)

• Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/alert.imageset/Contents.json (1 hunks)
• Projects/DesignSystem/DesignCore/Sources/Toast/ToastView.swift (1 hunks)
• Projects/Features/DesignPreview/Sources/DesignPreview.swift (3 hunks)
• Projects/Features/DesignPreview/Sources/DesignToastView.swift (1 hunks)

Additional comments not posted (8)

Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/alert.imageset/Contents.json (1)

1-23: 잘 구현되었습니다!

이 파일은 Xcode의 에셋 카탈로그에 대한 표준 구조를 따르고 있으며, 다양한 스케일에 대한 이미지 변형을 올바르게 정의하고 있습니다. "universal" idiom을 사용하여 모든 디바이스에서 이미지를 사용할 수 있도록 적절하게 설정되었습니다. 또한 "info" 객체에는 작성자와 버전이 올바르게 포맷되어 있습니다.

이 파일의 추가는 제공된 이미지를 사용하여 알림 기능에 시각적 표현이 있음을 시사합니다. 여러 스케일을 포함하면 다양한 화면 해상도를 가진 디바이스에서 이미지가 선명하게 보이도록 할 수 있습니다.

Projects/Features/DesignPreview/Sources/DesignToastView.swift (1)

12-31: 잘 구현되었습니다!

DesignToastView 구조체는 SwiftUI 뷰 규칙과 모범 사례를 잘 따르고 있습니다. @State 프로퍼티 래퍼를 사용하여 Toast 가시성 상태를 적절하게 관리하고 있으며, ZStack을 사용하여 배경색과 버튼을 올바르게 레이어링하고 있습니다. 또한 .toast 수정자를 사용하여 isPresent 상태에 따라 Toast 메시지를 올바르게 표시하고 있습니다. 네비게이션 타이틀과 바 표시 모드도 적절하게 설정되어 있습니다.

Projects/Features/DesignPreview/Sources/DesignPreview.swift (3)

18-18: 좋아 보입니다!

PreviewTypes enum에 toast case를 추가하는 것은 디자인 시스템에 새로운 프리뷰 타입을 도입하는 좋은 방법입니다. 이를 통해 toast 알림을 렌더링할 수 있게 되었네요.

---

28-28: 좋습니다!

toast case에 "Toast"라는 이름을 할당하는 것은 다른 case들과 일관된 네이밍 컨벤션을 따르고 있어 적절해 보입니다.

---

47-48: 잘 되었습니다!

nextView 함수에서 toast case를 DesignToastView()와 연결하는 것은 다른 case들과 일관된 패턴을 따르고 있습니다. 이를 통해 toast 프리뷰 타입이 선택되었을 때 toast 알림 뷰를 렌더링할 수 있게 되었네요.

Projects/DesignSystem/DesignCore/Sources/Toast/ToastView.swift (3)

11-31: LGTM!

ToastViewModifier 구조체는 ViewModifier 프로토콜을 잘 따르고 있습니다. body 메서드는 Toast 뷰를 화면 하단에 오버레이하고, 지정된 하단 패딩과 기기의 하단 인셋을 고려하여 위치를 조정합니다. 구현이 정확해 보입니다.

---

33-47: LGTM!

View 확장은 toast 메서드를 통해 ToastViewModifier를 어떤 뷰에도 쉽게 적용할 수 있도록 깔끔한 API를 제공합니다. 구현이 정확해 보입니다.

---

49-87: LGTM!

Toast 구조체는 실제 토스트 알림 뷰를 나타냅니다. RoundedRectangle, Text, Image 뷰를 조합하여 토스트 뷰를 구성하고, isPresent 상태에 따라 offset 수정자를 사용하여 위치를 조정합니다. 또한 onChange 수정자를 사용하여 isPresent가 true가 되면 2초 후에 자동으로 토스트를 숨깁니다. 구현이 정확하고 토스트 알림을 멋지게 표시합니다.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.