feat(my-recruit): 우측 사이드바 및 dnd구현 #23
Conversation
qkrdmstlr3
requested review from
woo-jk,
Collection50 and
eunbeann
as code owners
|
|
||
| export function InfoCardItem({ title, updatedDate, cardTagList }: Props) { | ||
| export function InfoCard({ title, updatedDate, cardTagList }: InfoCardProps) { |
There was a problem hiding this comment.
"내 정보 / 내 공고 / 내 공고 상세" 세 페이지에서 사용되는 컴포넌트라서 분리하였습니다
| export * from '@dnd-kit/core'; | ||
| export { Draggable } from './Draggable'; | ||
| export { Droppable } from './Droppable'; | ||
| export { DndContextWithOverlay } from './DndContextWithOverlay'; |
There was a problem hiding this comment.
복사하려하는 것의 잔상을 남기려면 DragOverlay를 사용해야하는데, DragOverlay의 사용성이 좋지 않아(복사하고자하는 것의 컴포넌트를 받는 방식) 한 단계 추상화시켜줍니다.
파일명은 DndKit으로 가려니 어색해서 라이브러리 이름을 따라가도록 해주었어요
| <Draggable id={info.id} dataForOverlay={info}> | ||
| <InfoCard key={info.id} {...info} /> | ||
| </Draggable> |
| <Droppable key={`${cardInfo.period}-${cardInfo.title}`} id={cardInfo.id}> | ||
| <RowCard highlighted={cardInfo.id === over?.id} {...cardInfo} /> | ||
| </Droppable> |
| useEffect(() => { | ||
| if (selectedId === id) { | ||
| animationControl.start('highlight'); | ||
| } | ||
| }, [id, selectedId]); | ||
|
|
| export function RowCard({ type, title, status, dueDate, period, highlighted = false }: RowCardProps) { | ||
| return ( | ||
| <div className="rounded-[10px] overflow-hidden flex cursor-pointer"> | ||
| <div className="w-12 bg-neutral-95" /> | ||
| <div className="px-24 py-22 flex-1 flex items-center border-1 border-neutral-5 border-l-neutral-95 rounded-r-[10px] justify-between"> | ||
| <div className={cn('w-12', highlighted ? 'bg-mint-40' : 'bg-neutral-95')} /> | ||
| <div | ||
| className={cn( | ||
| 'px-24 py-22 flex-1 flex items-center border-1 border-l-transparent rounded-r-[10px] justify-between', | ||
| highlighted ? 'border-mint-10 bg-[rgba(221,243,235,0.50)]' : 'border-neutral-5', | ||
| )}> |
There was a problem hiding this comment.
기능 구현에는 문제가 없겠지만 useDroppable을 사용한뒤, isOver을 사용하는 것이 dnd-kit에서 권장하는 방법입니다 !!
코멘트 수준으로 말씀드립니다 👍
There was a problem hiding this comment.
이 컴포넌트는 over상태를 모르도록 구현했어요. useDroppable을 Droppable컴포넌트로 한 단계 추상화해서 상위 페이지에서 감싸주었어요!
There was a problem hiding this comment.
아하 useDndContext가 아닌 useDroppable에서 빼는 것을 권장하고 있군요!
별도 context에서 useDroppable의 값을 사용하려다 useDndContext에서 제공하길래 그걸 썼는데, 나중에 리팩토링 해보겠습니닷
| } | ||
|
|
||
| export function DndContextWithOverlay({ OverlayElement, children, ...restProps }: Props) { | ||
| const [overlayElementData, setOverlayElementData] = useState<any | null>(null); |
There was a problem hiding this comment.
| const [overlayElementData, setOverlayElementData] = useState<any | null>(null); | |
| const [overlayElementData, setOverlayElementData] = useState<OverlayElement | null>(null); |
위와같은 형태는 어떨까요?
There was a problem hiding this comment.
타입에러가 발생합니다 ㅠ Parameters<typeof OverlayElement> 이렇게 해도 안되네요...
| useEffect(() => { | ||
| if (selectedId === id) { | ||
| animationControl.start('highlight'); | ||
| } | ||
| }, [id, selectedId]); |
There was a problem hiding this comment.
이 부분에서 isOver를 사용한다면 위 overlay context에서의 상태 관리를 줄일 수 있을 것 같아요 !
There was a problem hiding this comment.
over되었을때가 아닌 드래그가 끝났을때 over되어있었는지를 기준으로 판단하고 있어요!
3. 관련 스크린샷을 첨부해주세요.
2024-08-15.2.55.21.mov
4. 완료 사항
5. 추가 사항 / 코드 리뷰 받고 싶은 부분
나머지는 셀프 리뷰로 달아봅니다