design: Top 5 섹션 폰트 크기, 간격 조정하기

Author: kitcat-s

AIProject/iCo/Features/Base/SegmentedControlView.swift

@@ -36,11 +36,11 @@ struct SegmentedControlView: View {
                     }
                 } label: {
                     Text(tabTitles[idx])
-                        .font(selection == idx ? .ico17B : .ico17)
+                        .font(selection == idx ? .ico15B : .ico15)
                         .frame(maxWidth: .infinity)
                         .padding(.horizontal, 14)
                         .padding(.vertical, 8)
-                        .foregroundColor(selection == idx ? .iCoBackgroundWhite : .iCoLabelSecondary)
+                        .foregroundColor(selection == idx ? .white : .iCoLabelSecondary)
                         .background(
                             ZStack {
                                 if selection == idx {

AIProject/iCo/Features/Dashboard/View/AIBriefingView.swift

@@ -29,7 +29,7 @@ struct AIBriefingView: View {
         SubheaderView(subheading: "시장 한눈에 보기")
             .padding(.bottom, 4)
 
-        VStack(alignment: .leading, spacing: 20) {
+        VStack(alignment: .leading, spacing: 16) {
             FearGreedView()
 
             VStack(spacing: 16) {

AIProject/iCo/Features/Dashboard/View/TopCoinListView.swift

@@ -18,10 +18,9 @@ struct TopCoinListView: View {
                     .foregroundStyle(.iCoAccent)
 
                 Text("주목할 만한 코인 TOP5")
+                    .foregroundStyle(.iCoLabel)
             }
             .font(.ico18B)
-            .padding(.horizontal, 22)
-            .padding(.top, 20)
 
             SegmentedControlView(
                 selection: Binding(
@@ -35,14 +34,16 @@ struct TopCoinListView: View {
                 tabTitles: TopCoinListViewModel.SegmentType.allCases.map { $0.rawValue },
                 width: .infinity
             )
-            .padding(.horizontal)
+            .padding(.horizontal, -4)
+            .padding(.bottom, 4)
 
             if viewModel.isLoading {
                 DefaultProgressView(status: .loading, message: "시세 불러오는중")
             } else {
                 TopCoinListSection(viewModel: viewModel)
             }
         }
+        .padding(22)
         .background(.iCoBackground)
         .clipShape(RoundedRectangle(cornerRadius: 20))
         .overlay(
@@ -95,10 +96,10 @@ struct TopCoinListSection: View {
                 } label: {
                     HStack {
                         Text("\(index + 1)")
-                            .font(.ico16B)
+                            .font(.ico15B)
                             .foregroundColor(.iCoAccent)
                             .padding(.trailing, 16)
-
+                        
                         CachedAsyncImage(resource: .symbol(coin.coinSymbol)) {
                             Text(String(coin.coinSymbol.prefix(1)))
                                 .font(.ico17Sb)
@@ -115,7 +116,9 @@ struct TopCoinListSection: View {
 
                         VStack(alignment: .leading, spacing: 8) {
                             Text(viewModel.koreanName(for: coin.id))
-                                .font(.ico17)
+                                .font(.ico15Sb)
+                                .lineLimit(1)
+                                .foregroundStyle(.iCoLabel)
                             if viewModel.selectedSegment == .volume {
                                 Text(coin.formatedVolume)
                                     .font(.ico14)
@@ -129,6 +132,7 @@ struct TopCoinListSection: View {
                                     )
                             }
                         }
+                        .padding(.trailing, 8)
 
                         Spacer()
 
@@ -137,21 +141,24 @@ struct TopCoinListSection: View {
                                 values: values,
                                 lineColor: coin.change == .fall ? .iCoNegative : .iCoPositive
                             )
-                            .frame(width: 100, height: 40)
+                            .frame(width: 80, height: 40)
                         } else {
                             ProgressView()
-                                .frame(width: 100, height: 40)
+                                .frame(width: 80, height: 40)
                         }
                     }
-                    .padding(.vertical, 16)
-                    .padding(.horizontal, 22)
+                    .padding(.bottom, index != viewModel.topCoins.count - 1 ? 14 : 0)
                 }
                 .buttonStyle(.plain)
             }
         }
+        .padding(.vertical, 4)
     }
 }
 
 #Preview {
     TopCoinListView()
+        .environmentObject(ThemeManager())
+        .environment(CoinStore(coinService: DefaultCoinService(network: NetworkClient())))
+        .padding()
 }