🖱️ Tailwind 6장: 상태 기반 스타일링

<!-- 🐣 영철 1안: JS 로 클래스 토글해서 hover 구현 — 복잡하고 불필요 -->
<button id="btn">클릭</button>
<script>
  btn.addEventListener('mouseover', () => btn.classList.add('bg-blue-700'))
  btn.addEventListener('mouseout', () => btn.classList.remove('bg-blue-700'))
</script>
 
<!-- 🦁 영호 리팩토링: Tailwind variant 하나로 끝 -->
<button class="bg-blue-600 hover:bg-blue-700 transition-colors">클릭</button>

<!-- 카드 hover 시 그림자 강조 + 살짝 위로 이동 -->
<div class="shadow-md transition-all hover:-translate-y-1 hover:shadow-xl">카드</div>
 
<!-- 링크 hover 시 밑줄 (기본 밑줄 제거 후 hover 시만 표시) -->
<a class="no-underline hover:underline">링크</a>

<!-- ❌ 순진한 코드: outline 제거만 하고 대안 없음 → 접근성 위반 -->
<button class="focus:outline-none">버튼</button>
 
<!-- ✅ 올바른 코드: outline 제거 + ring 으로 대안 포커스 스타일 제공 -->
<input class="
  rounded-lg border border-gray-300 px-4 py-2
  focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20
" />
 
<!-- 💡 더 정교하게: focus-visible 로 키보드 포커스만 스타일링 -->
<!-- focus-visible: = 키보드 포커스일 때만 (마우스 클릭 시에는 적용 안 됨) -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
  버튼
</button>

<!-- 클릭 시 살짝 축소 + 색 진해지는 피지컬 느낌 -->
<button class="
  transform bg-blue-600 text-white px-6 py-3 rounded-xl
  transition-transform duration-75
  active:scale-95 active:bg-blue-800
">
  스터디 참여하기
</button>

<!-- ✅ disabled 속성 + Tailwind disabled: variant 조합 -->
<button class="
  bg-blue-600 text-white px-6 py-3 rounded-xl
  disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-400
  transition-colors
" disabled>
  마감된 스터디
</button>

// 🐣 영철 1안: 첫 번째 항목은 pt-0, 마지막은 border-b 없애야 해서 index 로 조건 처리
{studies.map((study, index) => (
  <li
    key={study.id}
    className={`py-3 border-b border-gray-200 ${index === 0 ? 'pt-0' : ''} ${index === studies.length - 1 ? 'border-b-0' : ''}`}
  >
    {study.title}
  </li>
))}

// 🦁 영호 리팩토링: 구조적 Variant 로 깔끔하게
{studies.map((study) => (
  <li
    key={study.id}
    className="border-b border-gray-200 py-3 first:pt-0 last:border-b-0"
  >
    {study.title}
  </li>
))}

<!-- 테이블 행 줄무늬: 홀수 행은 흰색, 짝수 행은 회색 -->
<tr class="odd:bg-white even:bg-gray-50">행</tr>
 
<!-- placeholder 색상 제어 -->
<input class="placeholder:text-gray-400 focus:placeholder:text-gray-300" />
 
<!-- 체크된 상태 -->
<input type="checkbox" class="checked:bg-blue-600 checked:border-blue-600" />

<!-- 부모에 group 붙이기 -->
<div class="group">
  <h3 class="text-gray-900 group-hover:text-blue-600">
    카드 제목 (부모 hover 시 파란색으로)
  </h3>
  <p class="text-gray-500 group-hover:text-gray-700">
    설명 (부모 hover 시 좀 더 진하게)
  </p>
  <button class="opacity-0 group-hover:opacity-100 transition-opacity">
    버튼 (부모 hover 시 나타남)
  </button>
</div>

// 🦁 영호: "카드 전체에 hover 를 걸고, 내부 요소들이 따로 반응하게 하려면
//           group 이 정답이에요. JS 없이 CSS 만으로!"
 
function StudyCard({ title, description, memberCount, status }: Props) {
  return (
    // group: 이 div 가 group 의 기준점
    // hover:-translate-y-1: hover 시 1px 위로 이동
    // hover:shadow-lg: hover 시 그림자 강조
    <div className="group relative rounded-xl border border-gray-200 bg-white p-5 shadow-md transition-all hover:-translate-y-1 hover:shadow-lg">
 
      {/* 상태 뱃지: 항상 오른쪽 상단에 */}
      <div className="absolute right-4 top-4">
        <StatusBadge status={status} />
      </div>
 
      {/* 아이콘: hover 시 파란색 배경으로 */}
      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-xl transition-colors group-hover:bg-blue-100">
        📚
      </div>
 
      {/* 제목: hover 시 파란색으로 */}
      <h3 className="mb-2 text-lg font-bold text-gray-900 transition-colors group-hover:text-blue-600">
        {title}
      </h3>
 
      {/* 설명: hover 시 약간 진하게 */}
      <p className="mb-4 line-clamp-2 text-sm text-gray-500 transition-colors group-hover:text-gray-700">
        {description}
      </p>
 
      {/* 하단 정보 */}
      <div className="flex items-center justify-between">
        <span className="text-xs text-gray-400">👥 {memberCount}명</span>
        {/* 버튼: 기본 숨김 → hover 시 나타남 */}
        <button className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white opacity-0 transition-opacity group-hover:opacity-100">
          자세히 보기 →
        </button>
      </div>
    </div>
  );
}

