[FE] 랜딩 페이지를 클릭으로 섹션을 이동할 수 있게 리팩토링한다. #773
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
healim01
reviewed
Oct 9, 2024
| @@ -104,7 +104,7 @@ const S = { | |||
| max-width: 60rem; | |||
| justify-content: flex-end; | |||
|
|
|||
| @media (min-width: ${theme.viewport.MOBILE}rem) { | |||
| @media (min-width: ${theme.viewport.MOBILE}px) { | |||
There was a problem hiding this comment.
현재 랜딩 페이지의 미디어 쿼리는 디바이스의 px 단위로 분기 처리를 해놓은 것이기 때문에, 폰트 크기를 기준으로 하는 rem 의 사용은 적절하지 않다고 생각했어요. 더불어 미디어 쿼리의 경우 안정적인 px 단위로 처리해야 브라우저도 미디어 쿼리를 더 잘 인식한다고 하네요!
skiende74
reviewed
Oct 10, 2024
Comment on lines
-7
to
+8
| <S.Container> | ||
| <S.TextBox> | ||
| <S.RelativeBox> | ||
| <S.Text> | ||
| <S.Bold>방끗</S.Bold>과 함께 당신에게 <br /> | ||
| <S.Highlight>딱 맞는 집을 찾는 여정</S.Highlight>을 <br /> | ||
| <CS.Container> |
There was a problem hiding this comment.
현재 랜딩 페이지는 5개의 섹션 컴포넌트로 나누어져 있고, 공통 css 를 style.ts 에 정의해서 끌어다 쓰고 있습니다. 이때 이 전역 스타일과 섹션에서 쓰는 지역 스타일의 객체명이 충돌하는 문제가 생기는데, 이를 위해 style.ts 에서 정의한 전역 스타일은 CS로 지역 스타일은 컨벤션인 S 를 써서 유지하는 방법을 선택했습니다!
There was a problem hiding this comment.
그리고 섹션밑에 arrow 추가하는 건 너무 좋은 아이디어 같아요!!😁 추가한 거 반영했어요~
|
확인했습습니당~ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
❗ Issue
✨ 구현한 기능
회의 내용대로 사용자가 콘텐츠에 더 집중할 수 있도록 랜딩 페이지를 섹션 단위로 리팩토링하였습니다. 기존에는 섹션마다 height 가 다르고 스크롤로 콘텐츠를 보는 형식이었지만, 현재는 섹션을 클릭하면 다음 섹션 / 이전 섹션으로 이동시키는 기능을 추가했습니다.
useMoveSection이라는 훅을 만들어 섹션의 위 / 아래를 클릭하면 전 / 다음의 섹션으로 이동시키도록 만들었습니다.2024-10-09.2.47.40.mov
2024-10-09.3.01.20.mov
📢 논의하고 싶은 내용
🎸 기타