팀프로젝트1 [주문 앱 만들기(3) - View분리, Merge]

⎮ 팀 프로젝트 3일차

    이제 버튼 만들기는 끝났고, CollectionView를 띄울 수 있도록 데이터를 연결해야한다.

   이 과정을 어떻게 해야할지 생각해보고 버튼에 맞게 View가 잘 뜨도록 연결해주어야 한다.      

 

⎮ ViewController에서 View 분리하기

    프로젝트를 Merge하기에 앞서 ViewController의 사용을 최소화하자는 의견이 있어서 ViewController를 분리하기로 했다

  ViewController에서 View를 분리하는 방법은 어렵지만은 않다. View를 그리는 부분만 뗀다고 생각하면 된다.

 

   - ViewController.swift

class ViewController: UIViewController {

    let topMenuBar = TopMenuBar()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view = topMenuBar
        // Do any additional setup after loading the view.
    }
}

    

   - TopMenuBar.swift

class TopMenuBar: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(segmentControl)
        setUpSegmentControl()

        self.addSubview(underLineBar)
        setUpUnderLineBar()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    let segmentControl: UISegmentedControl = {
        let segment = UISegmentedControl()

        // segment의 항목을 Insert
        segment.insertSegment(withTitle: "피규어", at: 0, animated: true)
        segment.insertSegment(withTitle: "티셔츠", at: 1, animated: true)
        segment.insertSegment(withTitle: "키링", at: 2, animated: true)
        segment.insertSegment(withTitle: "베개", at: 3, animated: true)

        // segment의 기본 인덱스 설정
        segment.selectedSegmentIndex = 0

        // seleted segment의 font 세팅
        segment.setTitleTextAttributes([
            NSAttributedString.Key.foregroundColor: UIColor(red: 250/255, green: 67/255, blue: 89/255, alpha: 1.0),
            NSAttributedString.Key.font: UIFont(name: "GmarketSansBold", size: 16) ?? UIFont.systemFont(ofSize: 16)
        ], for: .selected)

        // non-selected segment의 font 세팅
        segment.setTitleTextAttributes([
            NSAttributedString.Key.foregroundColor: UIColor.gray,
            NSAttributedString.Key.font: UIFont(name: "GmarketSansBold", size: 16) ?? UIFont.systemFont(ofSize: 16)
        ], for: .normal)

        // segment가 선택될 때의 색상, 현재 미적용
        segment.selectedSegmentTintColor = .clear

        // segment의 BackgroundImage를 미적용
        segment.setBackgroundImage(UIImage(), for: .normal, barMetrics: .default)

        // segment의 DivideImage를 미적용
        segment.setDividerImage(UIImage(), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
        return segment
    }()

    // segmentControl의 제약, addTarget
    func setUpSegmentControl() {
        segmentControl.snp.makeConstraints {
            $0.top.equalTo(safeAreaLayoutGuide).offset(72)
            $0.leading.equalTo(safeAreaLayoutGuide).offset(16)
            $0.trailing.equalTo(safeAreaLayoutGuide).offset(-16)
            $0.height.equalTo(36)
        }

        segmentControl.addTarget(self, action: #selector(changeUnderBarPosition(_:)), for: .valueChanged)
    }


    let underLineBar: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor(red: 250/255, green: 67/255, blue: 89/255, alpha: 1.0)
        return view
    }()

    @objc
    func changeUnderBarPosition(_ segment: UISegmentedControl) {
        let segmentCount = segmentControl.numberOfSegments

        let segmentWidth = segmentControl.bounds.width / CGFloat(segmentCount)

        let leadingDistance = CGFloat(segmentControl.selectedSegmentIndex) * segmentWidth

        UIView.animate(withDuration: 0.2) {
            self.underLineBar.snp.updateConstraints {
                $0.leading.equalTo(self.segmentControl.snp.leading).offset(leadingDistance)
            }
            self.segmentControl.layoutIfNeeded()
        }
    }

    func setUpUnderLineBar() {
        let bar = underLineBar

        bar.snp.makeConstraints {
            $0.top.equalTo(segmentControl.snp.bottom).offset(7)
            $0.width.equalTo(92)
            $0.height.equalTo(2)
            $0.leading.equalTo(segmentControl.snp.leading)
        }
    }
}

 

⎮ GitHub에서 Conflict 해결하기

    Merge를 할 때 Conflict를 최소화하려고 ViewController를 빼고 커밋을 했지만,

   뭔가 Conflict를 해결해봐야 성장할 것 같다는 생각이 들어 팀원들과 함께 Conflict를 해결해보자고 했다.

   다시 ViewController를 포함해서 커밋을 하고 Merge를 시도했더니 역시 Conflict가 났다.

 

        이런 화면을 마주하면 Conflict를 해결해야만 Merge할 수 있다.

    GitHub에서 이런 화면을 마주한 것이 처음이라 어떤 버튼을 눌러야하는지 몰라 모두 당황했다.

   다같이 화면을 보면서 얘기를 나누다가 규칙을 발견할 수 있었다.

 

    <<<< featOrderTable(이 부분이 Branch)를 설명해주는 것이고,

    ====을 기준으로 위 아래로 나눠 어떤 부분이 다른지 보여주는 것이다.

 

    코드를 정리하고 <<<< 와 ==== 같이 새롭게 생성된 기호를 지우고 나니

  우측 상단에 있는 Mark as resolved 버튼이 활성화가 된다.