# 스텝 투 피알

안녕하세요! 올라프 ☃️ @1Consumption
만국박람회 Step 2도 잘 부탁드립니다!!
AutoLayout은 Step 3 구현 사항이라서 아직 구현이 안되어있습니다...
어지러워도 너그럽게 봐주시면 감사하겠습니다!! 🙌🏼

## [고민했던 점]
#### DTO Type의 프로퍼티 접근 제어자
- DTO의 프로퍼티의 접근 제어자를 `private(set)`과 `let` 두가지 중에서 무엇을 사용해야 할지 고민했습니다.
- `private(set)`의 경우 내부에서는 변경이 가능하나 `let`의 경우 이니셜라이징 이후 내/외부에서 변경이 불가능하기 때문에 DTO Type의 프로퍼티 접근 제어자는 `let`으로 선언하는 것이 더 올바르다고 생각해 `let`을 사용하였습니다.

#### Main 화면 구성시, TextView 사용 vs label 사용
- 첫번째 화면인 Main 화면에서, ExpositionUniverselle DTO의 장문의 text인 description을 구현하기 위한 UI 구성요소를 구성함에 있어서 `TextView`와 `Label` 사용에 대해서 고민했습니다.
`Apple HIG` 의 각 문서와 [Displaying Text Content in iOS](https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/UsingTextClasses/UsingTextClasses.html)를 참고하였습니다. 크게 `label`은 소량의 text를 보여주며 편집할 수 없는 점과, `TextView` 는 다량의 text를 보여주며 편집와 선택이 가능하다는 점이 있었습니다.
저희는 다량의 text를 보여주는 것을 우선순위로 생각하여 `TextView` 를 선택하였으며 편집기능은 선택을 해제하였습니다.

#### Segue를 통한 화면 전환시 데이터 전송.
- Segue를 이용하여 스토리보드에서 한국의 출품작을 보여주는 TableView의 Cell을 클릭하면, 클릭된 Cell의 해당하는 출품작의 상세 정보를 보여주는 View로 화면전환이 되게 구현하였습니다. `prepare()`메서드를 오버라이드하여 데이터를 전송할때, `sender`로 전달되는 상세 정보를 나타내는 데이터가 cell에는 없기 때문에 상세 정보를 보여주는 View에 올바른 데이터를 전송하지 못하는 문제가 발생하였습니다.
- TableView Delegate의 메서드인 `tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)`를 사용해 상세 정보를 보고싶은 Cell을 선택하면 선택된 셀의 row에 해당하는 Item을 `performSegue`메서드의 `sender`로 전달해 주어서 해당 문제를 해결하였습니다.

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    self.performSegue(withIdentifier: "ShowItemDetail", sender: expositionItems[indexPath.row])
}

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    guard let nextViewController: ExpositionItemDetailViewController = segue.destination as? ExpositionItemDetailViewController,
          let item: ExpositionUniverselleItem = sender as? ExpositionUniverselleItem else {
        return
    }
    
    nextViewController.item = item
}

#### 메인페이지 이동버튼
|Before|After|
|:---:|:---:|
|<img src="https://i.imgur.com/op4N0rw.gif" width="200" height="400"/>|<img src="https://i.imgur.com/wHQ3Eqn.gif" width="200" height="400"/>|

showKoreanItemListButton.titleLabel?.text = "한국의 출품작 보러가기"

- MainVC 내부에서 다음 화면으로 이동하기 위해 해당 코드를 이용해 원하는 text를 구현을 하였으나, 버튼을 클릭하면 버튼을 클릭한 후와 화면 이동 후 다시 Main 화면으로 되돌아왔을 때 지정한 text가 아닌 버튼이 가지고 있는 원래의 text인 "Button" 이 보여지는 문제가 있었습니다.

showKoreanItemListButton.setTitle("한국의 출품작 보러가기", for: .normal)

- Button의 State가 `.nomal`일때의 Title이 "Button"이여서 발생하는 것으로 파악했으며, Button의 `titleLabel`의 `text`를 직접 바꾸는 방식이 아닌 `setTitle(_,for:)`메서드를 사용하여 버튼의 State에 따른 Title을 지정해줘서 해결하였습니다.

## [조언이 필요한 점]

#### 버튼 Title
- 저희가 [고민했던 점]에 기재했던 고민들 중에, 마지막 고민인 '메인페이지 이동버튼'을 살펴봐주시면, `showKoreanItemListButton.titleLabel?.text = "한국의 출품작 보러가기"`로 Title을 설정해도 처음 화면을 실행했을 때에는 Title이 "한국의 출품작 보러가기"로 변경되어 있는 것을 볼 수 있었습니다.
하지만 DisAppear후에는 nomal State Title인 "button"으로 변경되었습니다. ViewDidLoad시에 Appear의 동작과 DisAppear후에 Appear의 동작이 서로 다른지에 대한 올라프의 생각이 궁금합니다...!

---

# 스텝 3 피알

안녕하세요! 올라프 ☃️ @1Consumption
만국박람회 Step3를 구현해보았습니다!🤓
AutoLayout 코드 구현, Dynamic Type 적용, 각 화면 방향 설정 등 새로운 개념을 적용하는 과정에서 미흡한 점이 많이 있습니다. 피드백 잘 부탁드립니다🙌🏼🙌🏼

## [고민했던 점]
#### Label 설정과 Dynamic Type
- MainView의 Label의 font, textAlignment, numberOfLines, lineBreakMode 등의 Label을 설정을 할 때, 코드를 중복해서 작성하게 되었습니다.
- 중복된 코드를 줄이고자 Inheritance 및 Extention을 활용하여 중복된 코드를 줄였습니다.

#### Main VC의 Label의 서로다른 Font 적용
- `range`의 범위를 어떻게 지정해주어야 할지에 대한 고민이 있었고, String Type의 메서드인 `prefix`를 사용해서 지정해 줄 수 있었습니다.
- 기본적인 Font를 Dynamic Type으로 설정한 후, 원하는 범위의 attributedText를 지정해줬습니다. 하지만 attributedText가 지정된 범위 이외의 Text는 Dynamic Type이 아닌 처음 설정된 Font로 고정되는 오류가 발생했습니다.
- 전체 범위의 attributedText를 지정해 준 후 원하는 범위의 attributedText를 추가적으로 지정해 줘서 이를 해결하였습니다.

#### Main VC의 Title Label 줄바꿈
- Title Label을 줄바꿈하기 위해서 정규식 사용을 고민 하였지만, 너무 무거운 내용이라고 생각되어 다른 방법을 고민했습니다.
- 고민 끝에, Title Label의 text에서 줄바꿈 하고자 하는 부분인 '('의 index를 구한 후, `inset(_, at:)`메서드를 이용해서 원하는 index 부분에 '\n'를 insert 했습니다.

#### 각 화면의 고유 방향 지정
- AppDelegate에서 화면 방향 고정하는 방법도 있는 것을 알았지만, 아직 AppDelegate에 대한 공부가 부족하다고 생각했습니다. 그래서 View Controller의 `supportedInterfaceOrientations` 프로퍼티를 이용해 화면 방향을 고정하도록 구현하였습니다.

## [조언이 필요한 점]

#### 2번째 화면에서 가로 모드로 전환 후 첫번째 화면으로 전환 시 세로모드가 안되는 오류

<img src="https://i.imgur.com/zIVZ6X9.gif" width="300" height="400"/>

- Main View는 Nevigation Controller의 `supportedInterfaceOrientations` 프로퍼티를 사용하여서 Orientation을 `portrait`로 설정하였습니다. 하지만 두번째 화면에서 가로로 화면 전환 후 Main View로 다시 화면을 전환하게 되면 위의 화면과 같은 오류가 발생하였습니다. 어떻게 해결해야 될지 잘 모르겠습니다~!😵‍💫