📱 Tailwind 5장: 반응형 디자인

/* 모바일 기본 */
.study-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
 
/* 태블릿 */
@media (min-width: 768px) {
  .study-grid { grid-template-columns: repeat(2, 1fr); }
}
 
/* 데스크탑 */
@media (min-width: 1024px) {
  .study-grid { grid-template-columns: repeat(3, 1fr); }
}

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">

/* grid-cols-1: 기본 스타일 */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 
/* md:grid-cols-2: 768px 이상에서만 적용 */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
 
/* lg:grid-cols-3: 1024px 이상에서만 적용 */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

<!-- 🐣 영철의 실수: "데스크탑 기준으로 먼저 짜고 모바일에서 숨기면 되겠지" -->
<div class="grid-cols-3 sm:grid-cols-1">
  <!-- ❌ 이건 거꾸로야! 기본이 3열이고 sm 에서 1열로 줄이려는 건데,
       sm: 은 640px 이상에서 적용이라 모바일에서는 적용 안 됨! -->
</div>

<!-- 🦁 영호의 방식: "모바일이 기본, 큰 화면에서 확장" -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
  <!-- ✅ 기본 1열 → 640px+ 에서 2열 → 1024px+ 에서 3열 -->
</div>

// 모바일: 햄버거 메뉴, 데스크탑: 가로 메뉴
function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
  return (
    <nav className="border-b border-gray-200 bg-white">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
        {/* 로고: 항상 보임 */}
        <a href="/" className="flex items-center gap-2 font-bold text-blue-600">
          <span>📚</span>
          <span className="text-lg">영수네 커뮤니티</span>
        </a>
 
        {/* 데스크탑 메뉴: md 이상에서만 보임 */}
        <div className="hidden items-center gap-6 md:flex">
          <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>
          <button className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
            로그인
          </button>
        </div>
 
        {/* 햄버거 버튼: md 미만에서만 보임 */}
        <button
          className="md:hidden"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <span className="text-2xl">{mobileMenuOpen ? '✕' : '☰'}</span>
        </button>
      </div>
 
      {/* 모바일 드롭다운 메뉴: md 미만에서만 표시 */}
      {mobileMenuOpen && (
        <div className="border-t border-gray-100 bg-white px-4 py-4 md:hidden">
          <div className="flex flex-col gap-4">
            <a href="/studies" className="text-sm text-gray-700">스터디 찾기</a>
            <a href="/create"  className="text-sm text-gray-700">스터디 만들기</a>
            <button className="w-full rounded-lg bg-blue-600 py-2.5 text-sm font-medium text-white">
              로그인
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}

function HeroSection() {
  return (
    // 모바일: 세로 배치, 중앙 정렬 / 데스크탑: 가로 배치, 좌우 분할
    <section className="bg-gradient-to-br from-blue-600 to-blue-800 px-4 py-16 md:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-col items-center gap-8 text-center md:flex-row md:items-start md:gap-12 md:text-left">
          {/* 텍스트 영역 */}
          <div className="flex-1">
            {/* 모바일: text-3xl / 데스크탑: text-5xl */}
            <h1 className="mb-4 text-3xl font-bold text-white md:text-5xl">
              함께 성장하는<br className="hidden md:block" /> 개발자 스터디
            </h1>
            <p className="mb-8 text-lg text-blue-100 md:text-xl">
              React, Next.js, TypeScript 스터디를 찾아보세요
            </p>
            {/* 모바일: 버튼 가로 꽉 채움 / 데스크탑: 자동 너비 */}
            <div className="flex flex-col gap-3 sm:flex-row">
              <button className="w-full rounded-lg bg-white px-6 py-3 font-semibold text-blue-600 sm:w-auto">
                스터디 찾기
              </button>
              <button className="w-full rounded-lg border-2 border-white px-6 py-3 font-semibold text-white sm:w-auto">
                스터디 만들기
              </button>
            </div>
          </div>
 
          {/* 이미지/일러스트: 모바일에서 숨김, md 이상에서 표시 */}
          <div className="hidden w-80 md:block">
            <div className="rounded-2xl bg-white/20 p-8 text-center text-6xl">
              📚
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// 모바일: 사이드바 없음 (드로어로 대체), 데스크탑: 사이드바 고정
function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    // 모바일: 단일 열 / lg: 사이드바(256px) + 메인
    <div className="min-h-screen lg:grid lg:grid-cols-[256px_1fr]">
      {/* 사이드바: 모바일에서 숨김 */}
      <aside className="hidden lg:block bg-gray-900 p-6 text-white">
        <nav className="flex flex-col gap-2">
          <SidebarLink href="/dashboard">📊 대시보드</SidebarLink>
          <SidebarLink href="/studies">📚 내 스터디</SidebarLink>
          <SidebarLink href="/profile">👤 프로필</SidebarLink>
        </nav>
      </aside>
 
      {/* 메인: 모바일에서 전체 너비 */}
      <main className="min-h-screen p-4 md:p-8 bg-gray-50">
        {children}
      </main>
    </div>
  );
}

// 표준 페이지 컨테이너 패턴
// 어느 페이지에서나 재사용할 수 있는 래퍼 컴포넌트
function Container({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    // max-w-6xl: 1152px 최대 너비
    // mx-auto: 가운데 정렬
    // px-4 sm:px-6 lg:px-8: 화면 크기별 좌우 여백 점진적 증가
    <div className={`mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 ${className ?? ''}`}>
      {children}
    </div>
  );
}
 
// 사용 예
function StudyListPage() {
  return (
    <>
      <Navbar />
      <Container className="py-8">
        <StudyGrid studies={studies} />
      </Container>
      <Footer />
    </>
  );
}

{/* ❌ 이렇게 하면 모바일에서 무조건 숨겨지고 md 에서도 숨겨져 — 의도 불명 */}
<div class="hidden md:hidden">
 
{/* ✅ 모바일에서 숨기고 md 이상에서 보이기 */}
<div class="hidden md:block">
 
{/* ✅ 모바일에서 보이고 md 이상에서 숨기기 */}
<div class="block md:hidden">
 
{/* ✅ 모바일에서 flex, md 에서 grid */}
<div class="flex md:grid md:grid-cols-2">

{/* ❌ 최대 너비 Breakpoint — Tailwind 에 없는 개념! */}
{/* "md 이하에서만 적용"하고 싶을 때 이런 클래스는 없어 */}
<div class="max-md:grid-cols-1">  {/* max-md: 는 Tailwind v3.2+ 에서만 지원 */}
 
{/* ✅ Tailwind 기본은 min-width. 모바일 퍼스트로 설계하면 이런 역방향이 필요 없어 */}
<div class="grid-cols-1 md:grid-cols-3">

{/* 화면 크기에 따라 텍스트 크기 조절 */}
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  개발자 스터디 매칭
</h1>
 
<p className="text-sm md:text-base lg:text-lg text-gray-600">
  함께 성장하는 개발자 커뮤니티
</p>