[Feat] WordStudyView, DictionaryView UI 구현

JLPTVoca/JLPTVoca/Assets.xcassets/Image/wordCardBlue.imageset/Contents.json

@@ -1,11 +1,11 @@
 {
   "images" : [
     {
+      "filename" : "wordCardBlue.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "wordCardBlue.png",
       "idiom" : "universal",
       "scale" : "2x"
     },

JLPTVoca/JLPTVoca/Assets.xcassets/Image/wordCardRed.imageset/Contents.json

@@ -1,11 +1,11 @@
 {
   "images" : [
     {
+      "filename" : "wordCardRed.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "wordCardRed.png",
       "idiom" : "universal",
       "scale" : "2x"
     },

JLPTVoca/JLPTVoca/Constants/StringConstants.swift

@@ -22,3 +22,7 @@ enum DetailChart {
 enum SpeechBubble {
     static let main = "단어의 시작은 집중력!"
 }
+
+enum QuitStudy {
+    static let title = "오늘의 단어 학습을 마쳤어요!"
+}

JLPTVoca/JLPTVoca/ContentView.swift

@@ -20,7 +20,7 @@ struct ContentView: View {
                     Label("학습", systemImage: "house.fill")
                 }
 
-            DictionaryView()
+            SelectDictionaryView()
                 .tabItem {
                     Label("사전", systemImage: "book.fill")
                 }

JLPTVoca/JLPTVoca/Views/Dictionary/DictionaryView.swift

@@ -10,23 +10,22 @@ import SwiftUI
 struct DictionaryView: View {
     @Environment(WordManager.self) private var wordManager
 
+    let type: DictionaryType
+
     var body: some View {
-        NavigationStack {
-            List(wordManager.studyStateDeck) { state in
-                VStack(alignment: .leading) {
-                    Text(state.word.plainJapanese)
-                        .font(.headline)
-                    Text(state.word.korean)
-                        .font(.subheadline)
-                        .foregroundStyle(.secondary)
-                }
-            }
-            .navigationTitle("JLPT Dictionary")
-        }
+        DictionaryWordCard(
+            japanese: "四字熟語",
+            furigana: "よじじゅくご",
+            korean: "사자성어",
+            level: 111,
+            maturity: 2222222,
+            isFavorite: true
+        )
+        .overlay(
+            RoundedRectangle(cornerRadius: 15)
+            .stroke(
+                Color.black50,
+                lineWidth: 1
+            ))
     }
 }
-
-#Preview {
-    DictionaryView()
-        .environment(WordManager())
-}

JLPTVoca/JLPTVoca/Views/Dictionary/DictionaryWordCard.swift

@@ -0,0 +1,84 @@
+//
+//  DictionaryWordCard.swift
+//  JLPTVoca
+//
+//  Created by Rama on 9/20/25.
+//
+
+import SwiftUI
+
+struct DictionaryWordCard: View {
+    @State private var isFavorited = false
+
+    var japanese: String
+    var furigana: String
+    var korean: String
+    var level: Int
+    var maturity: Int
+    var isFavorite: Bool
+
+    var body: some View {
+        Button(action: { }) {
+            HStack {
+                wordContent()
+                Spacer()
+                wordInfo()
+            }
+            .padding(12)
+        }
+    }
+
+    private func wordContent() -> some View {
+        VStack(alignment: .leading) {
+            HStack {
+                Text("\(japanese)")
+                    .font(.wdl)
+                    .foregroundStyle(Color.black100)
+                    .padding(.trailing, 12)
+
+                Text("\(furigana)")
+                    .font(.furi)
+                    .foregroundStyle(Color.black50)
+            }
+            .padding(.bottom, 8)
+
+            Text("\(korean)")
+                .font(.b4)
+                .foregroundStyle(Color.black100)
+        }
+    }
+
+    private func wordInfo() -> some View {
+        VStack(alignment: .trailing, spacing: 12) {
+            HStack {
+                Text("N\(level)")
+                    .font(.min)
+                    .foregroundStyle(Color.black70)
+                    .padding(.horizontal, 8)
+                    .padding(.vertical, 4)
+                    .background(Color.black.opacity(0.05))
+                    .clipShape(RoundedRectangle(cornerRadius: 6))
+
+                HStack(spacing: 4) {
+                    Circle()
+                        .fill(Color.cyan)
+                        .frame(width: 8, height: 8)
+
+                    Text("\(maturity)")
+                        .font(.min)
+                        .foregroundStyle(Color.black70)
+                }
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
+                .background(Color.black.opacity(0.05))
+                .clipShape(RoundedRectangle(cornerRadius: 6))
+            }
+
+            Spacer().frame(height: 12)
+
+            FavoriteButton(
+                isFavorited: isFavorited,
+                action: { })
+        }
+    }
+}

JLPTVoca/JLPTVoca/Views/Dictionary/SelectDictionaryView.swift

@@ -0,0 +1,113 @@
+//
+//  SelectDictionaryView.swift
+//  JLPTVoca
+//
+//  Created by Rama on 9/19/25.
+//
+
+import SwiftUI
+
+enum SelectDictConstants {
+    static let imageSize: CGFloat = 48
+    static let imageLeadingPadding: CGFloat = 14
+    static let imageTrailingPadding: CGFloat = 24
+    static let imageVerticalPadding: CGFloat = 10
+
+    static let iconWidth: CGFloat = 10
+    static let iconHeight: CGFloat = 18
+    static let iconTrailingPadding: CGFloat = 30
+
+    static let buttonPadding: CGFloat = 16
+    static let buttonRadius: CGFloat = 10
+
+    static let tableVStackSpacing: CGFloat = 16
+}
+
+enum DictionaryType {
+    case entire
+    case favorite
+
+    var title: String {
+        switch self {
+        case .entire:
+            return "전체 단어"
+        case .favorite:
+            return "즐겨찾기 한 단어"
+        }
+    }
+
+    var image: Image {
+        switch self {
+        case .entire:
+            return Image(.wordCardRed)
+        case .favorite:
+            return Image(.wordCardBlue)
+        }
+    }
+}
+
+struct SelectDictionaryView: View {
+    @State private var router = NavigationManager<DictionaryRoute>()
+
+    var body: some View {
+        NavigationStack(path: $router.path) {
+            ZStack(alignment: .topLeading) {
+                Color.black5.ignoresSafeArea()
+
+                Group {
+                    VStack(alignment: .leading ,spacing: SelectDictConstants.tableVStackSpacing) {
+                        dictionaryTypeButton(type: .entire)
+                        dictionaryTypeButton(type: .favorite)
+                    }
+                }
+                .padding(.horizontal, SelectDictConstants.buttonPadding)
+            }
+            .navigationDestination(for: DictionaryRoute.self) { route in
+                switch route {
+                case .entireWords:
+                    DictionaryView(type: .entire)
+                case .favoriteWords:
+                    DictionaryView(type: .favorite)
+                }
+            }
+        }
+        .environment(router)
+    }
+
+    private func dictionaryTypeButton(type: DictionaryType) -> some View {
+        return Button(action: {
+            switch type {
+            case .entire:
+                router.navigate(.entireWords)
+            case .favorite:
+                router.navigate(.favoriteWords)
+            }
+        }) {
+            HStack {
+                type.image
+                    .resizable()
+                    .frame(width: SelectDictConstants.imageSize, height: SelectDictConstants.imageSize)
+                    .padding(.leading, SelectDictConstants.imageLeadingPadding)
+                    .padding(.trailing, SelectDictConstants.imageTrailingPadding)
+                    .padding(.vertical, SelectDictConstants.imageVerticalPadding)
+
+                Text(type.title)
+                    .font(.b4)
+                    .foregroundStyle(Color.black100)
+
+                Spacer()
+
+                Image(systemName: "chevron.right")
+                    .foregroundStyle(Color.black50)
+                    .frame(width: SelectDictConstants.iconWidth, height: SelectDictConstants.iconHeight)
+                    .padding(.trailing, SelectDictConstants.iconTrailingPadding)
+            }
+        }
+        .background(Color.white0)
+        .clipShape(RoundedRectangle(cornerRadius: SelectDictConstants.buttonRadius))
+    }
+}
+
+#Preview {
+    SelectDictionaryView()
+}

JLPTVoca/JLPTVoca/Views/Study/FavoriteButton.swift

@@ -0,0 +1,25 @@
+//
+//  FavoriteButton.swift
+//  JLPTVoca
+//
+//  Created by Rama on 9/20/25.
+//
+
+import SwiftUI
+
+enum FavoriteButtonConstant {
+    static let ImageSize: CGFloat = 30
+}
+
+struct FavoriteButton: View {
+    let isFavorited: Bool
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            Image(isFavorited ? .favoriteIconActivated : .favoriteIconInactivated)
+                .resizable()
+                .frame(width: FavoriteButtonConstant.ImageSize, height: FavoriteButtonConstant.ImageSize)
+        }
+    }
+}