-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(my-recruit): 내 공고 뽀각 페이지 api 연결 #28
Conversation
❌ Deploy Preview for bbogak failed.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다 !
코멘트 남겨드렸습니다 !
function getAllRecruits() { | ||
return http.get({ url: '/recruits' }); | ||
} | ||
|
||
function getRecruitsBySeason({ season }: Request) { | ||
return http.get({ url: '/recruits/bySeason', params: { season } }); | ||
} | ||
|
||
export function useGetAllRecruits({ season }: Request) { | ||
const result = useSuspenseQuery({ | ||
queryKey: [GET_RECRUITS, season], | ||
queryFn: season === ALL_RECRUITMENT ? getAllRecruits : () => getRecruitsBySeason({ season }), | ||
}); | ||
|
||
return result.data as unknown as Response; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useDeleteRecruit.ts
에 있는 함수랑 선언 방법을 통일하면 좋을 것 같아요
export const GET_RECRUITS = 'recruits'; | ||
|
||
function getAllRecruits() { | ||
return http.get({ url: '/recruits' }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return http.get({ url: '/recruits' }); | |
return http.get<Response>({ url: '/recruits' }); |
이렇게 사용하면 tanstack-query의 반환값 타입을 명시하지 않아도 가능해요
@@ -1,3 +1,4 @@ | |||
import { match } from 'ts-pattern'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ts-pattern
을 사용하셨군요 !
const rightMarkBackgroundColorClassName = match({ isOutOfDate, highlighted }) | ||
.with({ isOutOfDate: true }, () => 'bg-neutral-10') | ||
.with({ highlighted: true }, () => 'bg-mint-40') | ||
.otherwise(() => 'bg-neutral-95'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool !
export function useResizeObserver(onResize: OnResize) { | ||
const ref = useRef<HTMLDivElement | null>(null); | ||
const resizeCallback = usePreservedCallback(onResize); | ||
|
||
useIsomorphicLayoutEffect(() => { | ||
let rAF = 0; | ||
|
||
if (ref.current) { | ||
const resizeObserver = new ResizeObserver((entries) => { | ||
if (entries[0] != null) { | ||
cancelAnimationFrame(rAF); | ||
|
||
rAF = requestAnimationFrame(() => resizeCallback(entries[0])); | ||
} | ||
}); | ||
|
||
resizeObserver.observe(ref.current); | ||
|
||
return () => { | ||
cancelAnimationFrame(rAF); | ||
if (ref.current != null) { | ||
resizeObserver.unobserve(ref.current); | ||
} | ||
}; | ||
} | ||
}, [resizeCallback]); | ||
|
||
return ref; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool !
export const AnimateHeight = forwardRef<HTMLDivElement, AnimateHeightProps>(function AnimateHeight({ children }, ref) { | ||
const [updated, setUpdated] = useState(false); | ||
const heightMotionValue = useMotionValue(-1); | ||
|
||
const resizeRef = useResizeObserver(({ contentRect }) => { | ||
if (updated === false) { | ||
setUpdated(true); | ||
// heightMotionValue.set(contentRect.height); | ||
return; | ||
} | ||
heightMotionValue.set(contentRect.height); | ||
// animate(heightMotionValue, contentRect.height, { duration: 0.7 }); | ||
}); | ||
|
||
return ( | ||
<motion.div | ||
ref={ref} | ||
style={{ maxHeight: updated ? heightMotionValue : 'auto', overflow: 'hidden' }} | ||
transition={{ duration: 1 }}> | ||
<div ref={resizeRef}>{children}</div> | ||
</motion.div> | ||
); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool !
<BoxCard | ||
key={`${cardInfo.season}-${cardInfo.title}`} | ||
{...cardInfo} | ||
onDuedateAppend={() => {}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
추후 구현할 것으로 알고 있겠습니다 !
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
* feat(my-recruit): 내정보뽀각 페이지 api 연결 * update * save * save
* feat(my-recruit): 내정보뽀각 페이지 api 연결 * update * save * save
* feat(my-recruit): 내정보뽀각 페이지 api 연결 * update * save * save
* feat(my-recruit): 내정보뽀각 페이지 api 연결 * update * save * save
* feat(my-recruit): 내정보뽀각 페이지 api 연결 * update * save * save
3. 관련 스크린샷을 첨부해주세요.
4. 완료 사항
5. 추가 사항 / 코드 리뷰 받고 싶은 부분