[#260] TodoEditorView의 UX를 개선한다 (#264)

* ui: 텍스트필드 폰트 및 문구 수정

* ui: TodoEditorView가 마크다운을 지원함을 사용자가 알 수 있도록 개선

Author: opficdev

DevLog/Resource/Localizable.xcstrings

@@ -32,6 +32,12 @@
           }
         }
       }
+    },
+    "Markdown 미리보기" : {
+
+    },
+    "Markdown 지원 · 예: # 제목, - 목록, **굵게**" : {
+
     },
     "night_sky" : {
       "extractionState" : "manual",
@@ -324,7 +330,7 @@
     "생성일" : {
 
     },
-    "설명(선택 사항)" : {
+    "설명(선택)" : {
 
     },
     "설정" : {
@@ -400,7 +406,7 @@
         }
       }
     },
-    "제목" : {
+    "제목(필수)" : {
 
     },
     "주간 추세" : {
@@ -453,6 +459,9 @@
     },
     "편집" : {
 
+    },
+    "편집 탭에서 Markdown으로 작성하면 여기에서 서식이 적용되어 보여요." : {
+
     },
     "푸시 알람 활성화" : {
 

DevLog/UI/Home/TodoEditorView.swift

@@ -63,9 +63,10 @@ struct TodoEditorView: View {
                 get: { viewModel.state.title },
                 set: { viewModel.send(.setTitle($0)) }
             ),
-            prompt: Text("제목").foregroundColor(Color.gray)
+            prompt: Text("제목(필수)").foregroundColor(Color.secondary),
         )
-        .frame(height: 22)
+        .font(.title2)
+        .frame(height: 30)
         .focused($field, equals: .title)
         .padding(.horizontal)
     }
@@ -96,32 +97,58 @@ struct TodoEditorView: View {
                 }
             }
             .padding(.vertical, 10)
-            .background(Color(UIColor.systemBackground))
+            .background(Color(.systemBackground))
         }
     }
 
     private var tabView: some View {
         Group {
             if viewModel.state.tabViewTag == .editor {
-                TextField(
-                    "",
-                    text: Binding(
-                        get: { viewModel.state.content },
-                        set: { viewModel.send(.setContent($0)) }
-                    ),
-                    prompt: Text("설명(선택 사항)").font(.callout),
-                    axis: .vertical
-                )
-                .focused($field, equals: .description)
+                VStack(alignment: .leading, spacing: 8) {
+                    markdownHint
+                    TextField(
+                        "",
+                        text: Binding(
+                            get: { viewModel.state.content },
+                            set: { viewModel.send(.setContent($0)) }
+                        ),
+                        prompt: Text("설명(선택)").foregroundColor(Color.secondary),
+                        axis: .vertical
+                    )
+                    .font(.callout)
+                    .focused($field, equals: .description)
+                }
             } else {
-                Markdown(viewModel.state.content)
-                    .markdownTheme(.basic)
+                if viewModel.state.content.isEmpty {
+                    previewPlaceholder
+                } else {
+                    Markdown(viewModel.state.content)
+                        .markdownTheme(.basic)
+                }
             }
         }
         .padding(.horizontal)
         .padding(.top, 10)
     }
 
+    private var markdownHint: some View {
+        Text("Markdown 지원 · 예: # 제목, - 목록, **굵게**")
+            .font(.caption)
+            .foregroundStyle(.secondary)
+    }
+
+    private var previewPlaceholder: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            Text("Markdown 미리보기")
+                .font(.subheadline.weight(.semibold))
+            Text("편집 탭에서 Markdown으로 작성하면 여기에서 서식이 적용되어 보여요.")
+                .font(.footnote)
+                .foregroundStyle(.secondary)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(.vertical, 8)
+    }
+
     private var accessoryBar: some View {
         HStack {
             Button {