디자인 시스템 대응 07/22

[ShapeKim98]

#️⃣연관된 이슈

#23

📝작업 내용

• PokitChip 내부 패딩 수정
• PokitLinkPopup 추가
• PokitTextInput 글자 수 무제한 추가
• 색이 꽉찬 아이콘 이름 수정 및 추가
• 로고 추가

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

PokitChip의 내부 패딩값을 수정했습니다.

• 기존에 PokitButton들을 재사용해서 Chip을 만들었었는데, PokitButton과 PokitChip의 내부 패딩값이 완전히 달라서 수정을 하였습니다. 사용방법에는 변경이 없습니다.

PokitTextInput에 글자 수 무제한을 추가하였습니다.

• 링크 추가/수정화면에 글자 수 제한이 없는 TextInput이 있어 이를 반영하고자 PokitTextInput을 수정하였습니다. 이전에는 기본값이 10이었다면, 이번에는 무제한(nil) 값으로 변경하였습니다.

PokitLinkPopup을 추가하였습니다.

• 내부에 타이머를 넣어 3초가 되면 닫히도록 하였습니다.
• 팝업 클릭 시 동작도 넣었습니다. 생성자를 확인해주세여
• 팝업 트리거 변화에 애니메이션을 넣어줘야 gif같은 애니메이션이 나옵니다.

#Preview {
    VStack {
        PokitLinkPopup(
            "복사한 링크 저장하기",
            isPresented: .constant(true),
            type: .link(url: "https://www.youtube.com/watch?v=xSTwqKUyM8k")
        )
        
        PokitLinkPopup(
            "최대 30개의 포킷을 생성할 수 있습니다.\n포킷을 삭제한 뒤에 추가해주세요.",
            isPresented: .constant(true),
            type: .text
        )
    }
}

.overlay(alignment: .bottom) {
    let isDisable = store.state.urlText.isEmpty || store.state.title.isEmpty
    
    VStack(spacing: 0) {
        if store.state.showPopup {
            PokitLinkPopup(
                "최대 30개의 포킷을 생성할 수 있습니다. \n포킷을 삭제한 뒤에 추가해주세요.",
                isPresented: $store.showPopup,
                type: .text
            )
        }
        
        PokitBottomButton(
            "저장하기",
            state: isDisable ? .disable : .filled(.primary),
            action: { }
        )
        .background()
    }
}

색이 꽉찬 별 아이콘이 누락되어 추가하고, 기존에 있던 꽉찬 아이콘들의 네이밍을 변경하였습니다.

...
case folderFill
case homeFill
case starFill
...

로고 이미지를 추가하였습니다.

Image(.logo(.pokit))

포킷용 스프링 애니메이션을 정의했습니다.

send(.buttonTapped, animation: .pokitSpring)

[stealmh]

확인했습니다~ 고생하셨어욥