Scalar.Unit.tsx
스칼라 Unit은 스칼라 값 하나를 보여 주는 작은 표시용 컴포넌트로, 상위 모델의 카드, 행, 상세 페이지, 표 셀 안에서 씁니다. 여러 모델이 같은 값을 같은 모습으로 보여 줘야 할 때 만듭니다. 예를 들어 Product, Order, Invoice가 모두
Price.Unit.Label을 재사용할 수 있습니다.이 파일은 값을 그리는 일만 합니다. 주변 레이아웃은 상위 Unit이 정하고, 데이터를 불러오는 일은 다른 곳이 맡습니다:
할 일
스칼라 Unit
상위 Unit
다른 곳
값 그리기
price.amount · price.currency
✓
값을 보여 주는 모든 화면에서 같은 형식으로 표시합니다.
l("price.amount")
✓
각 필드의 라벨을 스칼라 자신의 dictionary에서 가져옵니다.
값 주변
product.price
✓
상위 모델에서 스칼라 필드를 꺼내 아래로 넘깁니다.
카드 · 제목 · 링크
✓
주변 레이아웃, 모델의 다른 필드,
href입니다.Unit 안에서는 하지 않는 일
fetch.*
✓
데이터는 page가 불러와 props로 내려보냅니다.
Load.Units
✓
목록은 Zone이나 page가 그리고, 행마다 Unit을 하나씩 씁니다.
st.do.*
✓
모델 동작은 표시가 아니라 Util 안의 컨트롤이 맡습니다.
✓여기서 합니다여기서 하지 않습니다
이 페이지에서 쓰는 말
용어설명
다른 모델 안에 저장되는 작은 값 객체입니다.
amount와 currency를 가진 Price가 그 예입니다.무언가 하나를 카드, 행, 표의 셀로 그리는 서버 컴포넌트입니다.
상위 Unit
스칼라를 필드로 가진 모델의 Unit입니다. 예를 들면
Product.Unit입니다.목록이 Unit마다 넘겨주는 가벼운 모델입니다. constant가 고른 필드만 들어 있습니다.
파일 위치와 모양
Unit은
lib/__scalar/ 아래 스칼라 자신의 폴더에 둡니다. 값을 정의하는 constant와 나란히 놓입니다:apps/koyo
경로
apps/<app>/lib/__scalar/<scalar>/<Scalar>.Unit.tsx스칼라 자신의 폴더에, constant 파일 옆에 둡니다.
첫 줄
import type { cnst } from "@apps/<app>/client";import로 시작하고 "use client"는 쓰지 않습니다. Unit은 서버 컴포넌트입니다.
export
Label · Summary · Badge표시 목적대로 이름 붙인 작은 화살표 함수 컴포넌트이고, 각각 값을 prop으로 받습니다.
사용 예
<Price.Unit.Label price={…} />상위 Unit은
@apps/<app>/client에서 Price를 가져옵니다.- 파일 이름은 폴더 이름을 따릅니다.
price/폴더에는 첫 글자만 대문자로 바꾼Price.Unit.tsx를 두고, 그 export는Price.Unit.<Name>으로 씁니다. - 스칼라의 UI 파일은 많아야 두 개입니다.
<Scalar>.Template.tsx는 값을 편집하고<Scalar>.Unit.tsx는 값을 보여 줍니다. 스칼라 폴더에는 Zone, View, Util이 없습니다.
스칼라 Unit 예시
스칼라 Unit은 스칼라 값을 받아 그립니다. 데이터를 불러오지 않고, 목록을 관리하지 않으며, 모델 동작을 실행하지도 않습니다:
apps/koyo/lib/__scalar/price/Price.Unit.tsx
- props 타입은 직접 선언합니다.
ModelProps는id가 있는 모델을 요구하는데, 스칼라에는id가 없습니다. 값을price: cnst.Price로 받는LabelProps를 씁니다. className을 받고, 인터페이스 맨 앞에 둡니다. 색과 크기는 상위 Unit이 정하고, 스칼라 Unit은 표시 형식만 책임집니다.- 여기서는
import type이면 충분합니다. 이 파일에서cnst는 타입으로만 쓰입니다. 값 import와 함께 쓸 때는 아래 상위 Unit 예시처럼type cnst로 적습니다.
Unit은 서버 컴포넌트이므로 "use client"로 시작하지 않습니다. 스칼라 Unit을 포함한 모든
*.Unit.tsx에서 이 지시문, useState 같은 React hook, st import는 lint 오류입니다. usePage()와 l()은 여기서도 그대로 씁니다.상위 Unit에서 쓰기
상위 Unit은 스칼라 Unit을 가져와 자기 모델의 스칼라 필드를 넘깁니다. 표시 형식은 재사용하고, 주변 레이아웃은 여전히 상위 카드가 정합니다:
apps/koyo/lib/product/Product.Unit.tsx
product.price가 넘겨줄 값입니다. 스칼라는 상위 모델 안에 필드 하나로 들어 있습니다.- Light 모델에 그 필드가 있어야 합니다.
cnst.LightProduct에는 constant가 고른 필드만 있으므로, 거기에"price"를 넣습니다:via(ProductObject, ["name", "price"] as const, …). Price는@apps/koyo/client에서 가져옵니다.cnst와 같은 import 한 줄입니다.- 값의 스타일은 상위 Unit이 바깥에서 정합니다.
className="text-foreground/70"로 색을 바꿔도 표시 형식은 스칼라 Unit의 것 그대로입니다.
작은 변형
변형은 같은 스칼라를 다른 크기로 보여 줘야 할 때만 추가합니다. 어느 변형이든 값을 그리는 일만 합니다:
export설명
Label
카드 안의 한 줄에 쓰며, 금액과 통화를 span 하나로 보여 줍니다.
Compact
좁은 표 셀에 쓰며, 금액만 보여 줍니다.
Detail
상세 View에 쓰며, 필드마다 라벨을 붙여 한 줄씩 보여 줍니다.
Compact와 Detail은 Label과 같은 파일에 둡니다:apps/koyo/lib/__scalar/price/Price.Unit.tsx
- 변형 이름은 모델이 아니라 용도로 짓습니다.
PriceCompact가 아니라Compact로 씁니다. 쓰는 쪽에서 이미Price.Unit.Compact로 읽히기 때문입니다. - 라벨은 스칼라의 dictionary에서 가져옵니다.
l("price.amount")는 같은 폴더의price.dictionary.ts를 읽습니다. usePage()는 여기서 써도 됩니다. 번역은 서버에서도 동작하므로Detail은 서버 컴포넌트로 남습니다.
자주 하는 실수
- 상위 카드마다 값 형식을 직접 쓰기. 카드 세 개가 각자
toLocaleString()을 쓰면 모양이 조금씩 달라집니다.Price.Unit.Label하나로 모읍니다. - 색만 바꾸려고 변형 추가하기. 대신
className을 넘깁니다. 변형은 크기나 보여 줄 내용의 양이 다를 때 씁니다. - props를
ModelProps로 쓰기. 스칼라에는id가 없으므로 평범한 props 인터페이스를 씁니다. - Unit 안에서 불러오거나 동작 실행하기.
fetch.*는 page에,st.do.*는 Util에 둡니다. Unit은 받은 값을 그리기만 합니다.
이어서 읽기