내가 필요한 다이어리3

망할 git

왜 브런치 파서 저장하고 푸쉬하고 머지하고 풀하고 뭐가 안되는거지?

이건 내가 나중에 무조건 해결한다

(자꾸 git merge만 하면 xcode가 안뜨는 상황

 

keep해두고

 

오늘은 지출 작성 화면과 감정 기록 화면을 만들어 보았는데

일단 먼저 결과화면~

보면서 차근차근 뭐 했는지 말해보겠음

 

일단 저 카드 ui? 를 만드느냐고 좀 걸린 것 같다

// 지출 항목을 그리드 형식으로 표시
LazyVGrid(columns: [GridItem(.flexible())]) {
    // 항목 개수만큼 반복
    ForEach($expenseItems, id: \.id) { $item in
        VStack {
            HStack {
                Text("분류")
                    .frame(height: 40)
                    .padding(.leading, 20)
                    .padding(.top, 8)
                // Picker를 사용하여 분류 선택
                Picker(
                    "category",
                    selection: $item.category
                ){
                    ForEach(Category.allCases) { category in
                        Text(category.rawValue.capitalized)
                    }
                }
                .pickerStyle(.automatic)
                .frame(maxWidth: .infinity)
                .frame(height: 40)
                .background(RoundedRectangle(cornerRadius: 10)
                    .fill(.white))
                .padding(.init(top: 16, leading: 16, bottom: 8, trailing: 16))
            }

            // 가격 입력
            HStack {
                Text("가격")
                    .frame(height: 40)
                    .padding(.leading, 20)
                TextField("", text: $item.price)
                    .frame(maxWidth: .infinity)
                    .frame(height: 40)
                    .background(RoundedRectangle(cornerRadius: 10)
                        .fill(.white))
                    .padding(.leading, 16)
                    .padding(.trailing, 16)
            }

            // 내용 입력
            HStack {
                VStack {
                    Text("내용")
                        .padding(.leading, 20)
                        .padding(.top, 24)
                    Spacer()
                }
                TextEditor(text: $item.detail)
                    .frame(maxWidth: .infinity)
                    .frame(height: 90)
                    .cornerRadius(10)
                    .padding(.init(top: 8, leading: 16, bottom: 16, trailing: 16))
            }

        }
        .frame(maxWidth: .infinity)
        .frame(height: 244)
        .background(
            RoundedRectangle(cornerRadius: 10)
            .fill(.gray))
    }
}

 

LazyVGrid를 사용해서 나중에 추가 제거를 용이하게 했고

LazyVGrid(columns:[GridItem(.flexible())])를 하나만(?)적어서 원하는 모양에 도달했음

- LazyVGrid(columns:[GridItem(.flexible()), GridItem(.flexible())]) 아마 이렇게 하면 2줄이 됨

 

그리고 $Item으로 표현해서 '$' 표시가 바인딩하는 것을 나타냄

 

중간에 Picker 라는 게 있는데 결과화면에 '고정비'라고 적혀있는 것을 구현하느냐고 사용함

// 지출 항목의 카테고리를 열거형으로 정의
// CaseIterable를 사용하여 모든 케이스에 접근 가능
enum Category: String, CaseIterable, Identifiable {
    case 고정비, 생활비, 활동비, 친목비, 꾸밈비, 차량비, 기여비, 예비비
    
    // 카테고리 이름 반환
    var category: String {
        switch self {
        case .고정비: return "고정비"
        case .생활비: return "생활비"
        case .활동비: return "활동비"
        case .친목비: return "친목비"
        case .꾸밈비: return "꾸밈비"
        case .차량비: return "차량비"
        case .기여비: return "기여비"
        case .예비비: return "예비비"
        }
    }
    
    // Identifiable 프로토콜을 충족하기 위한 id 속성
    var id: Self { self }
}

// 지출 항목
struct ExpenseItem {
    var id: UUID = UUID() // 고유 식별자
    var category: Category // 분류
    var price: String = "" // 가격
    var detail: String = "" // 내용
}

 

Picker를 누르면 고정비~ 예비비까지 목록으로 나오고 원하는 것을 선택하게 끔 구현

 

궁금해서 CaseIterable하고 Identifiable 프로토콜이 뭔지 찾아봤는데

 

CaseIterable은 열거형(enum)에 적용할 수 있고, 이 프로토콜을 채택하면 모든 케이스를 배열 형태로 접근할 수 있게함

-> 열거형의 모든 케이스를 순회할 수 있게 함

 

Identifiable은 각 인스턴스를 고유하게 식별할 수 있도록 해주는 프로토콜로, 데이터를 다루는 리스트나 컬렉션 뷰에서 각 요소를 식별할 때 사용

id 라는 속성을 제공해야하고, id 속서은 각 인스턴스를 고유하게 식별할 수 있는 값이어야 함

 

@State private var sliderValue1 = 0.0
@State private var sliderValue2 = 0.0
@State private var sliderValue3 = 0.0
@State private var sliderValue4 = 0.0
@State private var sliderValue5 = 0.0

var minimumValue = 0.0
var maximumValue = 100.0

var body: some View {
    VStack{
        Text("행복😊")
        HStack {

            Slider(value: $sliderValue1, in: minimumValue...maximumValue)
                .accentColor(.orange)

            Text("\(Int(sliderValue1))")
                .frame(width: 40)
        }
    }
}

 

감정 기록 화면은 Slider만 구현했는데

이것도 각 Slider마다 값이 달라야하기 때문에 @State를 종류 개수만큼 만들어준 뒤에

복사 붙여넣기 해서 구현