[CAT-93] DesignSystem 구축 (#17)

Nexters · Aug 7, 2024 · c994d77 · c994d77
1 parent e944819
commit c994d77
Show file tree

Hide file tree

Showing 76 changed files with 2,412 additions and 21 deletions.
diff --git a/...ts/Shared/DesignSystem/Example/Resources/Assets.xcassets/AppIcon.appiconset/Contents.json b/...ts/Shared/DesignSystem/Example/Resources/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "ICON_DEMO.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Projects/Shared/DesignSystem/Example/Resources/Assets.xcassets/contents.json b/Projects/Shared/DesignSystem/Example/Resources/Assets.xcassets/contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...urces/Font/Pretendard/Pretendard-Bold.otf → ...xample/Resources/Font/Pretendard-Bold.otf b/...urces/Font/Pretendard/Pretendard-Bold.otf → ...xample/Resources/Font/Pretendard-Bold.otf
diff --git a/...ces/Font/Pretendard/Pretendard-Medium.otf → ...mple/Resources/Font/Pretendard-Medium.otf b/...ces/Font/Pretendard/Pretendard-Medium.otf → ...mple/Resources/Font/Pretendard-Medium.otf
diff --git a/...es/Font/Pretendard/Pretendard-Regular.otf → ...ple/Resources/Font/Pretendard-Regular.otf b/...es/Font/Pretendard/Pretendard-Regular.otf → ...ple/Resources/Font/Pretendard-Regular.otf
diff --git a/...s/Font/Pretendard/Pretendard-SemiBold.otf → ...le/Resources/Font/Pretendard-SemiBold.otf b/...s/Font/Pretendard/Pretendard-SemiBold.otf → ...le/Resources/Font/Pretendard-SemiBold.otf
diff --git a/Projects/Shared/DesignSystem/Example/Resources/LaunchScreen.storyboard b/Projects/Shared/DesignSystem/Example/Resources/LaunchScreen.storyboard
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13142" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+  <dependencies>
+    <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12042"/>
+    <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+    <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+    <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+  </dependencies>
+  <scenes>
+    <!--View Controller-->
+    <scene sceneID="EHf-IW-A2E">
+      <objects>
+        <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+          <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+              <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
+                <rect key="frame" x="0.0" y="626.5" width="375" height="20.5"/>
+                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                <nil key="highlightedColor"/>
+              </label>
+              <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="DesignSystem 모듈 데모앱" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
+                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
+                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                <nil key="highlightedColor"/>
+              </label>
+            </subviews>
+            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+            <constraints>
+              <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
+              <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
+              <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" constant="20" symbolic="YES" id="SfN-ll-jLj"/>
+              <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
+              <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
+              <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" constant="20" symbolic="YES" id="x7j-FC-K8j"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+          </view>
+        </viewController>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+      </objects>
+      <point key="canvasLocation" x="53" y="375"/>
+    </scene>
+  </scenes>
+</document>
diff --git a/Projects/Shared/DesignSystem/Example/Sources/AliasTokenDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/AliasTokenDetailView.swift
@@ -0,0 +1,152 @@
+//
+//  AliasTokenDetailView.swift
+//  DesignSystemExample
+//
+//  Created by devMinseok on 8/6/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+import DesignSystem
+
+struct AliasTokenDetailView: View {
+  var body: some View {
+    List {
+      Section("Icon") {
+        colorItem(Alias.Color.Icon.primary, name: "Primary")
+        colorItem(Alias.Color.Icon.secondary, name: "Secondary")
+        colorItem(Alias.Color.Icon.tertiary, name: "Tertiary")
+        colorItem(Alias.Color.Icon.disabled, name: "Disabled")
+        colorItem(Alias.Color.Icon.inverse, name: "Inverse")
+      }
+
+      Section("Text") {
+        colorItem(Alias.Color.Text.primary, name: "Primary")
+        colorItem(Alias.Color.Text.secondary, name: "Secondary")
+        colorItem(Alias.Color.Text.tertiary, name: "Tertiary")
+        colorItem(Alias.Color.Text.disabled, name: "Disabled")
+        colorItem(Alias.Color.Text.inverse, name: "Inverse")
+      }
+
+      Section("Background") {
+        colorItem(Alias.Color.Background.primary, name: "Primary")
+        colorItem(Alias.Color.Background.secondary, name: "Secondary")
+        colorItem(Alias.Color.Background.tertiary, name: "Tertiary")
+        colorItem(Alias.Color.Background.inverse, name: "Inverse")
+        colorItem(Alias.Color.Background.accent1, name: "Accent_1")
+        colorItem(Alias.Color.Background.accent2, name: "Accent_2")
+      }
+
+      Section("Accent") {
+        colorItem(Alias.Color.Accent.red, name: "Red")
+      }
+
+      Section("Spacing") {
+        spacingItem(Alias.Spacing.xSmall, name: "xSmall")
+        spacingItem(Alias.Spacing.small, name: "Small")
+        spacingItem(Alias.Spacing.medium, name: "Medium")
+        spacingItem(Alias.Spacing.large, name: "Large")
+        spacingItem(Alias.Spacing.xLarge, name: "xLarge")
+        spacingItem(Alias.Spacing.xxLarge, name: "2xLarge")
+        spacingItem(Alias.Spacing.xxxLarge, name: "3xLarge")
+      }
+
+      Section("Border Radius") {
+        borderRadiusItem(Alias.BorderRadius.xSmall, name: "xSmall")
+        borderRadiusItem(Alias.BorderRadius.small, name: "Small")
+        borderRadiusItem(Alias.BorderRadius.medium, name: "Medium")
+        borderRadiusItem(Alias.BorderRadius.large, name: "Large")
+        borderRadiusItem(Alias.BorderRadius.max, name: "Max")
+      }
+
+      Section("Border Width") {
+        borderWidthItem(Alias.BorderWidth.Stroke.small, name: "Stroke - Small")
+        borderWidthItem(Alias.BorderWidth.Stroke.medium, name: "Stroke - Medium")
+        borderWidthItem(Alias.BorderWidth.Stroke.large, name: "Stroke - Large")
+        borderWidthItem(Alias.BorderWidth.Icon.xSmall, name: "Icon - xLarge")
+        borderWidthItem(Alias.BorderWidth.Icon.small, name: "Icon - Small")
+        borderWidthItem(Alias.BorderWidth.Icon.medium, name: "Icon - Medium")
+        borderWidthItem(Alias.BorderWidth.Icon.large, name: "Icon - Large")
+        borderWidthItem(Alias.BorderWidth.Icon.xLarge, name: "Icon - xLarge")
+      }
+
+      Section("Size") {
+        sizeItem(Alias.Size.Icon.xSmall, name: "Icon - xSmall")
+        sizeItem(Alias.Size.Icon.small, name: "Icon - Small")
+        sizeItem(Alias.Size.Icon.medium, name: "Icon - Medium")
+        sizeItem(Alias.Size.Icon.large, name: "Icon - Large")
+        sizeItem(Alias.Size.Icon.xLarge, name: "Icon - xLarge")
+        sizeItem(Alias.Size.ButtonHeight.small, name: "ButtonHeight - Small")
+        sizeItem(Alias.Size.ButtonHeight.medium, name: "ButtonHeight - Medium")
+        sizeItem(Alias.Size.ButtonHeight.large, name: "ButtonHeight - Large")
+        sizeItem(Alias.Size.ButtonWidth.fixed, name: "ButtonWidth - Fixed")
+      }
+
+      Section("Interaction") {
+        interactionItem(interaction: Global.Color.black.opacity(Alias.Interaction.hover), name: "Hover")
+        interactionItem(interaction: Global.Color.black.opacity(Alias.Interaction.pressed), name: "Pressed")
+      }
+    }
+  }
+
+  func colorItem(_ Color: Color, name: String) -> some View {
+    HStack {
+      Text(name)
+      Spacer()
+      Color
+        .frame(width: 30, height: 30)
+    }
+  }
+
+  func spacingItem(_ spacing: CGFloat, name: String) -> some View {
+    HStack {
+      Text(name)
+      Spacer()
+      Global.Color.orange50
+        .frame(width: spacing, height: spacing)
+    }
+  }
+
+  func borderRadiusItem(_ radius: CGFloat, name: String) -> some View {
+    HStack {
+      Text(name)
+      Spacer()
+      Global.Color.orange50
+        .frame(width: 30, height: 30)
+        .clipShape(RoundedRectangle(cornerRadius: radius))
+    }
+  }
+
+  func borderWidthItem(_ width: CGFloat, name: String) -> some View {
+    HStack {
+      Text(name)
+      Spacer()
+      Global.Color.orange50
+        .border(Global.Color.orange500, width: width)
+        .frame(width: 30, height: 30)
+    }
+  }
+
+  func sizeItem(_ size: CGFloat, name: String) -> some View {
+    HStack {
+      Text(name)
+      Spacer()
+      Global.Color.orange50
+        .frame(width: size, height: size)
+    }
+  }
+
+  func interactionItem(interaction: Color, name: String) -> some View {
+    HStack {
+      Text(name)
+      Spacer()
+      interaction
+        .frame(width: 30, height: 30)
+    }
+  }
+}
+
+#Preview {
+  AliasTokenDetailView()
+}