🎨 Tailwind Advanced 1장: 시각 효과 마스터 — 필터, Backdrop, 그라디언트

<!-- 영수네 커뮤니티 스터디 목록 - 호버 시 비활성 카드 흐리게 처리 -->
 
<!-- ❌ 영철이의 순진한 코드: CSS 직접 작성 -->
<div style="filter: blur(12px);">흐릿한 카드</div>
 
<!-- ✅ 영호의 Tailwind 방식 -->
<div class="blur-md">흐릿한 카드</div>
<!-- blur-xs: 4px | blur-sm: 8px | blur-md: 12px -->
<!-- blur-lg: 16px | blur-xl: 24px | blur-2xl: 40px | blur-3xl: 64px -->

<!-- 스터디 카드 목록 - 선택된 카드만 선명하게 -->
<div class="group flex gap-4">
  <!-- 🐣 영철: "이 카드가 선택됐을 때 나머지를 흐리게 만들고 싶어요!" -->
  <div class="transition-all duration-300 group-hover:blur-none blur-sm">
    <!-- 비활성 카드: 평소에는 약간 흐림 -->
  </div>
</div>

<!-- ❌ 영철이의 코드: 호버 다크 효과를 JavaScript로 처리 -->
<div onmouseover="this.style.filter='brightness(0.75)'"
     onmouseout="this.style.filter='none'">
  카드
</div>
 
<!-- ✅ 영호의 Tailwind 방식: CSS hover 변형 -->
<div class="transition-all duration-200 hover:brightness-75">
  <!-- brightness-75 = brightness(0.75) = 25% 어둡게 -->
  카드 이미지 오버레이 효과
</div>

<!-- 스터디 멤버 프로필 이미지 - 다크 모드 대비 향상 -->
<img
  class="dark:contrast-125 dark:brightness-90 transition-all"
  src="/profile.jpg"
  alt="영철 프로필"
/>
<!-- contrast-125: 25% 대비 증가 (다크 모드에서 이미지가 더 선명하게) -->

<!-- 스터디 모집 마감된 카드를 흑백으로 표시 -->
 
<!-- ❌ 영철이의 코드: 마감 여부를 JavaScript로 체크해서 클래스 하드코딩 -->
<div class={isClosed ? 'grayscale-filter-custom' : ''}>
 
<!-- ✅ 영호의 패턴: 데이터 속성 + Tailwind 조건 클래스 -->
<div class="transition-all duration-500"
     data-closed="true"
     class="data-[closed=true]:grayscale data-[closed=true]:opacity-60">
  <img src="/study-thumbnail.jpg" alt="스터디 썸네일" />
  <span>React 스터디 (모집 마감)</span>
</div>

<!-- 🦁 영호: "영철 님, PNG 로고에 box-shadow 쓰면 안 되는 이유 알아요?" -->
 
<!-- ❌ box-shadow: 요소의 "사각형 박스" 에 그림자를 적용 -->
<!-- 투명 PNG라도 사각형 형태로 그림자가 생김 -->
<img src="/logo-transparent.png" class="shadow-xl" />
<!-- 결과: 로고 형태가 아닌 사각형 그림자가 생겨버림 😱 -->
 
<!-- ✅ drop-shadow: 요소의 "실제 픽셀 형태" 에 그림자를 적용 -->
<!-- SVG, 투명 PNG 등의 실제 모양대로 그림자가 생김 -->
<img src="/logo-transparent.png" class="drop-shadow-xl" />
<!-- 결과: 로고의 실제 형태를 따라 그림자가 생김 ✨ -->
 
<!-- 컬러 drop-shadow도 가능 -->
<img src="/logo.svg" class="drop-shadow-xl drop-shadow-indigo-500/50" />
<!-- drop-shadow-[color]: 그림자 색상 설정 -->
<!-- /50: 그림자 투명도 50% -->

<!-- 🐣 영철: "backdrop-blur-md 썼는데 왜 아무것도 안 보여요?" -->
<!-- 흔한 실수: 배경색이 불투명하면 backdrop-filter가 가려져서 안 보임 -->
 
<!-- ❌ 실수 1: 배경색이 완전 불투명 -->
<nav class="bg-white backdrop-blur-md">
  <!-- backdrop-blur가 있어도 bg-white가 완전히 덮어버려서 효과 없음 -->
</nav>
 
