diff --git a/Oliveyoung-iOS/Oliveyoung-iOS.xcodeproj/project.pbxproj b/Oliveyoung-iOS/Oliveyoung-iOS.xcodeproj/project.pbxproj index 39a6705..2720c47 100644 --- a/Oliveyoung-iOS/Oliveyoung-iOS.xcodeproj/project.pbxproj +++ b/Oliveyoung-iOS/Oliveyoung-iOS.xcodeproj/project.pbxproj @@ -7,9 +7,10 @@ objects = { /* Begin PBXBuildFile section */ + 3709E087292A394300222F3E /* ProductModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3709E086292A394300222F3E /* ProductModel.swift */; }; + 37A27091292B7CE8008855D0 /* PretendardVariable.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 37A27090292B7CE8008855D0 /* PretendardVariable.ttf */; }; 37E0023329262A1A00283615 /* TagCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37E0023229262A1A00283615 /* TagCollectionViewCell.swift */; }; 37E0023529262A2800283615 /* ProductCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37E0023429262A2800283615 /* ProductCollectionViewCell.swift */; }; - 3709E087292A394300222F3E /* ProductModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3709E086292A394300222F3E /* ProductModel.swift */; }; DD0FC2962924C38500ACF342 /* DetailViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD0FC2952924C38500ACF342 /* DetailViewController.swift */; }; DD0FC2982924C39800ACF342 /* SearchResultViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD0FC2972924C39800ACF342 /* SearchResultViewController.swift */; }; DD0FC29A2924C39E00ACF342 /* SearchViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = DD0FC2992924C39E00ACF342 /* SearchViewController.swift */; }; @@ -44,6 +45,7 @@ /* Begin PBXFileReference section */ 3709E086292A394300222F3E /* ProductModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductModel.swift; sourceTree = ""; }; + 37A27090292B7CE8008855D0 /* PretendardVariable.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = PretendardVariable.ttf; sourceTree = ""; }; 37E0023229262A1A00283615 /* TagCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TagCollectionViewCell.swift; sourceTree = ""; }; 37E0023429262A2800283615 /* ProductCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductCollectionViewCell.swift; sourceTree = ""; }; DD0FC2952924C38500ACF342 /* DetailViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DetailViewController.swift; sourceTree = ""; }; @@ -91,9 +93,18 @@ /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ + 37A2708F292B7CE8008855D0 /* variable */ = { + isa = PBXGroup; + children = ( + 37A27090292B7CE8008855D0 /* PretendardVariable.ttf */, + ); + path = variable; + sourceTree = ""; + }; DD1C74CB292B56D800E3E7A2 /* Fonts */ = { isa = PBXGroup; children = ( + 37A2708F292B7CE8008855D0 /* variable */, DD1C74D3292B57B300E3E7A2 /* Pretendard-Black.otf */, DD1C74CE292B57B300E3E7A2 /* Pretendard-Bold.otf */, DD1C74D0292B57B300E3E7A2 /* Pretendard-ExtraBold.otf */, @@ -339,6 +350,7 @@ DD1C74D9292B57B300E3E7A2 /* Pretendard-ExtraBold.otf in Resources */, DD1C74D8292B57B300E3E7A2 /* Pretendard-SemiBold.otf in Resources */, DD1C74D6292B57B300E3E7A2 /* Pretendard-Thin.otf in Resources */, + 37A27091292B7CE8008855D0 /* PretendardVariable.ttf in Resources */, DD1C74DD292B57B300E3E7A2 /* Pretendard-Light.otf in Resources */, DDC28C742923234D003B87BB /* Colors.xcassets in Resources */, DD1C74DC292B57B300E3E7A2 /* Pretendard-Black.otf in Resources */, diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/Contents.json b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/Contents.json new file mode 100644 index 0000000..a4cae5f --- /dev/null +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "kakaoTalkPhoto202211121716211.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "kakaoTalkPhoto202211121716211@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "kakaoTalkPhoto202211121716211@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211.png new file mode 100644 index 0000000..0d9f47f Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211@2x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211@2x.png new file mode 100644 index 0000000..d5195a1 Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211@2x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211@3x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211@3x.png new file mode 100644 index 0000000..9d8492b Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/detailView.imageset/kakaoTalkPhoto202211121716211@3x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Contents.json b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Contents.json new file mode 100644 index 0000000..da1ce29 --- /dev/null +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "Shape.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "Shape@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "Shape@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape.png new file mode 100644 index 0000000..7d1d82d Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape@2x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape@2x.png new file mode 100644 index 0000000..b67231b Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape@2x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape@3x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape@3x.png new file mode 100644 index 0000000..b65041b Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/info.imageset/Shape@3x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/Contents.json b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/Contents.json new file mode 100644 index 0000000..c5965d1 --- /dev/null +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "searchIcon12X12.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "searchIcon12X12@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "searchIcon12X12@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12.png new file mode 100644 index 0000000..bb0f4fb Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12@2x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12@2x.png new file mode 100644 index 0000000..765443c Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12@2x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12@3x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12@3x.png new file mode 100644 index 0000000..aaefb20 Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/searchIcon_green12X12.imageset/searchIcon12X12@3x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/Contents.json b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/Contents.json new file mode 100644 index 0000000..777dfa0 --- /dev/null +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "component14.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "component14@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "component14@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14.png new file mode 100644 index 0000000..42f7a0c Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14@2x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14@2x.png new file mode 100644 index 0000000..4a9c6ab Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14@2x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14@3x.png b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14@3x.png new file mode 100644 index 0000000..f465513 Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Assets/Assets.xcassets/star14X14.imageset/component14@3x.png differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Fonts/variable/PretendardVariable.ttf b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Fonts/variable/PretendardVariable.ttf new file mode 100644 index 0000000..e08ea68 Binary files /dev/null and b/Oliveyoung-iOS/Oliveyoung-iOS/Resource/Fonts/variable/PretendardVariable.ttf differ diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/DetailViewController.swift b/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/DetailViewController.swift index 4257960..f3cd874 100644 --- a/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/DetailViewController.swift +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/DetailViewController.swift @@ -49,115 +49,146 @@ final class DetailViewController: UIViewController { private let availableStoreContainerView = UIView() private let tabbarButtonContainerView = UIView() private let productDetailContainerView = UIView() - private let productRecommandContainerView = UIView() + private let recommandContainerView = UIView() private let relatedProductContainerView = UIView() private let bottomContainerView = UIView() + private let productUnderlineView = UIView() + private let deliveryUnderlineView = UIView() + private let availableUnderlineView = UIView() + private let productDetailUnderlineView = UIView() + private let recommandUnderlineView = UIView() + private let relatedUnderlineView = UIView() + private let availableGreenUnderlineView = UIView() + private let separatelineView = UIView() + private let backButton = UIButton() private let searchButton = UIButton() private let cartButton = UIButton() private let brandButton = UIButton() + private let infoButton = UIButton() + private let overnightShippingButton = UIButton() private let heartButton = UIButton() private let purchaseButton = UIButton() - private let brandLabel = UILabel().then { - $0.font = .bodyBody1 - $0.textColor = 0x2f2f2f.color - } + private let brandLabel = UILabel().then { + $0.font = .bodyBody1 +// $0.font = .systemFont(ofSize: 12, weight: .regular) + $0.textColor = 0x2f2f2f.color + } - private let productLabel = UILabel().then { - $0.font = .tittleDisplay1 - $0.textColor = 0x2f2f2f.color + private let productLabel = UILabel().then { + $0.font = .tittleDisplay1 + $0.textColor = 0x2f2f2f.color + $0.lineBreakMode = .byWordWrapping + $0.numberOfLines = 0 + + } - } + private let priceLabel = UILabel().then { + $0.font = .tittleDisplay1 + $0.textColor = 0x2f2f2f.color + } - private let priceLabel = UILabel().then { - $0.font = .tittleDisplay1 - $0.textColor = 0x2f2f2f.color - } + private let wonLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let originalPriceLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0xebebeb.color } + private let originalPriceLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0xebebeb.color } - private let discountLabel = UILabel().then { - $0.font = .tittleDisplay1 - $0.textColor = 0xf87171.color - } + private let discountLabel = UILabel().then { + $0.font = .tittleDisplay1 + $0.textColor = 0xf87171.color + } - private let rateLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let rateLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let rateCountLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0xebebeb.color - } + private let rateCountLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0xebebeb.color + } - private let productTypeLabel = UILabel().then { - $0.font = .bodyBody4 - $0.textColor = 0x2f2f2f.color - } + private let productTypeLabel = UILabel().then { + $0.font = .bodyBody4 + $0.textColor = 0x2f2f2f.color + } - private let normalShippingLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let normalShippingLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let shippingPriceLabel = UILabel().then { - $0.font = .bodyBody1 - $0.textColor = 0x2f2f2f.color - } + private let shippingPriceLabel = UILabel().then { + $0.font = .bodyBody1 + $0.textColor = 0x2f2f2f.color + } - private let freeShippingLabel = UILabel().then { - $0.font = .bodyBody1 - $0.textColor = 0xa7a7a7.color - } + private let freeShippingLabel = UILabel().then { + $0.font = .bodyBody1 + $0.textColor = 0xa7a7a7.color + } - private let overnightShippingLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let overnightShippingLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let overnightPriceLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let overnightPriceLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let overnightTimeLabel = UILabel().then { - $0.font = .bodyBody1 - $0.textColor = 0x2f2f2f.color - } + private let firstOvernightLabel = UILabel().then { + $0.font = .bodyBody1 + $0.textColor = 0x2f2f2f.color + } - private let minuteLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let secondOvernightLabel = UILabel().then { + $0.font = .bodyBody1 + $0.textColor = 0x2f2f2f.color + } - private let hourLablel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let minuteLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let availableStoreLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let hourLablel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let storeStatusLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let checkAvailableStoreLabel = UILabel().then { + $0.font = .tittleSubhead1 + $0.textColor = 0xa4d232.color + } - private let stockLabel = UILabel().then { - $0.font = .bodyBody5 - $0.textColor = 0x2f2f2f.color - } + private let availableStoreLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } - private let productImageView = UIImage() - private let searchImageView = UIImage() + private let storeStatusLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } + private let stockLabel = UILabel().then { + $0.font = .bodyBody5 + $0.textColor = 0x2f2f2f.color + } + + private let rateImageView = UIImageView(image: UIImage(named: "starRate")) + private let singleStarImageView = UIImageView(image: UIImage(named: "star14X14")) + private let productImageView = UIImageView(image: UIImage(named: "detailView")) + private let searchGreenImageView = UIImageView(image: UIImage(named: "searchIcon_green12X12")) + //MARK: - Variables var productList:[productModel] = [ @@ -171,15 +202,26 @@ final class DetailViewController: UIViewController { ] //MARK: - Consonants + final let tagInset: UIEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) + final let tagLineSpacing: CGFloat = 0 + final let tagInterItemSpacing: CGFloat = 8 + final let tagCellHeight: CGFloat = 27 + + final let productInset: UIEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) + final let productLineSpacing: CGFloat = 0 + final let productInterItemSpacing: CGFloat = 15 + final let productCellHeight: CGFloat = 148 //MARK: - Life Cycles override func viewDidLoad() { super.viewDidLoad() layout() + register() + // configDelegate() + labelConfig() buttonConfig() tempConfig() - // labelConfig() -// configDelegate() + viewConfig() } } @@ -189,46 +231,88 @@ extension DetailViewController { //MARK: - Layout Helpers private func layout() { view.backgroundColor = .white - view.addSubview(scrollView) + view.addSubviews(topContainerView,scrollView) //components - - let containerViews = [ - topContainerView, + scrollView.addSubviews( productImageContainerView, productContainerView, + productUnderlineView, deliveryContainerView, + deliveryUnderlineView, availableStoreContainerView, + availableUnderlineView, tabbarButtonContainerView, productDetailContainerView, - productRecommandContainerView, + productDetailUnderlineView, + recommandContainerView, + recommandUnderlineView, relatedProductContainerView, + relatedUnderlineView, bottomContainerView - ] - scrollView.addSubviews(containerViews) + ) // topContainerView - [backButton, searchButton, cartButton].forEach { - topContainerView.addSubview($0) - } + topContainerView.addSubviews(backButton, searchButton, cartButton) + // productContainerView - [brandLabel, productLabel, priceLabel, originalPriceLabel, discountLabel, rateLabel, rateCountLabel, productTypeLabel].forEach { - productContainerView.addSubview($0) - } + productContainerView.addSubviews( + brandLabel, + brandButton, + productLabel, + priceLabel, + wonLabel, + originalPriceLabel, + discountLabel, + rateImageView, + rateLabel, + rateCountLabel, + productTypeLabel + ) - scrollView.snp.makeConstraints { - $0.edges.equalTo(view.safeAreaLayoutGuide) - } + //deliveryContainerView + deliveryContainerView.addSubviews( + normalShippingLabel, + shippingPriceLabel, + freeShippingLabel, + overnightShippingLabel, + infoButton, + overnightPriceLabel, + overnightShippingButton, + minuteLabel, + firstOvernightLabel, + hourLablel, + secondOvernightLabel + ) + + //availableStoreContainerView + availableStoreContainerView.addSubviews( + checkAvailableStoreLabel, + searchGreenImageView, + availableGreenUnderlineView, + singleStarImageView, + availableStoreLabel, + storeStatusLabel, + separatelineView, + stockLabel + ) + + productDetailContainerView.addSubview(productImageView) // ContainerViews topContainerView.snp.makeConstraints { - $0.top.equalTo(scrollView) - $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) + $0.top.leading.trailing.equalTo(view.safeAreaLayoutGuide) $0.height.equalTo(60) } - productImageContainerView.snp.makeConstraints { + scrollView.snp.makeConstraints { $0.top.equalTo(topContainerView.snp.bottom) + $0.leading.trailing.bottom.equalTo(view.safeAreaLayoutGuide) + + } + + productImageContainerView.snp.makeConstraints { + $0.top.equalToSuperview() $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) $0.height.equalTo(246) } @@ -240,132 +324,346 @@ extension DetailViewController { $0.height.equalTo(292) } - deliveryContainerView.snp.makeConstraints { + productUnderlineView.snp.makeConstraints { $0.top.equalTo(productContainerView.snp.bottom) + $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) + $0.height.equalTo(1) + + } + + deliveryContainerView.snp.makeConstraints { + $0.top.equalTo(productUnderlineView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(98) } - availableStoreContainerView.snp.makeConstraints { + deliveryUnderlineView.snp.makeConstraints { $0.top.equalTo(deliveryContainerView.snp.bottom) + $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) + $0.height.equalTo(1) + + } + + availableStoreContainerView.snp.makeConstraints { + $0.top.equalTo(deliveryUnderlineView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(83) } - - tabbarButtonContainerView.snp.makeConstraints { + + availableUnderlineView.snp.makeConstraints { $0.top.equalTo(availableStoreContainerView.snp.bottom) + $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) + $0.height.equalTo(7.5) + } + + tabbarButtonContainerView.snp.makeConstraints { + $0.top.equalTo(availableUnderlineView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(65) } - + productDetailContainerView.snp.makeConstraints { $0.top.equalTo(tabbarButtonContainerView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(1685) } - - productRecommandContainerView.snp.makeConstraints { - $0.top.equalTo(productDetailContainerView.snp.bottom) + + productDetailUnderlineView.snp.makeConstraints { + $0.top.equalTo(productDetailContainerView.snp.bottom).offset(16) + $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) + $0.height.equalTo(7.5) + } + + recommandContainerView.snp.makeConstraints { + $0.top.equalTo(productDetailUnderlineView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(269) } - + + recommandUnderlineView.snp.makeConstraints { + $0.top.equalTo(recommandContainerView.snp.bottom) + $0.leading.trailing.equalTo(view.safeAreaLayoutGuide) + $0.height.equalTo(7.5) + } + relatedProductContainerView.snp.makeConstraints { - $0.top.equalTo(productRecommandContainerView.snp.bottom) + $0.top.equalTo(recommandUnderlineView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(257) } - + bottomContainerView.snp.makeConstraints { - $0.top.equalTo(productDetailContainerView.snp.bottom) + $0.top.equalTo(relatedProductContainerView.snp.bottom) $0.leading.trailing.equalTo(productContainerView) $0.height.equalTo(108) $0.bottom.equalToSuperview() } - // TopContainerView +// TopContainerView backButton.snp.makeConstraints { $0.centerY.equalToSuperview() $0.leading.equalToSuperview().offset(18.5) $0.width.height.equalTo(18) } - + cartButton.snp.makeConstraints { $0.centerY.equalToSuperview() $0.trailing.equalToSuperview().offset(-18.5) $0.width.height.equalTo(22) } - + searchButton.snp.makeConstraints { $0.centerY.equalToSuperview() $0.trailing.equalTo(cartButton.snp.leading).offset(-28) $0.width.height.equalTo(22) } - - // productImageContainerView + + //ProductContainerView brandLabel.snp.makeConstraints { + $0.top.leading.equalToSuperview() + $0.trailing.equalToSuperview().offset(-302) + } + + brandButton.snp.makeConstraints { + $0.top.equalTo(brandLabel) + $0.leading.equalTo(brandLabel.snp.trailing).offset(3) + $0.width.height.equalTo(12) + } + + productLabel.snp.makeConstraints { + $0.top.equalTo(brandLabel.snp.bottom).offset(12) + $0.leading.trailing.equalToSuperview() + } + + priceLabel.snp.makeConstraints { + $0.top.equalTo(productLabel.snp.bottom).offset(28) + $0.leading.equalToSuperview() + } + + wonLabel.snp.makeConstraints { + $0.bottom.equalTo(priceLabel).offset(-1.5) + $0.leading.equalTo(priceLabel.snp.trailing).offset(4) + } + + originalPriceLabel.snp.makeConstraints { + $0.bottom.equalTo(priceLabel) + $0.leading.equalTo(wonLabel.snp.trailing).offset(15) + } + + discountLabel.snp.makeConstraints { + $0.bottom.equalTo(priceLabel) + $0.trailing.equalToSuperview() + } + + rateImageView.snp.makeConstraints { + $0.top.equalTo(priceLabel.snp.bottom).offset(28) + $0.leading.equalToSuperview() + $0.width.equalTo(84) + $0.height.equalTo(15) + } + + rateLabel.snp.makeConstraints { + $0.bottom.equalTo(rateImageView) + $0.leading.equalTo(rateImageView.snp.trailing).offset(8) + } + + rateCountLabel.snp.makeConstraints { + $0.top.equalTo(rateImageView.snp.bottom).offset(8) + $0.leading.equalToSuperview() + } + + productTypeLabel.snp.makeConstraints { + $0.top.equalTo(rateCountLabel.snp.bottom).offset(28) + $0.leading.equalToSuperview() + } + + //deliveryContainerView + + normalShippingLabel.snp.makeConstraints { + $0.top.equalToSuperview().offset(16) + $0.leading.equalToSuperview() + } + + shippingPriceLabel.snp.makeConstraints { + $0.centerY.equalTo(normalShippingLabel) + $0.leading.equalTo(normalShippingLabel.snp.trailing).offset(46) + } + + freeShippingLabel.snp.makeConstraints { + $0.centerY.equalTo(normalShippingLabel) + $0.leading.equalTo(shippingPriceLabel.snp.trailing).offset(4) + } + + overnightShippingLabel.snp.makeConstraints { + $0.top.equalTo(normalShippingLabel.snp.bottom).offset(16) $0.leading.equalToSuperview() - + } + + infoButton.snp.makeConstraints { + $0.centerY.equalTo(overnightShippingLabel) + $0.leading.equalTo(overnightShippingLabel.snp.trailing).offset(4) + $0.width.height.equalTo(10) + } + + overnightPriceLabel.snp.makeConstraints { + $0.centerY.equalTo(overnightShippingLabel) + $0.leading.equalTo(infoButton.snp.trailing).offset(32) + } + + overnightShippingButton.snp.makeConstraints { + $0.centerY.equalTo(overnightShippingLabel) + $0.leading.equalTo(overnightPriceLabel.snp.trailing).offset(9) + $0.width.height.equalTo(10) + } + + minuteLabel.snp.makeConstraints { + $0.top.equalTo(overnightPriceLabel.snp.bottom).offset(8) + $0.leading.equalTo(overnightPriceLabel) + } + + firstOvernightLabel.snp.makeConstraints { + $0.centerY.equalTo(minuteLabel) + $0.leading.equalTo(minuteLabel.snp.trailing) + } + + hourLablel.snp.makeConstraints { + $0.centerY.equalTo(minuteLabel) + $0.leading.equalTo(firstOvernightLabel.snp.trailing) + } + + secondOvernightLabel.snp.makeConstraints { + $0.centerY.equalTo(minuteLabel) + $0.leading.equalTo(hourLablel.snp.trailing) + } + + //availableStoreContainerView + checkAvailableStoreLabel.snp.makeConstraints { + $0.top.equalToSuperview().offset(16) + $0.leading.equalToSuperview() + } + + searchGreenImageView.snp.makeConstraints { + $0.centerY.equalTo(checkAvailableStoreLabel) + $0.leading.equalTo(checkAvailableStoreLabel.snp.trailing).offset(4) + $0.width.height.equalTo(12) + } + + availableGreenUnderlineView.snp.makeConstraints { + $0.top.equalTo(checkAvailableStoreLabel.snp.bottom).offset(3) + $0.leading.equalTo(checkAvailableStoreLabel) + $0.trailing.equalTo(searchGreenImageView) + $0.height.equalTo(1) + } + + singleStarImageView.snp.makeConstraints { + $0.top.equalTo(checkAvailableStoreLabel.snp.bottom).offset(17.5) + $0.leading.equalToSuperview() + $0.width.height.equalTo(11) + } + + availableStoreLabel.snp.makeConstraints { + $0.centerY.equalTo(singleStarImageView) + $0.leading.equalTo(singleStarImageView.snp.trailing).offset(4) + } + + storeStatusLabel.snp.makeConstraints { + $0.centerY.equalTo(singleStarImageView) + $0.trailing.equalTo(separatelineView.snp.leading).offset(-4) + } + + separatelineView.snp.makeConstraints { + $0.top.bottom.equalTo(singleStarImageView) + $0.trailing.equalTo(stockLabel.snp.leading).offset(-4) + $0.width.equalTo(1.2) + } + + stockLabel.snp.makeConstraints { + $0.centerY.equalTo(singleStarImageView) + $0.trailing.equalToSuperview() + } + + productImageView.snp.makeConstraints { + $0.edges.equalToSuperview() } } //MARK: - General Helpers private func buttonConfig(){ - backButton.setImage(UIImage(named: "arrowIcon18X18"), for: .normal) + backButton.setImage(UIImage(named: "back"), for: .normal) searchButton.setImage(UIImage(named: "searchIcon24X24"), for: .normal) cartButton.setImage(UIImage(named: "shoppingBag22X22"), for: .normal) brandButton.setImage(UIImage(named: "chevron12X12"), for: .normal) + infoButton.setImage(UIImage(named: "info"), for: .normal) + overnightShippingButton.setImage(UIImage(named: "check"), for: .normal) // heartButton.setImage(UIImage(named: ""), for: .normal) purchaseButton.setTitle("구매하기", for: .normal) } private func tempConfig() { productImageContainerView.backgroundColor = .systemGray4 - productContainerView.backgroundColor = .systemRed - deliveryContainerView.backgroundColor = .systemOrange - availableStoreContainerView.backgroundColor = .systemYellow - tabbarButtonContainerView.backgroundColor = .systemGreen - productDetailContainerView.backgroundColor = .systemBlue - productRecommandContainerView.backgroundColor = .systemPurple +// productContainerView.backgroundColor = .red +// deliveryContainerView.backgroundColor = .systemOrange +// availableStoreContainerView.backgroundColor = .systemYellow +// tabbarButtonContainerView.backgroundColor = .systemGreen +// productDetailContainerView.backgroundColor = .systemBlue + recommandContainerView.backgroundColor = .systemPurple relatedProductContainerView.backgroundColor = .systemCyan bottomContainerView.backgroundColor = .systemGray6 } - private func labelConfig() { - self.brandLabel.text = "에스트라" - self.productLabel.text = "에스트라 아토베리어365 크림 80ml 더블 기획" - self.priceLabel.text = "30,900원" - self.originalPriceLabel.text = "55,800" - self.discountLabel.text = "30%" - self.rateLabel.text = "4.8" - self.productTypeLabel.text = "제품타입" - self.normalShippingLabel.text = "일반배송" - self.shippingPriceLabel.text = "2500원" - self.freeShippingLabel.text = "(20,000 원 이상 무료배송)" - self.overnightShippingLabel.text = "오늘드림" - self.overnightPriceLabel.text = "2,500원 / 5,000원" - self.overnightTimeLabel.text = "22분 내 주문 시 00시 이내 도착해요" - // self.minuteLabel.text = "" - // self.hourLablel.text = "" - self.availableStoreLabel.text = "홍대 공항철도점" - self.storeStatusLabel.text = "영업중" - self.stockLabel.text = "보유가능성 높음" - } + private func labelConfig() { + self.brandLabel.text = "에스트라" + self.productLabel.text = "에스트라 아토베리어365 크림 80ml 더블 기획" + self.priceLabel.text = "30,900" + self.wonLabel.text = "원" + self.originalPriceLabel.text = "55,800" + self.discountLabel.text = "30%" + self.rateLabel.text = "4.8" + self.rateCountLabel.text = "22,159" + self.productTypeLabel.text = "제품타입" + self.normalShippingLabel.text = "일반배송" + self.shippingPriceLabel.text = "2500원" + self.freeShippingLabel.text = "(20,000 원 이상 무료배송)" + self.overnightShippingLabel.text = "오늘드림" + self.overnightPriceLabel.text = "2,500원 / 5,000원" + self.firstOvernightLabel.text = "내 주문 시" + self.secondOvernightLabel.text = "이내 도착해요" + self.minuteLabel.text = "22분" + self.hourLablel.text = "00시" + self.checkAvailableStoreLabel.text = "구매가능 매장 확인하기" + self.availableStoreLabel.text = "홍대공항철도점" + self.storeStatusLabel.text = "영업중" + self.stockLabel.text = "재고보유 가능성 높음" + } + private func viewConfig() { + productUnderlineView.backgroundColor = 0xebebeb.color + deliveryUnderlineView.backgroundColor = 0xebebeb.color + availableUnderlineView.backgroundColor = 0xebebeb.color + productDetailUnderlineView.backgroundColor = 0xebebeb.color + recommandUnderlineView.backgroundColor = 0xebebeb.color + relatedUnderlineView.backgroundColor = 0xebebeb.color + availableGreenUnderlineView.backgroundColor = 0xa4d232.color + separatelineView.backgroundColor = 0xebebeb.color + } // private func configDelegate() { +// tagCollectionView.delegate = self +// tagCollectionView.dataSource = self // productCollectionView.delegate = self // productCollectionView.dataSource = self - - +// } + + private func register() { + tagCollectionView.register(TagCollectionViewCell.self, forCellWithReuseIdentifier: TagCollectionViewCell.identifier) + productCollectionView.register(ProductCollectionViewCell.self, forCellWithReuseIdentifier: ProductCollectionViewCell.identifier) } - //MARK: - Action Helpers - -//} +//MARK: - Action Helpers +} -////MARK: - UICollectionViewDelegateFlowLayout +//MARK: - UICollectionViewDelegateFlowLayout //extension DetailViewController: UICollectionViewDelegateFlowLayout { // func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { // <#code#> diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/ProductCollectionViewCell.swift b/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/ProductCollectionViewCell.swift index 9aa80d4..03e750e 100644 --- a/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/ProductCollectionViewCell.swift +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/ProductCollectionViewCell.swift @@ -16,6 +16,26 @@ final class ProductCollectionViewCell: UICollectionViewCell { //MARK: - UI Components + private let productImageView = UIImageView() + private let productLabel = UILabel().then { + $0.font = .bodyBody2 + $0.textColor = 0x2f2f2f.color + } + + private let descriptionLabel = UILabel().then { + $0.font = .bodyCaption + $0.textColor = 0x2f2f2f.color + } + private let priceLabel = UILabel().then { + $0.font = .bodyCaption2 + $0.textColor = 0x2f2f2f.color + } + private let wonLabel = UILabel().then { + $0.font = .bodyCaption2 + $0.textColor = 0x2f2f2f.color + $0.text = "원" + } + //MARK: - Identifier static let identifier = "ProductCollectionViewCell" @@ -35,10 +55,49 @@ extension ProductCollectionViewCell { //MARK: - Layout Helpers private func layout() { + contentView.addSubviews( + productImageView, + productLabel, + descriptionLabel, + priceLabel, + wonLabel + ) + productImageView.snp.makeConstraints { + $0.top.leading.trailing.equalToSuperview() + $0.height.equalTo(120) + } + + productLabel.snp.makeConstraints { + $0.top.equalTo(productImageView.snp.bottom).offset(8) + $0.leading.equalToSuperview() + } + + descriptionLabel.snp.makeConstraints { + $0.top.equalTo(productLabel.snp.bottom).offset(8) + $0.leading.equalToSuperview() + $0.trailing.equalToSuperview().offset(-5) + } + + priceLabel.snp.makeConstraints { + $0.top.equalTo(descriptionLabel.snp.bottom).offset(8) + $0.leading.equalToSuperview() + } + + wonLabel.snp.makeConstraints { + $0.top.equalTo(priceLabel) + $0.leading.equalTo(priceLabel.snp.trailing) + } } //MARK: - General Helpers + func dataBind(model: productModel) { + productImageView.image = UIImage(named: model.productImage) + productLabel.text = model.name + descriptionLabel.text = model.description + priceLabel.text = model.price + } + } diff --git a/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/TagCollectionViewCell.swift b/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/TagCollectionViewCell.swift index e95eaf7..b437941 100644 --- a/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/TagCollectionViewCell.swift +++ b/Oliveyoung-iOS/Oliveyoung-iOS/Source/Presentation/Detail/TagCollectionViewCell.swift @@ -15,6 +15,12 @@ import SwiftyColor final class TagCollectionViewCell: UICollectionViewCell { //MARK: - UI Components + private let tagView = UIView().then { + $0.backgroundColor = 0xa4d232.color + $0.cornerRadius = 0.5 + } + + private let tagLabel = UILabel() //MARK: - Identifier static let identifier = "TagCollectionViewCell" @@ -35,9 +41,21 @@ extension TagCollectionViewCell { //MARK: - Layout Helpers private func layout() { + contentView.addSubviews(tagView, tagLabel) + + tagView.snp.makeConstraints { + $0.edges.equalToSuperview() + } + + tagLabel.snp.makeConstraints { + $0.center.equalToSuperview() + } } //MARK: - General Helpers + func dataBind(tag: String) { + tagLabel.text = tag + } }