fix: 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림(화면 안정성 개선)

[leeleeleeleejun]

#️⃣연관된 이슈

• [BUG] 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림 (화면 안정성 저하) #86

📝작업 내용

1. 배너 초기 렌더링 시 레이아웃 흔들림(CLS) 해결

문제 상황:
keen-slider 라이브러리는 자바스크립트가 실행되고 초기화(init)된 후에야 슬라이드 위치를 계산합니다. 이로 인해 JS 로딩 전(Hydration 이전)에는 contents들이 세로로 나열되었다가 제대로 확장 되며 레이아웃이 덜컥거리는 현상이 발생했습니다.
해결 방법:
JS가 로드되기 전에는 style를 활용하여 첫 번째 슬라이드만 노출하고, 나머지 슬라이드는 숨김(hidden) 처리하여 레이아웃을 고정했습니다.

스크린샷 (선택)

적용 전

적용 후

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

버그 수정

• 배너 슬라이더가 단일 항목일 때 루핑되지 않도록 수정
• 컴포넌트 로드 완료 전까지 첫 번째 슬라이드만 표시되도록 개선

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

배너 컴포넌트의 슬라이더 기능을 안정화했습니다. 콘텐츠가 여러 개일 때만 루핑이 작동하도록 조건을 추가하고, 로딩 완료 전까지 첫 번째 슬라이드를 제외한 모든 슬라이드를 숨기는 기능을 구현했습니다.

Changes

Cohort / File(s)	변경 요약
배너 슬라이더 동작 개선 packages/ui/src/components/Banner/Banner.tsx	슬라이더 루핑 조건을 loop: true에서 loop: contents.length > 1로 변경하여 콘텐츠가 여러 개일 때만 루핑 활성화. 로딩 완료 전까지 첫 번째 슬라이드를 제외한 다른 슬라이드에 'hidden' 클래스를 조건부로 추가하여 초기 렌더링 시 시각적 깜빡임 방지

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Feat/#73 키워드 기반 등록된 맛집 검색 API 연결 및 useSearch 커스텀 훅 구현 #75: 동일한 Banner.tsx 컴포넌트를 수정하며 슬라이더 동작 및 슬라이드 가시성 제어를 변경하는 관련 PR

Poem

🐰 한 장의 슬라이드만 보여주고,
여럿 있을 때만 빙글 도네,
깜빡임 없이 부드럽게 시작해,
배너 놀이터가 더욱 멋져졌네! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 배너 컴포넌트의 초기 렌더링 시 레이아웃 흔들림 문제 해결을 명확하게 설명하며, 변경사항의 핵심 의도와 일치합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#86

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9bfa3fd and abdad1c.

📒 Files selected for processing (1)

• packages/ui/src/components/Banner/Banner.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

packages/ui/src/components/Banner/Banner.tsx (1)

packages/ui/src/utils/cn.ts (1)

• cn (19-21)

🔇 Additional comments (2)

packages/ui/src/components/Banner/Banner.tsx (2)

46-46: 단일 콘텐츠일 때 루핑 방지 로직이 적절합니다.

콘텐츠가 하나만 있을 때 루핑을 비활성화하는 것은 올바른 개선입니다.

---

104-110: CLS 개선을 위한 조건부 숨김 처리가 적절합니다.

초기 로딩 시 첫 번째 슬라이드만 표시하고 나머지를 숨기는 방식으로 레이아웃 흔들림을 효과적으로 방지합니다.

단, keen-slider 라이브러리가 초기에 숨겨진(display: none) 슬라이드를 올바르게 처리하는지 확인이 필요합니다. 일부 슬라이더 라이브러리는 초기화 시 슬라이드의 너비/높이를 계산하므로, 숨겨진 요소의 경우 계산이 잘못될 수 있습니다.

다음 사항을 확인해 주세요:

1. 실제 브라우저에서 슬라이더가 정상적으로 초기화되고 모든 슬라이드로 이동 가능한지 테스트
2. 개발자 도구에서 created() 콜백 실행 후 모든 슬라이드의 너비/높이가 올바르게 계산되는지 확인

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}