[Design] #5-식당 상세 메뉴 UI구현 #21

0lynny · 2022-07-10T18:33:19Z

🔥 Pull requests

⛳️ 작업한 브랜치

feature/[Design] 식당 상세 메뉴 UI 구현 #5

👷 작업한 내용

메뉴부분의 메뉴UI, 메뉴부분의 영양정보 UI
CollectionView 재사용
SegmentedControl로 메뉴/영양정보 View 바꾸기

🚨 참고 사항

SegmentControl 커스텀은 디자인 확정되면 작업하겠습니다!
UIView의 특정 부분의 cornerRadius 주는 Extension을 만들어두었습니다 (MenuView, MenuDetailView)
헬푸미픽인경우와 아닌경우의 Cell UI의 변동은 디자인 확정 후 작업예정입니다!

📸 스크린샷

기능	스크린샷
메뉴

📟 관련 이슈

Resolved: [Design] 식당 상세 메뉴 UI 구현 #5

헬푸미픽, 메뉴 샘플 이미지 에셋 추가

yungu0010

영베야 고생했다~!!🫶

yungu0010 · 2022-07-10T18:42:10Z

HealthFoodMe/HealthFoodMe/Global/Literals/StringLiterals.swift

+    struct Detail {
+        struct Menu {
+            static let segmentTitle = ["메뉴", "영양정보"]
+            static let kcalUnit = "kcal"
+            static let standard = "1인분 (50g)"
+            static let carbohydrate = "탄수화물"
+            static let protein = "단백질"
+            static let fats = "지방"
+        }
+    }


p5;

리터럴 사용 좋네여!!👍

