적응형 Admin Dashboard 레이아웃 구성하기

현대의 웹 애플리케이션은 다양한 디바이스와 화면 크기에 맞게 적응할 수 있는 반응형 디자인을 필요로 합니다. 이번 포스팅에서는 React, Tailwind CSS, 그리고 Flowbite를 사용하여 반응형 Admin Dashboard 레이아웃을 구성하는 방법을 소개합니다.

필요한 도구들

• React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리.
• Tailwind CSS: 유틸리티 우선의 CSS 프레임워크로 빠른 커스텀 스타일링을 가능하게 합니다.
• Flowbite: React와 Tailwind CSS 기반의 컴포넌트 라이브러리입니다.

시작하기 전에

프로젝트에 Tailwind CSS와 Flowbite가 설치되어 있어야 합니다. 아직 설치하지 않았다면, 다음 명령어를 실행하여 설치할 수 있습니다.

npm install tailwindcss flowbite

레이아웃 구성하기

1. Layout 컴포넌트

Layout 컴포넌트는 사이드바의 상태를 관리하고, 전체 페이지 레이아웃을 정의합니다.

// components/Layout.js
import React, { useState } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

function Layout({ children }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <div className="flex">
      <Sidebar isOpen={isSidebarOpen} />
      <div className="flex-1 flex flex-col">
        <Navbar toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} />
        <main className="flex-1 p-4">{children}</main>
      </div>
    </div>
  );
}

export default Layout;

2. Navbar 컴포넌트

Navbar 컴포넌트에는 사이드바를 토글하는 버튼이 포함되어 있습니다.

// components/Navbar.js
import React from 'react';
import { mdiMenu } from '@mdi/js';
import Icon from '@mdi/react';

function Navbar({ toggleSidebar }) {
  return (
    <nav className="bg-gray-800 text-white p-4 flex justify-between items-center">
      <button onClick={toggleSidebar} className="p-2">
        <Icon path={mdiMenu} size={1} color="white" />
      </button>
      <div>Admin Dashboard</div>
    </nav>
  );
}

export default Navbar;

3. Sidebar 컴포넌트

Sidebar 컴포넌트는 적응형으로 디자인되어, 화면 크기에 따라 자동으로 숨겨지거나 표시됩니다.

// components/Sidebar.js
import React from 'react';

function Sidebar({ isOpen }) {
  return (
    <div className={`fixed inset-y-0 left-0 bg-blue-800 text-white w-64 transition-transform transform ${isOpen ? "translate-x-0" : "-translate-x-full"} md:relative md:translate-x-0`}>
      <div className="p-5">Sidebar Content</div>
    </div>
  );
}

export default Sidebar;

결론

React, Tailwind CSS, 그리고 Flowbite를 사용하여 적응형 Admin Dashboard 레이아웃을 구성하는 방법을 살펴보았습니다. 이 방법을 통해 다양한 화면 크기에 맞춰 잘 작동하는 반응형 웹 애플리케이션을 만들 수 있습니다.