<!-- 중첩 group 에서 특정 group 만 반응하게 하기 -->
<div class="group/card">
  <div class="group/btn">
    <button class="group-hover/card:bg-blue-50 group-hover/btn:bg-blue-100">
      카드 hover 시 파란 배경, 버튼 자체 hover 시 더 진한 파란 배경
    </button>
  </div>
</div>

<!-- 입력 필드가 peer, 에러 메시지가 peer-invalid 에 반응 -->
<div>
  <input
    type="email"
    class="peer rounded-lg border border-gray-300 px-4 py-2
           invalid:border-red-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
    placeholder="이메일 입력"
    required
  />
  <!-- peer-invalid: input 이 invalid 상태일 때만 보임 -->
  <p class="mt-1 hidden text-sm text-red-500 peer-invalid:block">
    올바른 이메일 주소를 입력해주세요
  </p>
</div>

// 커스텀 체크박스 — peer 로 체크 상태를 라벨에 반영
function CheckboxItem({ id, label }: { id: string; label: string }) {
  return (
    <label
      htmlFor={id}
      className="flex cursor-pointer items-center gap-3 rounded-lg p-3 hover:bg-gray-50"
    >
      {/* peer: 이 체크박스의 상태를 형제들이 감지 */}
      <input
        id={id}
        type="checkbox"
        className="peer sr-only"  {/* sr-only: 시각적으로 숨기되 스크린 리더에는 보임 */}
      />
      {/* 커스텀 체크박스 UI */}
      <div className="
        flex h-5 w-5 items-center justify-center rounded border-2 border-gray-300
        transition-colors
        peer-checked:border-blue-600 peer-checked:bg-blue-600
      ">
        {/* 체크 표시: peer-checked 시 보임 */}
        <svg className="hidden h-3 w-3 text-white peer-checked:block" ...>✓</svg>
      </div>
      {/* 라벨 텍스트: peer-checked 시 색상 변경 */}
      <span className="text-sm text-gray-700 peer-checked:font-medium peer-checked:text-blue-700">
        {label}
      </span>
    </label>
  );
}

function EmailInput() {
  return (
    <div className="flex flex-col gap-1.5">
      <label htmlFor="email" className="text-sm font-medium text-gray-700">
        이메일
      </label>
      <input
        id="email"
        type="email"
        className="
          peer rounded-lg border border-gray-300 px-4 py-2.5 text-sm
          placeholder:text-gray-400
          focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20
          invalid:[&:not(:placeholder-shown)]:border-red-400
          invalid:[&:not(:placeholder-shown)]:ring-red-400/20
        "
        placeholder="you@example.com"
        required
      />
      {/* 에러 메시지: placeholder 가 안 보일 때(= 값이 있을 때) + invalid 상태일 때만 */}
      <p className="
        hidden text-xs text-red-500
        peer-invalid:[&:not(:placeholder-shown)~&]:block
      ">
        올바른 이메일 형식이 아닙니다
      </p>
    </div>
  );
}

type FilterButtonProps = {
  label: string;
  active?: boolean;
  onClick: () => void;
};
 
function FilterButton({ label, active, onClick }: FilterButtonProps) {
  return (
    <button
      onClick={onClick}
      className={`
        rounded-full px-4 py-2 text-sm font-medium transition-all
        ${active
          ? 'bg-blue-600 text-white shadow-md'
          : 'bg-white text-gray-600 border border-gray-200 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50'
        }
        focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
        active:scale-95
      `}
    >
      {label}
    </button>
  );
}

function SearchInput() {
  return (
    <div className="relative">
      {/* 검색 아이콘 */}
      <div className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
        🔍
      </div>
      <input
        type="search"
        placeholder="스터디 검색..."
        className="
          w-full rounded-xl border border-gray-200 bg-white
          py-3 pl-11 pr-4 text-sm text-gray-900
          placeholder:text-gray-400
          transition-all
          focus:border-blue-400 focus:bg-white focus:outline-none
          focus:ring-4 focus:ring-blue-500/10
          hover:border-gray-300
        "
      />
    </div>
  );
}

<!-- 다크 모드 + md 이상 + hover 시 -->
<div class="dark:md:hover:bg-gray-700">
 
<!-- 포커스 + disabled 가 아닐 때 -->
<button class="focus:not-disabled:ring-2">
 
<!-- 그룹 hover + md 이상 -->
<span class="md:group-hover:text-blue-600">

// 실전: 반응형 + 다크 모드 + hover 복합 버튼
<button className="
  w-full md:w-auto
  bg-blue-600 text-white
  px-6 py-3 rounded-xl
  font-semibold text-sm
  transition-all
  hover:bg-blue-700 hover:shadow-lg
  active:scale-95
  disabled:cursor-not-allowed disabled:opacity-50
  focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
  dark:bg-blue-500 dark:hover:bg-blue-400
">
  스터디 참여하기
</button>