Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] RewindJourney Scene #110

Closed
Closed
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions iOS/.swiftlint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,9 @@ type_name:
max_length:
warning: 40
error: 1000

# 중첩 타입
nesting:
type_level:
warning: 3
error: 4
8 changes: 8 additions & 0 deletions iOS/Features/RewindJourney/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.DS_Store
/.build
/Packages
xcuserdata/
DerivedData/
.swiftpm/configuration/registries.json
.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
.netrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
57 changes: 57 additions & 0 deletions iOS/Features/RewindJourney/Package.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
// swift-tools-version: 5.9
// The swift-tools-version declares the minimum version of Swift required to build this package.

import PackageDescription

// MARK: - Constants

extension String {
static let package = "RewindJourney"
static let rewindJourneyView = "RewindJourneyView"
static let msUIKit = "MSUIKit"
static let msFoundation = "MSFoundation"
static let msDesignsystem = "MSDesignSystem"
static let msLogger = "MSLogger"

var testTarget: String {
return self + "Tests"
}

var path: String {
return "../../" + self
}

var featurePath: String {
return "../Features/" + self
}

}

// MARK: - Package

let package = Package(
name: .package,
platforms: [
.iOS(.v15)
],
products: [
.library(
name: .rewindJourneyView,
targets: [.rewindJourneyView])
],
dependencies: [
.package(path: .msUIKit.path),
.package(path: .msFoundation.path)
],
targets: [
// Codes
.target(
name: .rewindJourneyView,
dependencies: [
.product(name: .msUIKit, package: .msUIKit),
.product(name: .msDesignsystem, package: .msUIKit),
.product(name: .msLogger, package: .msFoundation)])

// Tests
]
)
173 changes: 173 additions & 0 deletions iOS/Features/RewindJourney/Sources/RewindJourneyView/MSMusicView.swift
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MSMusicView랑 MSProgressView는 MSUIKit에 넣어도 될 것 같은데 어떻게 생각하시나요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 저희 앱에선 해당 화면 외에 사용할 일이 없어 굳이 빼지 않는 것이 좋을 것 같아요!

Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
//
// MSMusicView.swift
// RewindJourney
//
// Created by 전민건 on 11/22/23.
//

import UIKit

import MSDesignSystem
import MSLogger
import MSUIKit

final class MSMusicView: UIProgressView {

// MARK: - Constants

private enum Metric {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상수들 let으로 변경해주세요..!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이건.. 죄송합니다


static var verticalInset: CGFloat = 8.0
static var horizonalInset: CGFloat = 12.0
static var cornerRadius: CGFloat = 8.0

// albumart view
enum AlbumArtView {
static var height: CGFloat = 52.0
static var width: CGFloat = 52.0
}
// title view
enum TitleView {
static var height: CGFloat = 4.0
static var inset: CGFloat = 4.0
static var titleHight: CGFloat = 24.0
static var subTitleHight: CGFloat = 20.0
}

// playtime view
enum PlayTimeView {
static var width: CGFloat = 67.0
static var verticalInset: CGFloat = 22.0
static var horizonalInset: CGFloat = 4.0
static var conponentsHeight: CGFloat = 24.0
}

}

private enum Default {

// titleView
enum TitleView {
static var title: String = "Attention"
static var subTitle: String = "NewJeans"
static var defaultIndex: Int = 0
}

// stackView
enum PlayTime {
static var time: String = "00 : 00"
}

}

// MARK: - UI Components

private var albumArtView = UIImageView()
private var titleStackView = UIStackView()
private var titleLabel = UILabel()
private var subTitleLabel = UILabel()
private var playTimeStackView = UIStackView()
private var playTimeLabel = UILabel()
private let playTimeIconView = UIImageView(image: .msIcon(.voice))

// MARK: - UI Configuration

public func configure() {
self.configureLayout()
self.configureStyle()
}

// MARK: - UI Configuration: layout

private func configureLayout() {
self.configureAlbumArtViewLayout()
self.configurePlayTimeViewLayout()
self.configureTitleViewLayout()
}

private func configureAlbumArtViewLayout() {
self.addSubview(self.albumArtView)
self.albumArtView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.albumArtView.topAnchor.constraint(equalTo: self.topAnchor, constant: Metric.verticalInset),
self.albumArtView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -Metric.verticalInset),
self.albumArtView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: Metric.horizonalInset),
self.albumArtView.widthAnchor.constraint(equalToConstant: Metric.AlbumArtView.width)
])
}

private func configureTitleViewLayout() {
self.addSubview(self.titleStackView)
self.titleStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.titleStackView.topAnchor.constraint(equalTo: self.topAnchor,
constant: Metric.verticalInset),
self.titleStackView.bottomAnchor.constraint(equalTo: self.bottomAnchor,
constant: -Metric.verticalInset),
self.titleStackView.leadingAnchor.constraint(equalTo: self.albumArtView.trailingAnchor,
constant: Metric.horizonalInset),
self.titleStackView.trailingAnchor.constraint(equalTo: self.playTimeStackView.leadingAnchor,
constant: -Metric.horizonalInset)
])

self.titleStackView.addArrangedSubview(self.titleLabel)
self.titleStackView.addArrangedSubview(self.subTitleLabel)

self.titleStackView.axis = .vertical
self.titleStackView.spacing = Metric.TitleView.inset
}

private func configurePlayTimeViewLayout() {
self.addSubview(self.playTimeStackView)
self.playTimeStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.playTimeStackView.topAnchor.constraint(equalTo: self.topAnchor,
constant: Metric.PlayTimeView.verticalInset),
self.playTimeStackView.bottomAnchor.constraint(equalTo: self.bottomAnchor,
constant: -Metric.PlayTimeView.verticalInset),
self.playTimeStackView.widthAnchor.constraint(equalToConstant: Metric.PlayTimeView.width),
self.playTimeStackView.trailingAnchor.constraint(equalTo: self.trailingAnchor,
constant: -Metric.horizonalInset)
])

self.playTimeStackView.addArrangedSubview(self.playTimeIconView)
self.playTimeStackView.addArrangedSubview(self.playTimeLabel)

self.playTimeStackView.axis = .horizontal
self.playTimeStackView.spacing = Metric.PlayTimeView.horizonalInset
self.titleStackView.distribution = .fill
}

// MARK: - UI Configuration: style

private func configureStyle() {
self.clipsToBounds = true
self.layer.cornerRadius = Metric.cornerRadius
self.trackTintColor = .msColor(.secondaryBackground)
self.progressTintColor = .msColor(.musicSpot)
self.progress = 0.4

self.configureAlbumArtViewStyle()
self.configureTitleViewStyle()
self.configurePlayTimeViewStyle()
}

private func configureAlbumArtViewStyle() {
self.albumArtView.backgroundColor = .blue
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
self.albumArtView.backgroundColor = .blue
self.albumArtView.backgroundColor = .msColor(.secondaryBackground)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이미지를 추가하면 사용자에겐 보이지 않으나
다른 분이 저 albumArtView를 작업했을 때, 해당 View의 범위를 시각적으로 보일 수 있게 임의 색상값을 주었습니다.

생각해보니, 이 부분에서 지우고 Preview 코드에 색상값을 주는 코드를 추가해 가시적으로 하면 좋을 것 같네요!
피드백 감사합니다.

}

private func configureTitleViewStyle() {
self.titleLabel.text = Default.TitleView.title
self.titleLabel.font = .msFont(.buttonTitle)
self.subTitleLabel.text = Default.TitleView.subTitle
self.subTitleLabel.font = .msFont(.paragraph)
}

private func configurePlayTimeViewStyle() {
self.playTimeLabel.text = Default.PlayTime.time
self.playTimeLabel.font = .msFont(.caption)
self.playTimeLabel.textColor = .msColor(.secondaryTypo)
self.playTimeIconView.tintColor = .msColor(.secondaryTypo)
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
//
// MSProgressView.swift
// RewindJourney
//
// Created by 전민건 on 11/22/23.
//

import UIKit

public final class MSProgressView: UIProgressView {

// MARK: - Properties

internal var percentage: Float = 0.0 {
didSet {
syncProgress(percentage: percentage)
}
}
internal var isHighlight: Bool = false {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isHighlighted가 뭔가 문법 상 더 적절할 것 같습니다.

didSet {
self.percentage = self.isHighlight ? 1.0 : 0.0
}
}

// MARK: - Configure

private func configureColor() {
self.trackTintColor = .systemGray6
self.tintColor = .white
}

// MARK: - Initializer

public override init(frame: CGRect) {
super.init(frame: frame)
self.configureColor()
}

required init?(coder: NSCoder) {
fatalError("MusicSpot은 code-based 로 개발되었습니다.")
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fatalError("MusicSpot은 code-based 로 개발되었습니다.")
fatalError("MusicSpot은 code-based로만 작업 중입니다.")

이것도 통일할까요 😋

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 내용 swift 컨밴션에 추가해두겠습니다.

}

// MARK: - Functions: change progress

private func syncProgress(percentage: Float) {
self.progress = percentage
}
Comment on lines +45 to +47
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 함수는 public으로 해야하지 않을까요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

percentage에 따라 바 모양을 바꾸어주는 함수입니다.
private으로 내부에서만 사용되어야하는 함수가 맞습니다.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 그러면 isHighlighted 프로퍼티로 패키지 내부에서만 조정하는건가 보군요?
실제로 동작은 투명한 버튼 두개로 하는거고..!?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 넵 맞습니다!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 알겠습니다
확인했습니다!


}
Loading