Conversation
| setIsOpenProfileCard(true); | ||
| }; | ||
|
|
||
| useEffect(() => {}, [commentPositionTop]); |
| @@ -84,14 +100,19 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI | |||
|
|
|||
| const handleClickReport = () => {}; | |||
There was a problem hiding this comment.
아무 동작도 안하는 함수인듯 한데 필요한가요?
| const { data, refetch } = useQuery<PostCardListResponseData>({ | ||
| queryKey: ['postData', cardId], | ||
| queryFn: () => getPostDetail(cardId), |
There was a problem hiding this comment.
| const { data, refetch } = useQuery<PostCardListResponseData>({ | |
| queryKey: ['postData', cardId], | |
| queryFn: () => getPostDetail(cardId), | |
| const { data: 여기 네이밍해서 사용하는게 더 좋을거같기도 해요, refetch } = useQuery<PostCardListResponseData>({ | |
| queryKey: ['postData', cardId], | |
| queryFn: () => getPostDetail(cardId), |
| if (!userData) { | ||
| return toast.error('로그인이 필요합니다.'); | ||
| } |
There was a problem hiding this comment.
로그인이 필요하면 바로 모달로 연결해주는건 어떤가요?
| } | ||
| }, [isOpenProfileCard, userId, refetch, positionTop, isAboveProfile]); | ||
|
|
||
| return positionTop && positionTop === 0 ? null : ( |
There was a problem hiding this comment.
| return positionTop && positionTop === 0 ? null : ( | |
| return positionTop && positionTop === 0 ? null : ( |
여기서 positionTop이 없으면 그냥 null처리 하셔서 아무것도 안보여주시는식으로 설계하셨는데
아무것도 없는 데이터를 보여줘도 괜찮은 컴포넌트인가요?
There was a problem hiding this comment.
그게 아니라면 사용처에서 useState로 관리하는게 더 낫지않을까요?
| <div> | ||
| <SpinLoading /> | ||
| </div> |
There was a problem hiding this comment.
div 태그가 아무런 기능을 하고있는것 같지 않아서 없어도 될거같아요
| const result = await res.json(); | ||
| const { data } = result; |
There was a problem hiding this comment.
구조 분해로 줄일 수 있을 것 같아요
| const result = await res.json(); | |
| const { data } = result; | |
| const { data }= await res.json(); |
| useEffect(() => { | ||
| const VIEWPORT_HEIGHT = window.innerHeight; | ||
|
|
||
| if (isOpenProfileCard) { | ||
| refetch(); | ||
| if (positionTop && positionTop > VIEWPORT_HEIGHT / 2) { | ||
| setIsAboveProfile(true); | ||
| } | ||
| } | ||
| }, [isOpenProfileCard, userId, refetch, positionTop, isAboveProfile]); |
There was a problem hiding this comment.
구조적으로 봤을 때 의존성 변수가 많은 useEffect 내부에 refetch가 들어가 있습니다.
이는 불필요한 refetch가 발생할 수 있을 것 같아요.
제가 코드를 제대로 이해한 거라면, 저라면 userData를 사용처에서 prop으로 전달하고, 사용자가 마우스를 올렸을 때 데이터를 가져오는 식으로 할 것 같습니다. 아니면 refetch만 따로 다른 useEffect에 분리할 것 같아요
There was a problem hiding this comment.
isAboveProfile을 의존성배열에 넣은 이유가 있을까요?
setState로 값이 변경되면서 한번 더 실행될 것 같은데...
| <div className={cn('profile-image')}> | ||
| <Image src={userInfo?.imgUrl || keydeukProfileImg} alt='프로필 이미지' fill sizes='12rem' /> | ||
| </div> | ||
| <div className={cn('info-wrapper')}> | ||
| <p className={cn('nickname')}>{userInfo?.nickname || '사용자를 찾을 수 없습니다.'}</p> | ||
| <p> | ||
| <strong>email:</strong> {userInfo?.email} | ||
| </p> | ||
| <p> | ||
| <strong>birthday:</strong> {userInfo?.birth} | ||
| </p> | ||
| <p> | ||
| <strong>phone:</strong> {userInfo?.phone} | ||
| </p> | ||
| <p> | ||
| <strong>gender:</strong> {userInfo?.gender} | ||
| </p> |
There was a problem hiding this comment.
userInfo를 못 가져왔을 때는 아예 안 띄우는 식으로 또는 아예 사용자 정보를 찾을 수 없을 때 띄울 컴포넌트를 보여주는 것도 좋을 것 같습니다
| width: 45rem; | ||
| height: 15rem; | ||
| padding: 1rem; | ||
| animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both; |
There was a problem hiding this comment.
애니메이션 속도 너무 느린 것 같아요.
0.7초에서 0.5초 정도 어떠신가요?
| const removeEvent = addEnterKeyEvent({ element: { current: commentRef }, callback: handleSubmitComment }); | ||
| return () => { | ||
| removeEvent(); | ||
| }; |
There was a problem hiding this comment.
그냥 form으로 만드는 건 별로일까요? 그럼 따로 이벤트 등록 안 해도 될 것 같아요
🚀 작업 내용
📝 참고 사항
🖼️ 스크린샷
🚨 관련 이슈 (이슈 번호)
✅ 체크리스트