Fix/#315 components

MLS/MLS.xcodeproj/project.pbxproj

@@ -148,7 +148,6 @@
 		77BEB0402DBA84B0002FFCFC /* MLSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = MLSTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		77E260402EEABEC40059E889 /* Settings.bundle */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.plug-in"; name = Settings.bundle; path = MLS/Resource/Settings.bundle; sourceTree = "<group>"; };
 		77EB18D52DED9256004FB380 /* AuthFeature.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = AuthFeature.framework; sourceTree = BUILT_PRODUCTS_DIR; };
-		77FA68752F72C6D80064B6EB /* MLSDesignSystem */ = {isa = PBXFileReference; lastKnownFileType = wrapper; name = MLSDesignSystem; path = Presentation/MLSDesignSystem; sourceTree = "<group>"; };
 		77FA687A2F72C7360064B6EB /* MLSDesignSystemExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MLSDesignSystemExample.app; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
@@ -325,7 +324,6 @@
 		087D3EDF2DA7972C002F924D = {
 			isa = PBXGroup;
 			children = (
-				77FA68752F72C6D80064B6EB /* MLSDesignSystem */,
 				77E260402EEABEC40059E889 /* Settings.bundle */,
 				77660AD12DD0D361007A4EF3 /* KakaoConfig.xcconfig */,
 				085A7F742DAF99570046663F /* .swiftlint.yml */,

MLS/MLSDesignSystem/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+/.build
+/Packages
+xcuserdata/
+DerivedData/
+.swiftpm/configuration/registries.json
+.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
+.netrc

MLS/MLSDesignSystem/Package.swift

@@ -0,0 +1,38 @@
+// swift-tools-version: 6.2
+// The swift-tools-version declares the minimum version of Swift required to build this package.
+
+import PackageDescription
+
+let package = Package(
+    name: "MLSDesignSystem",
+    platforms: [
+        .iOS(.v15)
+    ],
+    products: [
+        // Products define the executables and libraries a package produces, making them visible to other packages.
+        .library(
+            name: "MLSDesignSystem",
+            targets: ["MLSDesignSystem"]
+        )
+    ],
+    dependencies: [
+        .package(url: "https://github.com/SnapKit/SnapKit.git", from: "5.7.1"),
+        .package(url: "https://github.com/ReactiveX/RxSwift.git", from: "6.9.1")
+    ],
+    targets: [
+        // Targets are the basic building blocks of a package, defining a module or a test suite.
+        // Targets can depend on other targets in this package and products from dependencies.
+        .target(
+            name: "MLSDesignSystem",
+            dependencies: [
+                .product(name: "SnapKit", package: "SnapKit"),
+                .product(name: "RxSwift", package: "RxSwift"),
+                .product(name: "RxCocoa", package: "RxSwift"),
+                .product(name: "RxRelay", package: "RxSwift")
+            ],
+            resources: [
+                .process("Resources")
+            ]
+        )
+    ]
+)

MLS/MLSDesignSystem/Sources/MLSDesignSystem/Components/AuthGuideAlert.swift

