215 studyroom application time list UI

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)

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()

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,

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)
+        }
+    }
+}

Projects/UsertInterfaces/DesignSystem/Sources/BottomSheet/DMSBottomSheet.swift

@@ -2,6 +2,8 @@ import SwiftUI
 
 struct DMSBottomSheet<T: View>: 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<T: View>: ViewModifier {
 
     init(
         isShowing: Binding<Bool>,
+        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<T: View>: 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<T: View>: ViewModifier {
 public extension View {
     func dmsBottomSheet<Content: View>(
         isShowing: Binding<Bool>,
+        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
+        ))
     }
 }