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.

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

[refactor] 헤더바 개선 #53

Merged
merged 5 commits into from
Jul 31, 2024
Merged

[refactor] 헤더바 개선 #53

merged 5 commits into from
Jul 31, 2024

Conversation

darkdulgi
Copy link
Collaborator

@darkdulgi darkdulgi commented Jul 31, 2024

#️⃣ 연관 이슈

📝 작업 내용

스크롤에 따라 움직이는 바를 화면 전체 너비가 아닌 부모 래퍼 엘리먼트를 기준으로 계산합니다. 따라서 innerWidth는 더 이상 사용하지 않고, 위치를 동적으로 계산하지도 않으므로 좌표를 저장하는 상태인 positionList도 더 이상 사용하지 않습니다.
스크롤 아이템 너비를 ITEM_WIDTH, 아이템 사이 간격을 ITEM_GAP이라는 상수로 정의했습니다. 현재 각각 96, 32 픽셀로 정의되어 있습니다.
초기 스크롤 상태를 null이 아닌 -1로 정의했습니다.

@darkdulgi darkdulgi added the refactor 코드 리팩토링 label Jul 31, 2024
@darkdulgi darkdulgi changed the title [refactor] 해더바 개선 [refactor] 헤더바 개선 Jul 31, 2024
Comment on lines +5 to +6
const ITEM_WIDTH = 96; // w-24
const ITEM_GAP = 32; // gap-8
Copy link
Collaborator

Choose a reason for hiding this comment

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

매직넘버를 상수로 관리하는 거 좋습니다:)

Comment on lines 37 to 42
let newPositionList = [];
for (let i = 0; i < scrollSectionList.length; i++) {
newPositionList[i] = ITEM_WIDTH / 4 + i * (ITEM_WIDTH + ITEM_GAP);
}

const position = Math.floor(newPositionList[scrollState]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

newPositionList[scrollState]만 실제로 사용하고 있는데, 그렇다면 굳이 배열까지 필요하지 않아도 되지 않을까요?

Comment on lines +38 to +40
const position = Math.floor(
ITEM_WIDTH / 4 + scrollState * (ITEM_WIDTH + ITEM_GAP),
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

편-안합니다

@darkdulgi darkdulgi merged commit 88fedb9 into dev Jul 31, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
refactor 코드 리팩토링
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants