diff --git a/DevLog/Resource/Localizable.xcstrings b/DevLog/Resource/Localizable.xcstrings index 9d149632..fa7c5b2e 100644 --- a/DevLog/Resource/Localizable.xcstrings +++ b/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으로 작성하면 여기에서 서식이 적용되어 보여요." : { + }, "푸시 알람 활성화" : { diff --git a/DevLog/UI/Home/TodoEditorView.swift b/DevLog/UI/Home/TodoEditorView.swift index 2efc62ae..2c8b0334 100644 --- a/DevLog/UI/Home/TodoEditorView.swift +++ b/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 {