From 88840efbd0f30656c44d6649cf833b731cc3a617 Mon Sep 17 00:00:00 2001
From: devminseok <qbq5000@gmail.com>
Date: Mon, 12 Aug 2024 09:40:41 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20Icon=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sources/Component/ButtonDetailView.swift  |  32 +++---
 .../Sources/Component/TooltipDetailView.swift |  16 +--
 .../Component/Button/BarButtonDetail.swift    |  18 +++-
 .../Component/Button/Box/BoxButtonStyle.swift |  44 +++-----
 ...eColor.swift => BoxButtonStyleLevel.swift} |   4 +-
 .../Button/Icon/IconButtonStyle.swift         |  67 ++++++++++++
 .../Button/Icon/IconButtonStyleLevel.swift    |  34 ++++++
 .../Button/SingleIconButtonDetail.swift       | 101 ++++++++++++++++++
 .../Button/Text/TextButtonStyle.swift         |  46 +++-----
 ...Color.swift => TextButtonStyleLevel.swift} |   4 +-
 .../NavigationBar/NavigationBar.swift         |  66 +++++++-----
 .../NavigationBar/NavigationBarStyle.swift    |   1 -
 .../NavigationBar/NavigationContainer.swift   |  17 ++-
 13 files changed, 329 insertions(+), 121 deletions(-)
 rename Projects/Shared/DesignSystem/Sources/Component/Button/Box/{BoxButtonStyleColor.swift => BoxButtonStyleLevel.swift} (93%)
 create mode 100644 Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyle.swift
 create mode 100644 Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyleLevel.swift
 create mode 100644 Projects/Shared/DesignSystem/Sources/Component/Button/SingleIconButtonDetail.swift
 rename Projects/Shared/DesignSystem/Sources/Component/Button/Text/{TextButtonStyleColor.swift => TextButtonStyleLevel.swift} (92%)

diff --git a/Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift
index 2bb4c84..95d37ac 100644
--- a/Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift
+++ b/Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift
@@ -28,7 +28,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .large, color: .primary))
+            .buttonStyle(.box(level: .primary, size: .large))
             .disabled(false)
             
             Button(
@@ -37,7 +37,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .medium, color: .primary))
+            .buttonStyle(.box(level: .primary, size: .medium))
             .disabled(true)
             
             Button(
@@ -46,7 +46,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .small, color: .primary))
+            .buttonStyle(.box(level: .primary, size: .small))
             .disabled(false)
           }
         }
@@ -63,7 +63,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .large, color: .secondary))
+            .buttonStyle(.box(level: .secondary, size: .large))
             .disabled(false)
             
             Button(
@@ -72,7 +72,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .medium, color: .secondary))
+            .buttonStyle(.box(level: .secondary, size: .medium))
             .disabled(true)
             
             Button(
@@ -81,7 +81,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .small, color: .secondary))
+            .buttonStyle(.box(level: .secondary, size: .small))
             .disabled(false)
           }
         }
@@ -98,7 +98,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .large, color: .tertiary))
+            .buttonStyle(.box(level: .tertiary, size: .large))
             .disabled(false)
             
             Button(
@@ -107,7 +107,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .medium, color: .tertiary))
+            .buttonStyle(.box(level: .tertiary, size: .medium))
             .disabled(true)
             
             Button(
@@ -116,7 +116,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .small, color: .tertiary))
+            .buttonStyle(.box(level: .tertiary, size: .small))
             .disabled(false)
           }
           
@@ -138,7 +138,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .large, color: .primary))
+            .buttonStyle(.text(level: .primary, size: .large))
             .disabled(false)
             
             Button(
@@ -147,7 +147,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .medium, color: .primary))
+            .buttonStyle(.text(level: .primary, size: .medium))
             .disabled(true)
             
             Button(
@@ -156,7 +156,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .small, color: .primary))
+            .buttonStyle(.text(level: .primary, size: .small))
             .disabled(false)
           }
         }
@@ -173,7 +173,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .large, color: .secondary))
+            .buttonStyle(.text(level: .secondary, size: .large))
             .disabled(false)
             
             Button(
@@ -182,7 +182,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .medium, color: .secondary))
+            .buttonStyle(.text(level: .secondary, size: .medium))
             .disabled(true)
             
             Button(
@@ -191,7 +191,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .small, color: .secondary))
+            .buttonStyle(.text(level: .secondary, size: .small))
             .disabled(false)
           }
         }
