디자인 시스템 구축

[ShapeKim98]

안녕하세요!
너무 오래걸렸네요..
이렇게 큰 디자인 시스템은 처음이라 얕보다가 큰코 다쳤어요.. 후
앞으로 수요일 까지는 42서울 과제 마감이 임박해서 과제를 하러 잠깐 떠날게요...

작업사항

• 컬러 정의
• 폰트 정의
• 이미지 정의
• PokitButton 구현
• PokitInput 구현
• PokitTextInput 구현
• PokitTextArea 구현
• PokitLabel 구현
• PokitChip 구현
• PokitCheckBox 구현
• PokitBadge 구현
• PokitBottomButton 구현
• PokitBottomSheet 구현
• PokitSelect 구현
• PokitSwitchRadio구현
• PokitList 구현
• PokitDivider 구현
• PokitPartTap 구현

참고사항

• 프리뷰 코드는 따로 커밋하지 않았습니다.
• 혹시나 DSKit 내부에서 프리뷰를 돌리고 싶다면, Projects/DSKit/Project.swift에서 .staticFramework를 .framwork로 변경 후 tuist generate 하시면 됩니다.
• @Previewable 키워드는 프리뷰에서 상태변수를 쓸 수 있게 하는 macro 입니다. (이것도 ios18 이상으로 제한 해놓은게 어이없)
• linkcard, link calendar, bottm navigation은 아직 구현을 안했습니다. 재사용성이 너무 낮거나, Entity를 강하게 의존해야 하는 이유가 있어 보류를 해두었습니다. (calendar는 구현 예정)
• 컬러 사용방법

Color.pokit(.icon(.brand))

• 폰트 사용방법

