diff --git a/Projects/Features/HomeFeature/Sources/HomeView.swift b/Projects/Features/HomeFeature/Sources/HomeView.swift index 4c96ecb4..8d1e499b 100644 --- a/Projects/Features/HomeFeature/Sources/HomeView.swift +++ b/Projects/Features/HomeFeature/Sources/HomeView.swift @@ -86,7 +86,11 @@ struct HomeView: View { } } .dmsBackground() - .dmsBottomSheet(isShowing: $isShowingCalendar) { + .dmsBottomSheet( + isShowing: $isShowingCalendar, + isGrabberOn: true, + sheetCornerRadiusValue: 25 + ) { DeferView { CalendarSheetView(selectedDate: $viewModel.selectedDate) .padding(.top, 24) diff --git a/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListView.swift b/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListView.swift index 714b3e78..f20a64b1 100644 --- a/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListView.swift +++ b/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListView.swift @@ -26,8 +26,27 @@ struct StudyRoomListView: View { StudyRoomNoticeView(text: viewModel.rangeString) } LazyVStack(spacing: 16) { - Spacer() - .frame(height: 10) + Button { + withAnimation { + viewModel.isStudyTimeBottomSheet.toggle() + } + } label: { + HStack(alignment: .center) { + Image(systemName: "slider.horizontal.3") + .foregroundColor(.PrimaryVariant.primary) + .frame(width: 15) + .padding(.top, 4) + .padding(.trailing, 11) + + Text("10시 ~ 11시") + .dmsFont(.etc(.button), color: .PrimaryVariant.primary) + + Spacer() + } + } + .padding(.vertical, 9) + .padding(.leading, 27) + ForEach(viewModel.studyRoomList, id: \.self) { studyRoomList in Button { viewModel.isNavigateDetail.toggle() @@ -52,6 +71,22 @@ struct StudyRoomListView: View { .navigationBarTitleDisplayMode(.inline) .dmsBackButton(dismiss: dismiss) .dmsBackground() + .dmsBottomSheet( + isShowing: $viewModel.isStudyTimeBottomSheet, + isGrabberOn: false, + sheetCornerRadiusValue: 8 + ) { + DeferView { + StudyroomTimeListView( + isClicked: false, + okButtonAction: { + withAnimation { + viewModel.isStudyTimeBottomSheet = false + } + } + ) + } + } .dmsToast(isShowing: $viewModel.isErrorOcuured, message: viewModel.errorMessage, style: .error) .onAppear { viewModel.onAppear() diff --git a/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListViewModel.swift b/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListViewModel.swift index f18939e1..87dbd2bd 100644 --- a/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListViewModel.swift +++ b/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyRoomListViewModel.swift @@ -12,6 +12,7 @@ final class StudyRoomListViewModel: BaseViewModel { @Published var toastMessage = "" @Published var studyAvailableTime: StudyAvailableTimeEntity? @Published var isNavigateDetail: Bool = false + @Published var isStudyTimeBottomSheet: Bool = false @Published var studyRoomDetail: StudyRoomEntity = .init( id: "", floor: 0, diff --git a/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyroomTimeListView.swift b/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyroomTimeListView.swift new file mode 100644 index 00000000..e85dcc99 --- /dev/null +++ b/Projects/Features/StudyRoomFeature/Sources/StudyroomApplication/StudyroomTimeListView.swift @@ -0,0 +1,69 @@ +import Foundation +import DesignSystem +import SwiftUI + +struct StudyroomTimeListView: View { + @State var isClicked: Bool = false + let okButtonAction: () -> Void + public init( + isClicked: Bool, + okButtonAction: @escaping () -> Void + ) { + self.isClicked = isClicked + self.okButtonAction = okButtonAction + } + + var body: some View { + VStack(alignment: .leading, spacing: 37) { + Text("시간") + .dmsFont(.title(.subTitle1), color: .GrayScale.gray10) + .frame(height: 28) + .padding(.top, 40) + .padding(.leading, 24) + + ScrollView(.horizontal, showsIndicators: false) { + LazyHStack { + ForEach(0..<5) { _ in + Button { + isClicked.toggle() + } label: { + Text("10시 ~ 11시") + .padding(.horizontal, 16) + .padding(.vertical, 14) + .dmsFont( + .etc(.button), + color: isClicked ? .GrayScale.gray1 : .GrayScale.gray4 + ) + .background { + isClicked ? Color.PrimaryVariant.primary : Color.GrayScale.gray1 + } + } + .overlay( + RoundedRectangle(cornerRadius: 5) + .inset(by: 1) + .stroke( + isClicked ? Color.System.primary : Color.GrayScale.gray4, + lineWidth: 2 + ) + ) + .cornerRadius(5) + .padding(.horizontal, 5) + } + } + } + .padding(.horizontal, 19) + .padding(.bottom, 10) + + DMSWideButton( + text: "확인", + style: .contained, + color: .PrimaryVariant.primary, + action: { + okButtonAction() + } + ) + .padding(.horizontal, 24) + .padding(.bottom) + } + } +} diff --git a/Projects/UsertInterfaces/DesignSystem/Sources/BottomSheet/DMSBottomSheet.swift b/Projects/UsertInterfaces/DesignSystem/Sources/BottomSheet/DMSBottomSheet.swift index ec67d563..fdcbccab 100644 --- a/Projects/UsertInterfaces/DesignSystem/Sources/BottomSheet/DMSBottomSheet.swift +++ b/Projects/UsertInterfaces/DesignSystem/Sources/BottomSheet/DMSBottomSheet.swift @@ -2,6 +2,8 @@ import SwiftUI struct DMSBottomSheet: ViewModifier { @Binding var isShowing: Bool + @State var isGrabberOn: Bool + @State var sheetCornerRadiusValue: CGFloat @State var dragHeight: CGFloat = 0 var content: () -> T var height: CGFloat @@ -27,10 +29,14 @@ struct DMSBottomSheet: ViewModifier { init( isShowing: Binding, + isGrabberOn: Bool = false, + sheetCornerRadiusValue: CGFloat = 25, height: CGFloat = .infinity, content: @escaping () -> T ) { _isShowing = isShowing + self.isGrabberOn = isGrabberOn + self.sheetCornerRadiusValue = sheetCornerRadiusValue self.height = height self.content = content } @@ -54,15 +60,17 @@ struct DMSBottomSheet: ViewModifier { ZStack { Color.GrayScale.gray1 - .cornerRadius(25, corners: [.topLeft, .topRight]) + .cornerRadius(sheetCornerRadiusValue, corners: [.topLeft, .topRight]) .padding(.top, -dragHeight) .gesture(sheetDragging) VStack { - RoundedRectangle(cornerRadius: 5) - .fill(Color.GrayScale.gray4) - .frame(width: 100, height: 4) - .padding(.top, 12) + if isGrabberOn { + RoundedRectangle(cornerRadius: 5) + .fill(Color.GrayScale.gray4) + .frame(width: 100, height: 4) + .padding(.top, 12) + } self.content() .frame(maxWidth: .infinity) @@ -86,8 +94,15 @@ struct DMSBottomSheet: ViewModifier { public extension View { func dmsBottomSheet( isShowing: Binding, + isGrabberOn: Bool = false, + sheetCornerRadiusValue: CGFloat = 25, content: @escaping () -> Content ) -> some View { - modifier(DMSBottomSheet(isShowing: isShowing, content: content)) + modifier(DMSBottomSheet( + isShowing: isShowing, + isGrabberOn: isGrabberOn, + sheetCornerRadiusValue: sheetCornerRadiusValue, + content: content + )) } }