@@ -205,7 +205,7 @@ struct ButtonDetailView: View {
             title: "Button",
             action: { /*action*/ }
           )
-          .buttonStyle(.box(size: .large, color: .primary, width: .low))
+          .buttonStyle(.box(level: .primary, size: .large, width: .low))
           .padding(.horizontal, 20)
         }
       }
diff --git a/Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift
index 2a0c247..7a5659e 100644
--- a/Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift
+++ b/Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift
@@ -24,8 +24,8 @@ struct TooltipDetailView: View {
           downDirectionTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: downDirectionTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: DownDirectionTooltip.self)
       
       Button(
         title: "Direction: .up, Color: .black, dim: false",
@@ -33,8 +33,8 @@ struct TooltipDetailView: View {
           upDirectionTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: upDirectionTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: UpDirectionTooltip.self)
       
       Button(
         title: "Direction: .down, Color: .white, dim: true",
@@ -42,8 +42,8 @@ struct TooltipDetailView: View {
           downDirectionWithDimTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: downDirectionWithDimTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: DownDirectionWithDimTooltip.self)
       
       Button(
         title: "Direction: .up, Color: .black, dim: true",
@@ -51,8 +51,8 @@ struct TooltipDetailView: View {
           upDirectionWithDimTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: upDirectionWithDimTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: UpDirectionWithDimTooltip.self)
     }
     .frame(maxWidth: .infinity, maxHeight: .infinity)
     .background(.yellow)
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift
index 9155bc3..5ac3389 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift
@@ -100,7 +100,7 @@ private struct ResolvedDetailStyle<Style: BarButtonDetailStyle>: View {
 }
 
 struct BarButtonDetailStyleKey: EnvironmentKey {
-  static var defaultValue: any BarButtonDetailStyle = BoxButtonDetailStyle()
+  static var defaultValue: any BarButtonDetailStyle = DefaultBarButtonDetailStyle()
 }
 
 extension EnvironmentValues {
@@ -115,3 +115,19 @@ extension View {
     environment(\.barButtonDetailStyle, style)
   }
 }
+
+struct DefaultBarButtonDetailStyle: BarButtonDetailStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    HStack(spacing: Alias.Spacing.small) {
+      configuration.leftIcon
+      configuration.title
+      configuration.rightIcon
+    }
+  }
+}
+
+struct DefaultBarButtonLabelStyle: LabelStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    configuration.title
+  }
+}
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift
index 274dcef..4f109b8 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift
@@ -11,16 +11,16 @@ import SwiftUI
 public struct BoxButtonStyle: ButtonStyle {
   @Environment(\.isEnabled) var isEnabled
   let size: BoxButtonStyleSize
-  let color: BoxButtonStyleColor
+  let level: BoxButtonStyleLevel
   let width: ButtonHuggingPriorityHorizontal
   
   public init(
     size: BoxButtonStyleSize,
-    color: BoxButtonStyleColor,
+    level: BoxButtonStyleLevel,
     width: ButtonHuggingPriorityHorizontal
   ) {
     self.size = size
-    self.color = color
+    self.level = level
     self.width = width
   }
   
@@ -34,60 +34,44 @@ public struct BoxButtonStyle: ButtonStyle {
         getBackgroundColor(isPressed: configuration.isPressed),
         in: RoundedRectangle(cornerRadius: size.radius)
       )
-      .foregroundColor(
+      .foregroundStyle(
         getForegroundColor(isPressed: configuration.isPressed)
       )
-      .labelStyle(BoxButtonLabelStyle())
-      .barButtonDetailStyle(BoxButtonDetailStyle())
+      .labelStyle(DefaultBarButtonLabelStyle())
+      .barButtonDetailStyle(DefaultBarButtonDetailStyle())
   }
   
   private func getBackgroundColor(isPressed: Bool) -> Color {
     if isEnabled {
       if isPressed {
-        return color.pressedBackground
+        return level.pressedBackground
       } else {
-        return color.defaultBackground
+        return level.defaultBackground
       }
     } else {
-      return color.disabledBackground
+      return level.disabledBackground
     }
   }
   
   private func getForegroundColor(isPressed: Bool) -> Color {
     if isEnabled {
       if isPressed {
-        return color.pressedForeground
+        return level.pressedForeground
       } else {
-        return color.defaultForeground
+        return level.defaultForeground
       }
     } else {
-      return color.disabledForeground
+      return level.disabledForeground
     }
   }
 }
 
 extension ButtonStyle where Self == BoxButtonStyle {
   public static func box(
+    level: BoxButtonStyleLevel,
     size: BoxButtonStyleSize,
-    color: BoxButtonStyleColor,
     width: ButtonHuggingPriorityHorizontal = .high
   ) -> Self {
-    return BoxButtonStyle(size: size, color: color, width: width)
-  }
-}
-
-struct BoxButtonDetailStyle: BarButtonDetailStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    HStack(spacing: Alias.Spacing.small) {
-      configuration.leftIcon
-      configuration.title
-      configuration.rightIcon
-    }
-  }
-}
-
-struct BoxButtonLabelStyle: LabelStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    configuration.title
+    return BoxButtonStyle(size: size, level: level, width: width)
   }
 }
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleColor.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleLevel.swift
similarity index 93%
rename from Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleColor.swift
rename to Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleLevel.swift
index 1b8ea84..0d01be3 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleColor.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleLevel.swift
@@ -8,13 +8,13 @@
 
 import SwiftUI
 
