Task 5) Kiosk App Project

soy·2024년 12월 2일

iOS-Task

목록 보기

7/12

- 바로가기

☕️ CoCafe
전체적인 뷰
UISegmentedControl
Git Conflict

첫 프로젝트!

캠프 들어와서 첫 프로젝트로 키오스크/ 모바일 주문 앱을 구현하는 팀 과제를 하게 되었다.

우리 팀 이름이 내 이름은 코난 탐정 2조 였기 때문에 , , 코난을 컨셉으로 잡고 개발을 해보자는 의견을 반영하였다!

CoCafe

☕️ CoCafe GitHub

코난이 잠복 수사를 위해 카페를 만든 상황으로,
손님과의 대면을 최소화하기 위해 카페의 키오스크 / 모바일 주문 앱을 이용한다는 컨셉으로 잡았다!

--> 그리하여 그 매장의 키오스크를 우리가 만드는 것!

프로젝트의 전반적인 설명과 내용은 GIthub 리드미에 작성해두었기 때문에, 해당 게시글에는 링크 만 첨부하고, 트러블 슈팅이나 개인적으로 느꼈던 부분들에 대해서 작성할 예정이다.

전체적인 뷰

위와 같이 하나의 View 안에서 각자의 역할을 나누어 작업한 후, StackView로 합치기로 했다.

나는 상단의 ImageView와 SegmentedControl 부분을 개발하게 됐다!

UISegmentedControl

보기엔 단순하고, 쉬워보인다 . . . . .
실제로도 구현 자체는 하나도 어렵지 않음!

과제 안내 노션에서 UISegmentedControl이 제시되어 있길래 선택했던 것인데 ,,,,
예상치도 못한 부분에서 시간을 엄청 쏟게 되었다 ㅜ_ㅜ

원래 카테고리바 부분을 빨리 진행한 후에 다른 팀원이 맡은 하단 메뉴 테이블뷰 구현을 도와드리려고 했는데,
뷰 구현은 못도와드리고 연결 부분에서 어려움을 겪으셔서 메뉴 테이블뷰에서 주문 내역 테이블 뷰 연결 구현을 맡아서 하게 되었다!

문제를 겪었던 부분: 디자인 설정

원래 의도했던 디자인이다.
위와 다른 점은, 각 버튼이 하나씩 분리되어있다는 것이다!

버튼에 디자인을 입히는 것은 하나도 어렵지 않기에,,,
하지만 SegmentedControl의 특성을 알지 못하고 진행한 디자인이기도 하다!
(저 부분은;; 내가 만듦.. 내 탓이다 흐흑 ㅜ_ㅜ)

시도 1) selectedSegmentTintColor 사용

선택된 세그먼트 갈색 만들기

private lazy var menuSegmentedControl: UISegmentedControl = {            
	control.selectedSegmentTintColor = UIColor(named: "MainColor") // 선택된 세그먼트 색상 설정
	return control
}()

MainColor를 Assets에 추가해 준 후, selectedSegmentTintColor 설정해주었다. (다른 코드들은 생략함!)

segment가 선택되었을 때 갈색으로 잘 설정되었다!
그래! 이제 배경만 하얗게 해주면되는 것이야!

배경 하얀색으로 설정하기

private lazy var menuSegmentedControl: UISegmentedControl = {            
	control.selectedSegmentTintColor = UIColor(named: "MainColor") // 선택된 세그먼트 색상 설정
	control.backgroundColor = .white
	return control
}()

control.backgroundColor = .white 코드로 배경색을 설정해주었다.

어라 ㅜㅜ 배경이 하얗게 안되고, 기존에 설정해둔 그림자 효과가 SegmentControl 뒤로 가버림..

배경을 투명으로 설정하기

white가 문제인가? 배경을 .clear 로 바꿔보자!

control.backgroundColor = .clear

여전히 결과는 동일하다.... 미세하게 차이는 있으나 배경이 사라지진 않음 ㅜㅜ

이 쯤까지 비슷한 시도를 n번 진행한 후, 우선 카테고리 가운데 선 (divider) 부터 없애보자 싶어서 해당 작업을 먼저 진행했다!

Segment Divider 없애기

control.setDividerImage(UIImage(), forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)

setDividerImage 사용하여! 없애준다!

시도 2) setBackgroundImage 사용

normal 상태

배경을 없앨 수 있는 방법을 서칭 하던 중, setBackgroundImage에 대해서 알게 되었고

control.selectedSegmentTintColor = UIColor(named: "MainColor") // 선택된 세그먼트 색상 설정
control.backgroundColor = .white
        
