[FEAT] [HIGH-56] QA 사항 반영

[neungdong]

User description

✨ PR 세부 내용

쇼츠 pc에서 스크롤바 제거
이미지 스크롤 시 불러오는 타이밍 앞당겨서 스켈레톤이 최대한 덜 보이도록 수정

☑️ 체크리스트

🛠 기본 검사 항목

• ESLint 검사 완료
• Prettier 적용
• 함수, 변수, 파일 네이밍 검토
• 코드 작성 순서 (import, 내부 코드) 점검
• 폴더 구조에 맞는 파일 분리 여부 확인
• 코드 작성 스타일 점검

✍️ 작성자 선택 항목

📸 스크린샷

✅ 리뷰 요구사항

---

PR Type

Enhancement

---

Description

• Hide default scrollbar in Shorts layout

• Update className in ShortsLayout component

---

File Walkthrough

	Relevant files
Enhancement	ShortsLayout.tsx Add no-scrollbar class to layout                                                  src/components/shorts/ShortsLayout.tsx Added no-scrollbar CSS utility class Updated className on element Preserved scroll snapping and overscroll behavior +1/-1

---

[netlify]

✅ Deploy Preview for lead-me ready!

Name	Link
🔨 Latest commit	cac471b
🔍 Latest deploy log	https://app.netlify.com/projects/lead-me/deploys/68915528549d8f0007d6eaef
😎 Deploy Preview	https://deploy-preview-56--lead-me.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review CSS Availability Ensure the no-scrollbar utility class is defined and configured in your CSS/Tailwind setup and works across target browsers. className="relative w-full h-screen-mobile overflow-y-scroll no-scrollbar" Scroll Behavior Verify that using overflow-y-scroll with no-scrollbar doesn’t negatively affect scroll performance on mobile devices; consider overflow-y-auto if appropriate. className="relative w-full h-screen-mobile overflow-y-scroll no-scrollbar"

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Enable keyboard focus for scrolling Add a tabIndex={0} to the scrollable so keyboard users can focus and scroll the container even when the visible scrollbar is hidden. This ensures accessibility for keyboard navigation. src/components/shorts/ShortsLayout.tsx [48-54] <section ref={rootRef} + tabIndex={0} className="relative w-full h-screen-mobile overflow-y-scroll no-scrollbar" style={{ ... }} > Suggestion importance[1-10]: 7 __ Why: Adding tabIndex={0} makes the scrollable <section> keyboard-focusable and scrollable when its scrollbar is hidden, boosting accessibility in a straightforward way.	Medium
	Hide scrollbars in all browsers To ensure scrollbars are hidden across browsers, add vendor-specific CSS properties like scrollbarWidth: "none" and msOverflowStyle: "none" to the inline style object. This prevents visible scrollbars in Firefox and IE/Edge. src/components/shorts/ShortsLayout.tsx [48-54] <section ref={rootRef} className="relative w-full h-screen-mobile overflow-y-scroll no-scrollbar" style={{ scrollSnapType: isLoading ? "none" : "y mandatory", overscrollBehavior: "contain", + scrollbarWidth: "none", + msOverflowStyle: "none", }} > Suggestion importance[1-10]: 6 __ Why: Adding scrollbarWidth and msOverflowStyle ensures the hidden scrollbar behavior works in Firefox and IE/Edge, improving cross-browser consistency without major impact.	Low