Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
opficdev merged 2 commits into from
Mar 12, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b7e4ab
ui: 텍스트필드 폰트 및 문구 수정
opficdev Mar 12, 2026
0953a2b
ui: TodoEditorView가 마크다운을 지원함을 사용자가 알 수 있도록 개선
opficdev Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions DevLog/Resource/Localizable.xcstrings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@
}
}
}
},
"Markdown 미리보기" : {

},
"Markdown 지원 · 예: # 제목, - 목록, **굵게**" : {

},
"night_sky" : {
"extractionState" : "manual",
Expand Down Expand Up @@ -324,7 +330,7 @@
"생성일" : {

},
"설명(선택 사항)" : {
"설명(선택)" : {

},
"설정" : {
Expand Down Expand Up @@ -400,7 +406,7 @@
}
}
},
"제목" : {
"제목(필수)" : {

},
"주간 추세" : {
Expand Down Expand Up @@ -453,6 +459,9 @@
},
"편집" : {

},
"편집 탭에서 Markdown으로 작성하면 여기에서 서식이 적용되어 보여요." : {

},
"푸시 알람 활성화" : {

Expand Down
57 changes: 42 additions & 15 deletions DevLog/UI/Home/TodoEditorView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down Expand Up @@ -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)
}
Comment on lines +140 to +150
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

현재 미리보기 탭의 플레이스홀더는 탭 제스처에 반응하지 않습니다. 사용자가 플레이스홀더를 탭하면 편집 탭으로 전환하고 설명 필드에 포커스를 맞추도록 .onTapGesture를 추가하면 사용자 경험(UX)을 향상시킬 수 있습니다. 이렇게 하면 사용자가 더 직관적으로 편집을 시작할 수 있습니다.

    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)
        .contentShape(Rectangle())
        .onTapGesture {
            viewModel.send(.setTabViewTag(.editor))
            field = .description
        }
    }


private var accessoryBar: some View {
HStack {
Button {
Expand Down
Loading