Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Layout

웹 애플리케이션의 레이아웃을 구성하는 컴포넌트입니다. Header, Sider, Content, Footer 컴포넌트를 조합하여 다양한 레이아웃을 구성할 수 있습니다.

Layout

Header

Sider

Content

Footer

컴포넌트와 함께 사용합니다.

Layout 컴포넌트는 자동으로 화면 전체를 차지하며, 내부 컴포넌트들의 크기에 따라 Content 영역이 자동으로 조절됩니다. Sider의 위치는 siderPosition prop을 통해 조절할 수 있습니다.

import { Layout, Header, Sider, Content, Footer } from "sud-ui";

사용 시 주의사항

Header, Sider, Content, Footer 컴포넌트는 반드시 Layout 컴포넌트 내부에 위치해야 합니다.

Layout 내부에 다른 Layout을 중첩하여 사용할 수 있습니다.

Sider의 위치는 'above-header' 또는 'below-header'로 설정할 수 있습니다.

각 컴포넌트의 크기는 자동으로 계산되며, Content 영역이 나머지 공간을 채웁니다.

사용예제

Header

Sider

content

Sider

Header

content

Sider

content

Header

content

Basic Layout

기본적인 레이아웃 구성입니다.

Soon UI Design

Hello World!

Header-Content-Footer

Header, Content, Footer 컴포넌트를 사용한 레이아웃입니다.

import React from 'react';
import { Layout, Header, Content, Footer, Avatar, Typography } from 'sud-ui';
import { LogoSud } from 'sud-ui';

const BasicLayout = () => {
  return (
    <Layout>
      <Header
        className="flex justify-center items-center"
        colorType="sub"
        shadow="sm"
        border={false}
      >
        <LogoSud /> Soon UI Design
      </Header>
      <Content className="flex flex-col justify-center items-center gap-[10px]" background="sky-1">
        <Avatar />
        <Typography as="span" size="base" pretendard="B">
          Hello World!
        </Typography>
      </Content>
      <Footer
        className="flex justify-center items-center"
        colorType="sub"
        border={false}
        height="40px"
      >
        All rights reserved &copy; 2025 SeeUSoon93
      </Footer>
    </Layout>
  );
};

export default BasicLayout;

Soon UI Design

Please select a menu

Above-Header-Sider-Content

Above-Header-Sider-Content 레이아웃입니다.

import React, { useState } from 'react';
import { Layout, Header, Sider, Content, Menu } from 'sud-ui';
import { LogoSud } from 'sud-icons';

const AboveHeaderSiderContent = () => {
  const [selectedMenu, setSelectedMenu] = useState("");

  const menuItems = [
    {
      key: "dashboard",
      label: "Dashboard",
      children: [
        { key: "overview", label: "Overview" },
        { key: "analytics", label: "Analytics" }
      ]
    },
    {
      key: "management",
      label: "Management",
      children: [
        { key: "users", label: "Users" },
        { key: "settings", label: "Settings" }
      ]
    }
  ];

  const findLabel = (items, targetKey) => {
    for (const item of items) {
      if (item.key === targetKey) return item.label;
      if (item.children) {
        const childLabel = findLabel(item.children, targetKey);
        if (childLabel) return childLabel;
      }
    }
    return null;
  };

  const handleMenuSelect = (key) => {
    const label = findLabel(menuItems, key);
    setSelectedMenu(label || "");
  };

  return (
    <Layout siderPosition="above-header">
      <Header
        className="flex justify-center items-center"
        colorType="sub"
        shadow="sm"
        border={false}
      >
        <LogoSud /> Soon UI Design
      </Header>
      <Sider
        className="flex pd-l-5 pd-r-10"
        width="object-fit"
        border={false}
        colorType="sub"
        shadow="sm"
      >
        <Menu
          items={menuItems}
          expandType="accordion"
          colorType="sub"
          onSelect={handleMenuSelect}
        />
      </Sider>
      <Content
        className="flex justify-center items-center"
        background="sky-1"
      >
        {selectedMenu ? `${selectedMenu} selected` : "Please select a menu"}
      </Content>
    </Layout>
  );
};

export default AboveHeaderSiderContent;

Soon UI Design

Sub Header

Nested Layout Content

Nested-Layout

Layout 컴포넌트를 Content 안에 중첩하여 사용하는 예제입니다.

import React from 'react';
import { Layout, Header, Sider, Content, Menu } from 'sud-ui';
import { LogoSud } from 'sud-icons';

const NestedLayout = () => {
  return (
    <Layout>
      <Header
        className="flex justify-center items-center"
        colorType="sub"
        shadow="sm"
        border={false}
      >
        <LogoSud /> Soon UI Design
      </Header>
      <Sider
        className="flex pd-l-5 pd-r-10"
        width="270"
        colorType="sub"
        shadow="sm"
        border={false}
      >
        <Menu
          items={[
            { key: "dashboard", label: "Dashboard" },
            { key: "users", label: "Users" },
            { key: "settings", label: "Settings" }
          ]}
          colorType="sub"
        />
      </Sider>
      <Content>
        <Layout>
          <Header
            className="flex justify-center items-center"
            colorType="primary"
            shadow="sm"
            border={false}
            height="60"
          >
            Sub Header
          </Header>
          <Content className="flex justify-center items-center">
            Nested Layout Content
          </Content>
        </Layout>
      </Content>
    </Layout>
  );
};

export default NestedLayout;

Please select a menu

Sider-Content

Sider와 Content만 있는 간단한 레이아웃입니다.

import React, { useState } from 'react';
import { Layout, Sider, Content, Menu } from 'sud-ui';

const SiderContentLayout = () => {
  const [selectedMenu, setSelectedMenu] = useState("");

  const menuItems = [
    { key: "dashboard", label: "Dashboard" },
    { key: "users", label: "Users" },
    { key: "settings", label: "Settings" }
  ];

  const handleMenuSelect = (key) => {
    const selected = menuItems.find(item => item.key === key);
    setSelectedMenu(selected?.label || "");
  };

  return (
    <Layout>
      <Sider
        className="flex pd-l-5 pd-r-10"
        width="270"
        colorType="sub"
        shadow="sm"
        border={false}
      >
        <Menu
          items={menuItems}
          colorType="sub"
          onSelect={handleMenuSelect}
        />
      </Sider>
      <Content className="flex justify-center items-center" background="sky-1">
        {selectedMenu ? `${selectedMenu} page` : "Please select a menu"}
      </Content>
    </Layout>
  );
};

export default SiderContentLayout;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

데이터가 없습니다

개인정보 처리방침

서비스 약관