[TNT-124] 디자인 시스템 관련 코드 작성

[FpRaArNkK]

📌 What is the PR?

🚨원활한 PR 리뷰를 위해 PR을 분리하여 작성했습니다🚨

• 디자인 시스템 중 Color / Image / Font 관련 인터페이스 함수들을 작성했습니다

🪄 Changes

• Color 인터페이스 코드 작성
• Icon/Image 인터페이스 코드 작성
• Font 인터페이스 코드 작성

🌐 Common Changes

Notion/iOS/트러블 슈팅에 내용을 기록해놓았습니다

• Tuist info.plist 관련 모듈 설정 코드 수정
  • moduleTarget에서도 app에서 사용하는 info.plist를 참조합니다.
• Tuist SwiftLint 설정 관련 파일 경로 설정 코드 수정
  • Lint가 기본 설정이 아닌 .swiftlint.yml 파일의 규칙을 준수합니다.
• Tuist Environment의 설정 파일 수정
  • 모듈들이 연결되었습니다

🔥 PR Point

Color는 Gray / Color 스케일로 나누어 디자인 시스템과 매칭할 수 있도록 작성했습니다.
추후에 추가될 Sementic Color는 struct를 하나씩 추가하며 구현하면 될 것 같습니다.
사용할때는 기존 SwiftUI Color를 사용하는 것 처럼 사용하시면 됩니다.

Text("Example1")
            .foregroundStyle(Color.blue100)
            .foregroundStyle(Color.App.accentColor)

Font는 Typography 구조체 내부에서 구현되었습니다
Pretendard 폰트 구조체, 디자인 시스템 구현을 위한 FontStyle 구조체도 이곳에 포함됩니다.
최종적으로 extension Typography.FontStyle에서 디자인 시스템 구현 코드가 작성됩니다.

SwiftUI의 ViewModifier를 추가하여
사용할때는 바로 .typographyStyle(_:)를 추가하면 됩니다.
TextField, TextEditor와 같은 UI엔 별도 지정이 필요하여, 아래와 같이 사용하시면 됩니다!

Text("Example2")
            .typographyStyle(.body1Bold)
        
TextField("Example3", text: .constant(""))
            .font(Typography.FontStyle.body1Medium.font)
            .lineSpacing(Typography.FontStyle.body1Medium.lineSpacing)
            .kerning(Typography.FontStyle.body1Medium.letterSpacing)

Icon/Image는 ImageResource 타입으로 extension 구현되었습니다.
사용할때는 기존 SwiftUI에서 Image에 resource 입력하는 함수를 똑같이 사용하시면 됩니다.

Image(.icnDropDown)

🙆🏻 To Reviewers

각 인터페이스별 디테일한 사용 방법, 설명은 Notion/iOS/앱 개발 분석 문서 에 정리해놓았습니다!

💭 Related Issues

• [TNT-124] 디자인 시스템 기반 리소스 세팅 #15