Feat/#269 qa #284
Feat/#269 qa #284
Conversation
| setIsScrollTop(currentScrollPosition < 20); | ||
| setIsScrollingDown(lastScrollPositionRef.current < currentScrollPosition); |
There was a problem hiding this comment.
이 부분에 값이 어떻게 들어가는건지 궁금합니다!!👀👀
그나저나 isScrollingDown, isScrollTop 변수명 대박인데요? 세심한 사람✨✨
There was a problem hiding this comment.
스크롤된 정도가 20 이하면, isScrollTop 상태이고
이전 스크롤 정도보다 현재 스크롤 정도가 크다면 isScrollingDown 상태입니다!
하지만 이 훅.. 사용하지 않습니다 ㅋㅋㅋ intersectionObeserver로 첫 카드 넘어갈 때 헤더가 바뀌는 방식으로 바꾸었어요
해당 훅은 이후에 쓰일까 남겨두었습니다!
| <Card | ||
| openLoginModalHandler={openLoginModalHandler} | ||
| {...cardList} | ||
| firstCardObsvRef={idx === 0 ? firstCardObsvRef : undefined} |
There was a problem hiding this comment.
null 은 object 타입으로, "값이 비어있음을 나타내는 유효한 값"이라고 생각해요
따라서 아에 아무것도 아님을 표현하기 위해 undefined로 작성해보았어요!
There was a problem hiding this comment.
아무것도 아님을 표현하는 거였군용!!🤩 저는 값이 없음을 표현하는 줄 알고 제안해봤습니다:)
| // MEMO :: 페이지 방문 시 매번 Open 설정 요구 (기획 측) | ||
| // useEffect(() => { | ||
| // const isPopupShown = sessionStorage.getItem(POPUP_SESSION_KEY); | ||
| // if (!isPopupShown) { | ||
| // setIsOpened(true); | ||
| // sessionStorage.setItem(POPUP_SESSION_KEY, "true"); | ||
| // } | ||
| // }, []); |
| background-color: ${({ theme }) => theme.colors.gray900}; | ||
| border-radius: 0.8rem; | ||
|
|
||
| backdrop-filter: blur(0.6rem); | ||
| color: ${({ theme }) => theme.colors.white}; | ||
| ${({ theme }) => theme.fonts.btn2}; |
|
|
||
| type HeadlessCTAButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>; | ||
|
|
||
| const HeadlessCTAButton = (props: PropsWithChildren<HeadlessCTAButtonProps>) => { |
There was a problem hiding this comment.
변수명에 Headless 이거 왜 들어간 걸까요?! 궁금쓰!!
There was a problem hiding this comment.
HeadlessUI 에 고안해서 작성했어요! 이는 쉽게 말해 비즈니스 로직(동작)이 전혀 없이 스타일링 로직만 보여줌을 말합니다!
There was a problem hiding this comment.
HeadlessUI 함 찾아볼게요:) 친절한 설명 감사합니당😆👍
|
로그인 팝업창에서 버튼 사이로 미세하게 안맞는게 보여서요! // LoginModal/style.ts
export const Container = styled.section`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6rem;
margin-top: 6.9rem;
height: 13.6rem;
`;
|
|
올라리 오빠 PR에 바로 올라가넹😅😏 줄바꿈 관련 style 수정했씁니다~! |
📌 내용
QA 작업 마쳤습니다. 빠뜨린 게 있을 수 있어요..!
📌 Comment
HeadlessCTAButton이라는 공통 컴포넌트를 만들었어요. 같은 디자인의 경우 이를 활용하면 좋을 것 같아요!