GaNaDa - MemoPage(2)

지난 글

https://daebong-monk.tistory.com/50

GaNaDa - MemoPage

 

 

---

1.  RatingView

AddWordView에서 보면 단어의 난이도를 사용자가 입력할 수 있게끔 별 모양을 선택할 수 있는 것을 볼 수 있다. 여기서는 바인딩을 이용하여 속성에 대한 난이도 등급을 다른 View에서도 영향을 받게끔 하였다.

@Binding var rating: Int

var label = ""

var maximumRating = 5

var offImage: Image?
var onImage = Image(systemName: "star.fill")

var offColor = Color.gray
var onColor = Color.yellow

 

색상의 차이를 두기 위해 offColor, onColor로 나눠 만약 전달된 숫자가 현재 등급 보다 높다면 오프 이미지를, 그렇지 않다면 온 이미지를 출력하게끔 하였다. 또한 전달된 숫자가 현재 등급 이하면 on 이미지를 반환하게 된다.

 

func image(for number: Int) -> Image {
    if number > rating {
        return offImage ?? onImage
    } else {
        return onImage
    }
}

 

이어서 body에서는 ForEach를 사용하여 사용자의 평가 등급에 따라 위에서 설정해둔 offColor 또는 onColor로 전환하게끔 하여 사용자가 별모양을 누를 때마다 색상이 변환되게끔 해보았다. 그리고 이전 글에서 나온 AddWordView의 섹션에 해당 View를 집어넣어 주면 쉽게 마무리된다.

 

ForEach(1..<maximumRating + 1, id:\.self) { number in
                image(for: number)
                    .foregroundColor(number > rate ? offColor : onColor)
                    .onTapGesture {
                        rate = number

 

---

 

2.  RatingDetail View

나의 경우 메모 리스트에서 해당 단어의 난이도를 바로바로 확인할 수있게끔 하는것이 주 목적이였는데, 저상태로 리스트를 확인 해보면 단어와 함께 별모양이 함께 출력되면서 너무 많은 자리 차지와 함께 포커스가 단어가 아닌 별에 집중이 되면서 의도와는 다른 방향으로 간것을 확인 하고 별을 바로 출력하는것이 아닌 더 깔끔하면서 난이도를 확인 할 수 있는 작은 장치가 하나 필요했다.

 

그래서 여기서 사용한 방법은 rate 값을 switch문으로 전환하여 귀여운 이모티콘을 이용해 간단하면서도 사용자가 알아보기 쉽게 만들어 보고 싶었다. 예를 들면?

 

난이도

• 최하(별 1개) =  🤩
• 하(별 2개) = 😊
• 중(별 3개) = 🧐
• 상(별 4개) = 🥵
• 최상(별 5개) =😱
• default(별 0개) =❓

 

이런 식으로 rate의 값을 변환해주는 작업을 해주는 것이다. 그럼 아무래도 많은 자리 차지를 하지도 않을 것이라 생각했다. 바로 코드를 보자.

 

let rate: Int16
    
    var body: some View {
        switch rate {
        case 1:
            Text("🤩")
        case 2:
            Text("😊")
        case 3:
            Text("🧐")
        case 4:
            Text("🥵")
        case 5:
            Text("😱")
        default:
            Text("❔")
        }

 

---

3. 최종

 

이제 다 끝났다. 한번 결과물을 보면서 어떤 식으로 해당 뷰들이 작동되고, 표현하는지 확인해보자!

 

 

 

 

---

 

 

추가적으로 영상에는 리스트 요소를 삭제하는 장면은 나오지 않지만 원하는 리스트의 요소를 좌측으로 슬라이드 하면 해당 요소는 삭제되게 된다.

 

삭제 전

---

 

삭제 후

 

 

---

4. 이전 MemoView와 비교

이전 MemoView 

 

현재 MemoView 

 

이전의 경우 메모장의 가장 중요한 기능 중 하나인 데이터 저장의 역할을 제대로 구현하지 못하였기도 했지만, Core Data를 학습할 겸 새로운 페이지로 바꿔버리고 싶은 생각이 있었는데 이전보다 깔끔하고 데이터 저장도 삭제하지 않는 한 재시작을 하여도 변경사항이 잘 반영되어있는 것을 확인하였다. 지금도 완벽하다고는 생각하지 않지만 하나씩 수정해나가면서 이전보다 만족감을 느끼는 자신을 확인해보니 뿌듯한 것 같다!!!👋