Merge pull request #109 from YAPP-Github/TNT-310-TrainerViewUpdates

[TNT-310] 트레이너 화면 UI 변동 사항 반영

Author: FpRaArNkK

TnT/Projects/DesignSystem/Resources/Assets.xcassets/Icons/icn_check_mark_light_green.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "icn_check_mark_light_green.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

TnT/Projects/DesignSystem/Resources/Assets.xcassets/Icons/icn_check_mark_light_green.imageset/icn_check_mark_light_green.svg

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "icn_question_mark.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

TnT/Projects/DesignSystem/Resources/Assets.xcassets/Icons/icn_question_mark.imageset/Contents.json

@@ -17,6 +17,8 @@ public struct TPopupAlertState: Equatable {
     public var message: String?
     /// 팝업의 경고 아이콘 표시 (옵션)
     public var showAlertIcon: Bool
+    /// 팝업에 표시할 커스텀 아이콘 (옵션)
+    public var icon: PopupIcon?
     /// 팝업에 표시될 버튼 배열
     public var buttons: [ButtonState]
 
@@ -25,20 +27,42 @@ public struct TPopupAlertState: Equatable {
     ///   - title: 팝업의 제목
     ///   - message: 팝업의 메시지 (선택 사항, 기본값: `nil`)
     ///   - showAlertIcon: 팝업의 경고 아이콘 표시 (기본값: `false`)
+    ///   - icon: 팝업에 표시할 커스텀 아이콘 (기본값: `nil`)
     ///   - buttons: 팝업에 표시할 버튼 배열 (기본값: 빈 배열)
     public init(
         title: String,
         message: String? = nil,
         showAlertIcon: Bool = false,
+        icon: PopupIcon? = nil,
         buttons: [ButtonState] = []
     ) {
         self.title = title
         self.message = message
         self.showAlertIcon = showAlertIcon
+        self.icon = icon
         self.buttons = buttons
     }
 }
 
+public extension TPopupAlertState {
+    enum PopupIcon {
+        case warning
+        case checkMarkLightGreen
+        case questionMark
+        
+        var imageResource: ImageResource {
+            switch self {
+            case .warning:
+                return .icnWarning
+            case .checkMarkLightGreen:
+                return .icnCheckMarkLightGreen
+            case .questionMark:
+                return .icnQuestionMark
+            }
+        }
+    }
+}
+
 public extension TPopupAlertState {
     // TODO: 버튼 컴포넌트 완성 시 수정
     /// TPopUpAlertView.AlertButton에 표시하는 정보입니다.

TnT/Projects/DesignSystem/Resources/Assets.xcassets/Icons/icn_question_mark.imageset/icn_question_mark.svg

@@ -24,13 +24,14 @@ public struct TPopUpAlertView: View {
             // 텍스트 Section
             VStack(spacing: 8) {
                 VStack(spacing: 0) {
-                    if alertState.showAlertIcon {
+                    if let icon = alertState.icon {
+                        Image(icon.imageResource)
+                        .resizable()
+                        .frame(width: 80, height: 80)
+                    } else if alertState.showAlertIcon {
                         Image(.icnWarning)
                             .resizable()
                             .frame(width: 80, height: 80)
-                    } else {
-                        Color.clear
-                            .frame(height: 20)
                     }
                     Text(alertState.title)
                         .typographyStyle(.heading3, with: .neutral900)

TnT/Projects/DesignSystem/Sources/Components/PopUp/TPopUpAlertState.swift

@@ -0,0 +1,195 @@
+//
+//  TBoxTextEditor.swift
+//  DesignSystem
+//
+//  Created by 박민서 on 11/22/25.
+//  Copyright © 2025 yapp25thTeamTnT. All rights reserved.
+//
+
+import SwiftUI
+
+/// 박스형 테두리를 사용하는 커스텀 텍스트 에디터입니다.
+/// 기존 TTextEditor와 동일한 인터페이스로 상태/푸터를 지원합니다.
+public struct TBoxTextEditor: View {
+
+    /// TextEditor 수평 패딩 값
+    private static let horizontalPadding: CGFloat = 16
+    /// TextEditor 수직 패딩 값
+    private static let verticalPadding: CGFloat = 12
+    /// TextEditor 기본 높이값
+    public static let defaultHeight: CGFloat = 40
+
+    /// 하단에 표시되는 푸터 뷰
+    private let footer: Footer?
+    /// Placeholder 텍스트
+    private let placeholder: String
+    /// 텍스트 에디터 사이즈
+    private let size: Size
+    /// 텍스트 필드 상태
+    @Binding private var status: Status
+    /// 입력된 텍스트
+    @Binding private var text: String
+
+    /// 내부에서 동적으로 관리되는 텍스트 에디터 높이
+    @State private var textHeight: CGFloat = defaultHeight
+    /// 텍스트 에디터 포커스 상태
+    @FocusState var isFocused: Bool
+
+    /// TBoxTextEditor 생성자
+    /// - Parameters:
+    ///   - placeholder: Placeholder 텍스트 (기본값: "내용을 입력해주세요").
+    ///   - size: 텍스트 에디터 사이즈.
+    ///   - text: 입력된 텍스트를 관리하는 바인딩.
+    ///   - textEditorStatus: 텍스트 에디터 상태를 관리하는 바인딩.
+    ///   - footer: TextEditor 하단에 표시될 `TBoxTextEditor.Footer`를 정의하는 클로저.
+    public init(
+        placeholder: String = "내용을 입력해주세요",
+        size: Size = .large,
+        text: Binding<String>,
+        textEditorStatus: Binding<Status>,
+        footer: () -> Footer? = { nil }
+    ) {
+        self.placeholder = placeholder
+        self.size = size
+        self._text = text
+        self._status = textEditorStatus
+        self.footer = footer()
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            ZStack(alignment: .topLeading) {
+                TextEditor(text: $text)
+                    .autocorrectionDisabled()
+                    .scrollDisabled(true)
+                    .focused($isFocused)
+                    .font(Typography.FontStyle.body1Medium.font)
+                    .lineSpacing(Typography.FontStyle.body1Medium.lineSpacing)
+                    .kerning(Typography.FontStyle.body1Medium.letterSpacing)
+                    .foregroundColor(status.textColor)
+                    .tint(Color.neutral800)
+                    .frame(minHeight: textHeight, maxHeight: .infinity)
+                    .padding(.vertical, TBoxTextEditor.verticalPadding)
+                    .padding(.horizontal, TBoxTextEditor.horizontalPadding)
+                    .background(Color.common0)
+                    .scrollContentBackground(.hidden)
+                    .cornerRadius(8)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 8)
+                            .stroke(status.borderColor(isFocused: isFocused), lineWidth: 1)
+                    )
+                    .frame(height: size.height)
+
+                if text.isEmpty {
+                    Text(placeholder)
+                        .typographyStyle(.body1Medium, with: .neutral400)
+                        .padding(.vertical, TBoxTextEditor.verticalPadding + 8)
+                        .padding(.horizontal, TBoxTextEditor.horizontalPadding + 4)
+                }
+            }
+            if let footer {
+                footer
+            }
+        }
+    }
+}
+
+public extension TBoxTextEditor {
+    /// TBoxTextEditor의 Footer입니다
+    struct Footer: View {
+        /// 최대 입력 가능 글자 수
+        private let textLimit: Int
+        /// 입력된 텍스트 카운트
+        private var textCount: Int
+        /// 경고 텍스트
+        private var warningText: String
+        /// 텍스트 필드 상태
+        @Binding private var status: Status
+
+        /// Footer 생성자
+        /// - Parameters:
+        ///   - textLimit: 최대 입력 가능 글자 수.
+        ///   - status: 텍스트 에디터의 상태를 관리하는 바인딩.
+        ///   - textCount: 입력된 텍스트 글자 수.
+        public init(
+            textLimit: Int,
+            status: Binding<Status>,
+            textCount: Int,
+            warningText: String = "글자 수를 초과했어요"
+        ) {
+            self.textLimit = textLimit
+            self.textCount = textCount
+            self._status = status
+            self.warningText = warningText
+        }
+
+        public var body: some View {
+            HStack {
+                if status == .invalid {
+                    Text(warningText)
+                        .typographyStyle(.label2Medium, with: status.footerColor)
+                }
+                Spacer()
+                Text("\(textCount)/\(textLimit)")
+                    .typographyStyle(.label2Medium, with: status.footerColor)
+            }
+        }
+    }
+}
+
+public extension TBoxTextEditor {
+    /// TextEditor에 표시되는 상태입니다
+    enum Status {
+        case empty
+        case filled
+        case invalid
+
+        /// 테두리 색상 설정
+        func borderColor(isFocused: Bool) -> Color {
+            switch self {
+            case .empty:
+                return isFocused ? .neutral600 : .neutral300
+            case .filled:
+                return isFocused ? .neutral600 : .neutral300
+            case .invalid:
+                return .red500
+            }
+        }
+
+        /// 텍스트 색상 설정
+        var textColor: Color {
+            switch self {
+            case .empty:
+                return .neutral400
+            case .filled, .invalid:
+                return .neutral600
+            }
+        }
+
+        /// 푸터 색상 설정
+        var footerColor: Color {
+            switch self {
+            case .empty, .filled:
+                return .neutral300
+            case .invalid:
+                return .red500
+            }
+        }
+    }
+
+    /// TextEditor의 크기
+    enum Size {
+        case small
+        case large
+
+        /// 높이
+        var height: CGFloat {
+            switch self {
+            case .small:
+                return 52
+            case .large:
+                return 130
+            }
+        }
+    }
+}