안녕하세요
‘오늘의 분노 게이지’ 운영중인 개발자입니다.
이번에 사용자에게 피드백을 받는 기능을 추가하는 와중에 발견한 이슈를 제보드립니다.
해당 이슈는 iOS 17 Pro와 Max 단말기에서 확인하였습니다. 다른 시리즈에서는 재현되지 않는 것으로 확인했습니다.
아래 코드로 구성한 화면에서 문제가 생겼는데요.
<BottomSheet
// 문서를 위해 사용된 prop이에요.
UNSAFE_disableFocusLock
open={isOpen}
onClose={() => setIsOpen(false)}
header={<BottomSheet.Header>오늘 측정 결과, 어땠나요?</BottomSheet.Header>}
// @here 이렇게 하단에 CTA를 넣을 수 있어요!
cta={
<BottomSheet.CTA
onClick={sendFeedback}
disabled={isDisabled}
loading={isLoading}
>
보내기
</BottomSheet.CTA>
}
>
<div style={{ position: 'relative' }}>
<TextArea
variant="box"
minHeight="200px"
placeholder="좋았던 점, 불편했던 점, 개선되었으면 하는 점을 자유롭게 알려주세요."
value={feedback}
onChange={handleTextChange}
maxLength={MAX_LENGTH}
style={{
paddingBottom: "20px"
}}
/>
<Text
style={{
position: 'absolute',
bottom: '26px',
right: '41px',
fontSize: '14px'
}}
color={feedback.length >= MAX_LENGTH ? '#f44336' : colors.grey500}
typography="t6"
fontWeight="regular">
{feedback.length.toLocaleString()}/{MAX_LENGTH.toLocaleString()}
</Text>
</div>
</BottomSheet>
BottomSheet을 Open한 상태에서 textarea 영역을 터치하여 focus를 주고 BottomSheet 영역을 터치하여 focus를 해제하면 cta button 스타일이 아래 이미지와 같이 깨지게 됩니다.
그리고 dialog 외부 영역을 터치하여 dialog를 닫은 후, 다시 카메라 화면으로 진입하면, dialog 영역이 남았는지 해당 영역을 제외하고 overlay가 그려지는 것을 확인하였습니다.
원래는 화면 전체 영역 기준으로 overlay가 그려져야합니다.
해당 화면에서 초기화면으로 돌아가면 cta button을 사용했던 경우에는 style이 모두 변경되어있는 것을 확인하였습니다.
아래 이미지는 이슈 현상이 발생한 화면과 정상 화면을 비교를 위해 첨부하였습니다.
한번 확인 부탁드리겠습니다.
