model.Template.tsx

Template 파일은 module의 client UI 조각을 담습니다. 대부분 model form을 렌더링하지만 submit button, onboarding step, preview block 같은 작은 interaction fragment도 export할 수 있습니다.

Template은 UI를 store state와 action에 연결하는 데 집중합니다. business rule은 constant, document, service, signal, store action에 둡니다.

파일 규칙

Template 파일은 렌더링할 module 옆에 둡니다. 보통 client hook과 event handler를 사용하므로 use client directive로 시작합니다.

Path

lib/[model]/[Model].Template.tsx

Directive

"use client"

Exports

General, Phone, SubmitPhone, Preview

표준 form Template

표준 form Template은 st.use로 form state를 읽고, usePage로 label을 가져오며, generated st.do setter로 변경사항을 저장합니다.

Ticket.Template.tsx

Field 패턴

Field component는 빠른 개발과 규격화된 form UI를 지원하는 predefined element입니다. input shape에 맞는 가장 작은 Field component를 선택하고 value와 onChange를 store state에 연결합니다.

필요한 interaction에 Field가 맞지 않는다면 일반 input, button 또는 app 전용 component로 custom UI를 구성해도 괜찮습니다.

Field.Parent

Field.ToggleSelect

Field.Img

Field.Yoopta

Component 분리

Template 파일은 여러 작은 component를 export할 수 있습니다. 모든 것을 General에 넣기보다 business step이나 UI 책임 단위로 큰 form을 나눕니다.

User.Template.tsx

Submit component

Template 사용 패턴

Load.Edit, Model.Edit, Model.NewWrapper 같은 wrapper는 store form state와 submit behavior를 준비합니다. Template은 field와 작은 interaction 렌더링에 집중합니다.

Server page와 Load.Edit

server-rendered page에서 page가 edit 객체를 이미 알고 있다면 Load.Edit을 사용합니다. server page가 data를 fetch하거나 partial form을 만든 뒤 Load.Edit에 전달하고, child Template은 client component로 유지됩니다.

내부적으로 Load.Edit은 Model.EditModal에 위임합니다. Template field가 st.use.<model>Form()을 읽기 전에 model과 form state를 hydrate합니다.

field	설명	예제
<model>	기존 record를 edit할 때 hydrated full model을 저장합니다.
<model>Loading	edit object가 적용된 뒤 model data가 준비되었음을 표시합니다.
<model>Form	full model에서 만든 editable form copy를 저장합니다. Template field는 이 state를 읽고 수정합니다.
<model>FormLoading	edit form이 렌더링되고 submit될 수 있도록 form 준비 상태를 표시합니다.
<model>Modal	현재 form mode를 저장합니다. custom modal key가 없다면 Load.Edit은 보통 edit으로 설정합니다.
<model>ViewAt	view/edit state 일관성을 위해 edit object의 timestamp를 저장합니다.

<model>

기존 record를 edit할 때 hydrated full model을 저장합니다.

<model>Loading

edit object가 적용된 뒤 model data가 준비되었음을 표시합니다.

<model>Form

full model에서 만든 editable form copy를 저장합니다. Template field는 이 state를 읽고 수정합니다.

<model>FormLoading

edit form이 렌더링되고 submit될 수 있도록 form 준비 상태를 표시합니다.

<model>Modal

현재 form mode를 저장합니다. custom modal key가 없다면 Load.Edit은 보통 edit으로 설정합니다.

<model>ViewAt

view/edit state 일관성을 위해 edit object의 timestamp를 저장합니다.

new.tsx

edit.tsx

Model.Edit으로 modal edit

list, dropdown, unit component에서 edit trigger가 필요하면 Model.Edit을 사용합니다. clickable edit control과 해당 edit modal을 Template 주변에 함께 렌더링합니다.

Ticket.Util.tsx

Model.NewWrapper로 new form 열기

button이나 empty-list CTA가 new form을 열어야 할 때 Model.NewWrapper를 사용합니다. partial은 default form 값을 제공하고, wrapper는 해당 slice의 generated new<Model> action을 호출합니다.

Release.Zone.tsx