[Feat] #86 - text View Custom

Team-Smeme · Jan 10, 2023 · 9193b59 · 9193b59
2 parents a98b0e5 + 425cb0a
commit 9193b59
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 37 deletions.
diff --git a/Smeme-iOS/Smeme-iOS/Resources/Extension/UITextView+.swift b/Smeme-iOS/Smeme-iOS/Resources/Extension/UITextView+.swift
@@ -8,13 +8,16 @@
 import UIKit
 
 extension UITextView {
-    /// 레이아웃 잡을 때 값 24로 주기 ex) $0.leading.trailing.equalToSuperview().inset(24)
+    /*
+     1. textColor는 뷰컨에서 해당 textView 속성 정의할 때 정의해 주어야 함!
+     2. 레이아웃 잡을 때 값 24로 주기 ex) $0.leading.trailing.equalToSuperview().inset(24)
+     3. textView 위에 label 올릴 때의 레이아웃 ex) top.leading.equalToSuperview().inset(7)
+     */
     func setLineSpacing() {
         let style = NSMutableParagraphStyle()
         style.lineSpacing = 2
         let attributes = [
             NSAttributedString.Key.paragraphStyle: style,
-            NSAttributedString.Key.foregroundColor: UIColor.black,
             NSAttributedString.Key.font: UIFont.body1
         ]
         self.textAlignment = .left

diff --git a/Smeme-iOS/Smeme-iOS/Sources/Screen/DiaryForeign/DiaryForeignViewController.swift b/Smeme-iOS/Smeme-iOS/Sources/Screen/DiaryForeign/DiaryForeignViewController.swift
@@ -21,15 +21,18 @@ final class DiaryForeignViewController: UIViewController {
     private let naviView = UIView()
     private let languageView = UIView()
 
-    private lazy var textView: UITextView = {
-        let textView = UITextView().then {
-            $0.font = .body1
-            $0.text = "최소 10자이상의 외국어를 작성해주세요"
-            $0.textColor = .gray400
-            $0.delegate = self
-        }
-        return textView
-    }()
+    private lazy var diaryTextView = UITextView().then {
+        $0.setLineSpacing()
+        $0.textColor = .gray400
+        $0.delegate = self
+    }
+
+    private let placeHolderLabel = UILabel().then {
+        $0.text = "최소 10자 이상의 외국어를 작성해 주세요"
+        $0.textColor = .gray400
+        $0.font = .body1
+        $0.setTextWithLineHeight(lineHeight: 21)
+    }
 
     private var randomSubjectView = RandomSubjectView().then {
         $0.configure(with: RandomSubjectViewModel(contentText: "오늘부터 딱 일주일 후! 설레는 크리스마스네요. 일주일 전부터 세워보는 나의 크리스마스 계획은?", isHiddenRefreshButton: false))
@@ -80,7 +83,7 @@ final class DiaryForeignViewController: UIViewController {
     }
 
     override func viewWillAppear(_ animated: Bool) {
-        showKeyboard(textView: textView)
+        showKeyboard(textView: diaryTextView)
         keyboardAddObserver()
     }
 
@@ -110,7 +113,8 @@ final class DiaryForeignViewController: UIViewController {
     }
 
     private func setLayout() {
-        view.addSubviews([naviView, randomSubjectView, textView, bottomView])
+        view.addSubviews([naviView, randomSubjectView, diaryTextView, bottomView])
+        diaryTextView.addSubview(placeHolderLabel)
 
         naviView.addSubviews([cancelButton, languageView, completeButton])
         languageView.addSubviews([languageLabel, languageIcon])
@@ -148,13 +152,16 @@ final class DiaryForeignViewController: UIViewController {
             $0.leading.equalTo(languageLabel.snp.trailing).offset(6)
         }
 
-        textView.snp.makeConstraints {
-            $0.top.equalTo(naviView.snp.bottom).offset(9)
-            $0.leading.trailing.equalTo(view.safeAreaLayoutGuide).offset(30)
-            $0.trailing.equalTo(view.safeAreaLayoutGuide).offset(-30)
+        diaryTextView.snp.makeConstraints {
+            $0.top.equalTo(naviView.snp.bottom).offset(10)
+            $0.leading.trailing.equalToSuperview().inset(24)
             $0.bottom.equalTo(bottomView.snp.top)
         }
 
+        placeHolderLabel.snp.makeConstraints {
+            $0.top.leading.equalToSuperview().inset(7)
+        }
+
         bottomView.snp.makeConstraints {
             $0.bottom.leading.trailing.equalToSuperview()
             $0.height.equalTo(constraintByNotch(87, 53))
@@ -180,7 +187,7 @@ final class DiaryForeignViewController: UIViewController {
                 $0.height.equalTo(convertByHeightRatio(66))
             }
 
-            textView.snp.remakeConstraints {
+            diaryTextView.snp.remakeConstraints {
                 $0.top.equalTo(naviView.snp.bottom).offset(9)
                 $0.leading.trailing.equalTo(view.safeAreaLayoutGuide).offset(30)
                 $0.trailing.equalTo(view.safeAreaLayoutGuide).offset(-30)
@@ -203,7 +210,7 @@ final class DiaryForeignViewController: UIViewController {
                 $0.leading.equalToSuperview()
             }
 
-            textView.snp.remakeConstraints {
+            diaryTextView.snp.remakeConstraints {
                 $0.top.equalTo(randomSubjectView.snp.bottom).offset(9)
                 $0.leading.trailing.equalTo(view.safeAreaLayoutGuide).offset(30)
                 $0.trailing.equalTo(view.safeAreaLayoutGuide).offset(-30)
@@ -226,21 +233,32 @@ final class DiaryForeignViewController: UIViewController {
     }
 }
 
-// MARK: - Extensions
+// MARK: - UITextViewDelegate
 
 extension DiaryForeignViewController: UITextViewDelegate {
-
     func textViewDidBeginEditing(_ textView: UITextView) {
-        if textView.textColor == .gray400 {
-            textView.text = nil
+        if textView.text.isEmpty {
+            placeHolderLabel.isHidden = false
             textView.textColor = .smemeBlack
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .clear
         }
     }
 
-    func textViewDidEndEditing(_ textView: UITextView) {
+    func textViewDidChange(_ textView: UITextView) {
         if textView.text.isEmpty {
-            textView.text = "최소 10자이상의 외국어를 작성해주세요"
+            placeHolderLabel.isHidden = false
+            textView.textColor = .smemeBlack
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .clear
+        } else {
+            placeHolderLabel.isHidden = true
             textView.textColor = .gray400
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .primary
         }
     }
 }
diff --git a/Smeme-iOS/Smeme-iOS/Sources/Screen/DiaryKorean/StepOneKoreanDiaryViewController.swift b/Smeme-iOS/Smeme-iOS/Sources/Screen/DiaryKorean/StepOneKoreanDiaryViewController.swift
@@ -21,10 +21,17 @@ final class StepOneKoreanDiaryViewController: UIViewController {
     private let naviView = UIView()
     private let languageView = UIView()
 
-    private let diaryTextView = UITextView().then {
-        $0.text = "오늘은 OPR을 공개한 날이었다. 안 떨릴 줄 알았는데 겁나 떨렸당. 사실 카페가 추웠어서 추워서 떠는 건지 긴장 돼서 떠는 건지 구분이 잘 안 갔다. 근데 사실 나는 다리 떠는 것도 습관이라 다리를 떨어서 몸이 떨린 걸 수도 있다."
-        $0.font = .body1
+    private lazy var diaryTextView = UITextView().then {
         $0.setLineSpacing()
+        $0.textColor = .gray400
+        $0.delegate = self
+    }
+
+    private let placeHolderLabel = UILabel().then {
+        $0.text = "최소 10자 이상의 외국어를 작성해 주세요"
+        $0.textColor = .gray400
+        $0.font = .body1
+        $0.setTextWithLineHeight(lineHeight: 21)
     }
 
     private var randomSubjectView = RandomSubjectView().then {
@@ -108,6 +115,7 @@ final class StepOneKoreanDiaryViewController: UIViewController {
         view.addSubviews([naviView, tipLabel, diaryTextView, bottomView])
 
         naviView.addSubviews([cancelButton, languageView, completeButton])
+        diaryTextView.addSubview(placeHolderLabel)
         languageView.addSubviews([languageLabel, stepLabel])
         bottomView.addSubviews([randomTopicButton, publicButton])
 
@@ -153,6 +161,10 @@ final class StepOneKoreanDiaryViewController: UIViewController {
             $0.bottom.equalToSuperview()
         }
 
+        placeHolderLabel.snp.makeConstraints {
+            $0.top.leading.equalToSuperview().inset(7)
+        }
+
         bottomView.snp.makeConstraints {
             $0.bottom.leading.trailing.equalToSuperview()
             $0.height.equalTo(constraintByNotch(87, 53))
@@ -205,3 +217,33 @@ final class StepOneKoreanDiaryViewController: UIViewController {
         }
     }
 }
+
+// MARK: - UITextViewDelegate
+
+extension StepOneKoreanDiaryViewController: UITextViewDelegate {
+    func textViewDidBeginEditing(_ textView: UITextView) {
+        if textView.text.isEmpty {
+            placeHolderLabel.isHidden = false
+            textView.textColor = .smemeBlack
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .clear
+        }
+    }
+
+    func textViewDidChange(_ textView: UITextView) {
+        if textView.text.isEmpty {
+            placeHolderLabel.isHidden = false
+            textView.textColor = .smemeBlack
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .clear
+        } else {
+            placeHolderLabel.isHidden = true
+            textView.textColor = .gray400
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .primary
+        }
+    }
+}
diff --git a/Smeme-iOS/Smeme-iOS/Sources/Screen/DiaryKorean/StepTwoKoreanDiaryViewController.swift b/Smeme-iOS/Smeme-iOS/Sources/Screen/DiaryKorean/StepTwoKoreanDiaryViewController.swift
@@ -25,11 +25,17 @@ final class StepTwoKoreanDiaryViewController: UIViewController {
         //            $0.delegate = self
     }
 
-    private lazy var textView = UITextView().then {
+    private lazy var diaryTextView = UITextView().then {
+        $0.setLineSpacing()
+        $0.textColor = .gray400
+        $0.delegate = self
+    }
+
+    private let placeHolderLabel = UILabel().then {
+        $0.text = "최소 10자 이상의 외국어를 작성해 주세요"
+        $0.textColor = .gray400
         $0.font = .body1
-        $0.text = "최소 10자이상의 외국어를 작성해주세요"
-        $0.textColor = .gray500
-        //            $0.delegate = self
+        $0.setTextWithLineHeight(lineHeight: 21)
     }
 
     private let backButton = UIButton().then {
@@ -99,11 +105,11 @@ final class StepTwoKoreanDiaryViewController: UIViewController {
     }
 
     private func setLayout() {
-        view.addSubviews([naviView, koreanDiaryTextView, grayUnderlineView, textView, bottomView])
+        view.addSubviews([naviView, koreanDiaryTextView, grayUnderlineView, diaryTextView, bottomView])
 
         naviView.addSubviews([backButton, languageView, completeButton])
+        diaryTextView.addSubview(placeHolderLabel)
         languageView.addSubviews([languageLabel, languageIcon, stepLabel])
-
         bottomView.addSubviews([randomTopicButton, publicButton, hintButton])
 
         naviView.snp.makeConstraints {
@@ -156,12 +162,16 @@ final class StepTwoKoreanDiaryViewController: UIViewController {
             $0.height.equalTo(convertByHeightRatio(6))
         }
 
-        textView.snp.makeConstraints {
-            $0.top.equalTo(grayUnderlineView.snp.bottom)
-            $0.leading.trailing.equalTo(view.safeAreaLayoutGuide).offset(30)
+        diaryTextView.snp.makeConstraints {
+            $0.top.equalTo(grayUnderlineView.snp.bottom).offset(30)
+            $0.leading.trailing.equalToSuperview().inset(24)
             $0.bottom.equalToSuperview()
         }
 
+        placeHolderLabel.snp.makeConstraints {
+            $0.top.equalToSuperview().inset(7)
+        }
+
         bottomView.snp.makeConstraints {
             $0.bottom.leading.trailing.equalToSuperview()
             $0.height.equalTo(constraintByNotch(87, 53))
@@ -183,3 +193,33 @@ final class StepTwoKoreanDiaryViewController: UIViewController {
         }
     }
 }
+
+// MARK: - UITextViewDelegate
+
+extension StepTwoKoreanDiaryViewController: UITextViewDelegate {
+    func textViewDidBeginEditing(_ textView: UITextView) {
+        if textView.text.isEmpty {
+            placeHolderLabel.isHidden = false
+            textView.textColor = .smemeBlack
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .clear
+        }
+    }
+
+    func textViewDidChange(_ textView: UITextView) {
+        if textView.text.isEmpty {
+            placeHolderLabel.isHidden = false
+            textView.textColor = .smemeBlack
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .clear
+        } else {
+            placeHolderLabel.isHidden = true
+            textView.textColor = .gray400
+            textView.font = .body1
+            textView.setLineSpacing()
+            textView.tintColor = .primary
+        }
+    }
+}