작품 찜하기 - 낙관적 업데이트(home, view, auction/id 페이지) #301
Conversation
✅ Deploy Preview for attiess ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| @@ -13,7 +13,7 @@ rounded-lg hover:ring-1 hover:ring-blue-500 cursor-pointer relative | |||
|
|
|||
| export default function WishCard({ wish }) { | |||
| const router = useRouter(); | |||
| const { mutate: deletePrefer } = useDeletePrefer(wish?.id); | |||
| const { mutate: deletePrefer } = useDeletePrefer(wish?.id, '/wish'); | |||
There was a problem hiding this comment.
query key에 path가 추가되는 이유가 무엇인가요?
There was a problem hiding this comment.
아 페이지마다 onMutate에서 바꿔줘야 하는 키가 다르군요..
| const { mutate: postPrefer } = usePostPrefer(artWork?.id!); | ||
| const { mutate: deletePrefer } = useDeletePrefer(artWork?.id!); | ||
| const { mutate: postPrefer } = usePostPrefer(artWork?.id!, '/auction'); | ||
| const { mutate: deletePrefer } = useDeletePrefer(artWork?.id!, '/auction'); |
There was a problem hiding this comment.
여기 ! 연산자를 일부러 뺐는데 어차피 enabled에 isNaN으로 확인이 되서 ts-error 따로 안 나면 ! 생략해도 될거 같습니다.
There was a problem hiding this comment.
그러면 해당 페이지에서 새로고침해도 정상적으로 작동하는지 확인 부탁드려요!
src/pages/profile/index.tsx
Outdated
| alt="profile" | ||
| priority | ||
| /> | ||
| <Image src={data?.image} fill alt="profile" priority /> |
There was a problem hiding this comment.
className='object-cover' 추가하면 사진 원본 가로세로 상관없이 딱 맞을거 같습니다!
There was a problem hiding this comment.
fill
object-cover
fill도 같은 기능이라서 둘을 비교해봤는데, 미세하게 다르더라구요
NEXTjs에서 제공하는 fill이 더 화질 안깨지는 것 같아요 !
There was a problem hiding this comment.
제가 알기로는 Image에서 fill 속성 지정 이후에 추가로 object-cover 또는 object-contain과 같은 css propertiy로 추가로 조정하는거라 화질에 차이는 없는걸로 알고 있습니다. 만약 가로 세로 비율이 다른 사진인 경우 상위 엘리먼트 크기에 꽉 차지 않을 수 있어서요.
There was a problem hiding this comment.
There was a problem hiding this comment.
아하 추가로 지정하는 거였군요
감사합니다 😄
반영했습니다 !!
src/pages/search.tsx
Outdated
| const components = [ | ||
| { page: 'Intro', component: 'IntroComponent' }, | ||
| { page: 'Result', component: 'StepOneComponent' }, | ||
| ]; |
There was a problem hiding this comment.
저 코드는 필요 없을 것 같네요 제거할게요 !
🧑💻 PR 내용
낙관적 업데이트를 구현하였습니다.
QueryKey 객체를 만들어, auction/home/home-view페이지에 따라 old값을 다르게 리턴하여 낙관적 업데이트를 구현해주었습니다.
검색 후, 같은 컴포넌트여서 이전 버튼을 누를 경우 홈으로 가지는 현상이 발생하여, 검색 페이지 안에서 페이지를 구분해주었습니다.
router.push(search/?word=${value});로 이동시킨 후, router.query의 변화값을 활용 + useMemo를 이용하여 기존 값과 다를 경우만 실행시켰습니다