Feat/week1 UI #2

i-colours-u · 2021-10-08T14:02:52Z

📌 관련 이슈

#1 1차 과제 Issues

키보드 띄워졌을때, 가리는 요소가 없도록 처리하기
버튼에 대한 Haptic 관리
UI요소들에 대해서 따로 클래스 분리해서 관리하기
터치영역 고려하기(범위가 작아서 터치하는게 힘들지 않도록)
TextField Focus 되었을 때, 다른 Focus 되지 않은 Textfield 하고 구분되도록 border Color 처리하기
TextField Toolbar 만들어서 처리
Module Factory 패턴으로 화면전환 처리

를 중심으로 했었구
최초 프로젝트다 보니까 .. 아무래도 세팅하는 파일이 좀 많이 들어가긴 하네요!

📌 변경 사항 및 이유

📌 PR Point

📌 참고 사항

피드백이나 질문사항은 마구마구 남겨주세요!! 편하게!!!!!!

Taehyeon-Kim · 2021-10-08T14:05:57Z

지나가는 행인입니다.. 가장 위에 있길래 들어와봤는데요.
저 만드신 것중에 ModuleFactory가 무엇인지 궁금합니다..
디자인 패턴 같은 것을 적용한건가요??

i-colours-u · 2021-10-08T14:29:29Z

지나가는 행인입니다.. 가장 위에 있길래 들어와봤는데요. 저 만드신 것중에 ModuleFactory가 무엇인지 궁금합니다.. 디자인 패턴 같은 것을 적용한건가요??

-> Factory Method 패턴이라고 해서.. 그 클래스 인스턴스 생성하는 결정은 무조건 하위 클래스(factory)가 하도록 시키는 패턴입니당
즉, 객체 생성 자체를 부모 클래스가 아닌 서브 클래스가 하도록? 객체 생성을 캡슐화하는 형태입니다!!

보통 화면전환을 진행할때 클래스 인스턴스를 각 클래스 내에서 진행하게 되는데 factory로 따로 뽑아내서 진행하는 형태에요!!
protocol 형태로 선언해서 쓰는 방식입니다!

Taehyeon-Kim · 2021-10-08T15:00:47Z

지나가는 행인입니다.. 가장 위에 있길래 들어와봤는데요. 저 만드신 것중에 ModuleFactory가 무엇인지 궁금합니다.. 디자인 패턴 같은 것을 적용한건가요??

-> Factory Method 패턴이라고 해서.. 그 클래스 인스턴스 생성하는 결정은 무조건 하위 클래스(factory)가 하도록 시키는 패턴입니당 즉, 객체 생성 자체를 부모 클래스가 아닌 서브 클래스가 하도록? 객체 생성을 캡슐화하는 형태입니다!!

보통 화면전환을 진행할때 클래스 인스턴스를 각 클래스 내에서 진행하게 되는데 factory로 따로 뽑아내서 진행하는 형태에요!! protocol 형태로 선언해서 쓰는 방식입니다!

와.. 하나 배워갑니다 👍