'''
...
.pokitFont(.b1(.b))

• 이미지 사용방법

Image(.icon(.search))

• PokitButton 사용방법

#Preview {
    PokitTextButton(
        "Label",
        state: .filled(.primary),
        size: .medium,
        shape: .rectangle
    ) {
        
    }
}

#Preview {
    PokitIconLButton(
        "Label", 
        .icon(.search),
        state: .filled(.primary),
        size: .medium,
        shape: .rectangle
    ) {
        
    }
}

#Preview {
    PokitIconButton(
        .icon(.search),
        state: .filled(.primary),
        size: .medium,
        shape: .round
    ) {
        
    }
}

• PokitInput 사용방법

#Preview {
    @Previewable @FocusState var focusState: Bool
    @Previewable @State var text = ""
    
    PokitInput(
        text: $text,
        shape: .round,
        focusState: $focusState,
        equals: true
    ) {
    }
}

#Preview {
    @Previewable @FocusState var focusState: Bool
    @Previewable @State var text = ""
    
    PokitIconLInput(
        text: $text,
        icon: .icon(.search),
        shape: .round,
        focusState: $focusState,
        equals: true
    ) {
    }
}

• PokitTextInput 사용방법

#Preview {
    @Previewable @FocusState var focusState: Bool
    @Previewable @State var text = ""
    
    PokitTextInput(
        text: $text,
        label: "Label",
        focusState: $focusState,
        equals: true
    )
    .padding()
}

• PokitTextArea 사용방법

#Preview {
    @Previewable @FocusState var focusState: Bool
    @Previewable @State var text = ""
    
    PokitTextArea(
        text: $text,
        label: "Label",
        focusState: $focusState,
        equals: true
    )
    .padding()
}

• PokitLabel 사용방법

#Preview {
    PokitLabel(text: "Label", size: .large)
}

• PokitChip 사용방법

#Preview {
    PokitTextChip(
        "텍스트",
        baseState: .default(.primary),
        selectedState: .stroke(.primary),
        size: .small
    ) {
        
    }
}

#Preview {
    PokitIconLChip(
        "텍스트",
        baseState: .default(.primary),
        selectedState: .filled(.primary),
        size: .small
    ) {
        
    }
}

• PokitCheckBox 사용방법

#Preview {
    PokitCheckBox(
        baseState: .default,
        selectedState: .filled,
        shape: .round
    ) {
        
    }
}

• PokitBadge 사용방법

#Preview {
    PokitBadge("텍스트", state: .default)
    
    PokitBadge("텍스트", state: .small)
    
    PokitBadge("텍스트", state: .uncategorized)
}

• PokitBottomButton 사용방법

#Preview {
    VStack {
        Spacer()
        
        PokitBottomButton("버튼", state: .filled(.primary)) {
            
        }
    }
    .background(.pokit(.bg(.secondary)))
}

• PokitBottomSheet 사용방법

#Preview {
    PokitBottomSheet(
        items: PokitBottomSheet.Item.allCases
    ) { delegate in
        switch delegate {
        case .deleteCellButtonTapped:
            return
        case .editCellButtonTapped:
            return
        case .favoriteCellButtonTapped:
            return
        case .shareCellButtonTapped:
            return
        }
    }
}

• PokitSelect 사용방법

struct Item: PokitSelectItemProtocol {
    let id = UUID()
    let title: String
    let description: String
    
    init(
        title: String,
        description: String
    ) {
        self.title = title
        self.description = description
    }
}

#Preview {
    PokitSelect(
        label: "Label",
        list: [
            Item(
                title: "미분류",
                description: "링크 15개"
            ),
            Item(
                title: "포킷명",
                description: "링크 15개"
            ),
            Item(
                title: "포킷명",
                description: "링크 15개"
            ),
            Item(
                title: "포킷명",
                description: "링크 15개"
            )
        ]
    ) { item in
        
    }
    .padding()
}

• PokitSwitchRadio 사용방법

enum RadioButton: String {
    case button1 = "버튼1"
    case button2 = "버튼2"
}

#Preview {
    @Previewable @Namespace var heroEffect
    @Previewable @State var button: RadioButton = .button1
    
    PokitSwitchRadio {
        PokitPartSwitchRadio(
            labelText: RadioButton.button1.rawValue,
            selection: $button,
            to: .button1,
            style: .filled
        )
        .matchedGeometryEffectBackground(id: heroEffect)
        
        PokitPartSwitchRadio(
            labelText: RadioButton.button2.rawValue,
            selection: $button,
            to: .button2,
            style: .filled
        )
        .matchedGeometryEffectBackground(id: heroEffect)
   

• PokitList 사용방법

#Preview {
    VStack(spacing: 0) {
        PokitList(title: "즐겨찾기") {
            
        } label: {
            Image(.icon(.star))
                .resizable()
                .frame(width: 24, height: 24)
                .foregroundStyle(.pokit(.icon(.primary)))
        }
        
        PokitList(title: "고객문의") {
            
        } label: {
            HStack(spacing: 4) {
                Text("[email protected]")
                    .pokitFont(.detail2)
                    .foregroundStyle(.pokit(.text(.tertiary)))
                    .tint(.pokit(.text(.tertiary)))
                
                Image(.icon(.arrowRight))
                    .resizable()
                    .frame(width: 24, height: 24)
                    .foregroundStyle(.pokit(.icon(.primary)))
            }
        }

    }
}

• PokitDivider 사용방법

#Preview {
    PokitDivider()
}

• PokitPartTape 사용방법

#Preview {
    @Previewable @Namespace var heroEffect
    @Previewable @State var currentSelection: TapButton = .tap1
    
    HStack(spacing: 0) {
        PokitPartTap(
            TapButton.tap1.rawValue,
            selection: $currentSelection,
            to: .tap1
        )
        .matchedGeometryEffectBackground(id: heroEffect)
        
        PokitPartTap(
            TapButton.tap2.rawValue,
            selection: $currentSelection,
            to: .tap2
        )
        .matchedGeometryEffectBackground(id: heroEffect)
        
        PokitPartTap(
            TapButton.tap3.rawValue,
            selection: $currentSelection,
            to: .tap3
        )
        .matchedGeometryEffectBackground(id: heroEffect)
    }
}

궁금한 것들

1. Modifier 폴더로 가보시면 버전 분기를 위해 만든 Modifier 들이 있는데 괜찮은지 봐주세요!
2. 이전에 회의로 버튼이나 텍스트 필드 전용 Modifier를 만들었다고 했는데요.. 거의 모든 속성들을 열거형으로 정의하고, 생성자 파라미터를 최대한 줄였습니다. 그 결과 Modifier 자체가 불필요해 져서 전부 지웠습니다. 하지만 파라미터가 여전히 많은 편이라 보시고 판단해주세요!
3. 보류한 컴포넌트 중에 디자인 시스템에 꼭 넣어줬으면 하는게 있나요?
4. 몇일 작업을 하다 보니 네이밍이나 코드 컨벤션이 좋지 않을 것으로 예상합니다... 피드백 부탁드려요...

close #6

[stealmh]

우오.. 너무고생많으셨습니다 오늘 천천히 pr읽어보겠습니다🙌

[ShapeKim98]

PokitButton Radius 값 조절했고, PokitTextInput에 에러메세지 추가, PokitCalendar 만들었습니닷!
@stealmh

• PokitCalendar

@available(iOS 18.0, *)
#Preview {
    @Previewable @State var startDate = Date.now
    @Previewable @State var endDate = Date.now
    
    VStack {
        Spacer()
        
        PokitCalendar(startDate: $startDate, endDate: $endDate)
        
        Spacer()
    }
    .padding()
}

[stealmh]

PokitButton Radius 값 조절했고, PokitTextInput에 에러메세지 추가, PokitCalendar 만들었습니닷! @stealmh

• PokitCalendar

@available(iOS 18.0, *)
#Preview {
    @Previewable @State var startDate = Date.now
    @Previewable @State var endDate = Date.now
    
    VStack {
        Spacer()
        
        PokitCalendar(startDate: $startDate, endDate: $endDate)
        
        Spacer()
    }
    .padding()
}

고생 많으셨읍니다… 이상없다면 머지해주세요~!