Merge pull request #70 from GongGanGam/feature/ui-framework-chat-prev…

…iew-cell

ChatPreviewCell

GongGanGam-UI/Sources/ChatPreviewCell/ChatPreviewCell.swift

@@ -0,0 +1,99 @@
+//
+//  ChatPreviewCell.swift
+//  GongGanGam-UI
+//
+//  Created by 김세영 on 2023/01/30.
+//  Copyright © 2023 GongGanGam. All rights reserved.
+//
+
+import UIKit
+import FlexLayout
+import PinLayout
+
+open class ChatPreviewCell: UITableViewCell {
+
+    // MARK: - UI
+    private lazy var profileImageView: ProfileImageView = {
+        let view = ProfileImageView()
+
+        return view
+    }()
+
+    private lazy var nicknameLabel: UILabel = {
+        let label = UILabel()
+
+        label.font = Pretendard.bodyBold
+        label.textColor = GongGanGamUIAsset.neutral10.color
+        return label
+    }()
+
+    private lazy var dateLabel: UILabel = {
+        let label = UILabel()
+
+        label.textAlignment = .right
+        label.font = Pretendard.caption2
+        label.textColor = GongGanGamUIAsset.neutral40.color
+        return label
+    }()
+
+    private lazy var contentLabel: UILabel = {
+        let label = UILabel()
+
+        label.font = Pretendard.body
+        label.textColor = GongGanGamUIAsset.neutral40.color
+        return label
+    }()
+
+    // MARK: - Properties
+    public static var reuseIdentifier: String { return String(describing: Self.self) }
+    private let flexContainer = UIView()
+
+    // MARK: - Initializers
+    public override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+
+        self.backgroundColor = .clear
+        self.contentView.addSubview(flexContainer)
+        flexContainer.flex.direction(.row).alignItems(.center).margin(16).define { flex in
+            // profile
+            flex.addItem(profileImageView).aspectRatio(1).width(40)
+
+            // contents
+            flex.addItem().direction(.column).grow(1).marginLeft(8).define { flex in
+                // nickname + date
+                flex.addItem().direction(.row).justifyContent(.spaceBetween).define { flex in
+                    flex.addItem(nicknameLabel).grow(1)
+                    flex.addItem(dateLabel).grow(1)
+                }
+
+                // content
+                flex.addItem().marginTop(4).define { flex in
+                    flex.addItem(contentLabel).grow(1)
+                }
+            }
+        }
+    }
+
+    @available(*, unavailable)
+    public required init?(coder: NSCoder) {
+        fatalError("init?(coder:) is called.")
+    }
+
+    // MARK: - Methods
+    open override func layoutSubviews() {
+        super.layoutSubviews()
+
+        flexContainer.pin.all()
+        flexContainer.flex.layout()
+    }
+
+    public func configureCell(profileImage: UIImage?,
+                              nickname: String,
+                              date: String,
+                              content: String) {
+        self.profileImageView.image = profileImage
+        self.nicknameLabel.text = nickname
+        self.dateLabel.text = date.replacingOccurrences(of: "-", with: ".")
+        self.contentLabel.text = content
+    }
+}

GongGanGam-UI/Sources/ChatPreviewCell/ChatPreviewCellExampleViewController.swift

@@ -0,0 +1,75 @@
+//
+//  ChatPreviewCellExampleViewController.swift
+//  GongGanGam-UI
+//
+//  Created by 김세영 on 2023/01/30.
+//  Copyright © 2023 GongGanGam. All rights reserved.
+//
+
+import UIKit
+import FlexLayout
+import PinLayout
+
+final class ChatPreviewCellExampleViewController: UIViewController {
+
+    // MARK: - UI
+    private lazy var chatPreviewTableView: UITableView = {
+        let tableView = UITableView()
+
+        tableView.backgroundColor = .clear
+        tableView.separatorInset = .zero
+        tableView.separatorColor = GongGanGamUIAsset.neutral80.color
+
+        tableView.register(ChatPreviewCell.self, forCellReuseIdentifier: ChatPreviewCell.reuseIdentifier)
+        tableView.delegate = self
+        tableView.dataSource = self
+        return tableView
+    }()
+
+    // MARK: - Properties
+    private let flexContainer = UIView()
+
+    // MARK: - Initializers
+
+    // MARK: - Methods
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        self.view.backgroundColor = GongGanGamUIAsset.background.color
+        self.view.addSubview(flexContainer)
+
+        flexContainer.flex.addItem(chatPreviewTableView).grow(1)
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+
+        flexContainer.pin.all()
+        flexContainer.flex.layout()
+    }
+}
+
+extension ChatPreviewCellExampleViewController: UITableViewDelegate, UITableViewDataSource {
+
+    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return 100
+    }
+
+    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+        guard let cell = tableView.dequeueReusableCell(withIdentifier: ChatPreviewCell.reuseIdentifier,
+                                                       for: indexPath) as? ChatPreviewCell else {
+            return UITableViewCell()
+        }
+
+        cell.configureCell(profileImage: UIImage(systemName: "\(indexPath.row % 10).circle.fill"),
+                           nickname: "Nickname \(indexPath.row)",
+                           date: "2023-01-\(indexPath.row)",
+                           content: "Content \(indexPath.row) of Cell \(indexPath.row)")
+
+        return cell
+    }
+
+    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
+        return 78
+    }
+}

GongGanGam-UI/Sources/Example/Components.swift

@@ -18,6 +18,7 @@ internal enum Components: String, CaseIterable {
     case gongGanGamButton
     case profileImageView
     case receivedContentCell
+    case chatPreview
 
     var viewController: UIViewController {
         switch self {
@@ -37,6 +38,8 @@ internal enum Components: String, CaseIterable {
             return ProfileImageExampleViewController()
         case .receivedContentCell:
             return ReceivedContentCellExampleViewController()
+        case .chatPreview:
+            return ChatPreviewCellExampleViewController()
         }
     }
 }