-public enum BoxButtonStyleColor {
+public enum BoxButtonStyleLevel {
   case primary
   case secondary
   case tertiary
 }
 
-extension BoxButtonStyleColor {
+extension BoxButtonStyleLevel {
   var defaultBackground: Color {
     switch self {
     case .primary:
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyle.swift
new file mode 100644
index 0000000..2f91275
--- /dev/null
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyle.swift
@@ -0,0 +1,67 @@
+//
+//  IconButtonStyle.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/12/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+public struct IconButtonStyle: ButtonStyle {
+  @Environment(\.isEnabled) var isEnabled
+  let isFilled: Bool
+  let level: IconButtonStyleLevel
+  
+  public init(
+    isFilled: Bool,
+    level: IconButtonStyleLevel
+  ) {
+    self.isFilled = isFilled
+    self.level = level
+  }
+  
+  public func makeBody(configuration: Configuration) -> some View {
+    configuration.label
+      .padding(Alias.Spacing.small)
+      .background(
+        getBackgroundColor(isFilled: isFilled, isPressed: configuration.isPressed),
+        in: RoundedRectangle(cornerRadius: Alias.BorderRadius.small)
+      )
+      .foregroundColor(
+        getForegroundColor(isFilled: isFilled)
+      )
+      .labelStyle(SingleIconButtonLabelStyle())
+      .singleIconButtonDetailStyle(DefaultSingleIconButtonDetailStyle())
+      .opacity(isEnabled ? 1 : 0.6)
+  }
+  
+  private func getBackgroundColor(isFilled: Bool, isPressed: Bool) -> Color {
+    if isEnabled {
+      if isPressed {
+        return isFilled ? level.pressedBackground : Global.Color.black.opacity(Alias.Interaction.pressed)
+      } else {
+        return isFilled ? level.defaultBackground : .clear
+      }
+    } else {
+      return isFilled ? level.disabledBackground : .clear
+    }
+  }
+  
+  private func getForegroundColor(isFilled: Bool) -> Color? {
+    if isFilled {
+      return level.defaultForeground
+    } else {
+      return nil
+    }
+  }
+}
+
+extension ButtonStyle where Self == IconButtonStyle {
+  public static func icon(
+    isFilled: Bool,
+    level: IconButtonStyleLevel
+  ) -> Self {
+    return IconButtonStyle(isFilled: isFilled, level: level)
+  }
+}
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyleLevel.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyleLevel.swift
new file mode 100644
index 0000000..9390764
--- /dev/null
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyleLevel.swift
@@ -0,0 +1,34 @@
+//
+//  IconButtonStyleLevel.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/12/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+public enum IconButtonStyleLevel {
+  case primary
+}
+
+extension IconButtonStyleLevel {
+  var defaultBackground: Color {
+    return Alias.Color.Background.accent1
+  }
+  
+  var disabledBackground: Color {
+    return Alias.Color.Icon.disabled
+  }
+  
+  var pressedBackground: Color {
+    return defaultBackground.opacity(0.9)
+  }
+  
+  var defaultForeground: Color {
+    switch self {
+    case .primary:
+      return Global.Color.white
+    }
+  }
+}
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/SingleIconButtonDetail.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/SingleIconButtonDetail.swift
new file mode 100644
index 0000000..5b1d175
--- /dev/null
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/SingleIconButtonDetail.swift
@@ -0,0 +1,101 @@
+//
+//  SingleIconButtonDetail.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/12/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+extension Button where Label == SingleIconButtonDetail<Image> {
+  public init(
+    icon: Image,
+    action: @escaping () -> Void
+  ) {
+    self.init(action: action) {
+      SingleIconButtonDetail {
+        icon.renderingMode(.template)
+      }
+    }
+  }
+}
+
+public struct SingleIconButtonDetail<Icon: View>: View {
+  @Environment(\.singleIconButtonDetailStyle) private var style
+  private let icon: Icon
+  
+  init(
+    @ViewBuilder icon: () -> Icon
+  ) {
+    self.icon = icon()
+  }
+  
+  public var body: some View {
+    let configuration = SingleIconButtonDetailConfiguration(icon: icon)
+    AnyView(style.resolve(configuration: configuration))
+  }
+}
+
+struct SingleIconButtonDetailConfiguration {
+  struct Icon: View {
+    let body: AnyView
+  }
+  
+  let icon: Icon
+  
+  fileprivate init(icon: some View) {
+    self.icon = Icon(body: AnyView(icon))
+  }
+}
+
+protocol SingleIconButtonDetailStyle: DynamicProperty {
+  typealias Configuration = SingleIconButtonDetailConfiguration
+  associatedtype Body: View
+  
+  @ViewBuilder func makeBody(configuration: Configuration) -> Body
+}
+
+extension SingleIconButtonDetailStyle {
+  fileprivate func resolve(configuration: Configuration) -> some View {
+    SingleIconButtonResolvedDetailStyle(style: self, configuration: configuration)
+  }
+}
+
+private struct SingleIconButtonResolvedDetailStyle<Style: SingleIconButtonDetailStyle>: View {
+  let style: Style
+  let configuration: Style.Configuration
+  
+  var body: some View {
+    style.makeBody(configuration: configuration)
+  }
+}
+
+struct SingleIconButtonDetailStyleKey: EnvironmentKey {
+  static var defaultValue: any SingleIconButtonDetailStyle = DefaultSingleIconButtonDetailStyle()
+}
+
+extension EnvironmentValues {
+  fileprivate var singleIconButtonDetailStyle: any SingleIconButtonDetailStyle {
+    get { self[SingleIconButtonDetailStyleKey.self] }
+    set { self[SingleIconButtonDetailStyleKey.self] = newValue }
+  }
+}
+
+extension View {
+  func singleIconButtonDetailStyle(_ style: some SingleIconButtonDetailStyle) -> some View {
+    environment(\.singleIconButtonDetailStyle, style)
+  }
+}
+
+struct DefaultSingleIconButtonDetailStyle: SingleIconButtonDetailStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    configuration.icon
+  }
+}
+
+struct SingleIconButtonLabelStyle: LabelStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    configuration.title
+  }
+}
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift
index 053cc56..4befd52 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift
@@ -11,14 +11,14 @@ import SwiftUI
 public struct TextButtonStyle: ButtonStyle {
   @Environment(\.isEnabled) var isEnabled
   let size: TextButtonStyleSize
-  let color: TextButtonStyleColor
+  let level: TextButtonStyleLevel
   
   public init(
     size: TextButtonStyleSize,
-    color: TextButtonStyleColor
+    level: TextButtonStyleLevel
   ) {
     self.size = size
-    self.color = color
+    self.level = level
   }
   
   public func makeBody(configuration: Configuration) -> some View {
@@ -30,59 +30,43 @@ public struct TextButtonStyle: ButtonStyle {
         getBackgroundColor(isPressed: configuration.isPressed),
         in: RoundedRectangle(cornerRadius: size.radius)
       )
-      .foregroundColor(
+      .foregroundStyle(
         getForegroundColor(isPressed: configuration.isPressed)
       )
-      .labelStyle(TextButtonLabelStyle())
-      .barButtonDetailStyle(TextButtonDetailStyle())
+      .labelStyle(DefaultBarButtonLabelStyle())
+      .barButtonDetailStyle(DefaultBarButtonDetailStyle())
   }
   
   private func getBackgroundColor(isPressed: Bool) -> Color {
     if isEnabled {
       if isPressed {
-        return color.pressedBackground
+        return level.pressedBackground
       } else {
-        return color.defaultBackground
+        return level.defaultBackground
       }
     } else {
-      return color.disabledBackground
+      return level.disabledBackground
     }
   }
   
   private func getForegroundColor(isPressed: Bool) -> Color {
     if isEnabled {
       if isPressed {
-        return color.pressedForeground
+        return level.pressedForeground
       } else {
-        return color.defaultForeground
+        return level.defaultForeground
       }
     } else {
-      return color.disabledForeground
+      return level.disabledForeground
     }
   }
 }
 
 extension ButtonStyle where Self == TextButtonStyle {
   public static func text(
-    size: TextButtonStyleSize,
-    color: TextButtonStyleColor
+    level: TextButtonStyleLevel,
+    size: TextButtonStyleSize
   ) -> Self {
-    return TextButtonStyle(size: size, color: color)
-  }
-}
-
-struct TextButtonDetailStyle: BarButtonDetailStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    HStack(spacing: Alias.Spacing.small) {
-      configuration.leftIcon
-      configuration.title
-      configuration.rightIcon
-    }
-  }
-}
-
-struct TextButtonLabelStyle: LabelStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    configuration.title
+    return TextButtonStyle(size: size, level: level)
   }
 }
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleColor.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleLevel.swift
similarity index 92%
rename from Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleColor.swift
rename to Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleLevel.swift
index 4f8647d..886242c 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleColor.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleLevel.swift
@@ -8,12 +8,12 @@
 
 import SwiftUI
 
