[Feat] 닉네임 수정 시작할 때 부터 텍스트필드 디자인 변화 (TeamSobokSobok#282)

seondal · Sep 21, 2022 · e3746c6 · e3746c6
1 parent f5787f2
commit e3746c6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/SobokSobok/SobokSobok/Presentation/SignUp/SetNickNameVIewController.swift b/SobokSobok/SobokSobok/Presentation/SignUp/SetNickNameVIewController.swift
@@ -70,24 +70,31 @@ final class SetNickNameVIewController: UIViewController, SetNicknameProtocol {
 
     // MARK: Functions
     private func addTargetToTextField() {
-        nickNameTextField.addTarget(self, action: #selector(self.activateTextField), for: .editingChanged)
+        nickNameTextField.addTarget(self, action: #selector(self.activateTextField), for: .editingDidBegin)
+        nickNameTextField.addTarget(self, action: #selector(self.changeTextFieldDuringEditing), for: .editingChanged)
         nickNameTextField.addTarget(self, action: #selector(self.inactivateTextField), for: .editingDidEnd)
         NotificationCenter.default.addObserver(self, selector: #selector(self.keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
         NotificationCenter.default.addObserver(self, selector: #selector(self.keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
     }
 
     // MARK: 텍스트필드 관련
     @objc private func activateTextField() {
+        changeTextFieldBorder()
+    }
+    @objc private func changeTextFieldDuringEditing() {
         initializeDuplicationCheck()
         limitNicknameText()
         checkIsNicknameRight()
         showWarning()
+        changeTextFieldBorder()
         enableDuplicationCheckButton()
         enableSignUpButton()
     }
+
     private func initializeDuplicationCheck() {
         isDuplicationChecked = false
     }
+
     private func limitNicknameText() {
         if nickNameTextField.text?.count ?? 0 > 10 {
             nickNameTextField.deleteBackward()
@@ -102,13 +109,18 @@ final class SetNickNameVIewController: UIViewController, SetNicknameProtocol {
         let nickNameTest = NSPredicate(format: "SELF MATCHES %@", validNickName)
           return nickNameTest.evaluate(with: input)
     }
+
+    // MARK: 텍스트필드 스타일 관련
     private func showWarning() {
         warningTextLabel.isHidden = isNickNameRight || !nickNameTextField.hasText
+    }
+    private func changeTextFieldBorder() {
         nickNameTextFieldView.layer.borderColor = isNickNameRight || !nickNameTextField.hasText ? Color.gray600.cgColor : Color.pillColorRed.cgColor
     }
-
+    
     @objc private func inactivateTextField() {
-        nickNameTextFieldView.makeRoundedWithBorder(radius: 12, color: Color.gray300.cgColor)
+        warningTextLabel.isHidden = isNickNameRight || !nickNameTextField.hasText
+        nickNameTextFieldView.layer.borderColor = isNickNameRight || !nickNameTextField.hasText ? Color.gray300.cgColor : Color.pillColorRed.cgColor
     }
 
     // MARK: 버튼 활성화 관련

diff --git a/SobokSobok/SobokSobok/Presentation/SignUp/SetNickNameVIewController.xib b/SobokSobok/SobokSobok/Presentation/SignUp/SetNickNameVIewController.xib
@@ -1,9 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19455" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_7" orientation="portrait" appearance="light"/>
     <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19454"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
         <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
@@ -99,6 +98,13 @@
                         <action selector="touchUpToCheckDuplication:" destination="-1" eventType="touchUpInside" id="nOy-js-pu8"/>
                     </connections>
                 </button>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ePI-CH-nAs" userLabel="밑줄">
+                    <rect key="frame" x="348" y="263" width="52" height="1"/>
+                    <color key="backgroundColor" name="gray500_sub"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="1" id="E12-nk-9X8"/>
+                    </constraints>
+                </view>
                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aRZ-1I-4Bj">
                     <rect key="frame" x="327" y="393" width="0.0" height="0.0"/>
                     <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
@@ -132,13 +138,6 @@
                         <action selector="touchUpToSignUp:" destination="-1" eventType="touchUpInside" id="fho-w2-oV8"/>
                     </connections>
                 </button>
-                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ePI-CH-nAs" userLabel="밑줄">
-                    <rect key="frame" x="348" y="263" width="52" height="1"/>
-                    <color key="backgroundColor" name="gray500_sub"/>
-                    <constraints>
-                        <constraint firstAttribute="height" constant="1" id="E12-nk-9X8"/>
-                    </constraints>
-                </view>
                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="사용할 닉네임을 입력해 주세요 (필수)" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FOU-s7-oOf">
                     <rect key="frame" x="20" y="136" width="388" height="19"/>
                     <fontDescription key="fontDescription" name="Pretendard-SemiBold" family="Pretendard" pointSize="15"/>