[Style] GSCanvas 디자인 시스템을 구현했습니다.

[dahae0320]

개요

• 5

• GitSpace Design System 중 GSCanvas를 구현했습니다.

✏️ 작업 사항

• GSCanvas
  • Style
  • GSCanvasModifier
    • 라이트/다크모드 별 색상 대응
• Preview
• Color Extension (Merge 후 통합 필요)

📸 스크린샷 (optional)

GSCanvas

주요 로직 (optional)

GSCanvasModifier

colorScheme의 light, dark로 색상 대응을 하면 색상 코드를 제외한 다른 코드가 중복됩니다. 따로 배경 색을 모드에 따라 달리 지정하도록 연산 프로퍼티를 생성하여 코드 중복을 막고 모드에도 대응할 수 있도록 하였습니다.

extension GSCanvas {
    public struct GSCanvasModifier: ViewModifier {
       ...
        var backgroundColorByColorScheme: Color {
            switch colorScheme {
            case .light:
                Color.white
            case.dark:
                Color.init(hex: "#27292E")
            default:
                Color.white
            }
        }

        public func body(content: Content) -> some View {
            switch style {
            case .primary:
                content
                    ...
            }
        }
    }
}