-public enum TextButtonStyleColor {
+public enum TextButtonStyleLevel {
   case primary
   case secondary
 }
 
-extension TextButtonStyleColor {
+extension TextButtonStyleLevel {
   var defaultBackground: Color {
     return .clear
   }
diff --git a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift
index 79dd01e..40fcd4b 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift
@@ -8,9 +8,15 @@
 
 import SwiftUI
 
-struct NavigationBar<Title: View, Trailing: View, Background: ShapeStyle>: View {
+struct NavigationBar<
+  Title: View,
+  Leading: View,
+  Trailing: View,
+  Background: ShapeStyle
+>: View {
   let title: Title
-  let trailing: Trailing
+  let leading: () -> Leading
+  let trailing: () -> Trailing
   let style: NavigationBarStyle
   let background: Background
   let foregroundColor: Color
@@ -18,13 +24,15 @@ struct NavigationBar<Title: View, Trailing: View, Background: ShapeStyle>: View
   
   init(
     title: Title,
-    trailing: Trailing,
+    @ViewBuilder leading: @escaping () -> Leading,
+    @ViewBuilder trailing: @escaping () ->  Trailing,
     style: NavigationBarStyle,
     background: Background,
     foregroundColor: Color,
     onDismiss: @escaping () -> Void
   ) {
     self.title = title
+    self.leading = leading
     self.trailing = trailing
     self.style = style
     self.background = background
@@ -33,7 +41,7 @@ struct NavigationBar<Title: View, Trailing: View, Background: ShapeStyle>: View
   }
   
   var body: some View {
-    ZStack(alignment: style == .bottomSheet ? .leading : .center) {
+    ZStack(alignment: .center) {
       self.title
         .font(Typography.bodySB)
         .lineLimit(1)
@@ -41,35 +49,39 @@ struct NavigationBar<Title: View, Trailing: View, Background: ShapeStyle>: View
       HStack {
         switch style {
         case .modal:
-          Button {
-            self.onDismiss()
-          } label: {
-            DesignSystemAsset.Image._24CancelPrimary.swiftUIImage
-              .renderingMode(.template)
-              .foregroundStyle(foregroundColor)
+          if Leading.self != EmptyView.self {
+            self.leading()
           }
           Spacer()
-          self.trailing
+          if Trailing.self == EmptyView.self {
+            Button(
+              icon: DesignSystemAsset.Image._24CancelPrimary.swiftUIImage,
+              action: {
+                self.onDismiss()
+              }
+            )
+            .buttonStyle(.icon(isFilled: false, level: .primary))
+            .foregroundStyle(foregroundColor)
+          } else {
+            self.trailing()
+          }
           
         case .navigation:
-          Button {
-            self.onDismiss()
-          } label: {
-            DesignSystemAsset.Image._24ArrowLeftPrimary.swiftUIImage
-              .renderingMode(.template)
-              .foregroundStyle(foregroundColor)
+          if Leading.self == EmptyView.self {
+            Button(
+              icon: DesignSystemAsset.Image._24ArrowLeftPrimary.swiftUIImage,
+              action: {
+                self.onDismiss()
+              }
+            )
+            .buttonStyle(.icon(isFilled: false, level: .primary))
+            .foregroundStyle(foregroundColor)
+          } else {
+            self.leading()
           }
           Spacer()
-          self.trailing
-          
-        case .bottomSheet:
-          Spacer()
-          Button {
-            self.onDismiss()
-          } label: {
-            DesignSystemAsset.Image._24CancelPrimary.swiftUIImage
-              .renderingMode(.template)
-              .foregroundStyle(foregroundColor)
+          if Leading.self != EmptyView.self {
+            self.trailing()
           }
         }
       }
diff --git a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift
index aa82cf8..6548fd7 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift
@@ -11,5 +11,4 @@ import Foundation
 public enum NavigationBarStyle {
   case modal
   case navigation
-  case bottomSheet
 }
diff --git a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift
index 32ff2e8..2b43515 100644
--- a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift
+++ b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift
@@ -12,11 +12,18 @@ import SwiftUI
 
 /// 기본 NavigationBar
 /// - content는 기본적으로 VStack(spacing: .zero){} 를 적용받습니다
-public struct NavigationContainer<Content: View, Title: View, Trailing: View, Background: ShapeStyle>: View {
+public struct NavigationContainer<
+  Content: View,
+  Title: View,
+  Leading: View,
+  Trailing: View,
+  Background: ShapeStyle
+>: View {
   @Environment(\.dismiss) var _dismiss
   
   private let title: Title
-  private let trailing: Trailing
+  private let leading: () -> Leading
+  private let trailing: () -> Trailing
   private let style: NavigationBarStyle
   private let navBackground: Background
   private let navForegroundColor: Color
@@ -25,7 +32,8 @@ public struct NavigationContainer<Content: View, Title: View, Trailing: View, Ba
   
   public init(
     title: Title = EmptyView(),
-    trailing: Trailing = EmptyView(),
+    @ViewBuilder leading: @escaping () -> Leading = { EmptyView() },
+    @ViewBuilder trailing: @escaping () -> Trailing = { EmptyView() },
     style: NavigationBarStyle,
     navBackground: Background = Global.Color.gray50,
     navForegroundColor: Color = Alias.Color.Text.primary,
@@ -33,6 +41,7 @@ public struct NavigationContainer<Content: View, Title: View, Trailing: View, Ba
     @ViewBuilder content: @escaping () -> Content
   ) {
     self.title = title
+    self.leading = leading
     self.trailing = trailing
     self.style = style
     self.navBackground = navBackground
@@ -45,6 +54,7 @@ public struct NavigationContainer<Content: View, Title: View, Trailing: View, Ba
     VStack(spacing: .zero) {
       NavigationBar(
         title: self.title,
+        leading: self.leading,
         trailing: self.trailing,
         style: self.style,
         background: self.navBackground,
@@ -55,6 +65,7 @@ public struct NavigationContainer<Content: View, Title: View, Trailing: View, Ba
         }
       )
       self.content()
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
     }
     .frame(maxWidth: .infinity, maxHeight: .infinity)
     .navigationBarHidden(true)