샌드박스 실기기 흰화면 tds 적용 오류

개발
,
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

TDS 버전도 최신이고, 패키지도 tdsmobile, tdscolors 모두 다운로드 받았습니다. 샌드박스앱 실기기로 테스트하려는데 TDS TOP, Button, text는 되긴하는데 앱빌더로 만든 디자인 코드를 그대로 코드에 적용하면 흰화면만 보입니다. 어떤 게 문제인가요?

무엇보다 앱빌더코드를 그대로 적용하면 원래 안되는 건지, 웹뷰의 경우 앱빌더 코드 중 어느 버전의 코드를 사용해야 하는건지 모르겠습니다.

“dependencies”: {
“@apps-in-toss/web-framework”: “^1.9.2”,
“@emotion/react”: “^11.14.0”,
“@toss/tds-colors”: “^0.1.0”,
“@toss/tds-mobile”: “^2.2.1”,
“@toss/tds-mobile-ait”: “^2.2.1”,
“html2canvas”: “^1.4.1”,
“react”: “^18.3.1”,
“react-dom”: “^18.3.1”
},
“devDependencies”: {
“@emotion/babel-plugin”: “^11.13.5”,
“@vitejs/plugin-react”: “^4.2.1”,
“vite”: “^5.0.0”
}

2

안녕하세요 :slight_smile:
앱빌더를 통해 붙여넣으신 코드 샘플을 받아볼 수 있을까요 ?

3

안녕하세요! 퀵스타트 화면, 커스텀 기본 화면 모두 작동되지 않는데요. 퀵스타트 예시는 아래와 같습니다!
앱빌더에서 리액트 > default v2 코드를 붙여넣었습니다.

import {
Asset,
Text,
Top,
StepperRow,
StepperRowNumberIcon,
StepperRowTexts,
FixedBottomCTA,
} from ‘@toss/tds-mobile’;
import { adaptive } from ‘@toss/tds-colors’;

export default function Page() {
return (
<>
<Asset.Icon
frameShape={Asset.frameShape.CleanW24}
name=“icon-arrow-back-ios-mono”
color=“#191F28ff”
aria-hidden={true}
/>
<Asset.Image
frameShape={Asset.frameShape.CleanW16}
src=“https://static.toss.im/appsintoss/2223/40ade059-0bfb-46de-95d7-71e831285453.png”
aria-hidden={true}
/>

서비스명

<Asset.Icon
frameShape={Asset.frameShape.CleanW20}
name=“icon-dots-mono”
color=“rgba(0, 19, 43, 0.58)”
aria-hidden={true}
/>
<Asset.Icon
frameShape={Asset.frameShape.CleanW20}
name=“icon-x-mono”
color=“rgba(0, 19, 43, 0.58)”
aria-hidden={true}
/>

<Top
title={
<Top.TitleParagraph size={22} color={adaptive.grey900}>
서비스명
</Top.TitleParagraph>
}
subtitleBottom={
<Top.SubtitleParagraph>
타이틀이에요
</Top.SubtitleParagraph>
}
/>
<Asset.Image
frameShape={{ width: 250 }}
src=“https://static.toss.im/3d/tossmobile-kv-mobile-pay-hero.png”
aria-hidden={true}
/>

<ListHeader
title={
<ListHeader.TitleParagraph
color={adaptive.grey800}
fontWeight=“bold”
typography=“t5”

미니앱명
</ListHeader.TitleParagraph>
}
descriptionPosition=“bottom”
/>
<>
<StepperRow
left={<StepperRow.NumberIcon number={1} />}
center={
<StepperRow.Texts
type=“A”
title=“테스트”
description=“”
/>
}
/>
<StepperRow
left={<StepperRow.NumberIcon number={2} />}
center={
<StepperRow.Texts
type=“A”
title=“테스트”
description=“”
/>
}
/>
<StepperRow
left={<StepperRow.NumberIcon number={3} />}
center={
<StepperRow.Texts
type=“A”
title=“테스트”
description=“”
/>
}
hideLine={true}
/>
</>
<FixedBottomCTA.Single loading={false}>다음</FixedBottomCTA.Single>
</>
);
}

4

앱인토스에서 제공하는 TDS와 싱크되지 않는 부분이 있는 것 같습니다 :cry:
번거로우시겠지만 Stepper 는 이 가이드를 참고해주실 수 있을까요 ?

5

답변 감사합니다. Stepper 컴포넌트를 불러오는 거 자체는 이슈 없으나, 구현 코드가 싱크되지 않은 걸로 이해했습니다.

혹시 이런 컴포넌트 요소가 더 많을까 우려되는데요, 정리된 문서가 있나요? 앱빌더 싱크 작업이 토스팀 내부적으로 우선순위인지 궁금합니다.

또한 피그마로 작업하게 되면 위 이슈 없이 제공되는 코드 그대로 사용할 수 있을지 궁금합니다

감사합니다 !