<!-- ❌ 실수 2: 뒤에 배경이 없음 -->
<div class="absolute bg-white/30 backdrop-blur-md">
  <!-- 부모에 배경이 없으면 흐릴 것도 없어서 효과 없음 -->
</div>
 
<!-- ✅ 올바른 Glassmorphism 레시피 -->
<!-- 1️⃣ 뒤에 있는 배경 -->
<div class="relative h-screen bg-[url(/hero-bg.jpg)] bg-cover">
  <!-- 2️⃣ 반투명 배경색 (bg-white/10, bg-white/20 등) -->
  <!-- 3️⃣ backdrop-blur 적용 -->
  <nav class="
    absolute inset-x-0 top-0
    bg-white/10          /* 10% 불투명 흰색 - 핵심! */
    backdrop-blur-md     /* 뒤 배경 12px 블러 */
    border-b border-white/20
    px-6 py-4
  ">
    네비게이션 메뉴
  </nav>
</div>

<!-- 배경 블러 -->
<div class="backdrop-blur-sm">...</div>    <!-- 8px -->
<div class="backdrop-blur-md">...</div>    <!-- 12px -->
<div class="backdrop-blur-lg">...</div>    <!-- 16px -->
<div class="backdrop-blur-xl">...</div>    <!-- 24px -->
 
<!-- 배경 밝기 -->
<div class="backdrop-brightness-75">...</div>   <!-- 어둡게 -->
<div class="backdrop-brightness-125">...</div>  <!-- 밝게 -->
 
<!-- 배경 대비 -->
<div class="backdrop-contrast-125">...</div>
 
<!-- 배경 흑백 -->
<div class="backdrop-grayscale">...</div>
 
<!-- 배경 불포화 -->
<div class="backdrop-saturate-150">...</div>

<!-- 🦁 영호의 프리미엄 Glass 카드 레시피 -->
<div class="
  relative
  bg-white/10           /* 반투명 흰색 */
  backdrop-blur-md      /* 배경 블러 */
  backdrop-brightness-90 /* 배경 살짝 어둡게 = 깊이감 */
  backdrop-saturate-150  /* 배경 채도 높여서 선명하게 */
  border border-white/25  /* 유리 테두리 */
  rounded-2xl
  shadow-xl
">
  <!-- 유리 패널 내부 콘텐츠 -->
</div>

<!-- 방향 지정: bg-linear-to-{방향} -->
<div class="bg-linear-to-r from-indigo-500 to-purple-500">왼쪽→오른쪽</div>
<div class="bg-linear-to-br from-cyan-500 to-blue-500">왼쪽위→오른쪽아래</div>
<div class="bg-linear-to-t from-emerald-500 to-teal-300">아래→위</div>
 
<!-- 각도 지정 (Tailwind v4): bg-linear-{angle} -->
<div class="bg-linear-45 from-pink-500 to-rose-500">45도 방향</div>
<div class="bg-linear-135 from-violet-500 to-purple-500">135도 방향</div>

<!-- 기본: 시작점 → 끝점 -->
<div class="bg-linear-to-r from-cyan-500 to-blue-500">
  cyan에서 blue로
</div>
 
<!-- 경유점 추가: from → via → to -->
<div class="bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500">
  인디고 → 보라 → 분홍 (Instagram 스타일)
</div>
 
<!-- 정지점 위치 지정 -->
<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">
  <!-- from-10%: 시작점을 10% 위치에서 시작 -->
  <!-- via-30%: 경유점이 30% 위치 -->
  <!-- to-90%: 끝점을 90% 위치에서 종료 -->
  정교하게 조절된 그라디언트
</div>

<!-- 기본 방사형: 중앙에서 퍼져나가는 -->
<div class="bg-radial from-pink-400 to-fuchsia-700">
  <!-- 안쪽 pink → 바깥쪽 fuchsia -->
</div>
 
<!-- 시작점 커스터마이즈 -->
<div class="bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%">
  <!-- 75% 지점(아래쪽)에서 방사 시작 - 조명 효과처럼 보임 -->
</div>
 
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%">
  <!-- 왼쪽 위 25% 지점에서 방사 - 코너 조명 효과 -->
</div>

<!-- 원뿔형 그라디언트 -->
<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%">
  <!-- 반원만 채우는 파이 차트 효과 -->
</div>
 
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700">
  <!-- decreasing: 색상 보간 방향 역전 - 홀로그래픽 효과 -->
</div>

