Box로 레이아웃 구성
셀 단위 Flexbox로 상단 바, 사이드바, 카드가 있는 대시보드 틀을 만드세요.
이 장의 내용
- 상단 바
- 사이드바와 카드
- 기본 반응형 레이아웃
콘솔은 셀로 이루어진 격자예요. Text.js는 React Native와 같은 flexbox 엔진인 Yoga로 레이아웃을 구성하므로 <Box>는 CSS flexbox 규칙을 따라요. 단위는 셀이에요: p-1은 가로 1열, 세로 1줄의 안쪽 여백이에요.
상단 바
대부분의 화면은 세로로 구성돼요: 1줄 높이의 바 아래에 나머지 콘텐츠가 와요. h-1로 바의 높이를 고정하고 grow로 콘텐츠가 나머지 공간을 차지하게 하세요.
삭제: import { Box, Text, useInput } from "@textjs/app";추가: import { Box, Spacer, Text, useInput } from "@textjs/app";export default function Page() { return (삭제: <Box className="flex-col border rounded px-2 py-1">삭제: <Text bold>▼ Acme Deploys</Text>삭제: <Text color="muted">Hello, console.</Text>추가: <Box className="flex-col grow">추가: <Box className="flex-row h-1 px-1 gap-2 shrink-0">추가: <Text bold>▼ Acme</Text>추가: <Text color="subtle">acme.local</Text>추가: <Spacer />추가: </Box>추가: <Box className="flex-row grow">{/* sidebar + cards */}</Box> </Box> );}<Spacer>는 늘어나는 박스예요: 그 뒤의 요소는 모두 오른쪽 끝으로 밀려나요.
사이드바와 카드
오른쪽 테두리가 있는 고정 너비 사이드바와 나머지 너비를 나눠 쓰는 카드 3개를 추가하세요. basis-0과 grow를 함께 쓰면 콘텐츠와 관계없이 각 카드가 같은 너비를 차지해요.
추가: const NAV = ["Overview", "Deployments", "Settings"];추가: 추가: function Card({ title, value }: { title: string; value: string }) {추가: return (추가: <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>추가: <Text color="subtle">{title}</Text>추가: <Text bold>{value}</Text>추가: </Box>추가: );추가: }추가: export default function Page() {추가: const [sidebar, setSidebar] = useState(true);추가: const [stacked, setStacked] = useState(false);추가: 추가: useInput((e) => {추가: if (e.input === "s") setSidebar((v) => !v);추가: if (e.input === "d") setStacked((v) => !v);추가: });추가: return ( <Box className="flex-col grow"> {/* top bar */}삭제: <Box className="flex-row grow">{/* sidebar + cards */}</Box>추가: <Box className="flex-row grow">추가: {sidebar && (추가: <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">추가: {NAV.map((item) => <Text key={item}>{item}</Text>)}추가: </Box>추가: )}추가: <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>추가: <Card title="Production" value="acme-web" />추가: <Card title="Deployments" value="6 today" />추가: <Card title="Build time" value="38s p50" />추가: </Box>추가: </Box> </Box> );}콘솔에서 s와 d를 누르세요. Yoga가 레이아웃을 다시 계산하고 변경된 줄만 다시 그리므로, 사이드바를 켜고 끌 때 console.log는 1번만 호출돼요.
기본 반응형 레이아웃
격자는 도킹된 DevTools 패널의 크기를 따라요. 콘솔을 드래그해 너비나 높이를 늘리면 카드가 재배치돼요. 중단점이 필요할 때는 useBreakpoint()가 셀 단위의 현재 중단점을 반환해요.
사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
콘솔 열기
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 s를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.