[fix] 모바일 환경에서 배너 슬라이드 초기 렌더링 문제 해결 by seongwon030 · Pull Request #381 · Moadong/moadong

seongwon030 · 2025-05-07T02:38:07Z

#️⃣연관된 이슈

ex) #380

📝작업 내용

문제 상황

모바일 버전에서 최초 렌더링 시 배너의 10분의 1정도가 왼쪽으로 넘어가 있는 현상이 있었습니다.

원인

이는 모바일에서 slideWidth 계산이 늦게 되어 발생하는 문제였습니다.
그래서 리사이즈 시 상태 초기화 로직을 개선해봤습니다.

문제 해결

isReady 상태 추가로 초기화 완료 여부 추적
slideWidth가 계산되기 전에는 transform 적용 방지
초기화 완료 후에만 슬라이드 애니메이션 시작
리사이즈 시 상태 초기화 로직 개선

중점적으로 리뷰받고 싶은 부분(선택)

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

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

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

버그 수정
- 배너 컴포넌트가 완전히 준비되기 전에는 슬라이드 애니메이션과 전환이 발생하지 않도록 개선하여 초기 렌더링 및 창 크기 변경 시 발생할 수 있는 깜빡임이나 오류를 방지했습니다.
스타일
- 슬라이드 전환 효과가 더욱 자연스럽게 동작하도록 애니메이션 타이밍이 개선되었습니다.

- 모바일 환경에서 배너가 왼쪽으로 치우치는 문제 수정 - 초기 렌더링 시 slideWidth 계산 전 transform 적용 방지 - isReady 상태 추가로 초기화 완료 후 슬라이드 시작 - 리사이즈 시 상태 초기화 로직 개선

coderabbitai · 2025-05-07T02:38:14Z

Walkthrough

배너(Banner) 컴포넌트의 애니메이션 및 슬라이드 전환 로직에 isReady 상태가 도입되어, 컴포넌트가 완전히 준비된 후에만 애니메이션과 전환이 시작되도록 변경되었습니다. 초기 isAnimating 값이 false로 수정되었고, 리사이즈 시 상태가 재설정됩니다.

Changes

파일/경로	변경 요약
frontend/src/pages/MainPage/components/Banner/Banner.tsx	`isReady` 상태 도입, 초기 `isAnimating` false로 변경, 슬라이드 전환 및 애니메이션 시작 조건에 `isReady` 추가, 리사이즈 시 상태 재설정 등 초기 렌더링과 슬라이드 제어 로직 개선

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BannerComponent

    User->>BannerComponent: 페이지 진입/렌더링
    BannerComponent->>BannerComponent: slideWidth 측정
    BannerComponent->>BannerComponent: isReady = true, isAnimating = true (slideWidth > 0)
    User->>BannerComponent: 슬라이드 이동 요청 (버튼/자동)
    BannerComponent->>BannerComponent: isReady 및 isAnimating 확인 후 슬라이드 전환
    User->>BannerComponent: 창 크기 변경
    BannerComponent->>BannerComponent: isReady, isAnimating = false로 재설정

Assessment against linked issues

Objective	Addressed	Explanation
isReady 상태 추가해 초기 렌더링 여부 감지 (FE-106)	✅
isAnimating 초기상태 false로 변경 (FE-106)	✅

Possibly related issues

[fix] FE-106 모바일 환경에서 배너 슬라이더 초기 렌더링 문제 해결 #380: isReady 상태 추가 및 isAnimating 초기값 변경 등 배너 슬라이더 초기 렌더링 제어 로직과 동일한 목적을 가지고 있으므로 연관성이 높음.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 531be86 and 767f743.

📒 Files selected for processing (1)

frontend/src/pages/MainPage/components/Banner/Banner.tsx (3 hunks)

🔇 Additional comments (8)

frontend/src/pages/MainPage/components/Banner/Banner.tsx (8)

20-22: 상태 초기화 방식이 개선되었습니다.

초기에 isAnimating을 false로 설정하고 새로운 isReady 상태를 추가한 변경은 적절합니다. 이를 통해 컴포넌트가 완전히 준비된 후에만 애니메이션이 시작되도록 제어할 수 있습니다.

29-37: 슬라이드 너비 계산 및 준비 상태 설정 로직이 개선되었습니다.

슬라이드 너비가 올바르게 계산된 후에만 transform 스타일을 적용하고 준비 상태를 설정하는 방식은 모바일 환경에서 발생하던 초기 렌더링 문제를 효과적으로 해결합니다. 너비 값이 유효한지 확인하는 조건 검사도 적절합니다.

39-39: 의존성 배열에 isReady 추가가 적절합니다.

updateSlideWidth 함수의 의존성 배열에 isReady를 추가한 것은 상태 변경에 따라 함수가 올바르게 재생성되도록 하여 적절합니다.