<!-- Tailwind v4: 그라디언트 보간 색공간 선택 가능 -->
<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">sRGB 보간</div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">oklch 보간 (더 생생한 색)</div>
<div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400">HSL 보간</div>
 
<!-- 💡 팁: 기본값은 oklab. oklch가 가장 지각적으로 균일한 색상 전환을 보여줌 -->

<!-- 🐣 영철: "그라디언트 텍스트를 span에 background 주면 되나요?" -->
<!-- 아니야. 이건 특별한 3단계 트릭이 있어. -->
 
<!-- Gradient Text 마법의 3가지 재료 -->
<h1 class="
  bg-linear-to-r from-violet-600 to-indigo-600   /* 1️⃣ gradient 배경 */
  bg-clip-text         /* 2️⃣ 배경을 텍스트 모양으로 잘라냄 */
  text-transparent     /* 3️⃣ 텍스트 색상을 투명하게 → 배경이 비침 */
">
  개발자 스터디 매칭 커뮤니티
</h1>

<!-- 실전 예시: 다양한 gradient text -->
<h1 class="bg-linear-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent text-5xl font-bold">
  스터디 매칭 플랫폼
</h1>
 
<!-- dark mode 대응 -->
<h2 class="bg-linear-to-r from-teal-400 to-cyan-300 dark:from-teal-300 dark:to-cyan-200 bg-clip-text text-transparent">
  영수네 커뮤니티
</h2>
 
<!-- 🚨 시니어 주의사항: print 모드에서는 텍스트가 안 보일 수 있음 -->
<!-- print:text-gray-900 처럼 인쇄 대응을 추가하는 것이 좋음 -->
<h1 class="bg-linear-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent print:text-gray-900">
  인쇄 대응된 그라디언트 텍스트
</h1>

<!-- mix-blend-multiply: 색상을 곱해서 어두워짐 (흰 배경 = 투명해짐) -->
<!-- 흰색 배경 위의 이미지에서 흰 영역을 날려버리는 효과 -->
<div class="relative bg-indigo-100">
  <img src="/logo-white-bg.png" class="mix-blend-multiply" />
  <!-- 로고의 흰 배경이 사라지고 로고만 보임 -->
</div>
 
<!-- mix-blend-screen: 색상을 스크린 처리해서 밝아짐 (검은 배경 = 투명해짐) -->
<div class="relative bg-gray-900">
  <img src="/light-flare.png" class="mix-blend-screen" />
  <!-- 빛 효과 이미지의 검은 배경을 날려버림 -->
</div>
 
<!-- mix-blend-overlay: 밝은 부분은 더 밝게, 어두운 부분은 더 어둡게 -->
<div class="relative">
  <img src="/photo.jpg" />
  <div class="absolute inset-0 bg-indigo-500 mix-blend-overlay opacity-40">
    <!-- 사진 위에 색감 오버레이 효과 -->
  </div>
</div>

// components/GlassNavbar.tsx
// 🦁 영호: "스크롤 내려도 배경이 예쁘게 보이는 네비바야, 영철 님"
 
