안녕하세요.
앱빌더로 간단히 디자인해서 코드를 뽑아내서 테스트하는 중입니다. 궁금한 사항 질문드립니다.
가) 퀵스타트 화면은 네비게이션이 항상 붙어 있습니다. 그런데, 샌드박스에서 띄우면, 기본 네비게이션이 붙어 있기 때문에, 2개의 네비게이션이 붙어서 나옵니다. 코드에서 수작업으로 네비게이션을 제거해야 되는 문제점이 있네요. 이렇게 하는 것이 맞나요?
나)퀵스타트 화면말고 빈 화면에서 작업해서 코드를 뽑아서 붙였더니, 화면이 제대로 나오지 않습니다. 이 부분에서 뭔가 놓친 부분이 있나요? 위의 가)방법을 사용해야 하나요?
다)앱빌더의 코드보기에서 defaut vs div, 그리고 style code 설명좀 부탁합니다. 검색해보니 피그마 토컨 json인 것 같은데, 이걸 어떻게 활용해야 하나요? 앱빌더내에서 어느 정도 해결이 가능했으면 좋겠는데요.
다른 분들은 앱빌더를 가지고 어떻게 작업하는지 궁금하네요.
가) 맞습니다. 네비게이션은 코드젠에서 제외해야 하는데, 개선사항으로 작업해보겠습니다.
나) 어떤 코드였는지 앱빌더 링크 또는 생성된 코드 첨부 공유 부탁드려요
다) default는 div가 아닌 경우이고, div는 fragment가 아닌 div 태그로 감싸서 앱빌더에서 직접 적용한 layout 속성이 스타일로 코드젠되게 하는 옵션입니다. 피그마 토큰 json은 아니에요.
네. 아래 코드젠 코드입니다.
샌드박스앱에서 테스트할 때는,
@tds/mobile은 @toss/tds-mobile, @tds/colors은 @toss/tds-colors로 수정
FixedBottomCTA.Single은 BottomCTA.Single 로 수정했습니다.
이 부분도 업데이트 고려바랍니다.
import {
Post,
Paragraph,
StepperRow,
StepperRowNumberIcon,
StepperRowTexts,
FixedBottomCTA,
} from ‘@tds/mobile’;
import { adaptive } from ‘@tds/colors’;
export default function Page() {
return (
<>
<Post.H2 paddingBottom={24} color={adaptive.grey800}>
<Paragraph.Text>실생활에 도움이 되는 운세</Paragraph.Text>
</Post.H2>
<Post.H3 paddingBottom={16}>
<Paragraph.Text>
사주, 궁합, 택일 , 인연
하루운, 한달운, 일년운
토정비결, 당사주
</Paragraph.Text>
</Post.H3>
<>
<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>
</>
);
}
화면이 제대로 안나온다는 부분은, 화면은 나오는데, alignment, color 등 전반적인 layout이 디자인과 다르게 나온다는 뜻입니다.