From 794d1f3955d3213ef59c841d48a1a9183926168d Mon Sep 17 00:00:00 2001 From: KimJisoo Date: Thu, 20 Oct 2022 09:08:19 +0900 Subject: [PATCH] =?UTF-8?q?[FEAT]=20#145=20-=20MyPage=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPageViewController.swift | 381 ++++++++++++++---- 1 file changed, 299 insertions(+), 82 deletions(-) diff --git a/Fillin-iOS/Fillin-iOS/Sources/ViewControllers/MyPageViewController/MyPageViewController.swift b/Fillin-iOS/Fillin-iOS/Sources/ViewControllers/MyPageViewController/MyPageViewController.swift index 8fcb8a6..86c4f6d 100644 --- a/Fillin-iOS/Fillin-iOS/Sources/ViewControllers/MyPageViewController/MyPageViewController.swift +++ b/Fillin-iOS/Fillin-iOS/Sources/ViewControllers/MyPageViewController/MyPageViewController.swift @@ -13,6 +13,9 @@ import Then // MARK: - MyPageViewController class MyPageViewController: UIViewController { + // MARK: - Properties + let screenWidth = UIScreen.main.bounds.width - 36 + // MARK: - Components let navigationBar = FilinNavigationBar() let mypageScrollview = UIScrollView() @@ -22,11 +25,23 @@ class MyPageViewController: UIViewController { let userCameraIcon = UIButton() let userCameraLabel = UILabel() let usereditIcon = UIButton() - let orangeBackgroundview = UIView() + let optionStackView = UIStackView() + let likeContainerView = UIView() + let likeIcon = UIButton() + let likeLabel = UILabel() + let myplaceContainerView = UIView() + let myplaceIcon = UIButton() + let myplaceLabel = UILabel() + let reportContainerView = UIView() + let reportIcon = UIButton() + let reportLabel = UILabel() + let orangeBackgroundview = UIImageView() let noticeexplainLabel = UILabel() - let gotonoticepageButton = UIButton() - let graylineView = UIView() + let noticesubExplainLabel = UILabel() + let exitButton = UIButton() + let firstgraylineView = UIView() let myphotosLabel = UILabel() + let myphotosFoldButton = UIButton() let myphotoCollectionview: UICollectionView = { let layout = UICollectionViewFlowLayout() layout.scrollDirection = .vertical @@ -36,6 +51,11 @@ class MyPageViewController: UIViewController { collectionView.translatesAutoresizingMaskIntoConstraints = false return collectionView }() + let secondgrayLineView = UIView() + let termsBackgroundview = UIView() + let termsLabel = UILabel() + let thirdgrayLineView = UIView() + var serverNewPhotos: PhotosResponse? // MARK: - LifeCycle @@ -65,22 +85,38 @@ extension MyPageViewController { layoutUserCameraIcon() layoutUserCameraLabel() layoutUserEditIcon() + layoutOptionStackView() + layoutLikeContainerView() + layoutLikeIcon() + layoutLikeLabel() + layoutMyPlaceContainerView() + layoutMyPlaceIcon() + layoutMyPlaceLabel() + layoutReportContainerView() + layoutReportIcon() + layoutReportLabel() layoutOrangeBackgroundView() layoutNoticeExplainLabel() - layoutGotoNoticePageButton() - layoutGrayLineView() + layoutNoticeSubExplainLabel() + layoutExitButton() + layoutFirstGrayLineView() layoutMyphotosLabel() + layoutMyPhotosFoldButton() layoutMyPhotoCollectionView() + layoutSecondGrayLine() + layoutTermsBackgroundView() + layoutTermsLabel() + layoutThirdgraylineView() } func layoutNavigaionBar() { view.add(navigationBar) { self.navigationBar.popViewController = { self.navigationController?.popViewController(animated: true) } - $0.snp.makeConstraints { - $0.top.equalTo(self.view.safeAreaLayoutGuide.snp.top) - $0.leading.trailing.equalToSuperview() - $0.height.equalTo(50) + $0.snp.makeConstraints { make in + make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top) + make.leading.trailing.equalToSuperview() + make.height.equalTo(50) } } } @@ -90,9 +126,9 @@ extension MyPageViewController { $0.translatesAutoresizingMaskIntoConstraints = false $0.showsVerticalScrollIndicator = false $0.isScrollEnabled = true - $0.snp.makeConstraints { - $0.top.equalTo(self.navigationBar.snp.bottom) - $0.centerX.leading.trailing.bottom.equalToSuperview() + $0.snp.makeConstraints { make in + make.top.equalTo(self.navigationBar.snp.bottom) + make.centerX.leading.trailing.bottom.equalToSuperview() } } } @@ -100,11 +136,11 @@ extension MyPageViewController { mypageScrollview.add(mypageScrollContainverView) { $0.translatesAutoresizingMaskIntoConstraints = false $0.contentMode = .scaleToFill - $0.snp.makeConstraints { - $0.centerX.top.leading.equalToSuperview() - $0.bottom.equalTo(self.mypageScrollview.snp.bottom) - $0.width.equalTo(self.view) - $0.height.equalTo(self.view).priority(250) + $0.snp.makeConstraints { make in + make.centerX.top.leading.equalToSuperview() + make.bottom.equalTo(self.mypageScrollview.snp.bottom) + make.width.equalTo(self.view) + make.height.equalTo(self.view).priority(250) } } } @@ -115,11 +151,11 @@ extension MyPageViewController { $0.image = Asset.appleLogo.image $0.contentMode = .scaleAspectFill $0.clipsToBounds = true - $0.snp.makeConstraints { - $0.top.equalTo(self.mypageScrollContainverView.snp.top).offset(14) - $0.leading.equalToSuperview().offset(18) - $0.width.equalTo(55) - $0.height.equalTo(55) + $0.snp.makeConstraints { make in + make.top.equalTo(self.mypageScrollContainverView.snp.top).offset(14) + make.leading.equalToSuperview().offset(18) + make.width.equalTo(55) + make.height.equalTo(55) } } } @@ -128,91 +164,200 @@ extension MyPageViewController { $0.setupLabel(text: "찰칵찰칵 필린이", color: .fillinWhite, font: .headline) - $0.snp.makeConstraints { - $0.top.equalTo(self.mypageScrollContainverView.snp.top).offset(14) - $0.leading.equalTo(self.userImageview.snp.trailing).offset(12) + $0.snp.makeConstraints { make in + make.top.equalTo(self.mypageScrollContainverView.snp.top).offset(14) + make.leading.equalTo(self.userImageview.snp.trailing).offset(12) } } } func layoutUserCameraIcon() { mypageScrollContainverView.add(userCameraIcon) { $0.setImage(UIImage(asset: Asset.icnCamera), for: .normal) - $0.snp.makeConstraints { - $0.top.equalTo(self.userNameLabel.snp.bottom).offset(6) - $0.leading.equalTo(self.userNameLabel.snp.leading) - $0.width.equalTo(18) - $0.height.equalTo(18) + $0.snp.makeConstraints { make in + make.top.equalTo(self.userNameLabel.snp.bottom).offset(6) + make.leading.equalTo(self.userNameLabel.snp.leading) + make.width.equalTo(18) + make.height.equalTo(18) } } } func layoutUserCameraLabel() { mypageScrollContainverView.add(userCameraLabel) { - $0.setupLabel(text: "Fuji film X-T200", - color: .systemGray3, - font: .engDisplay2Book) - $0.snp.makeConstraints { - $0.top.equalTo(self.userNameLabel.snp.bottom).offset(5) - $0.leading.equalTo(self.userCameraIcon.snp.trailing).offset(7) - $0.centerY.equalTo(self.userCameraIcon) + $0.setupLabel(text: "사용 중인 카메라를 입력해주세요.", + color: .grey4, + font: .body1) + $0.snp.makeConstraints { make in + make.top.equalTo(self.userNameLabel.snp.bottom).offset(5) + make.leading.equalTo(self.userCameraIcon.snp.trailing).offset(7) + make.centerY.equalTo(self.userCameraIcon) } } } func layoutUserEditIcon() { mypageScrollContainverView.add(usereditIcon) { $0.setImage(UIImage(asset: Asset.icnEdit), for: .normal) - $0.snp.makeConstraints { - $0.top.equalTo(self.userNameLabel.snp.top) - $0.trailing.equalToSuperview().offset(-18) - $0.width.equalTo(24) - $0.height.equalTo(24) + $0.snp.makeConstraints { make in + make.top.equalTo(self.userNameLabel.snp.top) + make.trailing.equalToSuperview().offset(-18) + make.width.equalTo(24) + make.height.equalTo(24) + } + } + } + func layoutOptionStackView() { + mypageScrollContainverView.add(optionStackView) { + $0.axis = .horizontal + $0.distribution = .fillEqually + $0.alignment = .center + $0.spacing = 0 + $0.backgroundColor = .fillinBlack + $0.snp.makeConstraints { make in + make.top.equalTo(self.userCameraLabel.snp.bottom).offset(31) + make.centerX.equalToSuperview() + make.leading.equalToSuperview().offset(18) + make.height.equalTo(60) + } + } + } + func layoutLikeContainerView() { + optionStackView.addArrangedSubview(likeContainerView) + likeContainerView.backgroundColor = .fillinBlack + } + func layoutLikeIcon() { + likeContainerView.add(likeIcon) { + $0.setImage(Asset.imgHeart.image, for: .normal) + $0.snp.makeConstraints { make in + make.top.equalToSuperview().offset(1) + make.centerX.equalToSuperview() + make.width.equalTo(30) + make.height.equalTo(24) + } + } + } + func layoutLikeLabel() { + likeContainerView.add(likeLabel) { + $0.setupLabel(text: "좋아요", + color: .fillinWhite, + font: .body1) + $0.snp.makeConstraints { make in + make.top.equalTo(self.likeIcon.snp.bottom).offset(17) + make.centerX.equalTo(self.likeIcon) + make.bottom.equalToSuperview() + } + } + } + func layoutMyPlaceContainerView() { + optionStackView.addArrangedSubview(myplaceContainerView) + myplaceContainerView.backgroundColor = .fillinBlack + } + func layoutMyPlaceIcon() { + myplaceContainerView.add(myplaceIcon) { + $0.setImage(Asset.imgScrap.image, for: .normal) + $0.snp.makeConstraints { make in + make.top.equalToSuperview().offset(1) + make.centerX.equalToSuperview() + make.width.equalTo(30) + make.height.equalTo(24) + } + } + } + func layoutMyPlaceLabel() { + myplaceContainerView.add(myplaceLabel) { + $0.setupLabel(text: "내 현상소", + color: .fillinWhite, + font: .body1) + $0.snp.makeConstraints { make in + make.top.equalTo(self.myplaceIcon.snp.bottom).offset(16) + make.centerX.equalTo(self.myplaceIcon) + make.bottom.equalToSuperview() + } + } + } + func layoutReportContainerView() { + optionStackView.addArrangedSubview(reportContainerView) + reportContainerView.backgroundColor = .fillinBlack + } + func layoutReportIcon() { + reportContainerView.add(reportIcon) { + $0.setImage(Asset.icnFeedback.image, for: .normal) + $0.snp.makeConstraints { make in + make.top.equalToSuperview().offset(1) + make.centerX.equalToSuperview() + make.width.equalTo(30) + make.height.equalTo(24) + } + } + } + func layoutReportLabel() { + reportContainerView.add(reportLabel) { + $0.setupLabel(text: "제보하기", + color: .fillinWhite, + font: .body1) + $0.snp.makeConstraints { make in + make.top.equalTo(self.reportIcon.snp.bottom).offset(16) + make.centerX.equalTo(self.reportIcon) + make.bottom.equalToSuperview() } } } func layoutOrangeBackgroundView() { mypageScrollContainverView.add(orangeBackgroundview) { - $0.backgroundColor = .fillinRed - $0.layer.cornerRadius = 5 - $0.snp.makeConstraints { - $0.top.equalTo(self.userCameraLabel.snp.bottom).offset(28) - $0.centerX.equalToSuperview() - $0.leading.equalToSuperview().offset(18) - $0.height.equalTo(80) + $0.image = Asset.iosBanner.image + $0.contentMode = .scaleAspectFill + let tapGesture = UITapGestureRecognizer(target: self, + action: #selector(self.orangeBackgroundViewClicked)) + $0.addGestureRecognizer(tapGesture) + $0.isUserInteractionEnabled = true + $0.snp.makeConstraints { make in + make.top.equalTo(self.optionStackView.snp.bottom).offset(12) + make.centerX.equalToSuperview() + make.leading.equalToSuperview().offset(18) + make.height.equalTo(110) } } } func layoutNoticeExplainLabel() { orangeBackgroundview.add(noticeexplainLabel) { - $0.setupLabel(text: "나만 아는 필름과 현상소를\n필린에 알려주세요!", + $0.setupLabel(text: "나만 아는 필름과 현상소를", color: .fillinBlack, font: .body2) - /// 필린에 알려주세요만 굵은 글씨로 변경하기 - let attributedStr = NSMutableAttributedString(string: self.noticeexplainLabel.text ?? "") - attributedStr.addAttribute(.font, value: UIFont.subhead3, range: (self.noticeexplainLabel.text! as NSString).range(of: "필린에 알려주세요!")) - self.noticeexplainLabel.attributedText = attributedStr - $0.numberOfLines = 2 - $0.snp.makeConstraints { - $0.centerY.equalToSuperview() - $0.leading.equalToSuperview().offset(24) + $0.snp.makeConstraints { make in + make.top.equalTo(self.orangeBackgroundview).offset(39) + make.leading.equalTo(self.orangeBackgroundview).offset(20) + } + } + } + func layoutNoticeSubExplainLabel() { + orangeBackgroundview.add(noticesubExplainLabel) { + $0.setupLabel(text: "필린에 알려주세요!", + color: .fillinBlack, + font: .subhead3) + $0.snp.makeConstraints { make in + make.top.equalTo(self.noticeexplainLabel.snp.bottom) + make.leading.equalTo(self.noticeexplainLabel) } } } - func layoutGotoNoticePageButton() { - orangeBackgroundview.add(gotonoticepageButton) { - $0.setImage(UIImage(asset: Asset.icnGo), for: .normal) - $0.snp.makeConstraints { - $0.centerY.equalToSuperview() - $0.trailing.equalToSuperview().offset(-16) + func layoutExitButton() { + mypageScrollContainverView.add(exitButton) { + $0.setImage(Asset.btExit.image, for: .normal) + $0.addTarget(self, action: #selector(self.exitButtonClicked), for: .touchUpInside) + $0.bringSubviewToFront(self.exitButton) + $0.snp.makeConstraints { make in + make.top.equalTo(self.orangeBackgroundview).offset(22) + make.trailing.equalTo(self.orangeBackgroundview).offset(-8) + make.width.height.equalTo(18) } } } - func layoutGrayLineView() { - mypageScrollContainverView.add(graylineView) { + func layoutFirstGrayLineView() { + mypageScrollContainverView.add(firstgraylineView) { $0.backgroundColor = .darkGrey2 - $0.snp.makeConstraints { - $0.top.equalTo(self.orangeBackgroundview.snp.bottom).offset(12) - $0.centerX.equalToSuperview() - $0.width.equalToSuperview() - $0.height.equalTo(2) + $0.snp.makeConstraints { make in + make.top.equalTo(self.orangeBackgroundview.snp.bottom).offset(16) + make.centerX.equalToSuperview() + make.width.equalToSuperview() + make.height.equalTo(2) } } } @@ -221,24 +366,92 @@ extension MyPageViewController { $0.setupLabel(text: "MY PHOTOS", color: .fillinWhite, font: .engHead) - $0.snp.makeConstraints { - $0.top.equalTo(self.graylineView.snp.bottom).offset(22) - $0.leading.equalToSuperview().offset(19) + $0.snp.makeConstraints { make in + make.top.equalTo(self.firstgraylineView.snp.bottom).offset(22) + make.leading.equalToSuperview().offset(19) + } + } + } + func layoutMyPhotosFoldButton() { + mypageScrollContainverView.add(myphotosFoldButton) { + $0.setImage(Asset.btnMyphoto.image, for: .normal) + $0.snp.makeConstraints { make in + make.top.equalTo(self.firstgraylineView.snp.bottom).offset(24) + make.trailing.equalToSuperview().offset(-20) + make.width.height.equalTo(22) } } } func layoutMyPhotoCollectionView() { mypageScrollContainverView.add(myphotoCollectionview) { - $0.backgroundColor = .fillinBlack + $0.backgroundColor = .fillinRed + $0.isUserInteractionEnabled = true + $0.showsVerticalScrollIndicator = false + $0.snp.makeConstraints { make in + make.top.equalTo(self.myphotosLabel.snp.bottom).offset(12) + make.centerX.equalToSuperview() + make.leading.equalToSuperview().offset(18) + //TODO: Collectionview Height 조절해야함 + } + } + } + func layoutSecondGrayLine() { + mypageScrollContainverView.add(secondgrayLineView) { + $0.backgroundColor = .darkGrey2 + $0.snp.makeConstraints { make in + make.top.equalTo(self.myphotoCollectionview.snp.bottom).offset(12) + make.centerX.equalToSuperview() + make.width.equalToSuperview() + make.height.equalTo(1) + } + } + } + func layoutTermsBackgroundView() { + mypageScrollContainverView.add(termsBackgroundview) { + $0.backgroundColor = .clear + let tapGesture = UITapGestureRecognizer(target: self, + action: #selector(self.termsClicked)) + $0.addGestureRecognizer(tapGesture) $0.isUserInteractionEnabled = true - $0.snp.makeConstraints { - $0.top.equalTo(self.myphotosLabel.snp.bottom).offset(12) - $0.centerX.equalToSuperview() - $0.leading.equalToSuperview().offset(18) - $0.bottom.equalTo(self.mypageScrollContainverView.snp.bottom) + $0.snp.makeConstraints { make in + make.top.equalTo(self.secondgrayLineView.snp.bottom) + make.leading.trailing.equalToSuperview() + make.height.equalTo(60) + } + } + } + func layoutTermsLabel() { + termsBackgroundview.add(termsLabel) { + $0.setupLabel(text: "약관 및 정책", + color: .grey2, + font: .body3) + $0.snp.makeConstraints { make in + make.centerY.equalToSuperview() + make.leading.equalToSuperview().offset(18) } } } + func layoutThirdgraylineView() { + mypageScrollContainverView.add(thirdgrayLineView) { + $0.backgroundColor = .darkGrey2 + $0.snp.makeConstraints { make in + make.top.equalTo(self.termsBackgroundview.snp.bottom) + make.centerX.equalToSuperview() + make.width.equalToSuperview() + make.height.equalTo(1) + make.bottom.equalTo(self.mypageScrollContainverView.snp.bottom).offset(-121) + } + } + } + @objc func exitButtonClicked() { + print("exitButtonClicked") + } + @objc func orangeBackgroundViewClicked(sender: UITapGestureRecognizer) { + print("orangeorange") + } + @objc func termsClicked(sender: UITapGestureRecognizer) { + print("temrsClicked") + } } // MARK: - UICollectionView extension MyPageViewController: UICollectionViewDelegate { @@ -247,7 +460,8 @@ extension MyPageViewController: UICollectionViewDelegate { extension MyPageViewController: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { - return serverNewPhotos?.photos.count ?? 0 + print("룰루") + return serverNewPhotos?.photos.count ?? 19 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { @@ -273,7 +487,10 @@ extension MyPageViewController: UICollectionViewDelegateFlowLayout { func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let cellWidth = (collectionView.frame.width-18)/3 let cellHeight = (collectionView.frame.width-18)/3 - +// let viewHeight = (Int(cellHeight)*(serverNewPhotos?.photos.count ?? 0))+9*(serverNewPhotos?.photos.count ?? 0 - 1) +// self.myphotoCollectionview.snp.remakeConstraints { make in +// make.height.equalTo(0) +// } return CGSize(width: cellWidth, height: cellHeight) } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {