오늘의 작업 내용

MyPage 화면 UI 개선
"내가 등록한 킥보드" 섹션과 "킥보드 이용 내역" 섹션을 포함하는 MyPage 화면을 설계 및 수정.
보라색 컨테이너와 흰색 둥근 이미지 배경을 활용해 깔끔한 디자인 완성.
KickboardSectionView 개선
보라색 박스를 추가하여 타이틀과 내용을 감싸도록 수정.
각 킥보드 이미지는 둥근 흰색 배경 안에 들어가도록 처리.
StackView를 사용해 이미지 간격을 일정하게 조정.
클릭 이벤트를 추가해 데이터를 전달할 수 있도록 구현.
HistorySectionView 수정
"킥보드 이용 내역" 타이틀을 보라색 상자에 포함.
각 내역을 흰색 박스와 킥보드 이미지를 좌측에 배치해 정돈된 레이아웃 완성.
내역이 겹치거나 어색하게 보이는 문제를 해결하고 좌우 간격을 균등하게 설정.

주요 코드 정리

KickboardSectionView

func configure(with kickboards: [Kickboard], imageSize: CGSize, onTap: @escaping (Kickboard) -> Void) {
    self.onTap = onTap
    stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

    for kickboard in kickboards {
        let imageContainer = UIView()
        imageContainer.backgroundColor = .white
        imageContainer.layer.cornerRadius = imageSize.width / 2
        imageContainer.layer.shadowOpacity = 0.1

        let imageView = UIImageView(image: UIImage(named: kickboard.isSeat ? "QuickBoard - Seat" : "QuickBoard"))
        imageView.contentMode = .scaleAspectFit
        imageContainer.addSubview(imageView)

        NSLayoutConstraint.activate([
            imageContainer.widthAnchor.constraint(equalToConstant: imageSize.width),
            imageView.centerXAnchor.constraint(equalTo: imageContainer.centerXAnchor)
        ])
        
        stackView.addArrangedSubview(imageContainer)
    }
}

HistorySectionView

func configure(with history: [KickboardHistory], imageSize: CGSize) {
    stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }

    for item in history {
        let container = UIView()
        container.layer.cornerRadius = 10

        let imageView = UIImageView(image: UIImage(named: item.isSeat ? "QuickBoard - Seat" : "QuickBoard"))
        let infoLabel = UILabel()
        infoLabel.text = "\(item.date) | \(item.time)"

        container.addSubview(imageView)
        container.addSubview(infoLabel)

        NSLayoutConstraint.activate([
            imageView.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 10),
            infoLabel.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: 10)
        ])

        stackView.addArrangedSubview(container)
    }
}

배운 점

UI 구성 시 StackView 사용
UIStackView를 활용하면 뷰 간의 간격과 정렬을 깔끔하게 맞출 수 있다.
distribution과 alignment 속성으로 레이아웃 조정이 편리하다.
클릭 이벤트 처리
UITapGestureRecognizer를 사용해 뷰에 터치 이벤트를 추가할 수 있다.
이벤트 발생 시 데이터를 전달할 수 있도록 클로저를 구현.
UI 일관성 유지
각 섹션에 동일한 디자인 원칙을 적용해 화면 전체가 일관되게 보이도록 구현.
간격, 색상, 배경 등의 요소를 통일시킴.

다음 작업 계획

KickboardDetailView의 UI를 추가로 다듬고 상세 화면 연결.
클릭 이벤트를 통해 킥보드 상세 화면으로 이동하는 기능 최적화.
전체 화면 테스트 및 UI 검토를 통해 사용자 경험 개선.