📐 Tailwind 2장: 레이아웃 Flexbox & Grid

<!-- Flexbox 기본 활성화 -->
<div class="flex">
 
<!-- 방향 설정 -->
<div class="flex flex-row">     <!-- → 가로 방향 (기본값) -->
<div class="flex flex-col">     <!-- ↓ 세로 방향 -->
<div class="flex flex-row-reverse"> <!-- ← 가로 역방향 -->
 
<!-- 메인 축 정렬 (justify-content) -->
<div class="flex justify-start">    <!-- |◼◼◼     | -->
<div class="flex justify-center">   <!-- |  ◼◼◼  | -->
<div class="flex justify-end">      <!-- |     ◼◼◼| -->
<div class="flex justify-between">  <!-- |◼  ◼  ◼| -->
<div class="flex justify-around">   <!-- | ◼  ◼  ◼ | -->
<div class="flex justify-evenly">   <!-- |  ◼  ◼  ◼  | -->
 
<!-- 교차 축 정렬 (align-items) -->
<div class="flex items-start">    <!-- 상단 정렬 -->
<div class="flex items-center">   <!-- 중앙 정렬 ← 자주 씀! -->
<div class="flex items-end">      <!-- 하단 정렬 -->
<div class="flex items-stretch">  <!-- 늘리기 (기본값) -->
<div class="flex items-baseline"> <!-- 텍스트 기준선 정렬 -->
 
<!-- 줄 바꿈 -->
<div class="flex flex-wrap">     <!-- 넘치면 다음 줄로 -->
<div class="flex flex-nowrap">   <!-- 절대 안 넘김 (기본값) -->
 
<!-- 자식 요소 크기 제어 -->
<div class="flex-1">   <!-- flex: 1 1 0% — 가능한 공간 균등 분배 -->
<div class="flex-auto"><!-- flex: 1 1 auto — 자신의 크기 기준으로 분배 -->
<div class="flex-none"><!-- flex: none — 크기 고정 -->
 
<!-- 간격 -->
<div class="flex gap-4">    <!-- gap: 1rem (가로세로 모두) -->
<div class="flex gap-x-4">  <!-- column-gap: 1rem (가로만) -->
<div class="flex gap-y-4">  <!-- row-gap: 1rem (세로만) -->

// 영수네 커뮤니티 상단 네비게이션
// 🦁 영호: "내비게이션 바는 교과서적인 Flex 사용 사례예요."
 
function Navbar() {
  return (
    // justify-between: 로고와 메뉴를 양쪽 끝으로
    // items-center: 세로 중앙 정렬
    // h-16: 높이 64px 고정
    <nav className="flex items-center justify-between px-6 h-16 bg-white border-b border-gray-200">
      {/* 로고 영역 */}
      <a href="/" className="flex items-center gap-2 font-bold text-xl text-blue-600">
        <span>📚</span>
        <span>영수네 커뮤니티</span>
      </a>
 
      {/* 메뉴 아이템들: 가로로 나란히 */}
      <div className="flex items-center gap-6">
        <a href="/studies" className="text-sm text-gray-600 hover:text-blue-600">스터디 찾기</a>
        <a href="/create"  className="text-sm text-gray-600 hover:text-blue-600">스터디 만들기</a>
        {/* 로그인 버튼만 flex-none으로 고정 크기 */}
        <button className="flex-none rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
          로그인
        </button>
      </div>
    </nav>
  );
}

// 스터디 카드 내 아이콘과 텍스트 가로 정렬
function StudyCardHeader({ icon, title, subtitle }: Props) {
  return (
    // flex items-center gap-3: 아이콘과 텍스트 수평 중앙 정렬
    <div className="flex items-center gap-3">
      {/* 아이콘: flex-none 으로 크기 고정 — shrink 방지! */}
      <div className="flex-none flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-600 text-lg">
        {icon}
      </div>
      {/* 텍스트: min-w-0 필수! flex 자식에서 텍스트 말줄임 적용 시 */}
      <div className="min-w-0 flex-1">
        <p className="font-semibold text-gray-900 truncate">{title}</p>
        <p className="text-sm text-gray-500 truncate">{subtitle}</p>
      </div>
    </div>
  );
}

<!-- Grid 기본 활성화 -->
<div class="grid">
 
<!-- 열 수 고정 -->
<div class="grid grid-cols-1">   <!-- 1열 -->
<div class="grid grid-cols-2">   <!-- 2열 -->
<div class="grid grid-cols-3">   <!-- 3열 -->
<div class="grid grid-cols-4">   <!-- 4열 -->
<div class="grid grid-cols-12">  <!-- 12열 (디자인 시스템 그리드) -->
 
<!-- 열 너비 자동 조절 (auto-fit / auto-fill) -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
  <!-- 각 카드가 최소 280px, 남은 공간 균등 분배 -->
</div>
 
<!-- 행 수 지정 -->
<div class="grid grid-rows-3">   <!-- 3행 -->
 