YoonAh-dev · 2021-10-08T15:21:23Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/Extension/press + UIButton.swift

  func press(for controlEvents: UIControl.Event = .touchUpInside, _ closure: @escaping()->()) {
-    self.clicked { _ in
-      if #available(iOS 14.0, *) {
-        self.addAction(UIAction { (action: UIAction) in closure() }, for: controlEvents)
-      } else {
-        @objc class ClosureSleeve: NSObject {
-          let closure:()->()
-          init(_ closure: @escaping()->()) { self.closure = closure }
-          @objc func invoke() { closure() }
-        }
-        let sleeve = ClosureSleeve(closure)
-        self.addTarget(sleeve, action: #selector(ClosureSleeve.invoke), for: controlEvents)
-        objc_setAssociatedObject(self, "\(UUID())", sleeve, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)
+
+    if #available(iOS 14.0, *) {
+      self.addAction(UIAction { (action: UIAction) in closure()
+        self.clickedAnimation()
+      }, for: controlEvents)
+    } else {
+      @objc class ClosureSleeve: NSObject {
+        let closure:()->()
+        init(_ closure: @escaping()->()) { self.closure = closure }
+        @objc func invoke() { closure() }


Closure 너무 잘쓰시네요 . . 훔쳐가고 싶네요 .. .. 아니 훔쳐갑니다

매번 플젝할때마다 고정해두고 쓰는데 매우 편하게 쓰고있읍니다..
일일이 addTarget하고 메서드 연결안하고 press로 빼는게 편해서 사용중이에요!!!

또 하나 배워갑니다👍

와 이거 좋네요... 저도 줍줍할래요

와 저도 줍줍 합니다..

주워갑니다

heerucan · 2021-10-08T15:26:23Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/Extension/press + UIButton.swift

+    if #available(iOS 14.0, *) {
+      self.addAction(UIAction { (action: UIAction) in closure()
+        self.clickedAnimation()
+      }, for: controlEvents)
+    } else {
+      @objc class ClosureSleeve: NSObject {
+        let closure:()->()
+        init(_ closure: @escaping()->()) { self.closure = closure }
+        @objc func invoke() { closure() }
      }
+      let sleeve = ClosureSleeve(closure)
+      self.addTarget(sleeve, action: #selector(ClosureSleeve.invoke), for: controlEvents)
+      objc_setAssociatedObject(self, "\(UUID())", sleeve, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)


정말 살아생전 처음 보는 코드인데 이건 어떤 익스텐션이죠?
어떤 애니메이션을 주는 코드인가요?

button.press { // 버튼을 눌렀을 때 동작하는 코드들 }

이렇게 쓰기 위해서 다음과 같이 Extension을 뺴놨는데요...
그 clickAnimation을 넣은 이유는 , 주석에 쓴거처럼 버튼을 누른 효과를 주기 위해 줄어들었다.. 커졌다 애니메이션을 짧게 줘서 처리하고 있슴니다.. 다른 프로덕트 보니까 이런식으로 버튼 애니메이션 정의한곳이 많아서.. 참고해봤습니다!!!

구동영상 보고 왔는데 진촤 디테일 짱..👍🏻 배워갑니다🔥

애니메이션 효과 디테일 최고입니다..🤭저도 얼른 활용해보고 싶네요

heerucan · 2021-10-08T15:26:35Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/Extension/press + UIButton.swift

}
+

빈칸 주의

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

제가 빈칸을 좀 많이 써서 ^^,,,,, 조심할게요...

heerucan · 2021-10-08T16:16:34Z

일단 오늘 안에 달려면 이 코드들 정말 모르겠어서 말이져 내 살아생전 처음 보는 코드들이라 ㅋㅋㅋㅋㅋㅋㅋㅋ 일단 내일로 미루겠습니다.

일단 제가 달 수 있는 것은 빈 칸을 주의하시면 좋을 것 같고요,,
(나레이디... 첫 앱잼 코드리뷰에서 빈 칸으로 34개인가의 코드 리뷰를 받았읍..)
그리고.. 쓰지 않는 Mark는 지워주심 어떠한지,,,,,
근데 함수명 뒤에 공백 없이 괄호를 붙여서 쓰는데 이건 사람마다 다른 건지 궁금합니다.

아니,, 근데 손배야. 이런 식으로. 어? 이렇게까지 하셔야 됐냐고. 어? 지금 ? 어? 약간. 어? 정말.. 굉장히 멋지고.. 이런 식으로도 할 수 있구나 하고 많이 배웁니다.. 사실 일단 다양하게 컴포넌트를 빼는 걸 알았고요. 근데 첫 판에 와다다 알기에 넘 어렵기에 차근차근 공부해보도록 하겠습니다..👍🏻

내 코드는 쏘 큣 앤 타이니 앤 미세먼지스... ㅋ

i-colours-u · 2021-10-08T16:37:44Z

일단 오늘 안에 달려면 이 코드들 정말 모르겠어서 말이져 내 살아생전 처음 보는 코드들이라 ㅋㅋㅋㅋㅋㅋㅋㅋ 일단 내일로 미루겠습니다.
일단 제가 달 수 있는 것은 빈 칸을 주의하시면 좋을 것 같고요,, (나레이디... 첫 앱잼 코드리뷰에서 빈 칸으로 34개인가의 코드 리뷰를 받았읍..) 그리고.. 쓰지 않는 Mark는 지워주심 어떠한지,,,,, 근데 함수명 뒤에 공백 없이 괄호를 붙여서 쓰는데 이건 사람마다 다른 건지 궁금합니다.

--> 네 빈칸과 마크구문 조심할게요... 제가 마크구문을 템플릿으로 습관적으로 만들어 넣어서 고건 조심해보도록 하겟습니다... 그리고 함수명 뒤에 괄호 붙이는거 이것도 사실 code convention으로 정하기 나름인데... 루희님은 뭐가 더 보기 편할까요 하하 이건 다같이 논의 해봐야할 문제일것같네요!!

아니,, 근데 손배야. 이런 식으로. 어? 이렇게까지 하셔야 됐냐고. 어? 지금 ? 어? 약간. 어? 정말.. 굉장히 멋지고.. 이런 식으로도 할 수 있구나 하고 많이 배웁니다.. 사실 일단 다양하게 컴포넌트를 빼는 걸 알았고요. 근데 첫 판에 와다다 알기에 넘 어렵기에 차근차근 공부해보도록 하겠습니다..👍🏻
내 코드는 쏘 큣 앤 타이니 앤 미세먼지스... ㅋ

--> 제가 빈칸을 습관적으로 엄청 많이 써서 ^^,,, 네 앞으로 맞춰나갈게요 ..... 루희 선배님에게 거슬리지 않도록... 앞으로 써보도록 하겠습니다 하나둘셋 화이팅!

jane1choi

많이 배워갑니다🔥🔥
그리고 직관적인 네이밍이 왜 중요한지 알겠어요,,뭐하는 함수인지 뙇똭👍🏻
와..너무 많이해서 턱 아프네요..

jane1choi · 2021-10-09T13:45:59Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/Extension/press + UIButton.swift

+    if #available(iOS 14.0, *) {
+      self.addAction(UIAction { (action: UIAction) in closure()
+        self.clickedAnimation()
+      }, for: controlEvents)
+    } else {
+      @objc class ClosureSleeve: NSObject {
+        let closure:()->()
+        init(_ closure: @escaping()->()) { self.closure = closure }
+        @objc func invoke() { closure() }
      }
+      let sleeve = ClosureSleeve(closure)
+      self.addTarget(sleeve, action: #selector(ClosureSleeve.invoke), for: controlEvents)
+      objc_setAssociatedObject(self, "\(UUID())", sleeve, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)


구동영상 보고 왔는데 진촤 디테일 짱..👍🏻 배워갑니다🔥

jane1choi · 2021-10-09T14:02:53Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/UIComponents/CustomBlueButton.swift

+  private func setDefaultSetting(){
+    layer.cornerRadius = 8
+    self.titleLabel?.font = .boldSystemFont(ofSize: 16)
+    setState(isEnable: false)
+  }
+
+  func setButtonTitle(title : String){
+    self.setTitle(title, for: .normal)
+  }
+
+  func setState(isEnable : Bool){
+    self.isEnabled = isEnable
+    self.titleLabel?.textColor = isEnable ? .white : .gray
+    self.tintColor = isEnable ? .white : .gray
+    self.layer.backgroundColor = isEnable ? UIColor.mainBlue.cgColor : UIColor.lightGray.cgColor
+  }


요거는 버튼이 enable할 때와 아닐 때의 상태를 나눠서 세팅해주는거죠..?
버튼이나 텍스트필드 같이 반복되어 사용되는 것들을 클래스로 따로 분리해서 쓰시는 거 인상깊네요..진짜 최고..👍🏼👍🏼

커스텀한 버튼이다 보니까, enable/disable에 대한 스타일을 미리 지정해서 함수로 빼둔거에요!!

jane1choi · 2021-10-09T14:07:29Z

sopt_29th_Assignment/sopt_29th_Assignment/Screens/Account/SignUpCompleteVC.swift

+
+  private func setUIComponents(){
+    okButton.setButtonTitle(title: I18N.Components.ok)
+    okButton.setState(isEnable: true)


클래스에 버튼 상태에 따라 세팅해두신거 요기서 호출을 통해 enable 상태일 때의 값으로 세팅되도록 하는건가요??🤔

아 요거 setState(true)는 아무런 state 설정을 안했을때 버튼 기본값이 활성화된 상태로 두고 싶어서 그랬던건데..
요건 조금 지워도 되는 코드긴 하네여... 발견 감사합니다 ^__^

jane1choi · 2021-10-09T14:27:41Z

sopt_29th_Assignment/sopt_29th_Assignment/Screens/Account/SignUpVC.swift

+  private var isAllInformationFilled = false{
+    didSet{
+      signupButton.setState(isEnable: isAllInformationFilled)
+    }
+  }


didSet 활용하는 법 배워갑니다🔥🔥
훨씬 깔끔하네요👍🏻👍🏻

jumining

swift를 좀 더 배운 뒤에 다시 지훈님 코드 보러 오면 배울점이 더 많이 보일 것 같아요ㅎㅎ 다시 또 오겠습니다! 사용자를 위한 시각적 효과 애니메이션 넣으신거 인상깊어😀 세심한 코드 보면서 많이 알아갑니다! 볼 코드가 많은만큼 배울 코드가 많았어요..!

jumining · 2021-10-12T10:40:24Z

sopt_29th_Assignment/sopt_29th_Assignment/Screens/Account/SignUpVC.swift

+  private var isPasswordVisible = false{
+    didSet{
+      passwordTextField.isSecureTextEntry = !isPasswordVisible
+      setCheckboxStateImage()
+    }
+  }


구현 못했던 도전과제 부분인데 코드 보면서 배워갑니다!

jumining · 2021-10-12T11:01:55Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/Extension/press + UIButton.swift

+    if #available(iOS 14.0, *) {
+      self.addAction(UIAction { (action: UIAction) in closure()
+        self.clickedAnimation()
+      }, for: controlEvents)
+    } else {
+      @objc class ClosureSleeve: NSObject {
+        let closure:()->()
+        init(_ closure: @escaping()->()) { self.closure = closure }
+        @objc func invoke() { closure() }
      }
+      let sleeve = ClosureSleeve(closure)
+      self.addTarget(sleeve, action: #selector(ClosureSleeve.invoke), for: controlEvents)
+      objc_setAssociatedObject(self, "\(UUID())", sleeve, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)


애니메이션 효과 디테일 최고입니다..🤭저도 얼른 활용해보고 싶네요

jumining · 2021-10-12T11:07:09Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/UIComponents/CustomBlueButton.swift

+class CustomBlueButton : UIButton{
+
+  // Storyboards에서 지정할때 호출됨
+  required init(coder aDecoder: NSCoder) {
+    super.init(coder: aDecoder)!
+    setDefaultSetting()
+  }
+
+  override init(frame: CGRect){
+    super.init(frame: frame)
+    setDefaultSetting()
+  }
+
+  init() {
+    super.init(frame:CGRect.zero)
+    setDefaultSetting()
+  }
+
+  private func setDefaultSetting(){
+    layer.cornerRadius = 8
+    self.titleLabel?.font = .boldSystemFont(ofSize: 16)
+    setState(isEnable: false)
+  }
+
+  func setButtonTitle(title : String){
+    self.setTitle(title, for: .normal)
+  }
+
+  func setState(isEnable : Bool){


버튼같은 것도 반복되는 형태니까 클래스 사용해서 저렇게 하면 더 편하겠네요...! 좋은 코드 배워갑니다!

jumining · 2021-10-12T11:09:37Z

sopt_29th_Assignment/sopt_29th_Assignment/Global/UIComponents/CustomInputTextField.swift

+protocol CustomInputTextFieldDelegate{
+  func textfieldChanged(text : String)
+}


protocol을 처음봐서 구글링하고왔는데, 여기서도 꼭 써야하는건가요?? 안쓰면 안되는건지 궁금합니다!

제가 Delegate를 사용한 이유는 그
텍스트 ContainerView에서 텍스트가 변할때 VC에게 바로바로 간편하게 알리기 위해서 따로 Protocol을 작성해서 쓴거구요! 이후에 텍스트 ContainerView에서 다양한 이벤트들을 관리하기 위해 프로토콜을 사용한거지만, 다른식으로도 얼마든지 처리가 가능하기에... 자유롭게 쓰면 되는 부분일거같아요!!

i-colours-u added 2 commits October 8, 2021 22:58

✨ [add] 1차 과제 완성

180cfce

✨ [fix] 라벨 데이터 수정

f5058a6

YoonAh-dev reviewed Oct 8, 2021

View reviewed changes

heerucan reviewed Oct 8, 2021

View reviewed changes

jane1choi reviewed Oct 9, 2021

View reviewed changes

jumining reviewed Oct 12, 2021

View reviewed changes

i-colours-u merged commit 5703666 into main Oct 17, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/week1 UI #2

Feat/week1 UI #2

i-colours-u commented Oct 8, 2021 •

edited

Loading

Taehyeon-Kim commented Oct 8, 2021

i-colours-u commented Oct 8, 2021

Taehyeon-Kim commented Oct 8, 2021

YoonAh-dev Oct 8, 2021

i-colours-u Oct 8, 2021

YoonAh-dev Oct 8, 2021

Taehyeon-Kim Oct 8, 2021

hwangJi-dev Oct 8, 2021

seungchan2 Oct 9, 2021

heerucan Oct 8, 2021

i-colours-u Oct 8, 2021

jane1choi Oct 9, 2021

jumining Oct 12, 2021

heerucan Oct 8, 2021

i-colours-u Oct 8, 2021

i-colours-u Oct 8, 2021

heerucan commented Oct 8, 2021 •

edited

Loading

i-colours-u commented Oct 8, 2021

jane1choi left a comment

jane1choi Oct 9, 2021

jane1choi Oct 9, 2021

i-colours-u Oct 10, 2021

jane1choi Oct 9, 2021

i-colours-u Oct 10, 2021

jane1choi Oct 9, 2021

jumining left a comment

jumining Oct 12, 2021

jumining Oct 12, 2021

jumining Oct 12, 2021

jumining Oct 12, 2021

i-colours-u Oct 15, 2021 •

edited

Loading

Feat/week1 UI #2

Feat/week1 UI #2

Conversation

i-colours-u commented Oct 8, 2021 • edited Loading

📌 관련 이슈

📌 변경 사항 및 이유

📌 PR Point

📌 참고 사항

Taehyeon-Kim commented Oct 8, 2021

i-colours-u commented Oct 8, 2021

Taehyeon-Kim commented Oct 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

heerucan commented Oct 8, 2021 • edited Loading

i-colours-u commented Oct 8, 2021

jane1choi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jumining left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

i-colours-u Oct 15, 2021 • edited Loading

Choose a reason for hiding this comment

i-colours-u commented Oct 8, 2021 •

edited

Loading

heerucan commented Oct 8, 2021 •

edited

Loading

i-colours-u Oct 15, 2021 •

edited

Loading