[FE] feat: 스크롤 기능 구현 #348
Merged
[FE] feat: 스크롤 기능 구현 #348
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
xodms0309
reviewed
Aug 8, 2023
| @@ -30,10 +31,11 @@ const MIN_CONTENT_LENGTH = 0; | |||
|
|
|||
| interface ReviewRegisterFormProps { | |||
| product: ProductDetail; | |||
| targetRef: React.RefObject<HTMLElement>; | |||
There was a problem hiding this comment.
이거 위에서
import type { RefObject } from 'react';이렇게 import 할 수 있습니돠
frontend/src/hooks/useScroll.ts
Outdated
| } | ||
| }; | ||
|
|
||
| const scrollToPosition = (targetRef?: React.RefObject<HTMLElement>) => { |
There was a problem hiding this comment.
Suggested change
| const scrollToPosition = (targetRef?: React.RefObject<HTMLElement>) => { | |
| const scrollToPosition = <T extends HTMLElement>(targetRef?: RefObject<T>) => { |
이건 어떤가요?!
frontend/src/pages/HomePage.tsx
Outdated
| @@ -3,6 +3,7 @@ import { Link as RouterLink } from 'react-router-dom'; | |||
| import styled from 'styled-components'; | |||
|
|
|||
| import { CategoryMenu, SvgIcon } from '@/components/Common'; | |||
| import ScrollButton from '@/components/Common/ScrollButton/ScrollButton'; | |||
| closeReviewDialog: () => void; | ||
| } | ||
|
|
||
| const ReviewRegisterForm = ({ product, closeReviewDialog }: ReviewRegisterFormProps) => { | ||
| const ReviewRegisterForm = ({ product, targetRef, closeReviewDialog }: ReviewRegisterFormProps) => { |
There was a problem hiding this comment.
여기도 forwardRef 쓸 수 있을 것 같아요
There was a problem hiding this comment.
여기는 useScroll과의 충돌로....슬프지만....🥲
frontend/src/hooks/useScroll.ts
Outdated
Comment on lines
5
to
7
| if (mainElement) { | ||
| mainElement.scrollTo(0, 0); | ||
| } |
There was a problem hiding this comment.
id가 main인 곳에만 scroll 0이 적용되어 사용하였습니다~
| bottom: 90px; | ||
| right: 32%; | ||
| border-radius: 50%; | ||
| z-index: 1; |
Leejin-Yang
reviewed
Aug 9, 2023
frontend/src/hooks/useScroll.ts
Outdated
|
|
||
| const useScroll = () => { | ||
| const scrollToTop = () => { | ||
| const mainElement = document.getElementById('main'); |
There was a problem hiding this comment.
리액트에서 돔 요소에 직접 접근하면 위험해서 수정이 필요해 보여요
리액트 렌더링(가상돔에서 돔으로)이 예측 불가능 할 수 있습니다.!
이 부분도 ref로 수정을 해야할거 같네요
| closeReviewDialog: () => void; | ||
| } | ||
|
|
||
| const ReviewRegisterForm = ({ product, closeReviewDialog }: ReviewRegisterFormProps) => { | ||
| const ReviewRegisterForm = ({ product, targetRef, closeReviewDialog }: ReviewRegisterFormProps) => { |
|
@xodms0309 @Leejin-Yang 수정 완료했습니당 |
Leejin-Yang
approved these changes
Aug 10, 2023
| @@ -7,9 +8,22 @@ import useScroll from '@/hooks/useScroll'; | |||
|
|
|||
| const ScrollButton = () => { | |||
| const { scrollToTop } = useScroll(); | |||
| const [scrollTop, setScrollTop] = useState(false); | |||
| const mainElement = document.getElementById('main'); | |||
There was a problem hiding this comment.
이 친구도 useEffect 안으로 들어가면 되겠네요
|
고마워용 타미...근데 approve는,,,,?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ |
Leejin-Yang
reviewed
Aug 10, 2023
| export default ScrollButton; | ||
|
|
||
| const ScrollButtonWrapper = styled(Button)` | ||
| position: fixed; |
There was a problem hiding this comment.
fixed는 뷰포트 따라가서 absolute로 하면 될듯합니다
There was a problem hiding this comment.
에 뭐야 absolute 해도 따라오네요 머쓱
xodms0309
approved these changes
Aug 10, 2023
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
✨ 구현한 기능
스크롤 버튼을 클릭하면 최상단으로 이동합니다.
리뷰 작성 완료 후 리뷰 위치로 이동합니다.
📢 논의하고 싶은 내용
ref type 제대로 적었는지 확인해주세용~
fixed를 사용했는데요. 이게 개발자 도구를 키면 이동하네요...
좌우 고정하는 방법 아시는분...ㅠ
🎸 기타
x
⏰ 일정