Layout 레이아웃 컨테이너

페이지 수준 골격: LhLayout + LhLayoutHeader / LhLayoutAside / LhLayoutMain / LhLayoutFooter, 모두 시맨틱 태그(header / aside / main / footer)를 사용하며, landmark는 태그에서 자연스럽게 얻어집니다.

상·중·하 레이아웃

상·중·하

헤더

콘텐츠 영역

푸터

<script setup lang="ts">
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>헤더</LhLayoutHeader>
    <LhLayoutMain>콘텐츠 영역</LhLayoutMain>
    <LhLayoutFooter>푸터</LhLayoutFooter>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>헤더</LhLayoutHeader>
    <LhLayoutMain>콘텐츠 영역</LhLayoutMain>
    <LhLayoutFooter>푸터</LhLayoutFooter>
  </LhLayout>
</template>

사이드바 레이아웃

direction으로 자식 항목의 정렬 방향을 명시적으로 제어합니다: 기본값은 horizontal(나란히)이며, LhLayoutAside를 포함하면 자동으로 vertical로 전환되고 수동으로 지정할 수도 있습니다.

direction

가로로 나란히

가로로 나란히

세로로 쌓기

세로로 쌓기

<script setup lang="ts">
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>가로로 나란히</LhLayoutMain>
    <LhLayoutMain>가로로 나란히</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>세로로 쌓기</LhLayoutMain>
    <LhLayoutMain>세로로 쌓기</LhLayoutMain>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>가로로 나란히</LhLayoutMain>
    <LhLayoutMain>가로로 나란히</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>세로로 쌓기</LhLayoutMain>
    <LhLayoutMain>세로로 쌓기</LhLayoutMain>
  </LhLayout>
</template>

LhLayoutAside를 포함하면 부모가 자동으로 세로 방향으로 전환됩니다(헤더가 위, aside와 main이 나란히).

사이드바

헤더

사이드바

콘텐츠 영역

<script setup lang="ts">
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>헤더</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="사이드 내비게이션">사이드바</LhLayoutAside>
      <LhLayoutMain>콘텐츠 영역</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>헤더</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="사이드 내비게이션">사이드바</LhLayoutAside>
      <LhLayoutMain>콘텐츠 영역</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

API

LhLayout Props

프로퍼티	설명	타입	기본값
direction	정렬 방향(Aside 포함 시 자동으로 vertical)	"horizontal" | "vertical"	'horizontal'
sx	sx 빠른 레이아웃 속성	LhSxProps	—

LhLayoutAside Props

프로퍼티	설명	타입	기본값
width	사이드바 너비	number | string	—
ariaLabel	접근성 이름(landmark 명명)	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Header / Main / Footer는 sx 프로퍼티 하나를 공통으로 사용합니다.

접근성

• 시맨틱 태그를 사용하여 header / main / footer / aside가 곧바로 landmark role에 매핑되며, 별도의 ARIA가 필요 없습니다
• aside가 여러 개일 때 ariaLabel로 구분하는 것을 권장합니다(예: '사이드 내비게이션', '관련 링크')

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/layout/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhLayoutProps

export interface LhLayoutProps {
  /** 정렬 방향(Aside 포함 시 자동으로 vertical) */
  direction?: 'horizontal' | 'vertical'
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhLayoutSectionProps

/** Header / Main / Footer 공통 props */
export interface LhLayoutSectionProps {
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhLayoutAsideProps

export interface LhLayoutAsideProps extends LhLayoutSectionProps {
  /** 사이드바 너비 */
  width?: number | string
  /** 접근성 이름(landmark 명명) */
  ariaLabel?: string
}