yungu0010 · 2022-07-10T18:47:53Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+        return view
+    }()
+
+    let pickImageView: UIImageView = {


p3;

이 파일에서 특정 컴포넌트는 private을 쓰지 않은 이유가 있는지 궁금해요!

MenuCellCVC에서 setData를 해주고 있어서 바뀌는 부분은 Public으로 해주었습니다!

L-j-h-c

첫 코드베이스로 어려운 시도였을텐데 깔끔하게 잘 해주셨네요~~ 고생 많으셨습니다! 잘해잘해~~
처음이라 컨벤션 관련 문제 최대한 언급했으니... 다른 부분 함께 확인해서 다시 푸시해주세요~

L-j-h-c · 2022-07-10T18:41:21Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Cells/MenuCellCVC.swift

+    func changeCustomView(isMenu: Bool) {
+        if isMenu {
+            menuDetailView.isHidden = true
+            menuView.isHidden = false
+        } else {
+            menuDetailView.isHidden = false
+            menuView.isHidden = true
+        }
+    }


p5;

커스텀뷰 이용해서 짜느라 수고 많으셨네요~ 깔끔하게 잘하셨다...

L-j-h-c · 2022-07-10T18:43:04Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/VC/MenuTabVC.swift

+    private lazy var headerView = HeaderView()
+    private lazy var menuView = MenuView()
+    private lazy var menuDetailView = MenuDetailView()


p2;

아래 두줄은 더이상 사용되지 않으니 지워주시고~
위의 lazy 키워드도 의미가 없다면 지워주셔도 될 것 같아요!

L-j-h-c · 2022-07-10T18:43:40Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/VC/MenuTabVC.swift

+    }
+
+    private func setLayout() {
+        view.addSubview(headerView)


p4;

addSubViews로 바꿔주세요~

L-j-h-c · 2022-07-10T18:44:34Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/VC/MenuTabVC.swift

+    }
+
+    private func setUI() {
+        menuCV.showsVerticalScrollIndicator = false


p3;

위쪽에서 클로저로 cv 생성할 때 cv.showsVerticalScrollIndicator = false로 함께 설정해줄 수 있어요!

L-j-h-c · 2022-07-10T18:45:02Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/VC/MenuTabVC.swift

+        }
+    }
+
+    private func setCollectionView() {


p4;

이부분은 reegisterCell로 해주세용~~! 컨벤션 ㅎㅎ

L-j-h-c · 2022-07-10T18:49:17Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/HeaderView.swift

+        switch sender.selectedSegmentIndex {
+        case 0:
+            print("메뉴")
+            delegate?.controlSegement()
+        case 1:
+            print("영양정보")
+            delegate?.controlSegement()
+        default:
+            break
+        }


p2;

현재 index 값이 어디에서도 사용되지 않고 있죠? 여기서는 항상 controlSegment()메서드를 호출해주기만 하면 될 것 같아요!

L-j-h-c · 2022-07-10T18:50:09Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+        sv.addArrangedSubview(cAmountLabel)
+        sv.addArrangedSubview(cTextLabel)


p4;

요기도 마찬가지로 한번에 추가해줄 수 있답니당!

L-j-h-c · 2022-07-10T18:50:59Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+    private let pTextLabel: UILabel = {
+        let lb = UILabel()
+        lb.text = I18N.Detail.Menu.protein
+        lb.textColor = .darkGray


p4;

요런 부분 스타일가이드 확인해서 프로젝트에 세팅된 컬러로 지정해주세요~

L-j-h-c · 2022-07-10T18:51:32Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+    private func setUI() {
+
+    }


p5;

필요없으면 지워주셔도 됩니당~

L-j-h-c · 2022-07-10T18:53:05Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuView.swift

+extension UIView {
+    func roundCorners(cornerRadius: CGFloat, maskedCorners: CACornerMask) {
+        clipsToBounds = true
+        layer.cornerRadius = cornerRadius
+        layer.maskedCorners = CACornerMask(arrayLiteral: maskedCorners)
+    }
+}


p3;

요부분은 UIView 익스텐션에 함께 정리해주세요!

i-colours-u

고생하셨습니다 ~ ~~ ~!

i-colours-u · 2022-07-11T11:17:02Z

HealthFoodMe/HealthFoodMe/Global/Extension/UI/UIView+.swift

+        let view = Bundle.main.loadNibNamed(view.className, owner: self, options: nil)?.first as! UIView
+        view.frame = bounds
+        view.clipsToBounds = true
+        addSubview(view)


p5; 한번만 스페이스 확인해주세여~!

i-colours-u · 2022-07-11T11:18:57Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Cells/MenuCellCVC.swift

+        if isMenu {
+            menuDetailView.isHidden = true
+            menuView.isHidden = false
+        } else {
+            menuDetailView.isHidden = false
+            menuView.isHidden = true


p5;

menuDetailView.isHidden = isMenu menuView.isHidden = !isMenu

도 가능하겠네요!!

i-colours-u · 2022-07-11T11:20:35Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Cells/MenuCellCVC.swift

+        if menuData.isPick == true {
+            menuDetailView.pickImageView.image = UIImage(named: "icn_pick")
+        } else {
+            menuDetailView.pickImageView.image = .none


menuDetailView.pickImageView.image = menuData.isPick ? UIImage(named: "icn_pick") : .none도 가능하겠네여!

i-colours-u · 2022-07-11T11:21:53Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/VC/MenuTabVC.swift

+        let width = UIScreen.main.bounds.width
+
+        let cellWidth = width * (335/375)


p5; 요건 한번 나중에 ScreenContants 로 screenWidth, screenHeight 따로 빼도 되겠다 ! !

i-colours-u · 2022-07-11T11:22:47Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/ViewModel/MenuDataModel.swift

+        MenuDataModel(restaurantID: "1", isPick: true, memuImageURL: "", menuName: "리코타치즈샐러디", menuPrice: 6900,
+            menuKcal: 297, carbohydrates: 24, protein: 12, fat: 14),
+        MenuDataModel(restaurantID: "2", isPick: true, memuImageURL: "", menuName: "콥샐러디", menuPrice: 6300,


p5;
나중에 서버 붙으면 지워주세요!!

i-colours-u · 2022-07-11T11:23:07Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+
+final class MenuDetailView: UIView {
+
+    // MARK: - Properties


p5; 안쓰면 MARK문 지워주세요 ! !

i-colours-u · 2022-07-11T11:24:40Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+    private let pTextLabel: UILabel = {
+        let lb = UILabel()
+        lb.text = I18N.Detail.Menu.protein
+        lb.textColor = .helfmeGray1
+        lb.font = .NotoRegular(size: 9)
+        return lb
+    }()
+
+    private lazy var proteinStackView: UIStackView = {
+        let sv = UIStackView()


요건 protein이나 p 둘 중 하나로 통일하면 좋을것 같아요! p5;

i-colours-u · 2022-07-11T11:25:06Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuDetailView.swift

+        titleLabel.snp.makeConstraints { make in
+            make.top.equalTo(pickImageView.snp.bottom).offset(8)
+            make.leading.equalToSuperview().offset(28)
+


한줄 붙여주세요 ! !

i-colours-u · 2022-07-11T11:25:20Z

HealthFoodMe/HealthFoodMe/Presentation/Home/MenuTabScene/Views/MenuView.swift

+//
+
+import UIKit
+


p5;
여기서도 한줄 붙여주세요!

L-j-h-c

코리 반영 고생하셨습니다.. 컨플릭트 해결하고 머지해주세요

0lynny added 8 commits July 9, 2022 02:51

[ADD] Health-Food-Me#5-이미지 에셋 추가

efff670

헬푸미픽, 메뉴 샘플 이미지 에셋 추가

[Design] Health-Food-Me#5-영양정보 View UI

2f84478

[Design] Health-Food-Me#5-메뉴 View UI

e21c2ed

[Design] Health-Food-Me#5-CollectionView UI

aa5d736

[Add] Health-Food-Me#5-샘플 DataModel 추가

e40245a

[Design] Health-Food-Me#5-SegmentControl UI

727976b

[Design] HeaderView + CollectionView UI

ddee76b

[Design] Health-Food-Me#5-segmentControl로 셀 변경

75f7693

0lynny added Design UI 및 Layout 작업 🤖Lyn labels Jul 10, 2022

0lynny requested review from i-colours-u, yungu0010, 0inn and L-j-h-c July 10, 2022 18:33

0lynny self-assigned this Jul 10, 2022

yungu0010 reviewed Jul 10, 2022

View reviewed changes

L-j-h-c reviewed Jul 10, 2022

View reviewed changes

[Refactor] Health-Food-Me#5-코드 리뷰 반영

84bcafa

i-colours-u approved these changes Jul 11, 2022

View reviewed changes

[Refactor] Health-Food-Me#26-코드 리뷰 반영

ad7d664

L-j-h-c approved these changes Jul 12, 2022

View reviewed changes

0lynny added 2 commits July 12, 2022 18:46

[Chore] Health-Food-Me#5 - 불필요한 파일 삭제

6af4fb9

[Merge] Health-Food-Me#5 - 컨플릭트 해결

82123ee

0lynny merged commit 249c83f into Health-Food-Me:develop Jul 12, 2022

0lynny deleted the feature/#5 branch July 12, 2022 14:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Design] #5-식당 상세 메뉴 UI구현 #21

[Design] #5-식당 상세 메뉴 UI구현 #21

0lynny commented Jul 10, 2022

yungu0010 left a comment

yungu0010 Jul 10, 2022

yungu0010 Jul 10, 2022 •

edited

Loading

0lynny Jul 10, 2022

L-j-h-c left a comment •

edited

Loading

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

L-j-h-c Jul 10, 2022

i-colours-u left a comment

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

i-colours-u Jul 11, 2022

L-j-h-c left a comment

		sv.addArrangedSubview(cAmountLabel)
		sv.addArrangedSubview(cTextLabel)

		let width = UIScreen.main.bounds.width

		let cellWidth = width * (335/375)

		//

		import UIKit

[Design] #5-식당 상세 메뉴 UI구현 #21

[Design] #5-식당 상세 메뉴 UI구현 #21

Conversation

0lynny commented Jul 10, 2022

🔥 Pull requests

🚨 참고 사항

📸 스크린샷

📟 관련 이슈

yungu0010 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yungu0010 Jul 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L-j-h-c left a comment • edited Loading

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

i-colours-u 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L-j-h-c left a comment

Choose a reason for hiding this comment

yungu0010 Jul 10, 2022 •

edited

Loading

L-j-h-c left a comment •

edited

Loading