배경
현재 참여자 후기는 두 곳에서 정적 그리드로 표시됩니다.
| 위치 |
파일 |
스타일 |
| 프로그램 허브 > 참여자 후기 |
src/pages/ProgramsPage.tsx:73-106 |
.review-grid (site.css:1165) |
| 프로그램 상세 > 후기 |
src/pages/ProgramDetailPage.tsx:87-124 |
.testimonial-grid (site.css:1340) |
후기가 늘어날수록 그리드가 세로로 길어져 아래 섹션이 밀리고, 화면에 한 번에 보이는 후기 수를 조절하기 어렵습니다.
daleui.com의 후기 섹션이 캐러셀 형태로 되어 있어, 이를 벤치마킹해 개선하려 합니다.
작업
1. daleui.com 후기 섹션 분석
실제 동작을 먼저 확인해 주세요. 정리할 항목은 다음과 같습니다.
- 자동 재생 여부와 주기
- 네비게이션 방식 (화살표 / 도트 / 스와이프 / 스크롤 스냅)
- 뷰포트별로 한 번에 보이는 카드 수
- 카드에 담기는 정보 (인용문, 작성자, 아바타, 소속 등)
- 무한 순환 여부
2. 구현
daleui는 현재 Carousel 컴포넌트를 export하지 않으므로 이 저장소에서 자체 구현합니다. DaleStudy/daleui.com 저장소가 공개되어 있으니 실제 구현을 참고하면 됩니다.
이 이슈의 범위는 dalestudy.com까지입니다. daleui 디자인 시스템에 Carousel 컴포넌트를 추가하는 것은 여기서 다루지 않습니다.
반드시 지켜야 할 제약
SEO — 이 저장소의 필수 원칙입니다.
모든 후기 텍스트가 prerender된 정적 HTML에 포함되어야 합니다. 캐러셀이 JS로만 슬라이드를 렌더링하면 검색엔진과 llms.txt 소비자가 후기를 읽지 못합니다. 현재 화면에 보이지 않는 슬라이드도 DOM에는 존재해야 하며, display: none 대신 스크롤 컨테이너나 visibility 기반 처리를 권합니다.
접근성
- 키보드로 이전/다음 이동이 가능해야 합니다
- 스크린리더가 현재 위치를 알 수 있어야 합니다 (
aria-roledescription="carousel", 슬라이드 라벨 등)
- 자동 재생을 넣는다면 일시정지 수단이 필요하고,
prefers-reduced-motion에서는 꺼져야 합니다. site.css:1511에 이미 해당 미디어 쿼리 블록이 있으니 거기에 추가하면 됩니다
- 자동 재생은 접근성 부담이 큰 편이라, 넣지 않는 선택도 충분히 합리적입니다
디자인 토큰
색상·radius·서체는 daleui 토큰의 CSS 변수만 사용합니다 (AGENTS.md 참고).
로케일
후기 데이터는 src/i18n/ko.ts와 en.ts에 쌍으로 존재합니다. 카피를 건드린다면 두 언어를 함께 수정해야 합니다.
완료 기준
참고
관련 반응형 이슈로 #5(카드 그리드 마지막 줄 비대칭)가 있습니다. 후기 섹션을 캐러셀로 바꾸면 그 섹션의 그리드 문제는 자연스럽게 사라지지만, #5가 다루는 "주요 프로그램"과 "우리가 만든 오픈소스"는 별개입니다.
배경
현재 참여자 후기는 두 곳에서 정적 그리드로 표시됩니다.
src/pages/ProgramsPage.tsx:73-106.review-grid(site.css:1165)src/pages/ProgramDetailPage.tsx:87-124.testimonial-grid(site.css:1340)후기가 늘어날수록 그리드가 세로로 길어져 아래 섹션이 밀리고, 화면에 한 번에 보이는 후기 수를 조절하기 어렵습니다.
daleui.com의 후기 섹션이 캐러셀 형태로 되어 있어, 이를 벤치마킹해 개선하려 합니다.
작업
1. daleui.com 후기 섹션 분석
실제 동작을 먼저 확인해 주세요. 정리할 항목은 다음과 같습니다.
2. 구현
daleui는 현재 Carousel 컴포넌트를 export하지 않으므로 이 저장소에서 자체 구현합니다.
DaleStudy/daleui.com저장소가 공개되어 있으니 실제 구현을 참고하면 됩니다.이 이슈의 범위는 dalestudy.com까지입니다. daleui 디자인 시스템에 Carousel 컴포넌트를 추가하는 것은 여기서 다루지 않습니다.
반드시 지켜야 할 제약
SEO — 이 저장소의 필수 원칙입니다.
모든 후기 텍스트가 prerender된 정적 HTML에 포함되어야 합니다. 캐러셀이 JS로만 슬라이드를 렌더링하면 검색엔진과
llms.txt소비자가 후기를 읽지 못합니다. 현재 화면에 보이지 않는 슬라이드도 DOM에는 존재해야 하며,display: none대신 스크롤 컨테이너나visibility기반 처리를 권합니다.접근성
aria-roledescription="carousel", 슬라이드 라벨 등)prefers-reduced-motion에서는 꺼져야 합니다.site.css:1511에 이미 해당 미디어 쿼리 블록이 있으니 거기에 추가하면 됩니다디자인 토큰
색상·radius·서체는 daleui 토큰의 CSS 변수만 사용합니다 (
AGENTS.md참고).로케일
후기 데이터는
src/i18n/ko.ts와en.ts에 쌍으로 존재합니다. 카피를 건드린다면 두 언어를 함께 수정해야 합니다.완료 기준
ProgramsPage,ProgramDetailPage)의 후기 섹션이 개선됨prefers-reduced-motion동작 확인참고
관련 반응형 이슈로 #5(카드 그리드 마지막 줄 비대칭)가 있습니다. 후기 섹션을 캐러셀로 바꾸면 그 섹션의 그리드 문제는 자연스럽게 사라지지만, #5가 다루는 "주요 프로그램"과 "우리가 만든 오픈소스"는 별개입니다.