JS 없이도 UI가 반응한다: scroll-state 쿼리와 타입 있는 attr()

import styles from "./page.module.css";

export default function Page() {
  return (
    <main className={styles.page}>
      <section className={styles.theme} data-bg="white" data-fg="deeppink">
        <h1 className={styles.title}>Scroll Hint + Typed attr()</h1>
        <p className={styles.desc}>
          스크롤 영역은 위/아래 방향에 따라 그림자를 표시하고,
          테마/그리드 값은 HTML 속성으로 전달합니다.
        </p>
      </section>

      <section className={styles.grid} data-columns="3">
        {Array.from({ length: 9 }).map((_, i) => (
          <article key={i} className={styles.card}>
            Card {i + 1}
          </article>
        ))}
      </section>

      <section className={styles.scrollArea} aria-label="Scrollable content">
        <div className={styles.shadowTop} aria-hidden="true" />
        <div className={styles.shadowBottom} aria-hidden="true" />

        <div className={styles.scrollContent}>
          {Array.from({ length: 40 }).map((_, i) => (
            <p key={i} className={styles.line}>
              Line {i + 1} — 스크롤하면서 위/아래 그림자 변화를 확인합니다.
            </p>
          ))}
        </div>
      </section>
    </main>
  );
}

.page {
  padding: 24px;
  display: grid;
  gap: 20px;
}

/* 1) Typed attr()로 테마 연결 */
.theme {
  padding: 16px;
  border-radius: 12px;

  /* 기본값(호환성/안전성) */
  background: black;
  color: white;
}

/* typed attr() 지원 환경에서만 업그레이드 */
@supports (color: attr(data-fg type(<color>), white)) {
  .theme {
    background: attr(data-bg type(<color>), black);
    color: attr(data-fg type(<color>), white);
  }
}

.title {
  margin: 0 0 6px;
}
.desc {
  margin: 0;
}

/* 2) Typed attr()로 그리드 컬럼 수 연결 */
.grid {
  display: grid;
  gap: 12px;

  /* 기본값 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@supports (width: attr(data-columns type(<integer>), 3)) {
  .grid {
    --_cols: attr(data-columns type(<integer>), 3);
    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  }
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 14px;
}

/* 3) scroll-state 쿼리로 스크롤 방향 힌트(그림자) */
.scrollArea {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);

  height: 220px;
  overflow: auto;
  position: relative;

  /* 컨테이너 쿼리 설정 */
  container-name: scroller;
  container-type: scroll-state;
}

/* 그림자 레이어: 레이아웃을 밀지 않도록 음수 마진으로 겹치기 */
.shadowTop,
.shadowBottom {
  pointer-events: none;
  position: sticky;
  left: 0;
  right: 0;
  height: 14px;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 1;
}

.shadowTop {
  top: 0;
  margin-bottom: -14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent);
}

.shadowBottom {
  bottom: 0;
  margin-top: -14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent);
}

/* scroll-state 지원 환경에서만 방향별로 그림자 토글 */
@supports (container-type: scroll-state) {
  @container scroller scroll-state(scrollable: top) {
    .shadowTop {
      opacity: 1;
    }
  }

  @container scroller scroll-state(scrollable: bottom) {
    .shadowBottom {
      opacity: 1;
    }
  }
}

.scrollContent {
  padding: 12px 14px;
}

.line {
  margin: 0 0 10px;
}

[scroll-snap] {
  scroll-snap-align: attr(scroll-snap type(start | center | end), start);
}