Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify bottom sheet to handle dynamic height instead of static height #150

Merged
merged 2 commits into from
Jun 20, 2024
Merged

Modify bottom sheet to handle dynamic height instead of static height #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c17e513
:construction: Add BottomSheetHeightPreferenceKey
WhiteHyun Jun 19, 2024
a7d7399
:sparkles: Implement dynamic bottom sheet height view
WhiteHyun Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions PyeonHaeng-iOS.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
BAAF1D302BAFF1920001EA36 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = BAAF1D2F2BAFF1920001EA36 /* Preview Assets.xcassets */; };
BAAF1D3A2BB01D910001EA36 /* NoticeDetailView.swift in Sources */ = {isa = PBXBuildFile; fileRef = BAAF1D392BB01D910001EA36 /* NoticeDetailView.swift */; };
BAAF1D3C2BB01D980001EA36 /* NoticeDetailViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = BAAF1D3B2BB01D980001EA36 /* NoticeDetailViewModel.swift */; };
BAB254A02C2315F900E74438 /* BottomSheetHeightKey.swift in Sources */ = {isa = PBXBuildFile; fileRef = BAB2549F2C2315F900E74438 /* BottomSheetHeightKey.swift */; };
BAB569612B639F3000D1E0F9 /* DesignSystem in Frameworks */ = {isa = PBXBuildFile; productRef = BAB569602B639F3000D1E0F9 /* DesignSystem */; };
BAB5CF252B6B7C5A008B24BF /* Services.swift in Sources */ = {isa = PBXBuildFile; fileRef = BAB5CF242B6B7C5A008B24BF /* Services.swift */; };
BAB5CF272B6B7CF3008B24BF /* HomeViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = BAB5CF262B6B7CF3008B24BF /* HomeViewModel.swift */; };
Expand Down Expand Up @@ -159,6 +160,7 @@
BAAF1D2F2BAFF1920001EA36 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
BAAF1D392BB01D910001EA36 /* NoticeDetailView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NoticeDetailView.swift; sourceTree = "<group>"; };
BAAF1D3B2BB01D980001EA36 /* NoticeDetailViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NoticeDetailViewModel.swift; sourceTree = "<group>"; };
BAB2549F2C2315F900E74438 /* BottomSheetHeightKey.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BottomSheetHeightKey.swift; sourceTree = "<group>"; };
BAB5CF242B6B7C5A008B24BF /* Services.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Services.swift; sourceTree = "<group>"; };
BAB5CF262B6B7CF3008B24BF /* HomeViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeViewModel.swift; sourceTree = "<group>"; };
BAB720332B9325F200C2CA1A /* PromotionSelectBottomSheetView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PromotionSelectBottomSheetView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -296,6 +298,7 @@
BA28F1712B6152EE0052855E /* Sources */ = {
isa = PBXGroup;
children = (
BAB2549E2C2315E600E74438 /* PreferenceKeys */,
BA9D943B2BF20EBA00E7C9F7 /* AccessibilityIdentifier.swift */,
E5462C652B65677B00E9FDF2 /* PromotionTag.swift */,
BAA4D9AC2B5A1795005999F8 /* PyeonHaengApp.swift */,
Expand Down Expand Up @@ -526,6 +529,14 @@
path = "Preview Content";
sourceTree = "<group>";
};
BAB2549E2C2315E600E74438 /* PreferenceKeys */ = {
isa = PBXGroup;
children = (
BAB2549F2C2315F900E74438 /* BottomSheetHeightKey.swift */,
);
path = PreferenceKeys;
sourceTree = "<group>";
};
BAB8C3AB2BAC7A09003DF3CC /* LeaveReview */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -853,6 +864,7 @@
BAAF1D3C2BB01D980001EA36 /* NoticeDetailViewModel.swift in Sources */,
BAB8C3AD2BAC7A11003DF3CC /* LeaveReviewView.swift in Sources */,
BA8E83242B8EF83B00FE968C /* ProductConfiguration.swift in Sources */,
BAB254A02C2315F900E74438 /* BottomSheetHeightKey.swift in Sources */,
BAA4D9AD2B5A1795005999F8 /* PyeonHaengApp.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down
17 changes: 17 additions & 0 deletions PyeonHaeng-iOS/Sources/PreferenceKeys/BottomSheetHeightKey.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
//
// BottomSheetHeightKey.swift
// PyeonHaeng-iOS
//
// Created by 홍승현 on 6/19/24.
//

import SwiftUI

/// 바텀시트의 동적 높이를 계산하기 위한 PreferenceKey입니다.
struct BottomSheetHeightKey: PreferenceKey {
static var defaultValue: CGFloat = .zero

static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = nextValue()
}
}
33 changes: 24 additions & 9 deletions PyeonHaeng-iOS/Sources/Scenes/HomeScene/View/HomeProductDetailSelectionView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ struct HomeProductDetailSelectionView<ViewModel>: View where ViewModel: HomeView
@EnvironmentObject private var viewModel: ViewModel
@State private var convenienceStoreModalPresented = false
@State private var promotionModalPresented = false
@State private var bottomSheetHeight: CGFloat = .zero

var body: some View {
HStack {
Expand Down Expand Up @@ -42,7 +43,12 @@ struct HomeProductDetailSelectionView<ViewModel>: View where ViewModel: HomeView
.accessibilityHint("더블 탭하여 편의점을 선택하세요")
.sheet(isPresented: $convenienceStoreModalPresented) {
ConvenienceSelectBottomSheetView<ViewModel>()
.bottomSheetPresentation(height: Metrics.convenienceBottomSheetHeight)
.presentationDetents([bottomSheetHeight == .zero ? .medium : .height(bottomSheetHeight)])
.presentationCornerRadius(20)
.presentationBackground(.regularMaterial)
.heightChangePreference { height in
bottomSheetHeight = height
}
}
}

Expand Down Expand Up @@ -78,7 +84,12 @@ struct HomeProductDetailSelectionView<ViewModel>: View where ViewModel: HomeView
}
.sheet(isPresented: $promotionModalPresented) {
PromotionSelectBottomSheetView<ViewModel>()
.bottomSheetPresentation(height: Metrics.promotionBottomSheetHeight)
.presentationDetents([bottomSheetHeight == .zero ? .medium : .height(bottomSheetHeight)])
.presentationCornerRadius(20)
.presentationBackground(.regularMaterial)
.heightChangePreference { height in
bottomSheetHeight = height
}
}
}

Expand Down Expand Up @@ -106,11 +117,17 @@ private extension Promotion {
}
}

extension View {
func bottomSheetPresentation(height: CGFloat) -> some View {
presentationDetents([.height(height)])
.presentationCornerRadius(20)
.presentationBackground(.regularMaterial)
private extension View {
func heightChangePreference(completion: @escaping (CGFloat) -> Void) -> some View {
overlay {
GeometryReader { geometry in
Color.clear
.preference(key: BottomSheetHeightKey.self, value: geometry.size.height)
.onPreferenceChange(BottomSheetHeightKey.self) { value in
completion(value)
}
}
}
}
}

Expand All @@ -130,6 +147,4 @@ private enum Metrics {
static let promotionButtonCornerRadius: CGFloat = 16

static let height: CGFloat = 56
static let convenienceBottomSheetHeight: CGFloat = 334
static let promotionBottomSheetHeight: CGFloat = 238
}
Loading