공통 UI 템플릿: 팀원용 빠른 요약

한 문장 원칙: 로그인부터 히어로까지는 함께 만들고, 히어로 아래의 업무 화면은 각 포털이 자유롭게 만든다.

먼저 기억할 세 가지

원칙	의미	팀에 주는 효과
진입 경험은 표준화	로그인, 좌측 메뉴, 상단바, 히어로는 공통 UI를 사용한다.	포털이 달라도 사용자는 같은 방식으로 시작한다.
업무 화면은 자율화	히어로 아래의 섹션·그리드·데이터 표현·업무 흐름은 포털이 결정한다.	도메인 요구에 맞는 화면을 제약 없이 구현한다.
반복 요소는 재사용	버튼, 타이포그래피, 첨부파일, 게시판, 폼은 공통 컴포넌트를 우선 사용한다.	시각적 일관성과 구현 속도를 함께 확보한다.

어디까지 공통 UI인가?

[ 로그인 ] → [ 좌측 메뉴 | 우측 상단바 ] → [ 히어로 ] → [ 포털별 자유 업무 영역 ]
      공통 UI 표준 템플릿                       공통 여백만 적용

화면 영역	누가 소유하는가?	구현 기준
로그인	공통 UI	AuthCard 등 공통 인증 화면 요소를 사용한다.
좌측 메뉴	공통 UI	브랜드, 메뉴, 접기·펴기, 사용자 정보, 관리자 메뉴의 동작을 공통화한다.
우측 상단바	공통 UI	제목은 왼쪽, 검색은 중앙, KO / EN은 오른쪽 끝에 둔다.
히어로	공통 UI	첫 방문 기본 노출. 사용자는 개인 설정으로 숨기거나 다시 표시할 수 있다.
히어로 아래	각 포털	업무 목적에 맞게 레이아웃과 기능을 자유롭게 만든다.

개발할 때의 빠른 판단

이 질문에 “예”라면	이렇게 한다
사용자가 로그인하기 전 보는 화면인가?	공통 로그인 컴포넌트를 사용한다.
메뉴, 상단바, 히어로에 해당하는가?	PortalFrame과 PortalHero로 구성한다.
대시보드, 트리, 상세, 승인, 매뉴얼 같은 업무 콘텐츠인가?	포털 자체 레이아웃으로 구현한다.
버튼, 입력, 상태, 첨부, 게시판처럼 반복되는 요소인가?	공통 컴포넌트를 먼저 찾고 필요한 부분만 확장한다.
권한, DB, 승인 규칙, 도메인 필드에 관한 것인가?	포털의 자체 소스와 데이터 모델이 소유한다.

기본 적용 형태

<PortalFrame {...frameProps}>
  <PortalHero {...heroProps} />

  {/* 이 아래부터는 포털·하위 페이지가 자유롭게 설계하는 업무 영역 */}
  <PortalWorkspace />
</PortalFrame>

자주 발생하는 오해

오해	올바른 이해
공통 UI를 쓰면 모든 화면이 똑같아진다.	공통화하는 것은 진입 경험과 반복 컴포넌트다. 업무 레이아웃은 포털이 소유한다.
자유 레이아웃이면 공통 컴포넌트를 쓰지 않아도 된다.	레이아웃은 자유지만 버튼·타이포그래피·게시판·첨부 UI는 재사용을 우선한다.
히어로는 매일 계속 보여야 한다.	첫 방문에는 보여 기능을 알리고, 반복 사용자는 개인 설정으로 숨길 수 있다.
포털별 색상도 모두 같아야 한다.	메뉴의 동작은 동일하게 유지하되, 일반 모드의 배경색·채도는 포털 식별을 위해 다르게 둘 수 있다.

다음 행동

새 화면을 만들기 전에는 먼저 표준 템플릿인지, 자유 레이아웃인지, 공통 컴포넌트를 재사용할 수 있는지를 확인한다. 세 항목이 정리되면 포털별 디자인과 구현 방식은 자유롭게 결정한다.

상세 기준: 공통 UI 템플릿 및 포털 자유 레이아웃 가이드