@@ -31,58 +31,63 @@ public struct PokitKeywordBottomSheet: View {
3131 }
3232
3333 public var body : some View {
34- VStack ( alignment: . leading, spacing: 0 ) {
35- Text ( " 포킷의 키워드를 선택해 주세요 " )
36- . pokitFont ( . title1)
37- . foregroundStyle ( . pokit( . text( . primary) ) )
38- Text ( " 키워드 기반으로 다른 사용자에게 \n 링크가 추천됩니다 " )
39- . pokitFont ( . title3)
40- . foregroundStyle ( . pokit( . text( . secondary) ) )
41- . padding ( . top, 12 )
42- PokitFlowLayout ( rowSpacing: 12 , colSpacing: 10 ) {
43- ForEach ( BaseInterestType . allCases, id: \. self) { field in
44- let isSelected = selectedKeywordType != . default
45- if field != . default {
46- PokitTextChip (
47- field. title,
48- state: isSelected && field == selectedKeywordType
49- ? . filled( . primary)
50- : . default( . primary) ,
51- size: . medium
52- ) {
53- selectedKeywordType = field
34+ GeometryReader { proxy in
35+ let bottomSafeArea = proxy. safeAreaInsets. bottom
36+ VStack ( alignment: . leading, spacing: 0 ) {
37+ Text ( " 포킷의 키워드를 선택해 주세요 " )
38+ . pokitFont ( . title1)
39+ . foregroundStyle ( . pokit( . text( . primary) ) )
40+ Text ( " 키워드 기반으로 다른 사용자에게 \n 링크가 추천됩니다 " )
41+ . pokitFont ( . title3)
42+ . foregroundStyle ( . pokit( . text( . secondary) ) )
43+ . padding ( . top, 12 )
44+ . fixedSize ( horizontal: false , vertical: true )
45+ PokitFlowLayout ( rowSpacing: 16 , colSpacing: 12 ) {
46+ ForEach ( BaseInterestType . allCases, id: \. self) { field in
47+ let isSelected = selectedKeywordType != . default
48+ if field != . default {
49+ PokitTextChip (
50+ field. title,
51+ state: isSelected && field == selectedKeywordType
52+ ? . filled( . primary)
53+ : . default( . primary) ,
54+ size: . medium
55+ ) {
56+ selectedKeywordType = field
57+ }
5458 }
5559 }
60+ . animation ( . pokitDissolve, value: selectedKeywordType)
5661 }
57- . animation ( . pokitDissolve, value: selectedKeywordType)
62+ . padding ( . top, 36 )
63+ . padding ( . bottom, 40 )
64+
65+ PokitBottomButton (
66+ " 키워드 선택 " ,
67+ state: keywordSheetBottomButtonState,
68+ action: { action ( selectedKeywordType) }
69+ )
70+ . padding ( . top, 16 )
5871 }
59- . padding ( . top, 36 )
60- . padding ( . bottom, 40 )
61-
62- PokitBottomButton (
63- " 키워드 선택 " ,
64- state: keywordSheetBottomButtonState,
65- action: { action ( selectedKeywordType) }
66- )
67- . padding ( . top, 16 )
68- }
69- . padding ( . horizontal, 20 )
70- . padding ( . top, 48 )
71- . onChange ( of: selectedKeywordType) { _ in
72- keywordSheetBottomButtonState = . filled( . primary)
73- }
74- . background ( . pokit( . bg( . base) ) )
75- . pokitPresentationCornerRadius ( )
76- . pokitPresentationBackground ( )
77- . presentationDragIndicator ( . visible)
78- . readHeight ( )
79- . onPreferenceChange ( HeightPreferenceKey . self) { height in
80- if let height {
81- self . height = height
72+ . padding ( . horizontal, 20 )
73+ . padding ( . top, 48 )
74+ . padding ( . bottom, 36 - bottomSafeArea)
75+ . onChange ( of: selectedKeywordType) { _ in
76+ keywordSheetBottomButtonState = . filled( . primary)
77+ }
78+ . background ( . pokit( . bg( . base) ) )
79+ . pokitPresentationCornerRadius ( )
80+ . pokitPresentationBackground ( )
81+ . presentationDragIndicator ( . visible)
82+ . readHeight ( )
83+ . onPreferenceChange ( HeightPreferenceKey . self) { height in
84+ if let height {
85+ self . height = height
86+ }
8287 }
88+ . presentationDetents ( [ . height( height) ] )
89+ . ignoresSafeArea ( edges: [ . bottom, . top] )
8390 }
84- . presentationDetents ( [ . height( height) ] )
85- . ignoresSafeArea ( edges: [ . bottom, . top] )
8691 }
8792}
8893
0 commit comments