Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix-fe: 지원서 관리 페이지 스크롤 버그 수정 #830

Merged
merged 3 commits into from
Oct 17, 2024
Merged

fix-fe: 지원서 관리 페이지 스크롤 버그 수정 #830

merged 3 commits into from
Oct 17, 2024
+3 −0

Conversation

github-actions[bot]
Copy link
Contributor

Original issue description

목적

지원서 관리 페이지 스크롤 버그 수정

작업 세부사항

  • [ ]

참고 사항

스크린샷 2024-10-16 오후 4 27 25

불필요한 스크롤이 생성되어 있습니다.

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

FIX_APPLICANT_SCROLL

closes #829

@github-actions github-actions bot added fix 버그 수정 frontend 프론트엔드 labels Oct 16, 2024
@github-actions GitHub Actions
Copy link
Contributor Author

1729120136.083609

@github-actions GitHub Actions
Copy link
Contributor Author

1729120136.982859

@seongjinme
Copy link
Contributor

seongjinme commented Oct 17, 2024 •
edited
Loading

<html> 자체에 overflow: hidden을 적용하면 랜딩페이지도 스크롤 못하는 문제가 생겨요. 그래서 다른 방법을 찾아보았습니다.

아래는 제가 크롬 개발자도구로 살펴본 문제 요소(ApplyManagement 컴포넌트)의 렌더링 화면입니다. 초기에 지원서 관리 탭을 로드했을 때 선택 질문지 영역의 높이만큼 컴포넌트 아래 영역으로 공백이 늘어나는 것이 보여요. 이 문제는 Firefox를 제외한 나머지 모던 브라우저(Chrome, Safari, Edge)에서 모두 발생합니다.

image

원인은 불명확합니다. 아마도 브라우저 단에서의 렌더링 원리상 발생하는 문제로 추정되어요. 이에 대한 해결책으로, (장시간의 CSS 삽질 끝에) ApplyManagement의 S.Wrapper 컴포넌트에 적용 가능한 아래의 두 방법을 찾았습니다.

  1. position: relative로 해당 래퍼의 포지션을 고정하여 overflow를 방지
  2. contain: strict로 해당 래퍼가 포함한 콘텐츠를 해당 요소 바깥의 DOM 트리와 스타일 적으로 분리

문맥상으로는 2번이 적절한 방안입니다. 그러나 contain 속성은 2022년 이후의 모던 브라우저에서 지원된다는 문제가 있네요(전체 중 약 90%). 따라서 1번 방안을 우선 적용하는 것을 권해드립니다. ApplyManagement 컴포넌트의 Wrapper 요소 스타일 코드에 position: relative를 추가해주시면 됩니다. 🙏

@lurgi lurgi marked this pull request as ready for review October 17, 2024 02:08
@github-actions GitHub Actions
Copy link
Contributor Author

1729130901.593559

seongjinme
seongjinme approved these changes Oct 17, 2024
View reviewed changes
Copy link
Contributor

@seongjinme seongjinme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

감사합니다 👍

llqqssttyy
llqqssttyy approved these changes Oct 17, 2024
View reviewed changes
Copy link
Contributor

@llqqssttyy llqqssttyy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이게 대체 왜 되는 거죠?!
관련해서 구글링해봐도 자식 요소가 absolute일 때 부모를 relative로 둬야 overflow: hidden이 제대로 먹힌다는 말만 나오고, 저희 프로젝트에 맞는 상황은 안 나오네요..👀

@lurgi lurgi merged commit d4fdcc0 into fe/develop Oct 17, 2024
26 of 28 checks passed
@lurgi lurgi deleted the fe-829-X_APPLICANT_SCROLL branch October 17, 2024 05:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@llqqssttyy llqqssttyy llqqssttyy approved these changes

@seongjinme seongjinme seongjinme approved these changes

Assignees

@lurgi lurgi

Labels
fix 버그 수정 frontend 프론트엔드
Projects
2024-cruru
Status: 완료
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@seongjinme @llqqssttyy @lurgi