listrow 컴포넌트에 리소스 부분에 아이콘 또는 2D 를 삽입할 수 있는걸로 알고있습니다.
개발자분께서 사용한 아이콘의 이름을 전달해달라해서 2D이미지(유니코드 기반)의 이름을 전달하니 “icon-”형식의 이름이여야한다네요. 그리고 이모지는 이미지 기반이라 깨질 수 있고 개발 가이드에선 아이콘만 사용하라고 되어 있다는데
앱빌더 안에서는 화면에 아이콘도 표시되고 있고 해당 컴포넌트 내에서 아이콘과 이모지 모두 선택할 수 있는데 사용이 불가한게 맞을까요? 그리고 제가 어떻게 사용한 리소스를 개발자에게 전달해야할까요?
안녕하세요!
Mobile Listrow 에서 아이콘 또는 2D 리소스를 모두 사용하실 수 있고,
개발자 분들의 경우 우측 패널 개발자모드를 활용하셔서 리소스 링크를 확인하실 수 있으실 것 같습니다.
번거로우시겠지만, 아래 예시 이미지와 같이 개발자 모드에서 리소스를 확인하실 수 있도록 전달 부탁 드려도 될까요?
리스트로우에서 이미지를 쓸 경우 사이즈를 알아야한다고 합니다. ios에서 깨지는 버그가 생긴다고 하네요
네, 상세사항 확인 후 안내 드리겠습니다.
실례지만 개발자 분께서는 앱빌더 접근이 어려우시고 별도로 다른 환경에서 작업을 하시는 상황이실지 여쭤보아도 될까요?
개발자 분께서 앱빌더 사용을 하시지 않는 상황이셔서 직접 확인하시는 방식이 아닌 링크를 복사해서 전달하여 주시고 계신 상황이실지 여쭙습니다!
아니요 앱빌더에서 확인하고 있습니다. 제가 한번 더 링크를 전달한 상황이였습니다.
버그의 경우는 리스트로우 왼쪽 리소스가 아닌 프레임을 선택해서 자체적으로 만든 이미지를 연결했을때 안드로이드는 크기가 깨지지 않고 잘 보였는데 iOS에서 크기 깨짐현상이 발생해서 리소스의 사이즈를 하나씩 다 설정 했다고 하네요.
그래서 icon 또는 2D 중에 하나만 썼으면 좋겠고 2D를 쓸 경우엔 리소스의 사이즈를 알려줘야한다고 전달 받았습니다.
네, 확인해 주셔서 감사합니다.
크기가 깨지는 버그의 경우, 앱빌더에서 제공하고 있는 리소스 링크를 전달 드렸을 때는 아니고 별도로 만드신 이미지에 대한 링크를 전달하여 주셨을 때의 상황이 맞으실까요?
번거로우시지만, 별도로 만드신 이미지 중 하나를 예시로 공유 하여 주시면 상세 사항 확인 후 안내 드리겠습니다!
해당 버그 때문에 리스트로우에 리소스를 사용할때 기존에 토스에서 제공하는 리소스를 사용하더라도 icon 또는 2D 중 통일있게 써야하는 한다는 개발자의 의견입니다.
네, 상세히 말씀 주셔서 감사합니다. 확인 후 안내 드리겠습니다!
죄송하게도 유관 부서 확인이 필요할 수 있어, 조금 시간이 소요될 수 있는 점 양해 부탁 드립니다.
안녕하세요, 개발자 분의 코드를 볼 수 있을까요?
또한 코드젠이 생성해준 코드로 구현이 안 되고 계신 상황이신지도 궁금합니다
// ❌ iOS에서 문제 발생 - ListRow.AssetImage
<ListRow
left={
<ListRow.AssetImage
src="https://example.com/icon.png"
shape="original"
/>
}
/>
// 일반 img 태그로 임시 해결
<ListRow
left={
<img
src="https://example.com/icon.png"
alt="아이콘 설명"
style={{
width: '56px',
height: '56px',
objectFit: 'contain',
display: 'block',
}}
/>
}
/>
<ListRow
left={
<ListRow.AssetImage
src="https://static.toss.im/2d-emojis/png/4x/u1F469_u1F3FB_u200D_u2764_u200D_u1F468_u1F3FB-big.png"
shape="squircle"
scale={0.66}
backgroundColor={adaptive.greyOpacity100}
size="xsmall"
/>
}
contents={
<ListRow.Texts
type="1RowTypeA"
top={t`동해물과 백두산이`}
topProps={{ color: adaptive.grey700 }}
/>
}
verticalPadding="small"
horizontalPadding="small"
/>
이렇게 해봐주시겠어요?
만약 위 코드로도 재현이 되신다면 문제가 발생한 url도 같이 공유 부탁드립니다