[FIX] 링크 저장 모달 키보드 대응 및 링크 추가 입력 동작 개선

[kbh0218]

Closes #78

개요

링크 저장 시 표시되는 URL 제목 저장 모달에도 키보드 노출 대응을 적용하고, 링크 추가 화면의 URL 입력 키보드 동작을 입력 모달들과 동일한 방향으로 개선했습니다.

기존 #54 / PR #63에서는 링크 제목 수정 모달과 폴더명 수정 모달에 키보드 show/hide 이벤트 기반 하단 여백 보정, 완료/done 키 저장 동작 제거, Modal onShow 이후 수동 focus 처리를 적용했습니다.

이번 작업에서는 누락되어 있던 링크 저장 모달에도 동일한 키보드 대응 방식을 적용했습니다. 키보드가 올라온 상태에서도 입력창과 취소/저장 버튼을 확인할 수 있도록 하단 inset을 조정하고, 작은 화면에서도 버튼이 키보드에 가려지지 않도록 모달 내부 여백과 높이를 함께 보완했습니다.

또한 링크 추가 화면의 URL 입력칸은 화면 진입 시 자동으로 키보드가 올라오도록 focus 처리를 추가하고, 키보드 우측 버튼을 검색 동작이 아닌 완료/done 동작으로 변경했습니다. 이제 키보드의 체크 표시를 눌러도 검사가 시작되지 않고 키보드만 닫히며, 실제 검사는 화면의 검사 버튼을 눌렀을 때만 실행됩니다.

주요 구현 내용

• 링크 저장 모달의 키보드 show/hide 이벤트 기반 하단 inset 처리 추가
• 키보드 노출 시 링크 저장 모달이 키보드 위로 올라오도록 위치 보정
• Android 하단 시스템 내비게이션 바와 겹치지 않도록 기본 하단 여백 적용
• 링크 저장 모달 내부를 ScrollView로 감싸 작은 화면 대응 보완
• 키보드 활성화 상태에서 취소/저장 버튼이 가려지지 않도록 모달 내부 여백 및 버튼 높이 조정
• 링크 저장 모달의 URL 제목 입력칸에 전체 지우기 버튼 추가
• 링크 저장 모달의 autoFocus 제거
• 링크 저장 모달을 Modal.onShow 이후 100ms 뒤 수동 focus 방식으로 변경
• 저장/취소/닫힘/언마운트 시 예약된 focus timer cleanup 처리
• 링크 추가 화면 진입 시 URL 입력칸 자동 focus 처리
• 링크 추가 화면 URL 입력칸의 키보드 return key를 search에서 done으로 변경
• 링크 추가 화면에서 키보드 완료/done 키 입력 시 검사 실행 대신 Keyboard.dismiss만 실행하도록 변경
• 검사 버튼을 통한 기존 검사 시작 흐름 유지

파일별 역할

• components/ui/link-save-modal.tsx: 링크 저장 모달의 키보드 대응, 하단 위치 보정, 모달 크기 조정, 입력 focus 안정화, 제목 입력 초기화 버튼 추가
• app/(tabs)/(home)/add-link.tsx: 링크 추가 화면 URL 입력칸 자동 focus 처리, 키보드 완료 키 동작 변경

해결한 이슈 목록

• 링크 저장 모달에 키보드 show/hide 이벤트 기반 하단 inset 처리를 적용
• 키보드가 올라왔을 때 링크 저장 모달 입력창과 버튼이 화면 안에 보이도록 수정
• 키보드 활성화 상태에서 취소/저장 버튼이 가려지지 않도록 모달 내부 여백 조정
• 키보드가 닫힌 뒤 모달이 보정된 기본 하단 위치로 복귀하도록 처리
• Android 하단 시스템 내비게이션 바와 모달 버튼 영역이 겹치지 않도록 처리
• 링크 저장 모달의 URL 제목 입력칸에 전체 지우기 버튼 추가
• 링크 저장 모달의 autoFocus를 제거하고 Modal.onShow 기반 수동 focus로 변경
• 예약된 focus timer가 저장/취소/닫힘/언마운트 이후 실행되지 않도록 cleanup 처리
• 링크 추가 화면 진입 시 URL 입력칸에 자동 focus가 적용되도록 처리
• 링크 추가 화면 URL 입력칸의 키보드 버튼을 검색 아이콘이 아닌 완료/done 형태로 변경
• 키보드 완료/done 키 입력 시 검사 시작 대신 키보드만 닫히도록 수정
• 실제 검사는 화면의 검사 버튼을 눌렀을 때만 실행되도록 유지
• 기존 저장 버튼 및 검사 버튼의 비활성화 조건 유지
• 기존 저장 API 및 검사 화면 이동 흐름 유지

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 저장 버튼을 통한 기존 저장 API 호출 흐름 유지
• 검사 버튼을 통한 기존 검사 시작 흐름 유지
• 키보드 완료 키 입력 시 저장/검사 핸들러가 호출되지 않도록 처리

Screenshots or Video

• 링크 저장 모달 키보드 화면

[minsoo0506]

코멘트 남길만한 부분은 없는 것 같습니다! 고생하셨습니다 👍