APP-iOS3rd / PJ3T2_Mymory

멋쟁이사자처럼 iOS 앱스쿨 3기 팀 프로젝트
10 stars 3 forks source link

[Feat] 각 메모의 테마를 Firestore에 저장, 수정, 불러오는 기능을 구현했어요.(메모지 CRUD) #234

Closed xohxe closed 7 months ago

xohxe commented 7 months ago

PR 가이드라인

PR Checklist

PR 날릴 때 체크 리스트

PR Type

어떤 종류의 PR인가요?

연관되는 issue 정보를 알려주세요

Issue Number: #225

PR 설명하기

이 PR에 대해 간략하게 소개해주세요!

어떻게 작동하나요? code 기반으로 설명해주세요

기존 메모 Model에 memoTheme을 추가했어요.

struct Memo: Hashable, Codable, Identifiable, Equatable{
  var memoTheme: ThemeType
}

MemoService에도 데이터타입에 맞게, Firestore에 데이터를 저장하는 코드를 추가해줬어요.

extension MemoService {

  func uploadMemo(newMemo: PostMemoModel) async throws {
    // ....
    try await memoDocumentRef.setData([
    // ....
    // Firebase에는 String타입으로 바꿔 저장하기 위함.
      "memoTheme": newMemo.memoTheme.rawValue 
     ]) 
  }
  func updateMemo(documentID: String, updatedMemo: PostMemoModel) async {
   // ....
   do {
         // ....
           // Firebase에는 String타입으로 바꿔 저장하기 위함. 
            let memoThemeString = updatedMemo.memoTheme.rawValue
            try await memoDocumentRef.setData([
                "memoTheme": memoThemeString
            ], merge: true)
        } catch {
             // ....
        }
    }

   private func fetchMemoFromDocument(documentID: String, data: [String: Any]) async throws -> Memo? {
   // ...
   // firestore에 저장된 data는 string이고, memo로 갖고오기 위해서는 데이터 타입을 바꿔줘야합니다.
    let memoTheme = data["memoTheme"] as? ThemeType.RawValue ?? "System"   
    let memoThemefromString = ThemeType(rawValue: memoTheme) ?? .system

        return Memo(
            // ....
            memoTheme: memoThemefromString
        )
   }
  }

다른 테마를 추가하고 싶다면 ThemeType에 case를 추가하고 textColor, bgColor를 각각 지정해주면 됩니다.

enum ThemeType: String, CaseIterable, Codable {
    case system = "System"
    case light = "Light"
    case dark = "Dark"
    case atom = "Atom"
   // 케이스 계속 추가...

}
final class ThemeManager: ObservableObject {
  // 추가로 기존에 userDefault에 저장하는 코드는 삭제
}

그리고 ThemeView 대신 MemoThemeView를 사용했어요. 해당 부분은 PostView에서 메모지 선택 시, Sheet로 메모지를 선택할 수 있습니다. (아래 영상 참고)

struct MemoThemeView: View {

    @ObservedObject var themeManager: ThemeManager = .shared
    @StateObject var viewModel: PostViewModel = PostViewModel()
    @Binding var currentTheme: ThemeType // binding하여 상위 뷰 전달

    var body: some View {

              // ....
              // 변경 Preview
              VStack(alignment: .leading, spacing: 10){
                    Text("메모지 컬러 변경")
                        .font(.bold20)
                    Text("현재 글의 메모지 선택 설정을 변경할 수 있습니다.")
                        .font(.medium16)
                }
                .background(currentTheme.bgColor)
                .foregroundColor(currentTheme.textColor)

         ForEach(themeManager.themeList, id:\.self) { theme in
                 // ....
                 // theme 변경하는 버튼
                Button {
                      currentTheme = themeManager.setTheme(themeType: theme)
                 } label: {
                       Text(theme.rawValue)
                 }
        }

    }
}

가능하다면 추가해주세요

변경 사항 스크린샷 혹은 화면 녹화

https://github.com/APP-iOS3rd/PJ3T2_Mymory/assets/75136643/785ea287-ab0f-4b5e-ade2-567afeb9b5ef

기타 언급해야 할 사항들