React Tailwind :: 모바일 고려 Layout 컴포넌트

Layout 컴포넌트

// src/components/Layout.tsx

import React, { ReactNode } from 'react';

type LayoutProps = {
    children: ReactNode;
  }

const Layout : React.FC<LayoutProps> = ({ children }) => {
    return (
        <div className="container mx-auto px-4 sm:px-6 md:px-8 py-8 max-w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl">
            {children}
        </div>
    );
};

export default Layout;

• max-w-full: 모바일 장치에서 컨테이너가 전체 너비를 차지하도록 설정
• sm:max-w-screen-sm: 작은 화면에서 최대 너비를 screen-sm으로 설정
• md:max-w-screen-md: 중간 크기 화면에서 최대 너비를 screen-md로 설정
• lg:max-w-screen-lg: 큰 화면에서 최대 너비를 screen-lg로 설정
• xl:max-w-screen-xl: 아주 큰 화면에서 최대 너비를 screen-xl로 설정

라우트 설정

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from '../components/Header';
import SponsorDetail from '../pages/SponsorDetail';
import SponsorList from '../pages/SponsorList';
import BankStatement from '../pages/BankStatement';
import ExpenseList from '../pages/ExpenseList';
import ExpenseDetail from '../pages/ExpenseDetail';
import Layout from '../layouts/MainLayout';

const AppRoutes: React.FC = () => {
  return (
    <Router>
      <Header />
      <Layout>
        <Routes>
          <Route path="/" element={<BankStatement />} />
          <Route path="/sponsorlist" element={<SponsorList />} />
          <Route path="/sponsorlist/detail/:uuid" element={<SponsorDetail />} />
          <Route path="/expensedetail" element={<ExpenseDetail />} />
          <Route path="/expenselist/detail/:uuid" element={<ExpenseList />} />
        </Routes>
      </Layout>
    </Router>
  );
};

export default AppRoutes;