기본 구조
<body class="h-full">
<!-- Layout 시작 -->
<div class="min-h-screen md:h-dvh flex flex-col overflow-hidden">
<!-- Header -->
<div class="shrink-0">
<%= render "layouts/header" %>
</div>
<!-- Content 시작-->
<div class="flex flex-1 min-h-0 overflow-hidden">
<aside
class="relative z-50 hidden h-full lg:flex lg:flex-col overflow-x-visible transition-[width] duration-200 lg:w-64">
<%= render "layouts/sidebar" %>
</aside>
<!-- Main 유일한 스크롤 영역 -->
<main
class="flex-1 min-h-0 overflow-y-auto overflow-x-visible scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800">
<%= yield %>
</main>
<!-- Main 끝 -->
</div>
<!-- Content 끝-->
</div>
<!-- Layout 끝-->
</body>
Layout 단위 Turbo Frame 전략
<body>
<%= turbo_frame_tag "modal" %>
<%= turbo_frame_tag "flash" %>
<%= yield %>
</body>
<%= turbo_frame_tag dom_id(post) do %>
<%= render post %>
<% end %>
| 영역 | 경계 |
| application.html.erb | ERB 유지 |
| Header / Sidebar | ViewComponent 가능 |
| Nav / Dropdown | ViewComponent 적극 추천 |
| Page Shell 전체 | Layout 유지 |
이상적이 분리 구조
<!-- application.html.erb -->
<body>
<%= render HeaderComponent.new %>
<main>
<%= yield %>
</main>
</body>Layout은 조립자, ViewComponent는 완성된 UI 블록이다.
layouts/header (Tailwindcss 적용)
app/views/layouts/_header.html.erb
<header class="h-14 shrink-0 border-b bg-white flex items-center px-4">
<div class="flex items-center gap-4 w-full">
<!-- Left -->
<div class="font-semibold">
MyApp
</div>
<!-- Center -->
<nav class="flex-1 items-center justify-center hidden md:flex gap-4 text-sm text-gray-600">
Link1 | Link2 | Link3
</nav>
<!-- Right -->
<div class="ml-auto flex items-center gap-3">
Link4 | Link5 | Link6
</div>
</div>
</header>높이 : h-14
스크롤무관 : shrink-0
layouts/sidebar (Tainwindcss 적용)
app/views/layouts/_sidebar.html.erb
<aside class="flex h-full min-h-0 flex-col pt-4 lg:pt-0">
<header class="p-4 text-sm text-gray-500">
Header
</header>
<nav class="flex-1 overflow-y-auto p-4">
<ul class="space-y-2 text-sm">
<li>
Menu1 </li>
<li>
Menu2
</li>
<li>
Menu3
</li>
</ul>
</nav>
<footer class="p-4 text-sm text-gray-500">
Footer
</footer>
</aside>
Sidebar만 세로 스크롤 허용
모바일에서는 숨김 (hidden md:block)
Layout에서 높이를 이미 확보했기 때문에 h-full 가능
Header / Sidebar는 Turbo Frame이 아님
반응형
'Ruby > Rails' 카테고리의 다른 글
| Rails 8 - Alpine.js 추가방법 (6) (0) | 2026.01.21 |
|---|---|
| Rails 8 - Layout 세팅하기 (4) (0) | 2026.01.21 |
| Rails 8 - Tailwind CSS 적용하기 (3) (0) | 2026.01.21 |
| Rails 8 - 프로젝트 생성하기 (2) (0) | 2026.01.21 |
| Rails 8 - 개발 환경 설정 (1) (0) | 2026.01.21 |
