[두번째 팀 프로젝트] 모바일 키오스크 3️⃣

 

오늘은 팀플 3일차!

각자 작업물 가지고 리뷰하는 시간을 가졌고 아래와 같은 피드백이 나왔다.

 

팀 프로젝트 1차 피드백

컬렉션뷰 셀간 간격 조정
이미지 사이즈 키우기
음료 이름 폰트 사이즈 키우기
가격 폰트 볼드 처리하기 & 3번째 줄 고정

 

---

수정 1.  CollectionView Cell 간격 수정

extension SBMenuController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 셀 크기 조정
        return CGSize(width: 117, height: 180)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        // 셀 위 아래 간격
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        // 셀 좌 우 간격
        return 0
    }
}

 

 

---

수정 2.  Text 사라짐

잘 보이던 텍스트가 다른 코드 업데이트 후 갑자기 사라졌다

찾아보니 TextColor가 안정해져 있었고 textColor = .black 넣어줬더니 보임.,..아 ...🤬

 

 

갑자기 또 사라짐 ㅋㅋ

이번엔 다크모드여서 그랬던 거였다

다크모드 단축키 shift + command + a

 

 

---

수정 3.  Lable 분리

음료이름 텍스트와 가격 텍스트에 따로 효과를 주기 위해 Label을 분리했다

추가로 정렬까지 맞춰주었다

 

 

2-1. 메뉴명: beverageLabel

    let beverageLabel: UILabel = {
        let bl = UILabel()
        bl.textAlignment = .center
        bl.textColor = .black
        bl.backgroundColor = .white
        bl.clipsToBounds = true
        bl.numberOfLines = 2
        bl.font = UIFont.systemFont(ofSize: 15)
        return bl
    }()

 

2-2. 가격: priceLabel

   let priceLabel: UILabel = {
        let pl = UILabel()
        pl.textAlignment = .center
        pl.backgroundColor = .white
        pl.textColor = .black
        pl.clipsToBounds = true
        pl.font = UIFont.systemFont(ofSize: 14, weight: .bold)  //볼드처리
        return pl
    }()

 

2-3. cell Text 분리

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "img", for: indexPath) as! SBMenuCell
        let menuItem = drinks[currentCategoryIndex][indexPath.item]
        cell.imgView.image = UIImage(named: menuItem.imageName)
        cell.beverageLabel.text = menuItem.menuName.replacingOccurrences(of: " ", with: "\n")
        //        cell.beverageLabel.text = "\(menuItem.menuName)"
        if let formattedPrice = formatPrice(menuItem.menuPrice) {
            cell.priceLabel.text = "\(formattedPrice)원"
        } else {
            cell.priceLabel.text = "\(menuItem.menuPrice)원"
        }
        cell.imageTapAction = {
            print(cell.beverageLabel.text!)
        }
        return cell
    }

 

💡 .font = UIFont.systemFont(ofSize: 14, weight: .bold)

→ 새롭게 알게된 코드인데 weight에 다양한 값을 줄 수 있다

 

💡 그리고 줄 넘어가면 자동으로 Height가 조절되는 코드도 알게됐는데 이번에는 규격이 정해져 있어 쓰지는 않았음!!

1. beverageLabel.numberOfLines = 0으로 설정하여 여러 줄 텍스트를 허용합니다.
2. beverageLabel의 make.left와 make.right 제약 조건을 설정하되, make.bottom 제약 조건은 설정하지 않습니다. 이렇게 하면 높이가 텍스트 내용에 맞게 자동으로 조절됩니다.
3. 텍스트 설정 후 contentView.layoutIfNeeded()를 호출하여 레이아웃을 업데이트합니다.

 

---

수정 4.  Label Constraints 설정 & 줄 바꿈 & 숫자에 콤마 넣기

레이블 예쁘게 만들어 주고 싶어서 간격 설정하고

줄 바꿈도 띄어쓰기 기준으로 들어갈 수 있게 코드를 수정했다

 

그리고 눈에 거슬리던 숫자에 콤마도 추가해주었고 콤마는 String 타입에서만 가능한 것 같아서

가격을 Int에서 String 타입으로 형변환해주었다

 

코드는 아래에 순서대로 적어둠

        beverageLabel.snp.makeConstraints {
            $0.top.equalTo(imgView.snp.bottom).offset(0)
            $0.leading.equalToSuperview().inset(10)
            $0.trailing.equalToSuperview().inset(10)
        }
        
        priceLabel.snp.makeConstraints {
            $0.bottom.equalToSuperview().offset(-5)
            $0.leading.equalToSuperview().inset(10)
            $0.trailing.equalToSuperview().inset(10)
            $0.height.equalTo(20)
        }

 

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "img", for: indexPath) as! SBMenuCell
        let menuItem = drinks[currentCategoryIndex][indexPath.item]
        cell.imgView.image = UIImage(named: menuItem.imageName)
        cell.beverageLabel.text = menuItem.menuName.replacingOccurrences(of: " ", with: "\n") //줄바꿈 코드
        if let formattedPrice = formatPrice(menuItem.menuPrice) {
            cell.priceLabel.text = "\(formattedPrice)원"
        } else {
            cell.priceLabel.text = "\(menuItem.menuPrice)원"
        }
        cell.imageTapAction = {
            print(cell.beverageLabel.text!)
        }
        return cell
    }

    // priceLabel Text에 , 추가하는 메서드
    private func formatPrice(_ price: String) -> String? {
        guard let priceNumber = Double(price) else { return price }
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .decimal
        return numberFormatter.string(from: NSNumber(value: priceNumber))
    }

 

---

수정 5.  CollectionView 하단 끊기는 문제

bottom 관련 Constraints 다 삭제함

        // 컬렉션뷰(메뉴 리스트) Constraints
        collectionView.snp.makeConstraints {
            $0.top.equalTo(segmentControl.snp.bottom).offset(20)
            $0.leading.trailing.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20))
            $0.height.equalTo(500)
        }

 

---

 

자고싶다 힘들다