Fix : Issue 해결 #52
Fix : Issue 해결 #52
Conversation
|
Labeler가 제목과 설명에 있는 특별한 텍스트와 일치하는 레이블을 적용했습니다. |
| const target = lastPage.recommendation | ||
| ? lastPage.recommendedContents | ||
| : lastPage.filteredContents; | ||
| return target.last ? undefined : target.number + 1; |
| @@ -6,20 +6,17 @@ interface PhotoList { | |||
| } | |||
|
|
|||
| export default function PhotoList({ data }: PhotoList) { | |||
| if (!data) return <Photo />; | |||
There was a problem hiding this comment.
데이터 없을때 스켈레톤 ? 이미지 나오게 하면 좋을 것 같네요 🤔
| const { refetch, data } = usePoseTalkQuery({ | ||
| onSuccess: (data) => { | ||
| setTimeout(() => { | ||
| setTalkWord(data.poseWord.content); |
There was a problem hiding this comment.
코드가 아닌 기획관련 의견이긴 한데 , 1초동안 로딩하고나서 키워드 보여주고 이미지 재생하는 대신 키워드 보여주고 나서 1초동안 이미지 재생하는건 어떨까요 ?.? 키워드가 빨리 나오는게 좋을 것 같아서용
There was a problem hiding this comment.
맞아요 이 부분 저도 무언가 어색하다랄까 .. 아쉽다는 느낌받긴했어요
회의 때 이 부분 이야기해봐도 좋을 것 같아요 ~
| initialState: false, | ||
| }); | ||
| const [talkWord, setTalkWord] = useState<string>(`제시어에 맞춰 포즈를 취해요!`); |
There was a problem hiding this comment.
엇 다른페이지 갔다왔을때 기본 키워드로 돌아가는거 고쳐진건가요?! 제가 코드만 보고 원리를 모르겠어서 여쭤봅니답ㅠㅜ
There was a problem hiding this comment.
useEffect(() => {
return () => {
queryClient.resetQueries(['poseTalk']);
};
}, [queryClient]);이 부분에서 useEffect의 return문에 캐싱된 쿼리를 초기화 하도록 설정하였습니다.
useEffect의 함수는 컴포넌트가 마운트되었을 때인데, return문 안의 함수이므로 unmount되었을 때 실행이됩니다.
기존에는 페이지 이동시 쿼리된 데이터가 inActive상태가 되었지만, 이제는 페이지 이동 시 캐싱된 데이터를 버리게 됩니다.
우선 임시로 이 방식으로 구현은 했는데, 무언가 더 효율적인 코드가 있을 거라는 생각이 들어요 ..
추후 좀 더 알아보고 다른 좋은 방법이 있으면 교체해도 될 것 같아요 !
| @@ -11,10 +12,10 @@ export const metadata: Metadata = { | |||
| export default function Talk() { | |||
| return ( | |||
| <> | |||
| <div className="flex flex-1 flex-col items-center justify-center"> | |||
| <PageAnimation className="flex flex-1 flex-col items-center justify-center"> | |||
There was a problem hiding this comment.
Pageanimation은 framer-motion을 활용하여 애니메이션을 구현한 컴포넌트로, 컴포넌트가 마운트됬을 때 opacity 0부터 1까지 자연스럽게 변화합니다.
| import { type AnimationProps, motion } from 'framer-motion'; | ||
|
|
||
| import cn from '@/utils/cn'; |
There was a problem hiding this comment.
cn은 기존 tailwindcss를 사용했을 때의 단점을 극복한 util함수입니다.
기존 tailwindcss를 사용하면 clssName = text-a text-b
로 작성할 경우, 두 속성 중 한 속성이 사라지지 않고 스타일에 그대로 나타나는 이슈가 있었습니다. (중복으로 적용되지는 않지만 어떤 것이 적용될 지는 미지수)
그래서 twMerge 라이브러리를 도입하였지만, 이 라이브러리에서는 커스텀 css속성을 사용할 경우 적용이 정상적으로 동작하지 않는 이슈가 있습니다.
저희 프로젝트에서는 커스텀 css속성이 아니라, h1/h2 등 태그로 typography를 적용하기에 cn까지는 필요 없고, twMerge를 사용해도 될 것 같긴 하네용
💡 왜 PR을 올렸나요?
💁 무엇이 어떻게 바뀌나요?
📆 작업 예정인 것이 있나요 ?
-> 찾아보니, React 18의 리마운트되서 발생하는 이슈인데, query쪽에서 아직 해결하지 못한 이슈라고 하네요 😢
💬 리뷰어분들께