control.setDividerImage(UIImage(), forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
        
control.setBackgroundImage(UIImage(), for: .normal, barMetrics: .default)

해당 코드를 통해 바로 적용해준다!

나의 계획은
1. 배경 없애기
2. selected일 땐 갈색
이었지만..

selected일 때 갈색 효과 어디갔능교... -_-

아하! 배경이 흰색이라 그런가?
control.backgroundColor = .white 를 삭제해준다!

이렇게 되었다.

아래가 현재 코드인데, 왜 지금 봐도 저렇게 되는지 몰겠다.. ㅜ_ㅜ
배경 없애고, selected일 때 색도 골라뒀는데 왜!

control.selectedSegmentTintColor = UIColor(named: "MainColor") // 선택된 세그먼트 색상 설정
       
control.setDividerImage(UIImage(), forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
        
control.setBackgroundImage(UIImage(), for: .normal, barMetrics: .default)

selected 상태일 때도 setBackgroundImage을 적용해주자!

control.setBackgroundImage(UIImage(named: "Image"), for: .selected, barMetrics: .default)

Assets에 버튼 이미지를 넣어 해당 코드를 추가해주었다!

그런데 뭔가 이상하다...
버튼을 클릭하면 text가 아래로 내려가는 것 -_-

뭐가 문제지!!?? 싶었는데!

view hierarchy 를 확인해보니, 버튼 이미지에 그림자 효과까지 담겨있던 부분까지 인식해서 중앙에 넣어주고 있는 것이었다!

그래서 곧장 그림자 효과가 없는 이미지를 넣어주었다!
그렇지만,, 처음과 의도한 코드와는 모습이 다르다 ㅠㅠ (해결책을 찾지 못함)

setBackgroundImage의 barMetrics를 .default로 설정해주어서 그런거 같은데, 이 부분을 다른 속성으로 바꿔줘도 결과는 동일했다 ㅠㅠ

이런 저런 글을 찾아보았지만.. 결국 해내지 못했고,, 튜터님께도 이에 대해 말씀 드려보았다!

UIsegmentedControl 1
UIsegmentedControl 2

위와 같이 두가지 포스팅 글을 보내주셨다!!
그렇지만 해결못한 이유는, 해당 게시글에서도 setBackgroundImage를 적용하자 segmentedControl의 바 모양이 나와 동일하게 바뀐다..

사실 나로써는 안바뀌는게 좀 이상할 정도라.. ~~팀원들도 나를 조금 답답해 할까봐 걱정이 됐다...........~~ 하지만 그것보단 나 스스로가 더 답답한 상태여서;; 그렇게까지 걱정은 안됐지만은 ...

결국 팀원들에게 말해서 기존 디자인을 조금 수정하기로 했다!

야호 이거에서 벗어나고 델리게이트 설정하고 끝 . . .

최종 코드

private lazy var menuSegmentedControl: UISegmentedControl = {
        let items: [String] = Category.allCases.map { $0.rawValue }
        let control = UISegmentedControl(items: items)
        control.selectedSegmentIndex = 0
        
        let normalAttributes: [NSAttributedString.Key: Any] = [
            .foregroundColor: UIColor(named: "MainColor") ?? .black,
            .font: UIFont.systemFont(ofSize: 16)
        ]
        let selectedAttributes: [NSAttributedString.Key: Any] = [
            .foregroundColor: UIColor.white,
            .font: UIFont.boldSystemFont(ofSize: 16)
        ]

        control.setTitleTextAttributes(normalAttributes, for: .normal)
        control.setTitleTextAttributes(selectedAttributes, for: .selected)
                
        control.setDividerImage(UIImage(), forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
        
        control.setBackgroundImage(UIImage(), for: .normal, barMetrics: .default)
        control.setBackgroundImage(UIImage(named: "CategorySelectedImage"), for: .selected, barMetrics: .default)
        
        control.layer.shadowColor = UIColor.black.cgColor
        control.layer.shadowOpacity = 0.3
        control.layer.shadowOffset = CGSize(width: 0, height: 2)
        control.layer.shadowRadius = 4
        control.layer.masksToBounds = false
        
        return control
    }()

Git Conflict

마주하고 말았다
Github를 사용한 순간부터 조심했던 아이인데.....
원래 혼자 깃허브 썼을 땐 충돌 나도 내가 해결할 수 없는 지경에 가면.. 그냥 레포지토리 삭제해버림;; (극단적..)
이것도 나 혼자 작업했기에 가능했던 건데..

아~ 협업에서 그럴 순 없잖아여
것보다도 내 커밋들~ 너무 아깝소!!!!!!!!

충돌이 난 이유

아래와 같다..

여기서 작업 3 이 나였음 ..

휴지통에 남겨진.. 성준님,, 명지님의 작업물
아~ 미안합니다 ㅜㅜ
난 그냥 내 작업만 하고 다시 합치려했지만.....
팀장님의 말씀에 따르면 파일 흔적은 있는데 파일이 없어서 충돌난 거 같다고 하셨다..

사실 우리 팀은 매우 조심조심조심히 하고 있었기에.. 진짜 꼽을 수 있는 충돌 사유가 나 뿐이었지만..

돌이켜서 생각해보면 내가 삭제해놓고 빠릿빠릿하게 해결을 못한거 같음 ㅠㅠ 미안합니다..
내가 너무 모르고 괜히 건드렸다가 이상해질 거 만 같은 . . . 기분이 든 게 너무 오래만이었다 , , , ,
명지님이랑 하민님이 뚝딱뚝딱 .. 하다가 하민님이 손머지로.. 완성시켜주심..
감사합니다 ㅜㅜ

ㅜㅜ
여러분 제가 깃을 더 공부하여 깃 박사가 되어오겠습니다..