@@ -0,0 +1,130 @@
+import UIKit
+
+import SnapKit
+
+public class AuthGuideAlert: GuideAlert {
+    // MARK: - Type
+    private enum Constant {
+        static let iconSize: CGFloat = 24
+        static let topSpacing: CGFloat = 14
+        static let stackViewTopSpacing: CGFloat = stackViewBottomSpacing * 2
+        static let stackViewBottomSpacing: CGFloat = 8
+        static let iconSpacing: CGFloat = 5
+    }
+
+    public enum AuthGuideAlertType {
+        case logout
+        case withdraw
+
+        var mainText: String {
+            switch self {
+            case .logout:
+                "정말 로그아웃 하시겠어요?"
+            case .withdraw:
+                "정말 탈퇴 하시겠어요?"
+            }
+        }
+
+        var subText: String {
+            switch self {
+            case .logout:
+                "로그아웃하면 저장한 캐릭터,\n북마크한 아이템 정보를 볼 수 없어요."
+            case .withdraw:
+                "탈퇴 시, 아래 정보가 삭제 되어 복구가 불가능해요."
+            }
+        }
+
+        var ctaText: String {
+            switch self {
+            case .logout:
+                "로그아웃 하기"
+            case .withdraw:
+                "탈퇴하기"
+            }
+        }
+    }
+
+    // MARK: - Components
+    private let contentStackView: UIStackView = {
+        let view = UIStackView()
+        view.axis = .vertical
+        return view
+    }()
+
+    private let subTextLabel: UILabel = {
+        let label = UILabel()
+        label.numberOfLines = 2
+        return label
+    }()
+
+    private lazy var bookmarkStackView = makeStack(icon: DesignSystemAsset.image(named: "checkMarkFill"), text: "북마크 컬렉션")
+    private lazy var characterStackView = makeStack(icon: DesignSystemAsset.image(named: "checkMarkFill"), text: "캐릭터 정보")
+
+    // MARK: - init
+    public init(type: AuthGuideAlertType) {
+        super.init(mainText: type.mainText, ctaText: type.ctaText, cancelText: "취소")
+        addViews(type: type)
+        setupConstraints(type: type)
+        configureUI(type: type)
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("\(#file), \(#function) Error")
+    }
+}
+
+// MARK: - SetUp
+private extension AuthGuideAlert {
+    func addViews(type: AuthGuideAlertType) {
+        addSubview(contentStackView)
+
+        contentStackView.addArrangedSubview(subTextLabel)
+        if type == .withdraw {
+            contentStackView.addArrangedSubview(bookmarkStackView)
+            contentStackView.addArrangedSubview(characterStackView)
+        }
+    }
+
+    func setupConstraints(type: AuthGuideAlertType) {
+        contentStackView.snp.makeConstraints { make in
+            make.top.equalTo(mainTextLabel.snp.bottom).offset(Constant.topSpacing)
+            make.horizontalEdges.equalToSuperview().inset(GuideAlert.Constant.horizontalInset)
+        }
+
+        if type == .withdraw {
+            contentStackView.setCustomSpacing(Constant.stackViewTopSpacing, after: subTextLabel)
+            contentStackView.setCustomSpacing(Constant.stackViewBottomSpacing, after: bookmarkStackView)
+        }
+
+        buttonStackView.snp.remakeConstraints { make in
+            make.top.equalTo(contentStackView.snp.bottom).offset(GuideAlert.Constant.verticalSpacing)
+            make.horizontalEdges.equalToSuperview().inset(GuideAlert.Constant.horizontalInset)
+            make.bottom.equalToSuperview().inset(GuideAlert.Constant.verticalInset)
+            make.height.equalTo(GuideAlert.Constant.buttonHeight)
+        }
+    }
+
+    func configureUI(type: AuthGuideAlertType) {
+        subTextLabel.attributedText = .makeStyledString(font: .b_s_r, text: type.subText, color: .neutral700)
+    }
+
+    func makeStack(icon: UIImage, text: String) -> UIStackView {
+        let iconView = UIImageView(image: icon)
+
+        let label: UILabel = {
+            let label = UILabel()
+            label.attributedText = .makeStyledString(font: .cp_s_r, text: text, color: .neutral700, alignment: .left)
+            return label
+        }()
+
+        iconView.snp.makeConstraints { make in
+            make.size.equalTo(Constant.iconSize)
+        }
+
+        let stackView = UIStackView(arrangedSubviews: [iconView, label])
+        stackView.axis = .horizontal
+        stackView.spacing = Constant.stackViewBottomSpacing
+        return stackView
+    }
+}

MLS/MLSDesignSystem/Sources/MLSDesignSystem/Components/Badge.swift

@@ -0,0 +1,102 @@
+import UIKit
+
+import SnapKit
+
+public final class Badge: UIView {
+    // MARK: - Type
+    public enum BadgeStyle {
+        case element(String)
+        case preQuest
+        case currentQuest
+        case nextQuest
+
+        var font: UIFont? {
+            switch self {
+            case .element:
+                return .cp_s_sb
+            case .currentQuest:
+                return .cp_xs_sb
+            default:
+                return .cp_xs_r
+            }
+        }
+
+        var fontColor: UIColor {
+            switch self {
+            case .element, .currentQuest:
+                return .primary700
+            default:
+                return .neutral600
+            }
+        }
+
+        var backgroundColor: UIColor {
+            switch self {
+            case .element, .currentQuest:
+                return .primary25
+            default:
+                return .neutral100
+            }
+        }
+
+        var text: String {
+            switch self {
+            case .element(let text):
+                return text
+            case .preQuest:
+                return "이전 퀘스트"
+            case .currentQuest:
+                return "현재 퀘스트"
+            case .nextQuest:
+                return "다음 퀘스트"
+            }
+        }
+    }
+
+    private enum Constant {
+        static let radius: CGFloat = 4
+        static let contentInsets: CGFloat = 6
+    }
+
+    // MARK: - Components
+    private let textLabel = UILabel()
+
+    // MARK: - init
+    public init(style: BadgeStyle) {
+        super.init(frame: .zero)
+
+        addViews()
+        setupConstraints()
+        configureUI(style: style)
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("\(#file), \(#function) Error")
+    }
+}
+
+// MARK: - SetUp
+private extension Badge {
+    func addViews() {
+        addSubview(textLabel)
+    }
+
+    func setupConstraints() {
+        textLabel.snp.makeConstraints { make in
+            make.edges.equalToSuperview().inset(Constant.contentInsets)
+        }
+    }
+
+    func configureUI(style: BadgeStyle) {
+        layer.cornerRadius = Constant.radius
+        backgroundColor = style.backgroundColor
+        textLabel.attributedText = .makeStyledString(font: style.font, text: style.text, color: style.fontColor, lineHeight: 1)
+    }
+}
+
+public extension Badge {
+    func update(style: BadgeStyle) {
+        configureUI(style: style)
+    }
+}