45-46: 리사이즈 시 상태 초기화 로직이 개선되었습니다.

창 크기 조정 시 isReady와 isAnimating 상태를 초기화하는 것은 화면 크기 변경 후 슬라이드가 올바르게 재계산되도록 하여 적절합니다.

57-57: 슬라이드 너비가 유효하지 않을 때 조기 반환 로직이 추가되었습니다.

slideWidth가 0인 경우 렌더링 로직을 조기에 종료하는 방식은 불필요한 계산과 잠재적인 렌더링 오류를 방지하는 데 효과적입니다.

90-90: 슬라이드 이동 함수에 준비 상태 확인 로직이 추가되었습니다.

moveToNextSlide 함수에 isReady 상태 검사를 추가한 것은 컴포넌트가 완전히 준비되지 않은 상태에서 슬라이드 이동을 방지하여 적절합니다. 의존성 배열에도 isReady를 올바르게 추가했습니다.

Also applies to: 94-94

97-97: 이전 슬라이드 이동 함수에도 준비 상태 확인 로직이 일관되게 적용되었습니다.

moveToPrevSlide 함수에도 동일하게 isReady 상태 검사를 추가하고 의존성 배열을 업데이트한 것은 일관성을 유지하며 적절합니다.

Also applies to: 101-101

104-105: 자동 슬라이드 타이머에 준비 상태 확인 로직이 추가되었습니다.

자동 슬라이드 타이머 효과에서 slideWidth와 isReady 상태를 확인하는 조건을 추가하고 의존성 배열에 isReady를 포함시킨 것은 컴포넌트가 준비되지 않은 상태에서 자동 슬라이드가 시작되는 것을 방지하여 적절합니다.

Also applies to: 111-111

✨ Finishing Touches

📝 Generate Docstrings

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

netlify · 2025-05-07T02:38:21Z

✅ Deploy Preview for moadong ready!

Name	Link
🔨 Latest commit	`767f743`
🔍 Latest deploy log	https://app.netlify.com/sites/moadong/deploys/681ac791f1dbae0008b135dd
😎 Deploy Preview	https://deploy-preview-381--moadong.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 44 Accessibility: 87 Best Practices: 92 SEO: 92 PWA: - View the detailed breakdown and full score reports

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

oesnuj

PR에 문제 상황, 원인, 해결로 나눈거 좋네요 ㅎㅎ
isReady를 활용한 초기 상태 제어한거 확인 했습니다~

seongwon030 requested a review from oesnuj May 7, 2025 02:38

seongwon030 self-assigned this May 7, 2025

seongwon030 added 💻 FE Frontend 🛠Fix 기능이 의도한 대로 동작하지 않는 버그를 수정 labels May 7, 2025

seongwon030 linked an issue May 7, 2025 that may be closed by this pull request

[fix] FE-106 모바일 환경에서 배너 슬라이더 초기 렌더링 문제 해결 #380

Closed

2 tasks

oesnuj approved these changes May 9, 2025

View reviewed changes

seongwon030 merged commit eefb86c into develop-fe May 12, 2025
5 checks passed

seongwon030 deleted the fix/#380-mobile-banner-initial-render-FE-106 branch May 12, 2025 02:10

seongwon030 changed the title ~~[fix] 모바일 환경에서 배너 슬라이더 초기 렌더링 문제 해결~~ [fix] 모바일 환경에서 배너 슬라이드 초기 렌더링 문제 해결 May 13, 2025

coderabbitai bot mentioned this pull request May 14, 2025

[release] v1.0.3 #405

Merged

coderabbitai bot mentioned this pull request Sep 26, 2025

[feature] 동아리별 동적 og image를 생성한다 #758

Closed

coderabbitai bot mentioned this pull request Nov 8, 2025

[feature] 메인 배너 클릭, 페이지네이션 추가 및 Swiper 마이그레이션 #788

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] 모바일 환경에서 배너 슬라이드 초기 렌더링 문제 해결#381

[fix] 모바일 환경에서 배너 슬라이드 초기 렌더링 문제 해결#381
seongwon030 merged 1 commit intodevelop-fefrom
fix/#380-mobile-banner-initial-render-FE-106

seongwon030 commented May 7, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented May 7, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

netlify bot commented May 7, 2025 •

edited

Loading

Uh oh!

oesnuj left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

seongwon030 commented May 7, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣연관된 이슈

📝작업 내용

문제 상황

원인

문제 해결

중점적으로 리뷰받고 싶은 부분(선택)

논의하고 싶은 부분(선택)

🫡 참고사항

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Assessment against linked issues

Possibly related issues

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

netlify bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for moadong ready!

Uh oh!

oesnuj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

seongwon030 commented May 7, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented May 7, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

netlify bot commented May 7, 2025 •

edited

Loading