<!-- 간격 -->
<div class="grid gap-4">         <!-- gap: 1rem -->
<div class="grid gap-x-6 gap-y-4"> <!-- 열 간격 1.5rem, 행 간격 1rem -->
 
<!-- 자식 요소가 차지하는 열 수 (span) -->
<div class="col-span-1">  <!-- 1열 차지 -->
<div class="col-span-2">  <!-- 2열 차지 -->
<div class="col-span-full"> <!-- 전체 열 차지 (= 가로로 꽉 채움) -->
 
<!-- 자식 요소 시작/끝 위치 -->
<div class="col-start-2 col-end-4">  <!-- 2번 선에서 4번 선까지 -->

// 🎨 영숙: "모바일 1열, 태블릿 2열, 데스크탑 3열로 해주세요!"
// 🦁 영호: "Tailwind 반응형 접두사 쓰면 한 줄이에요."
 
function StudyGrid({ studies }: { studies: Study[] }) {
  return (
    // grid-cols-1: 모바일 기본 1열
    // md:grid-cols-2: 768px 이상에서 2열
    // lg:grid-cols-3: 1024px 이상에서 3열
    // gap-6: 카드 간 24px 간격
    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      {studies.map((study) => (
        <StudyCard key={study.id} {...study} />
      ))}
    </div>
  );
}

// 사이드바가 고정 너비, 메인 콘텐츠가 나머지 공간 차지
function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    // grid-cols-[240px_1fr]: 사이드바 240px 고정, 나머지는 1fr
    // min-h-screen: 최소 높이 화면 전체
    <div className="grid grid-cols-[240px_1fr] min-h-screen">
      {/* 사이드바: 세로 전체 */}
      <aside className="bg-gray-900 text-white p-6">
        <nav className="flex flex-col gap-2">
          <SidebarItem href="/dashboard" icon="📊">대시보드</SidebarItem>
          <SidebarItem href="/studies"   icon="📚">내 스터디</SidebarItem>
          <SidebarItem href="/profile"   icon="👤">프로필</SidebarItem>
        </nav>
      </aside>
 
      {/* 메인 콘텐츠 */}
      <main className="p-8 bg-gray-50">
        {children}
      </main>
    </div>
  );
}

// 통계 박스: 3개 항목 가로 배치, 마지막 항목은 2칸 차지
function ProfileStats() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <StatBox label="참여 스터디" value={12} />
      <StatBox label="작성 게시글" value={48} />
      {/* col-span-full 로 마지막 통계는 가로 전체 */}
      <div className="col-span-full rounded-xl bg-blue-50 p-4 text-center">
        <p className="text-2xl font-bold text-blue-600">🏆 상위 15%</p>
        <p className="text-sm text-gray-600">이번 달 활동 순위</p>
      </div>
    </div>
  );
}

// 🦁 영호: "페이지 전체 레이아웃은 Grid 로, 내부 요소 나열은 Flex 로 — 이게 기본이에요."
 
function StudyListPage() {
  return (
    // 최외곽: Flex 세로 — 헤더, 메인, 푸터 쌓기
    <div className="flex min-h-screen flex-col bg-gray-50">
      <Navbar />  {/* flex items-center justify-between */}
 
      {/* 메인 콘텐츠 영역 */}
      <main className="flex-1 px-4 py-8 mx-auto w-full max-w-6xl">
        {/* 페이지 제목 + 필터 버튼: Flex */}
        <div className="mb-8 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-900">스터디 찾기</h1>
          <div className="flex gap-2">
            <FilterButton label="전체" active />
            <FilterButton label="React" />
            <FilterButton label="Next.js" />
            <FilterButton label="TypeScript" />
          </div>
        </div>
 
        {/* 카드 그리드: Grid */}
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {studies.map((study) => (
            <StudyCard key={study.id} {...study} />
          ))}
        </div>
      </main>
 
      <Footer />
    </div>
  );
}

{/* ❌ 안 되는 경우: 부모 높이가 콘텐츠 높이와 같아서 */}
<div className="flex items-center">
  <p>텍스트</p>
</div>
 
{/* ✅ 부모에 고정 높이나 min-h 를 지정해야 효과가 나타남 */}
<div className="flex items-center min-h-screen">  {/* 화면 전체 높이 */}
  <p>텍스트</p>
</div>

{/* ❌ Grid 자식 안의 텍스트가 부모를 뚫고 나올 때 */}
<div className="grid grid-cols-3 gap-4">
  <div>
    <p className="truncate">아주 긴 텍스트가 그리드 경계를 무시함</p>
  </div>
</div>
 
{/* ✅ Grid 자식에 min-w-0 추가 */}
<div className="grid grid-cols-3 gap-4">
  <div className="min-w-0">  {/* 이거 추가! */}
    <p className="truncate">아주 긴 텍스트가 이제 잘림</p>
  </div>
</div>

{/* 화면 정중앙에 모달 띄우기 */}
<div className="fixed inset-0 flex items-center justify-center bg-black/50">
  <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-2xl">
    {/* 모달 내용 */}
  </div>
</div>