export default function GlassNavbar() {
  return (
    // 전체 페이지 래퍼 - 배경 이미지가 뒤에 있어야 backdrop-blur 효과가 보임
    <div className="relative min-h-screen">
      {/* 1️⃣ 뒤에 있는 배경 */}
      <div className="absolute inset-0 bg-linear-to-br from-violet-900 via-indigo-900 to-purple-900" />
 
      {/* 배경 장식 요소들 (blur로 보케 효과) */}
      <div className="absolute top-20 left-10 size-72 bg-purple-500/30 rounded-full blur-3xl" />
      <div className="absolute top-40 right-20 size-56 bg-indigo-500/20 rounded-full blur-2xl" />
 
      {/* 2️⃣ Glassmorphism 네비게이션 */}
      <nav className="
        sticky top-0 z-50
        bg-white/10              /* 반투명 흰색 배경 - 핵심! */
        backdrop-blur-md         /* 뒤 배경 블러 */
        backdrop-saturate-150    /* 배경 채도 높여서 유리감 증가 */
        border-b border-white/20 /* 유리 테두리 */
        px-6 py-4
      ">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          {/* 로고 - gradient text */}
          <span className="
            text-xl font-bold
            bg-linear-to-r from-violet-300 to-indigo-300
            bg-clip-text text-transparent
          ">
            영수네 커뮤니티
          </span>
 
          {/* 메뉴 링크 */}
          <div className="flex gap-6 text-white/80">
            <a href="/studies" className="hover:text-white transition-colors">스터디 찾기</a>
            <a href="/create" className="hover:text-white transition-colors">스터디 만들기</a>
            <a href="/profile" className="hover:text-white transition-colors">프로필</a>
          </div>
 
          {/* CTA 버튼 - Glass 스타일 */}
          <button className="
            px-4 py-2 rounded-lg
            bg-white/20          /* 약간 더 진한 glass */
            backdrop-blur-sm
            border border-white/30
            text-white text-sm font-medium
            hover:bg-white/30
            transition-all duration-200
          ">
            시작하기
          </button>
        </div>
      </nav>
 
      {/* 3️⃣ Hero 섹션 - Gradient 배경 + Gradient Text */}
      <main className="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-4">
        <div className="
          bg-white/5           /* 매우 연한 glass 패널 */
          backdrop-blur-sm
          border border-white/10
          rounded-3xl
          px-12 py-16
          max-w-3xl
        ">
          {/* Gradient Text 히어로 타이틀 */}
          <h1 className="
            text-5xl md:text-7xl font-black
            bg-linear-to-r from-violet-300 via-pink-300 to-indigo-300
            bg-clip-text text-transparent
            mb-6 leading-tight
          ">
            개발자들의 스터디 매칭
          </h1>
 
          <p className="text-white/70 text-xl mb-10 leading-relaxed">
            영수네 커뮤니티에서 함께 성장할 스터디 파트너를 찾아보세요.
            React, TypeScript, 알고리즘 - 원하는 주제로 바로 시작!
          </p>
 
          <div className="flex gap-4 justify-center flex-wrap">
            {/* Primary 버튼 - solid gradient */}
            <button className="
              px-8 py-3.5 rounded-xl
              bg-linear-to-r from-violet-500 to-indigo-500
              text-white font-semibold text-lg
              hover:from-violet-400 hover:to-indigo-400
              transition-all duration-200
              shadow-lg shadow-indigo-500/25
              drop-shadow-lg
            ">
              스터디 찾기
            </button>
 
            {/* Secondary 버튼 - glass */}
            <button className="
              px-8 py-3.5 rounded-xl
              bg-white/10
              backdrop-blur-sm
              border border-white/30
              text-white font-semibold text-lg
              hover:bg-white/20
              transition-all duration-200
            ">
              스터디 만들기
            </button>
          </div>
        </div>
      </main>
    </div>
  );
}

// components/StudyCard.tsx
// 🐣 영철: "마감된 스터디 카드를 시각적으로 구분하고 싶어요"
// 🦁 영호: "grayscale + brightness 조합이면 돼요"
 
interface StudyCardProps {
  title: string;
  thumbnail: string;
  isClosed: boolean;
  memberCount: number;
}
 
export default function StudyCard({ title, thumbnail, isClosed, memberCount }: StudyCardProps) {
  return (
    <div className="group relative rounded-2xl overflow-hidden bg-white shadow-md hover:shadow-xl transition-all duration-300">
      {/* 썸네일 이미지 */}
      <div className="relative h-48">
        <img
          src={thumbnail}
          alt={title}
          className={`
            w-full h-full object-cover
            transition-all duration-500
            group-hover:scale-105   /* hover 시 이미지 확대 */
            ${isClosed ? 'grayscale brightness-75' : 'grayscale-0 brightness-100'}
          `}
        />
 
        {/* 마감 배지 - drop-shadow 활용 */}
        {isClosed && (
          <div className="
            absolute top-3 right-3
            bg-red-500/90 backdrop-blur-sm
            text-white text-xs font-bold
            px-2.5 py-1 rounded-full
            drop-shadow-md
          ">
            모집 마감
          </div>
        )}
 
        {/* 이미지 하단 그라디언트 오버레이 */}
        <div className="
          absolute inset-x-0 bottom-0 h-20
          bg-linear-to-t from-black/60 to-transparent
        " />
      </div>
 
      {/* 카드 내용 */}
      <div className="p-4">
        <h3 className="font-semibold text-gray-900">{title}</h3>
        <p className="text-sm text-gray-500 mt-1">멤버 {memberCount}명</p>
      </div>
    </div>
  );
}

<span class="bg-linear-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent">
  영수네 커뮤니티
</span>