로그인 & 디자인 시스템 일부 적용 #1
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,10 +9,7 @@ import SwiftUI | |
|
|
||
| struct ContentView: View { | ||
| var body: some View { | ||
| LoginView(viewModel: .init()) | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // | ||
| // DTOExample.swift | ||
| // yappu-world-ios | ||
| // | ||
| // Created by Tabber on 1/7/25. | ||
| // | ||
|
|
||
| import Foundation | ||
|
|
||
| /// 위 파일은 예시파일입니다. 삭제 하고 사용하세용 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| // | ||
| // YPButtonStyle.swift | ||
| // yappu-world-ios | ||
| // | ||
| // Created by Tabber on 1/7/25. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| public enum ColorStyle { | ||
| case primary | ||
| case border | ||
| } | ||
|
|
||
| public struct YPButtonStyle: ButtonStyle { | ||
| @Environment(\.isEnabled) private var isEnabled | ||
|
|
||
| private let font: Pretendard.Style | ||
| private let verticalPadding: CGFloat | ||
| private let horizontalPadding: CGFloat | ||
| private let cornerRadius: CGFloat | ||
| private let colorStyle: ColorStyle | ||
|
|
||
| public func makeBody(configuration: Configuration) -> some View { | ||
| configuration.label | ||
| .font(font) | ||
| .padding(.horizontal, horizontalPadding) | ||
| .padding(.vertical, verticalPadding) | ||
| .foregroundStyle(foregroundColor) | ||
| .background(backgroundColor) | ||
| .if(colorStyle == .border) { | ||
|
|
||
| $0.overlay( | ||
| RoundedRectangle(cornerRadius: cornerRadius) | ||
| .stroke(foregroundColor, lineWidth: 1) | ||
| ) | ||
| } | ||
| .cornerRadius(radius: cornerRadius, corners: .allCorners) | ||
|
|
||
| } | ||
| } | ||
|
|
||
| public extension YPButtonStyle { | ||
| /// 출석앱에서 주로 사용하는 버튼의 Style | ||
| /// font: Pretendard 스타일 폰트 설정입니다. ex) .pretendard16(.bold) | ||
| /// horizontalPadding: 버튼을 horizontal 기준으로 몇 padding 시킬지에 대한 값입니다. | ||
| /// verticalPadding: 버튼을 vertical 기준으로 몇 padding 시킬지에 대한 값입니다. | ||
| /// radius: 버튼의 radius 값입니다. | ||
| /// colorStyle: 버튼이 노출되는 스타일을 설정합니다. ex) .primary or .border | ||
| init( | ||
| font: Pretendard.Style, | ||
| horizontalPadding: CGFloat, | ||
| verticalPadding: CGFloat, | ||
| radius: CGFloat, | ||
| colorStyle: ColorStyle | ||
| ) { | ||
| self.font = font | ||
| self.horizontalPadding = horizontalPadding | ||
| self.verticalPadding = verticalPadding | ||
| self.cornerRadius = radius | ||
| self.colorStyle = colorStyle | ||
| } | ||
|
|
||
| private var foregroundColor: Color { | ||
| if colorStyle == .primary { | ||
| switch isEnabled { | ||
| case true: return .white | ||
| case false: return .gray30 | ||
| } | ||
| } else { | ||
| return .yapp_primary | ||
| } | ||
| } | ||
|
|
||
| private var backgroundColor: Color { | ||
| if colorStyle == .primary { | ||
| switch isEnabled { | ||
| case true: return .yapp_primary | ||
| case false: return .disabledGray | ||
| } | ||
| } else { | ||
| return .white | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| VStack(spacing: 20) { | ||
| Button(action: {}, label: { | ||
| Text("다음") | ||
| .frame(maxWidth: .infinity) | ||
| }) | ||
| .buttonStyle(.yapp(style: .primary)) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("다음") | ||
| .frame(maxWidth: .infinity) | ||
| }) | ||
| .buttonStyle(.yapp(style: .border)) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("다음") | ||
| .frame(maxWidth: .infinity) | ||
| }) | ||
| .buttonStyle(.yapp(style: .primary)) | ||
| .disabled(true) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("인증메일 발송") | ||
| .frame(maxWidth: .infinity) | ||
| }) | ||
| .buttonStyle(.yapp(style: .primary)) | ||
| .disabled(true) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("요청거절") | ||
| }) | ||
| .buttonStyle(.yapp( | ||
| horizontalPadding: 22, | ||
| style: .primary | ||
| )) | ||
| .disabled(true) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("요청승인") | ||
| }) | ||
| .buttonStyle(.yapp( | ||
| horizontalPadding: 70, | ||
| style: .primary | ||
| )) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("검색") | ||
| }) | ||
| .buttonStyle(.yapp( | ||
| font: .pretendard16(.bold), | ||
| horizontalPadding: 14, | ||
| verticalPadding: 15, | ||
| style: .border | ||
| )) | ||
|
|
||
| Button(action: {}, label: { | ||
| Text("검색") | ||
| .frame(maxWidth: .infinity) | ||
| }) | ||
| .buttonStyle(.yapp( | ||
| font: .pretendard16(.semibold), | ||
| horizontalPadding: 14, | ||
| verticalPadding: 15, | ||
| style: .border | ||
| )) | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| // | ||
| // DimmedPopupModifier.swift | ||
| // yappu-world-ios | ||
| // | ||
| // Created by Tabber on 1/7/25. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct DimmedPopupModifier<Popup: View>: ViewModifier { | ||
| @Binding var isOpen: Bool | ||
| @ViewBuilder let popupView: Popup | ||
| var horizontalPadding: CGFloat | ||
| var verticalPadding: CGFloat | ||
| var alignment: Alignment = .bottom | ||
|
|
||
| func body(content: Content) -> some View { | ||
| ZStack { | ||
| content | ||
|
|
||
| if isOpen { | ||
| Color.black.opacity(0.3) | ||
| .ignoresSafeArea() | ||
| .onTapGesture { | ||
| isOpen = false // 팝업 닫기 | ||
| } | ||
| } | ||
|
|
||
| VStack { | ||
| switch alignment { | ||
| case .bottom: | ||
| Spacer() | ||
| default: | ||
| EmptyView() | ||
| } | ||
|
|
||
| if isOpen { | ||
|
|
||
| ZStack(alignment: .leading) { | ||
| Color.white | ||
| .frame(maxWidth: .infinity) | ||
| .cornerRadius(radius: 16, corners: .allCorners) | ||
|
|
||
| popupView | ||
| .transition(.move(edge: .bottom)) // 팝업 애니메이션 추가 | ||
| .zIndex(1) // 팝업을 최상단으로 설정 | ||
| .padding(.horizontal, horizontalPadding) | ||
| .padding(.vertical, verticalPadding) | ||
| } | ||
| .fixedSize(horizontal: false, vertical: true) | ||
| .padding(.horizontal, 8) | ||
| } | ||
| } | ||
|
|
||
| } | ||
| } | ||
| } | ||
|
|
||
| extension View { | ||
| func yappBottomPopup<Popup: View>( | ||
| isOpen: Binding<Bool>, | ||
| horizontalPadding: CGFloat = 20, | ||
| verticalPadding: CGFloat = 20, | ||
| @ViewBuilder view: @escaping () -> Popup | ||
| ) -> some View { | ||
| modifier( | ||
| DimmedPopupModifier<Popup>( | ||
| isOpen: isOpen, | ||
| popupView: view, | ||
| horizontalPadding: horizontalPadding, | ||
| verticalPadding: verticalPadding, | ||
| alignment: .bottom | ||
| ) | ||
| ) | ||
| } | ||
|
|
||
| func yappDefaultPopup<Popup: View>( | ||
| isOpen: Binding<Bool>, | ||
| horizontalPadding: CGFloat = 20, | ||
| verticalPadding: CGFloat = 20, | ||
| @ViewBuilder view: @escaping () -> Popup | ||
| ) -> some View { | ||
| modifier( | ||
| DimmedPopupModifier<Popup>( | ||
| isOpen: isOpen, | ||
| popupView: view, | ||
| horizontalPadding: horizontalPadding, | ||
| verticalPadding: verticalPadding, | ||
| alignment: .center | ||
| ) | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| VStack { | ||
| Text("Hello") | ||
| .font(.title) | ||
| .padding() | ||
| } | ||
| .yappBottomPopup(isOpen: .constant(true)) { | ||
| VStack(alignment: .leading) { | ||
| Text("서비스 이용약관") | ||
| .font(.pretendard18(.bold)) | ||
| .foregroundStyle(Color.labelGray) | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ButtonStyle,TextFieldStyle보면서 그동안 디자인시스템 헛으로 만들었다는 것을 깨달았습니다... 많이 배우겠슴다,,,