klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 홈 메인

Browse Source 
- 추천 채널 UI 추가
This commit is contained in:
Yu Sung
2025-07-14 14:21:31 +09:00
parent b6e5b629ae
commit 0f658d07af
7 changed files with 222 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
SodaLive/Sources/Home/HomeTabView.swift
View File

@@ -136,23 +136,27 @@ struct HomeTabView: View {
HomeWeeklyChartView(contentList: viewModel.contentRanking)
}
VStack(alignment: .leading, spacing: 16) {
HStack(spacing: 0) {
Text("추천")
.font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(.button)
Text(" 채널")
.font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(.white)
}
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
if !viewModel.recommendChannelList.isEmpty {
VStack(alignment: .leading, spacing: 16) {
HStack(spacing: 0) {
Text("추천")
.font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(.button)
Text(" 채널")
.font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(.white)
}
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
ForEach(0..<viewModel.recommendChannelList.count, id: \.self) {
RecommendChannelItemView(item: viewModel.recommendChannelList[$0])
}
}
.padding(.horizontal, 24)
}
}
}

70
SodaLive/Sources/Home/RecommendChannel/RecommendChannelContentItemView.swift Normal file
View File

@@ -0,0 +1,70 @@
//
// RecommendChannelContentItemView.swift
// SodaLive
//
// Created by klaus on 7/14/25.
//
import SwiftUI
import Kingfisher
struct RecommendChannelContentItemView: View {
@AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
let item: RecommendChannelContentItem
var body: some View {
HStack(spacing: 16) {
KFImage(URL(string: item.thumbnailImageUrl))
.resizable()
.frame(width: 60, height: 60)
.cornerRadius(12)
VStack(alignment: .leading, spacing: 2) {
Text(item.title)
.font(.custom(Font.preRegular.rawValue, size: 18))
.foregroundColor(.white)
.lineLimit(1)
.truncationMode(.tail)
HStack(spacing: 12) {
HStack(spacing: 4) {
Image("ic_heart_dark_green")
Text("\(item.likeCount)")
.font(.custom(Font.preRegular.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
}
HStack(spacing: 4) {
Image("ic_comment_dark_green")
Text("\(item.commentCount)")
.font(.custom(Font.preRegular.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
}
}
}
}
.onTapGesture {
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
AppState.shared.setAppStep(step: .contentDetail(contentId: item.contentId))
} else {
AppState.shared.setAppStep(step: .login)
}
}
}
}
#Preview {
RecommendChannelContentItemView(
item: RecommendChannelContentItem(
contentId: 1,
title: "고품격 음악 밥솥",
thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
likeCount: 999,
commentCount: 99
)
)
}

92
SodaLive/Sources/Home/RecommendChannel/RecommendChannelItemView.swift Normal file
View File

@@ -0,0 +1,92 @@
//
// RecommendChannelItemView.swift
// SodaLive
//
// Created by klaus on 7/14/25.
//
import SwiftUI
import Kingfisher
struct RecommendChannelItemView: View {
@AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
let item: RecommendChannelResponse
var body: some View {
VStack(alignment: .leading, spacing: 12) {
HStack(spacing: 6) {
KFImage(URL(string: item.creatorProfileImageUrl))
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 80, height: 80, alignment: .top)
.clipShape(Circle())
VStack(alignment: .leading, spacing: 4) {
Text(item.creatorNickname)
.font(.custom(Font.preBold.rawValue, size: 24))
.foregroundColor(.white)
HStack(spacing: 4) {
Text("콘텐츠")
.font(.custom(Font.preRegular.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
Text("\(item.contentCount)")
.font(.custom(Font.preBold.rawValue, size: 18))
.foregroundColor(.white)
}
}
}
ForEach(0..<item.contentList.count, id: \.self) {
RecommendChannelContentItemView(item: item.contentList[$0])
}
}
.padding(20)
.frame(width: 280, alignment: .leading)
.background(
LinearGradient(
gradient: Gradient(colors: [Color(hex: "5ACDE1"), Color(hex: "2A339D")]),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.cornerRadius(16)
}
}
#Preview {
RecommendChannelItemView(
item: RecommendChannelResponse(
channelId: 1,
creatorNickname: "닉네임",
creatorProfileImageUrl: "https://cf.sodalive.net/profile/34638/34638-profile-5bfc2bac-3278-48f8-b60c-1294b615f629-8832-1751707083877",
contentCount: 55,
contentList: [
RecommendChannelContentItem(
contentId: 1,
title: "고품격 음악 밥솥",
thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
likeCount: 999,
commentCount: 99
),
RecommendChannelContentItem(
contentId: 2,
title: "고품격 음악 밥솥",
thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
likeCount: 999,
commentCount: 99
),
RecommendChannelContentItem(
contentId: 3,
title: "고품격 음악 밥솥",
thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
likeCount: 999,
commentCount: 99
)
]
)
)
}