[FEATURE] 링크 액션 모달 추가#22
Conversation
| interface LinkSaveModalProps { | ||
| visible: boolean; | ||
| url: string; | ||
| initialTitle?: string; |
There was a problem hiding this comment.
initialTitle prop 제거 또는 주석이 필요해 보입니다.
두 호출처 모두 전달하지 않아 항상 기본값 ''만 사용됩니다. 향후 편집 기능을 위한 것이라면 주석으로 의도를 명시하고, 아니라면 지금 제거하는 게 낫지 않을까 제안드립니다.
There was a problem hiding this comment.
피드백 감사합니다. 향후 링크카드 more 버튼에서 URL 제목을 수정하는 기능을 추가할 예정이라 initialTitle prop은 유지하려고 합니다. 다만 현재 저장 플로우에서는 전달되지 않아 의도가 불명확해 보일 수 있으므로, 편집 기능에서 기존 제목을 초기값으로 사용하기 위한 prop이라는 주석을 추가하겠습니다.
|
|
||
| <View style={styles.fieldGroup}> | ||
| <Text style={styles.label}>URL 제목</Text> | ||
| <TextInput |
There was a problem hiding this comment.
모달이 열려도 키보드가 자동으로 올라오지 않습니다.
제목 입력이 이 모달의 핵심 동작이므로 autoFocus 추가를 고려해보는 것도 좋지 않을까 생각이 듭니다
There was a problem hiding this comment.
피드백 감사합니다. 저도 제목 입력이 모달의 핵심 동작이라 autoFocus 적용이 맞다고 생각합니다.
처음에는 자동으로 키보드가 올라오도록 구현했었는데, 테스트 중 키보드 표시 시점과 모달 애니메이션이 겹치며 화면이 비정상적으로 움직이는 현상이 있어 우선 제거해둔 상태였습니다. 일단 다시 적용해보고, 문제가 재현되면 focus 시점 지연 또는 KeyboardAvoidingView 설정을 조정해서 원인을 확인해보겠습니다.
2026-05-09.001304.mp4
There was a problem hiding this comment.
확인 결과 링크 저장 모달은 autoFocus 추가 후 정상 동작했습니다.
추가로 폴더명 수정 모달에서 유사한 화면 움직임이 간헐적으로 발생했는데, Android에서 KeyboardAvoidingView의 behavior="height"가 키보드 표시 시 화면 높이를 재계산하면서 생기는 문제로 보였습니다.
링크 저장 모달과 동일하게 Android에서는 behavior를 undefined로 변경하니 문제가 재현되지 않아 함께 수정했습니다.
| }, | ||
| input: { | ||
| height: 56, | ||
| borderRadius: 20, |
| }, | ||
| urlBox: { | ||
| height: 56, | ||
| borderRadius: 18, |
There was a problem hiding this comment.
여기서는 borderRadius: 18로 해두셨는데 의도인건지 아니면 실수인 것인지 확인 부탁드립니다.
There was a problem hiding this comment.
확인 감사합니다. 의도한 차이는 아니었습니다. 두 영역 모두 높이가 56인 동일 계열의 필드라 borderRadius: 20으로 통일하겠습니다.
2 participants
Closes #21
개요
검사 결과 화면에서 안전 또는 주의 판정을 받은 URL을 저장할 때, 사용자가 URL 제목을 입력할 수 있는 링크 저장 모달을 추가했습니다.
기존에는 저장 버튼을 누르면 URL이 즉시 저장되고, 저장 제목이 URL 값으로 들어가는 흐름이었습니다. 이번 작업에서는 저장 전에 하단 모달을 띄워 사용자가 직접 URL 제목을 입력하도록 변경했으며, 입력한 제목 값을 기존 저장 로직에 전달하도록 연결했습니다.
모달 UI는 Figma의 링크 저장 모달 디자인을 기준으로 구현했고, 색상과 타이포그래피는 기존 디자인 시스템 토큰을 활용했습니다.
주요 구현 내용
addLink저장 로직에 전달파일별 역할
components/ui/link-save-modal.tsx: 링크 저장 하단 모달 컴포넌트app/(tabs)/(home)/scan-result.tsx: 안전 결과 화면에서 저장 모달을 열고 입력한 제목으로 링크 저장app/(tabs)/(home)/scan-result-caution.tsx: 주의 결과 화면에서 저장 모달을 열고 입력한 제목으로 링크 저장해결한 이슈 목록
체크 사항
npx tsc --noEmit통과Screenshots or Video