536 lines
19 KiB
Swift
536 lines
19 KiB
Swift
//
|
|
// MyPageView.swift
|
|
// SodaLive
|
|
//
|
|
// Created by klaus on 2023/08/09.
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
import Bootpay
|
|
import BootpayUI
|
|
import PopupView
|
|
import Kingfisher
|
|
import RefreshableScrollView
|
|
|
|
struct MyPageView: View {
|
|
|
|
@StateObject var viewModel = MyPageViewModel()
|
|
@StateObject var recentContentViewModel = RecentContentViewModel()
|
|
|
|
@State private var payload = Payload()
|
|
@AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
|
|
|
|
var body: some View {
|
|
BaseView(isLoading: $viewModel.isLoading) {
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty &&
|
|
viewModel.isShowAuthView {
|
|
BootpayUI(payload: payload, requestType: BootpayRequest.TYPE_AUTHENTICATION)
|
|
.onConfirm {
|
|
DEBUG_LOG("onConfirm: \($0)")
|
|
return true
|
|
}
|
|
.onCancel {
|
|
DEBUG_LOG("onCancel: \($0)")
|
|
}
|
|
.onError {
|
|
DEBUG_LOG("onError: \($0)")
|
|
viewModel.errorMessage = "본인인증 중 오류가 발생했습니다."
|
|
viewModel.isShowPopup = true
|
|
viewModel.isShowAuthView = false
|
|
}
|
|
.onDone {
|
|
DEBUG_LOG("onDone: \($0)")
|
|
viewModel.authVerify($0)
|
|
}
|
|
.onClose {
|
|
DEBUG_LOG("onClose")
|
|
viewModel.isShowAuthView = false
|
|
}
|
|
} else {
|
|
VStack(spacing: 0) {
|
|
// Header
|
|
MyPageHeaderView(
|
|
isShowButton: !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
|
|
)
|
|
|
|
if let notice = viewModel.latestNotice {
|
|
// Update Banner
|
|
UpdateBannerView(item: notice)
|
|
}
|
|
|
|
ScrollView(.vertical, showsIndicators: false) {
|
|
VStack(spacing: 32) {
|
|
// Profile Section
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
ProfileSectionView(
|
|
nickname: viewModel.nickname,
|
|
profileUrl: viewModel.profileUrl
|
|
) {
|
|
viewModel.getMypage()
|
|
}
|
|
.padding(.horizontal, 24)
|
|
} else {
|
|
HStack {
|
|
Text("LOGIN")
|
|
.font(.custom(Font.preBold.rawValue, size: 32))
|
|
.foregroundColor(Color.gray77)
|
|
}
|
|
.padding(.vertical, 12)
|
|
.frame(maxWidth: .infinity)
|
|
.background(Color.gray22)
|
|
.cornerRadius(16)
|
|
.padding(.horizontal, 24)
|
|
.onTapGesture {
|
|
AppState.shared
|
|
.setAppStep(step: .login)
|
|
}
|
|
}
|
|
|
|
if UserDefaults.string(forKey: .role) == MemberRole.CREATOR.rawValue {
|
|
Text("내 채널 보기")
|
|
.font(.custom(Font.preBold.rawValue, size: 16))
|
|
.foregroundColor(Color.white)
|
|
.padding(.vertical, 12)
|
|
.frame(maxWidth: .infinity)
|
|
.background(Color.button)
|
|
.cornerRadius(16)
|
|
.padding(.horizontal, 24)
|
|
.onTapGesture {
|
|
AppState.shared.setAppStep(step: .creatorDetail(userId: UserDefaults.int(forKey: .userId)))
|
|
}
|
|
}
|
|
|
|
// Can & Point Cards
|
|
CanPointCardsView(
|
|
can: viewModel.chargeCan + viewModel.rewardCan,
|
|
point: viewModel.point,
|
|
token: token,
|
|
refresh: { viewModel.getMypage() }
|
|
)
|
|
.padding(.horizontal, 24)
|
|
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
// Category Buttons
|
|
CategoryButtonsView(
|
|
isShowAuthView: $viewModel.isShowAuthView,
|
|
isAuthenticated: viewModel.isAuth,
|
|
showMessage: {
|
|
viewModel.errorMessage = $0
|
|
viewModel.isShowPopup = true
|
|
},
|
|
refresh: {
|
|
viewModel.getMypage()
|
|
}
|
|
)
|
|
.padding(.horizontal, 24)
|
|
}
|
|
|
|
if let url = URL(string: "https://blog.naver.com/sodalive_official"),
|
|
UIApplication.shared.canOpenURL(url) {
|
|
// Voice On Banner
|
|
Image("img_introduce_voiceon")
|
|
.padding(.horizontal, 24)
|
|
.onTapGesture {
|
|
UIApplication.shared.open(url)
|
|
}
|
|
}
|
|
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty && !recentContentViewModel.recentContents.isEmpty {
|
|
// Recent 10 Section
|
|
RecentContentSection(recentContents: recentContentViewModel.recentContents)
|
|
}
|
|
}
|
|
.padding(.vertical, 32)
|
|
}
|
|
}
|
|
.background(Color(hex: "131313"))
|
|
.onAppear {
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
viewModel.getMypage()
|
|
recentContentViewModel.fetchRecentContents()
|
|
}
|
|
viewModel.getLatestNotice()
|
|
}
|
|
}
|
|
}
|
|
.popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
|
|
GeometryReader { geo in
|
|
HStack {
|
|
Spacer()
|
|
Text(viewModel.errorMessage)
|
|
.padding(.vertical, 13.3)
|
|
.frame(width: geo.size.width - 66.7, alignment: .center)
|
|
.font(.custom(Font.medium.rawValue, size: 12))
|
|
.background(Color.button)
|
|
.foregroundColor(Color.white)
|
|
.multilineTextAlignment(.center)
|
|
.cornerRadius(20)
|
|
.padding(.top, 66.7)
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
.onAppear {
|
|
payload.applicationId = BOOTPAY_APP_ID
|
|
payload.price = 0
|
|
payload.pg = "다날"
|
|
payload.method = "본인인증"
|
|
payload.orderName = "본인인증"
|
|
payload.authenticationId = "\(UserDefaults.string(forKey: .nickname))__\(String(NSTimeIntervalSince1970))"
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Header View
|
|
struct MyPageHeaderView: View {
|
|
|
|
let isShowButton: Bool
|
|
|
|
var body: some View {
|
|
HStack {
|
|
// Logo
|
|
Image("img_text_logo") // 로고 이미지 위치
|
|
|
|
Spacer()
|
|
|
|
if isShowButton {
|
|
HStack(spacing: 24) {
|
|
// Settings Icon
|
|
Image("ic_settings")
|
|
.foregroundColor(.white)
|
|
.frame(width: 24, height: 24)
|
|
.onTapGesture {
|
|
AppState.shared.setAppStep(step: .settings)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal, 24)
|
|
.padding(.vertical, 20)
|
|
}
|
|
}
|
|
|
|
// MARK: - Update Banner View
|
|
struct UpdateBannerView: View {
|
|
|
|
let item: NoticeItem
|
|
|
|
var body: some View {
|
|
HStack {
|
|
Text("\(item.title)")
|
|
.font(.system(size: 16))
|
|
.foregroundColor(Color(hex: "B0BEC5"))
|
|
|
|
Spacer()
|
|
|
|
HStack(spacing: 2) {
|
|
Text("자세히")
|
|
.font(.system(size: 16))
|
|
.foregroundColor(Color(hex: "B0BEC5"))
|
|
|
|
Image(systemName: "chevron.right")
|
|
.foregroundColor(Color(hex: "B0BEC5"))
|
|
.frame(width: 24, height: 24)
|
|
}
|
|
}
|
|
.padding(.horizontal, 24)
|
|
.padding(.vertical, 6)
|
|
.background(Color.black)
|
|
.contentShape(Rectangle())
|
|
.onTapGesture {
|
|
AppState.shared.setAppStep(step: .noticeDetail(notice: item))
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Profile Section View
|
|
struct ProfileSectionView: View {
|
|
|
|
let nickname: String
|
|
let profileUrl: String
|
|
let refresh: () -> Void
|
|
|
|
var body: some View {
|
|
VStack(spacing: 16) {
|
|
HStack(spacing: 20) {
|
|
// Profile Image Placeholder
|
|
KFImage(URL(string: profileUrl))
|
|
.resizable()
|
|
.frame(width: 64, height: 64)
|
|
.clipShape(Circle())
|
|
|
|
VStack(alignment: .leading) {
|
|
Text("\(nickname)")
|
|
.font(.system(size: 18, weight: .bold))
|
|
.foregroundColor(.white)
|
|
}
|
|
|
|
Spacer()
|
|
|
|
Button("프로필 수정") {
|
|
if AppState.shared.roomId <= 0 {
|
|
AppState.shared.setAppStep(step: .profileUpdate(refresh: refresh))
|
|
}
|
|
}
|
|
.padding(.horizontal, 12)
|
|
.padding(.vertical, 6)
|
|
.background(Color(hex: "263238"))
|
|
.foregroundColor(.white)
|
|
.cornerRadius(9999)
|
|
.font(.system(size: 16))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Can Point Cards View
|
|
struct CanPointCardsView: View {
|
|
|
|
let can: Int
|
|
let point: Int
|
|
let token: String
|
|
let refresh: () -> Void
|
|
|
|
var body: some View {
|
|
// Can & Point Cards
|
|
VStack(spacing: 0) {
|
|
// Can Card
|
|
HStack {
|
|
HStack(spacing: 8) {
|
|
Image("ic_can")
|
|
|
|
Text("\(can)")
|
|
.font(.system(size: 18, weight: .bold))
|
|
.foregroundColor(.white)
|
|
|
|
Image(systemName: "chevron.right")
|
|
.foregroundColor(Color(hex: "B0BEC5"))
|
|
.frame(width: 24, height: 24)
|
|
}
|
|
.onTapGesture {
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
AppState.shared.setAppStep(step: .canStatus(refresh: refresh))
|
|
} else {
|
|
AppState.shared
|
|
.setAppStep(step: .login)
|
|
}
|
|
}
|
|
|
|
Spacer()
|
|
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
Button("캔 충전") {
|
|
AppState.shared.setAppStep(step: .canCharge(refresh: refresh))
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 11)
|
|
.background(Color.button)
|
|
.cornerRadius(9999)
|
|
.foregroundColor(.white)
|
|
.font(.system(size: 16, weight: .bold))
|
|
} else {
|
|
Text("")
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 11)
|
|
.background(Color.clear)
|
|
.foregroundColor(.white)
|
|
.font(.system(size: 16, weight: .bold))
|
|
}
|
|
}
|
|
.padding(15)
|
|
|
|
// Point Card
|
|
HStack {
|
|
HStack(spacing: 8) {
|
|
Image("ic_point")
|
|
|
|
Text("\(point)")
|
|
.font(.system(size: 18, weight: .bold))
|
|
.foregroundColor(.white)
|
|
|
|
Image(systemName: "chevron.right")
|
|
.foregroundColor(Color(hex: "B0BEC5"))
|
|
.frame(width: 24, height: 24)
|
|
}
|
|
.onTapGesture {
|
|
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
AppState.shared.setAppStep(step: .pointStatus(refresh: refresh))
|
|
} else {
|
|
AppState.shared
|
|
.setAppStep(step: .login)
|
|
}
|
|
}
|
|
|
|
Spacer()
|
|
|
|
Text("")
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 11)
|
|
.background(Color.clear)
|
|
.foregroundColor(.white)
|
|
.font(.system(size: 16, weight: .bold))
|
|
}
|
|
.padding(15)
|
|
}
|
|
.background(Color(hex: "263238"))
|
|
.cornerRadius(16)
|
|
}
|
|
}
|
|
|
|
// MARK: - Category Buttons View
|
|
struct CategoryButtonsView: View {
|
|
@Binding var isShowAuthView: Bool
|
|
|
|
let isAuthenticated: Bool
|
|
let showMessage: (String) -> Void
|
|
let refresh: () -> Void
|
|
|
|
var body: some View {
|
|
LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 4), spacing: 16) {
|
|
CategoryButtonItem(icon: "ic_my_storage", title: "보관함") {
|
|
AppState.shared.setAppStep(step: .myBox(currentTab: .orderlist))
|
|
}
|
|
|
|
CategoryButtonItem(icon: "ic_my_block", title: "차단목록") {
|
|
AppState.shared.setAppStep(step: .blockList)
|
|
}
|
|
|
|
CategoryButtonItem(
|
|
icon: "ic_my_coupon",
|
|
title: "쿠폰등록"
|
|
) {
|
|
if isAuthenticated {
|
|
AppState.shared.setAppStep(step: .canCoupon(refresh: refresh))
|
|
} else {
|
|
showMessage("본인인증 후 등록합니다.")
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
|
|
isShowAuthView = true
|
|
}
|
|
}
|
|
}
|
|
|
|
CategoryButtonItem(icon: "ic_my_notice", title: "공지사항") {
|
|
AppState.shared.setAppStep(step: .notices)
|
|
}
|
|
|
|
CategoryButtonItem(icon: "ic_my_event", title: "이벤트") {
|
|
AppState.shared.setAppStep(step: .events)
|
|
}
|
|
|
|
CategoryButtonItem(icon: "ic_my_service_center", title: "고객센터") {
|
|
AppState.shared.setAppStep(step: .serviceCenter)
|
|
}
|
|
|
|
CategoryButtonItem(
|
|
icon: "ic_my_auth",
|
|
title: isAuthenticated ? "인증완료" : "본인인증"
|
|
) {
|
|
if !isAuthenticated {
|
|
isShowAuthView = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct CategoryButtonItem: View {
|
|
let icon: String
|
|
let title: String
|
|
let onClick: () -> Void
|
|
|
|
var body: some View {
|
|
VStack(spacing: 12) {
|
|
// Icon Placeholder
|
|
RoundedRectangle(cornerRadius: 16)
|
|
.foregroundColor(Color(hex: "15202F"))
|
|
.frame(width: 76, height: 76)
|
|
.overlay{
|
|
Image(icon)
|
|
}
|
|
|
|
Text(title)
|
|
.font(.custom(Font.preRegular.rawValue, size: 14))
|
|
.foregroundColor(.white)
|
|
}
|
|
.onTapGesture {
|
|
onClick()
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Recent 10 Content Section
|
|
struct RecentContentSection: View {
|
|
|
|
let recentContents: [RecentContent]
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 14) {
|
|
HStack(spacing: 0) {
|
|
Text("최근 들은 ")
|
|
.font(.custom(Font.preBold.rawValue, size: 16))
|
|
.foregroundColor(Color(hex: "B0BEC5"))
|
|
|
|
Text("\(recentContents.count)")
|
|
.font(.custom(Font.preBold.rawValue, size: 16))
|
|
.foregroundColor(Color(hex: "FDC118"))
|
|
}
|
|
.padding(.horizontal, 24)
|
|
|
|
ScrollView(.horizontal, showsIndicators: false) {
|
|
HStack(spacing: 16) {
|
|
ForEach(0..<recentContents.count, id: \.self) { index in
|
|
RecentItemView(content: recentContents[index])
|
|
}
|
|
}
|
|
.padding(.horizontal, 24)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct RecentItemView: View {
|
|
|
|
let content: RecentContent
|
|
|
|
var body: some View {
|
|
VStack(spacing: 8) {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
KFImage(URL(string: content.coverImageUrl))
|
|
.cancelOnDisappear(true)
|
|
.resizable()
|
|
.scaledToFill()
|
|
.frame(width: 160, height: 160, alignment: .top)
|
|
.cornerRadius(16)
|
|
|
|
Text(content.title)
|
|
.font(.custom(Font.preRegular.rawValue, size: 18))
|
|
.foregroundColor(.white)
|
|
.multilineTextAlignment(.leading)
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
.lineLimit(1)
|
|
.padding(.horizontal, 6)
|
|
.padding(.top, 8)
|
|
|
|
|
|
Text(content.creatorNickname)
|
|
.font(.custom(Font.preRegular.rawValue, size: 14))
|
|
.foregroundColor(Color(hex: "78909C"))
|
|
.lineLimit(1)
|
|
.padding(.horizontal, 6)
|
|
.padding(.top, 4)
|
|
}
|
|
.frame(width: 160)
|
|
.onTapGesture {
|
|
AppState.shared.setAppStep(step: .contentDetail(contentId: Int(content.contentId)))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct MyPageView_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
MyPageView()
|
|
}
|
|
}
|