안녕하세요
‘오늘의 분노 게이지’ 서비스를 운영하고 있는 개발자입니다.
이번에 사용자의 피드백을 입력받는 부분을 추가하려고 하는데, 다음과 같은 현상이 iOS에서 발견되어서 제보드립니다.
'BottomSheet’를 활용해서 모달을 띄우면, 뒤 배경 영역이 뒤로 밀리는 현상이 발생합니다.
Android에서는 해당 현상없는 것으로 확인했습니다.
확인 부탁드리겠습니다.
1개의 좋아요
라이브러리 버전은 최신 버전을 이용중입니다.
"@apps-in-toss/web-framework": "^1.5.1",
"@toss/tds-mobile": "^2.2.0",
"@toss/tds-mobile-ait": "^2.2.0",
@dingchi 님 안녕하세요
제보 감사합니다. 내부 수정해보겠습니다.
1개의 좋아요
안녕하세요, 혹시 문제가 발생한 ios 버전 (및 기기)을 확인해보고 싶습니다.
또한 BottomSheet 컴포넌트를 띄우는 코드 부분을 확인해보고 싶어요.
1개의 좋아요
안녕하세요! iOS는 14, 15, 16 Pro, 17 Pro, 17 Pro Max에서 확인했습니다.
코드는 html 부분 공유드릴게요! 더 확인 필요한 부분 있으면 말씀해주세요.
<div
style={{display: 'flex', flexDirection: 'column', height: '100dvh', ...backgroundStyle }}
>
<div style={{ display: 'flex', paddingTop: 20, marginRight: 20 }}>
<Button
style={{color: '#4E5968', backgroundColor: "rgba(2, 23, 71, 0.05)", marginLeft: 'auto' }}
size="small"
variant="weak"
display="inline"
onClick={() => setOpen(true)}
>
분노 산출 기준이 뭔가요?
</Button>
</div>
<div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}>
<Lottie
style={{
width: "100%",
height: "auto",
maxHeight: "65dvh"
}}
animationData={currentConfig.animation}
loop={false} // 한 번만 재생
onComplete={handleComplete}
rendererSettings={{
preserveAspectRatio: platform == 'ios'
? "xMidYMid slice" // ✅ 공백 제거, 꽉 채움
: "xMidYMid meet"
}}
/>
</div>
<div
style={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<TextButton
// style={{
// width: 'calc(100% - 40px)', // 좌우 20px 여백
// justifyContent: 'center',
// }}
size="medium"
display="block"
onClick={() => {
setIsOpen(true);
}}
>
피드백 남기기
</TextButton>
<FixedBottomCTA.Double
leftButton={
<CTAButton
color="primary"
variant="weak"
onClick={() => {
Analytics.click({button_click: "result_share"});
navigate("/measure");
}}
>
다시 측정하기
</CTAButton>
}
rightButton={
<CTAButton
color="primary"
onClick={shareClick}
>
공유하기
</CTAButton>
}
>
</FixedBottomCTA.Double>
</div>
<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>
<AlertDialog
open={open}
title={<AlertDialog.Title>{'분노 게이지 산출 기준'}</AlertDialog.Title>}
description={
<AlertDialog.Description>
{angerLevels.map((level, index) => (
<div key={index}>
<span style={{ color: level.dotColor }}>● </span> {level.text}
</div>
))}
</AlertDialog.Description>
}
alertButton={<AlertDialog.AlertButton onClick={() => setOpen(false)}>확인</AlertDialog.AlertButton>}
onClose={() => setOpen(false)}
/>
<AlertDialog
open={feedbackTokenExpiredDialogOpen}
description={
<AlertDialog.Description>
지금은 피드백 전송이 어려워요.{"\n"}처음부터 다시 진행해주세요.
</AlertDialog.Description>
}
alertButton={<AlertDialog.AlertButton onClick={() => setFeedbackTokenExpiredDialogOpen(false)}>확인</AlertDialog.AlertButton>}
onClose={() => setFeedbackTokenExpiredDialogOpen(false)}
/>
<Toast
position="bottom"
open={feedbackServerErrorToastOpen}
text="잠시 후 다시 시도해주세요"
leftAddon={
<Asset.Icon
frameShape={{ width: 18 }}
name="icon-info-circle-mono"
color={adaptive.grey400}
aria-hidden={true}
/>
}
higherThanCTA
duration={3000}
onClose={() => setFeedbackServerErrorToastOpen(false)}
/>
<Toast
position="bottom"
open={feedbackSendSuccessToastOpen}
text="피드백 전송을 완료했어요"
leftAddon={
<Asset.Icon
frameShape={{ width: 18 }}
name="icon-info-circle-mono"
color={adaptive.grey400}
aria-hidden={true}
/>
}
higherThanCTA
duration={3000}
onClose={() => setFeedbackSendSuccessToastOpen(false)}
/>
</div>
1개의 좋아요