[Feat] 채팅 구현

PlayTogether/PlayTogether.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -163,6 +163,21 @@
       }
     },
     {
+      "identity" : "socket.io-client-swift",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/socketio/socket.io-client-swift",
+      "state" : {
+        "branch" : "master",
+        "revision" : "a1ed825835a2d8c2555938e96557ccc05e4bebf3"
+      }
+    },
+    {
+      "identity" : "starscream",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/daltoniam/Starscream",
+      "state" : {
+        "revision" : "df8d82047f6654d8e4b655d1b1525c64e1059d21",
+        "version" : "4.0.4"
       "identity" : "swift-protobuf",
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/apple/swift-protobuf.git",

PlayTogether/PlayTogether/Application/AppDelegate.swift

@@ -59,6 +59,10 @@ class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterD
         // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
         // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
     }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+        SocketIOManager.shared.closeConnection()
+    }
 
 
 }

PlayTogether/PlayTogether/Application/TabBar/TabBarController.swift

@@ -21,7 +21,7 @@ final class TabBarController: UITabBarController {
             image: .ptImage(.thunInactive).withRenderingMode(.alwaysOriginal),
             selectedImage: .ptImage(.thunActive).withRenderingMode(.alwaysOriginal))
     }
-    private let chatViewController = ChatViewController().then {
+    private let chatViewController = ChattingListViewController().then {
         $0.tabBarItem = UITabBarItem(
             title: "채팅",
             image: .ptImage(.chatInactive).withRenderingMode(.alwaysOriginal),

PlayTogether/PlayTogether/Extensions/UIImage+Extension.swift

@@ -71,6 +71,9 @@ enum ImageCase: String {
     case showIconBlack = "showIconBlack"
     case introduceLabelIcon = "introduceLabelIcon"
     case clearIcon = "clearIcon"
+
+    case sendInActiveIcon = "sendInActiveIcon"
+    case sendActiveIcon = "sendActiveIcon"
     case optionIcon = "optionIcon"
 
     case graySearchIcon = "graySearchIcon"

PlayTogether/PlayTogether/Extensions/UITableViewCell+Extension.swift

@@ -0,0 +1,19 @@
+//
+//  UITableView+Extension.swift
+//  PlayTogether
+//
+//  Created by 한상진 on 2022/09/04.
+//
+
+import UIKit
+
+extension UITableViewCell {
+    func dateParser(_ dateString: String) -> String {
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"
+        guard let convertDate = dateFormatter.date(from: dateString) else { return String.init() }
+
+        dateFormatter.dateFormat = "yyyy.MM.dd.  HH:mm"
+        return dateFormatter.string(from: convertDate)
+    }
+}

PlayTogether/PlayTogether/Resources/Assets.xcassets/Chatting/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

PlayTogether/PlayTogether/Resources/Assets.xcassets/Chatting/sendActiveIcon.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "btn_send_active.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

PlayTogether/PlayTogether/Resources/Assets.xcassets/Chatting/sendInActiveIcon.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "btn_send_inactive.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

PlayTogether/PlayTogether/Sources/Chatting/Cell/ChattingListTableViewCell.swift

@@ -0,0 +1,109 @@
+//
+//  ChattingRoomTableViewCell.swift
+//  PlayTogether
+//
+//  Created by 한상진 on 2022/08/31.
+//
+
+import UIKit
+
+final class ChattingListTableViewCell: UITableViewCell {
+    private let profileImageView = UIImageView().then {
+        $0.image = .ptImage(.profileIcon)
+    }
+
+    private let nameLabel = UILabel().then {
+        $0.textColor = .ptBlack01
+        $0.font = .pretendardBold(size: 16)
+    }
+
+    private let pointView = UIView().then {
+        $0.backgroundColor = .ptGreen
+        $0.layer.cornerRadius = 3
+    }
+
+    private let lastChatLabel = UILabel().then {
+        $0.textColor = .ptBlack01
+        $0.font = .pretendardRegular(size: 14)
+        $0.lineBreakMode = .byTruncatingTail
+    }
+
+    private let dateLabel = UILabel().then {
+        $0.textColor = .ptGray01
+        $0.font = .pretendardRegular(size: 14)
+    }
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+        setupUI()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func setupCell(
+        profileImage: UIImage?,
+        name: String,
+        lastChat: String,
+        date: String,
+        send: Bool,
+        read: Bool
+    ) {
+        if let profileImage = profileImage {
+            profileImageView.image = profileImage
+        }
+
+        nameLabel.text = name
+        lastChatLabel.text = lastChat
+        dateLabel.text = dateParser(date)
+
+        if send || read {
+            nameLabel.textColor = .ptGray01
+            lastChatLabel.textColor = .ptGray01
+            pointView.isHidden = true
+        }
+    }
+}
+
+private extension ChattingListTableViewCell {
+    func setupUI() {
+        backgroundColor = .white
+        selectionStyle = .none
+        separatorInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
+
+        addSubview(profileImageView)
+        addSubview(nameLabel)
+        addSubview(pointView)
+        addSubview(lastChatLabel)
+        addSubview(dateLabel)
+
+        profileImageView.snp.makeConstraints {
+            $0.centerY.equalToSuperview()
+            $0.leading.equalToSuperview().offset(20)
+            $0.size.equalTo(UIScreen.main.bounds.width * 0.106)
+        }
+
+        nameLabel.snp.makeConstraints {
+            $0.top.equalTo(profileImageView).offset(1)
+            $0.leading.equalTo(profileImageView.snp.trailing).offset(12)
+        }
+
+        pointView.snp.makeConstraints {
+            $0.leading.equalTo(nameLabel.snp.trailing).offset(8)
+            $0.centerY.equalTo(nameLabel)
+            $0.size.equalTo(6)
+        }
+
+        lastChatLabel.snp.makeConstraints {
+            $0.leading.equalTo(nameLabel)
+            $0.trailing.equalToSuperview().inset(20)
+            $0.bottom.equalTo(profileImageView).offset(1)
+        }
+
+        dateLabel.snp.makeConstraints {
+            $0.top.equalTo(nameLabel)
+            $0.trailing.equalToSuperview().inset(20)
+        }
+    }
+}

PlayTogether/PlayTogether/Sources/Chatting/Cell/ChattingRoomTableViewCell.swift

@@ -0,0 +1,147 @@
+//
+//  ChattingRoomTableViewCell.swift
+//  PlayTogether
+//
+//  Created by 한상진 on 2022/09/01.
+//
+
+import UIKit
+
+enum MessageType {
+    case myMessage
+    case yourMessage
+}
+
+final class ChattingRoomTableViewCell: UITableViewCell {
+    private var messageType: MessageType?
+
+    let myMessageLabel = PaddingLabel().then {
+        $0.font = .pretendardMedium(size: 14)
+        $0.numberOfLines = 0
+        $0.textColor = .ptBlack01
+        $0.backgroundColor = .ptGray02
+        $0.layer.cornerRadius = 10
+        $0.clipsToBounds = true
+        $0.lineBreakMode = .byCharWrapping
+        $0.setupPadding(top: 8, left: 12, bottom: 8, right: 12)
+        $0.drawText(in: CGRect())
+    }
+
+    private let dateLabel = UILabel().then {
+        $0.textColor = .ptGray02
+        $0.font = .pretendardRegular(size: 12)
+    }
+
+    private let yourProfileImageView = UIImageView().then {
+        $0.image = .ptImage(.profileIcon)
+    }
+
+    private let yourMessageLabel = PaddingLabel().then {
+        $0.font = .pretendardMedium(size: 14)
+        $0.numberOfLines = 0
+        $0.textColor = .white
+        $0.backgroundColor = .ptBlack01
+        $0.layer.cornerRadius = 10
+        $0.clipsToBounds = true
+        $0.lineBreakMode = .byCharWrapping
+        $0.setupPadding(top: 8, left: 12, bottom: 8, right: 12)
+        $0.drawText(in: CGRect())
+    }
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func prepareForReuse() {
+        super.prepareForReuse()
+        guard let messageType = messageType else { return }
+
+        switch messageType {
+        case .myMessage: setupMyMessageReuseLayout()
+        case .yourMessage: setupYourMessageReuseLayout()
+        }
+    }
+
+    func setupCell(
+        profileImage: UIImage?,
+        send: Bool,
+        content: String,
+        createdAt: String
+    ) {
+        if let profileImage = profileImage {
+            yourProfileImageView.image = profileImage
+        }
+
+        switch send {
+        case true:
+            messageType = .myMessage
+            myMessageLabel.text = content
+            setupUI(.myMessage)
+        case false:
+            messageType = .yourMessage
+            yourMessageLabel.text = content
+            setupUI(.yourMessage)
+        }
+
+        dateLabel.text = dateParser(createdAt)
+    }
+}
+
+private extension ChattingRoomTableViewCell {
+    func setupUI(_ messageType: MessageType) {
+        backgroundColor = .white
+
+        switch messageType {
+        case .myMessage:
+            addSubview(myMessageLabel)
+            addSubview(dateLabel)
+
+            myMessageLabel.snp.makeConstraints {
+                $0.top.equalToSuperview().offset(6)
+                $0.leading.greaterThanOrEqualToSuperview().offset(128)
+                $0.trailing.equalToSuperview().inset(20)
+            }
+
+            dateLabel.snp.makeConstraints {
+                $0.top.equalTo(myMessageLabel.snp.bottom).offset(6)
+                $0.trailing.equalToSuperview().inset(20)
+                $0.bottom.equalToSuperview().inset(6)
+            }
+        case .yourMessage:
+            addSubview(yourProfileImageView)
+            addSubview(yourMessageLabel)
+            addSubview(dateLabel)
+
+            yourProfileImageView.snp.makeConstraints {
+                $0.leading.equalToSuperview().offset(20)
+                $0.top.equalToSuperview().offset(14)
+                $0.size.equalTo(24)
+            }
+
+            yourMessageLabel.snp.makeConstraints {
+                $0.top.equalToSuperview().offset(6)
+                $0.leading.equalTo(yourProfileImageView.snp.trailing).offset(8)
+                $0.trailing.lessThanOrEqualToSuperview().inset(128)
+            }
+
+            dateLabel.snp.makeConstraints {
+                $0.top.equalTo(yourMessageLabel.snp.bottom).offset(6)
+                $0.leading.equalTo(yourProfileImageView.snp.trailing).offset(10)
+                $0.bottom.equalToSuperview().inset(6)
+            }
+        }
+    }
+
+    func setupMyMessageReuseLayout() {
+        myMessageLabel.removeFromSuperview()
+    }
+
+    func setupYourMessageReuseLayout() {
+        yourMessageLabel.removeFromSuperview()
+        yourProfileImageView.removeFromSuperview()
+    }
+}