[D-TP] DnD 생성/업데이트 로직 변경 #519
Conversation
src/app/teams/[id]/panel/TeamDnD.tsx
Outdated
| {/*request와 관련된 toast*/} | ||
| <CuToast | ||
| autoHideDuration={2000} | ||
| severity={toastMessage?.severity} | ||
| open={toastOpen} | ||
| onClose={closeToast} | ||
| > | ||
| {toastMessage?.message} | ||
| </CuToast> |
There was a problem hiding this comment.
저희 CuToast를 전역으로 처리하는 작업을 하는 것으로 알고 있어서 일단 여기서는 CuToast를 빼고 alert 같은 것으로 피드백만 주고 나중에 CuToast 작업 완료되면 해당 방식에 맞게 전역에 토스트 메시지 띄워주는게 나중에 수정할 때 좀 더 편할 것 같아요!
There was a problem hiding this comment.
넵 안넣어주려니 피드백이 즉각적으로 보이지 않아서 넣은거였는데, alert을 넣어주는 게 낫겠네요!
src/app/teams/[id]/panel/TeamDnD.tsx
Outdated
| // key={data} | ||
| key={data?.updatedAt.toLocaleString()} |
There was a problem hiding this comment.
WidgetsRender 에서 key는 어떤 역할을 하는건가요??
There was a problem hiding this comment.
이 부분은 매번 useEffect를 써서 react grid layout 을 위한 layouts 변수를 계산하는 방법을 개선하기 위해 넣었던 내용입니다. https://react.dev/learn/you-might-not-need-an-effect.
key를 넣는 이유는 data가 다시 로드될때 (ex trigger로 인해 다시 데이터를 불러온다거나 할때) 이 데이터가 다른 데이터라고 알려주기 위해 넣었습니다.
| //@todo 백엔드와 논의 후 JSON.stringify 지우기 | ||
| return { | ||
| ...layout, | ||
| key: layout?.grid?.i, |
There was a problem hiding this comment.
vscode에 뜨는 설명을 읽어보니까 아래처럼 적혀 있어서 라이브러리에서 부여하는 key를 위젯의 key로 활용하는 것으로 이해했는데 잘 이해한게 맞을까요... (공식문서에서는 해당 내용을 못찾겟네요 흑흑..)
A string corresponding to the component key.
Uses the index of components instead if not provided.
그리고 옵셔널 체이닝으로 값을 넣어주셨는데 grid에 i가 없을수도 있나요???
| <></> | ||
| )} | ||
| {/*위젯 type에 따라 렌더링*/} | ||
| {getWidget(type, wgData, wgSize)} |
There was a problem hiding this comment.
getWidget에는 변경사항이 없어 코멘트를 못남겨서 이쪽에 남깁니다..
getWidgets 로직을 보니까 WidgetRender 컴포넌트 내의 데이터를 활용하는 부분은 없는 것 같아 보여서
특별히 useCallback 함수로 구현한게 아니라면 아예 WidgetRender 컴포넌트 밖으로 빼도 좋을 것 같아요. (불필요한 메모이제이션은 줄이는게 좋다고 들었어용)
const GetWidget = ({
type,
wgData,
wgSize,
}: {
type: WidgetType
wgData: any
wgSize: SizeType
}) => {
switch (type) {
case 'notice':
return <TmpNoticeWidget data={wgData} size={wgSize} />
// 생략...
default:
return null
}
}
<GetWidget type={} wgData={} wgSize={} />There was a problem hiding this comment.
넵 습관처럼 넣었는데 빼는게 좋을 것 같네요!
| onClick={() => | ||
| !edit && router.replace(`/teams/${id}?key=${key}`) | ||
| } |
There was a problem hiding this comment.
이렇게 되면 위젯마다 url이 생기는 것 같아 보이는데,,, 의도한 것인지 궁금합니다!
단순히 key를 전달하기 위한 목적이었다면 아래 getWidget의 parameter로 key를 넘겨줄수도 있었을 것 같은데 그 방법은 불가능했던것인지도 궁금해요!
There was a problem hiding this comment.
이 부분은 key를 따로 내려주는 걸로 수정했습니다!
| return ( | ||
| <Box | ||
| className={'layout-element'} | ||
| key={grid?.i} |
There was a problem hiding this comment.
key 데이터가 있는데 여기서는 grid?.i 로 key를 설정해 준 이유가 있나요? 그리고 앞선 코멘트에도 적었던 것 같은데... grid에 i가 없는 경우가 생긴다면 key가 없다거나 중복된다는 경고가 뜰 것 같아요..!
There was a problem hiding this comment.
드롭되는 요소때문에 이런식으로 처음에 처리했었습니다. grid의 i는 제가 처음부터 0부터 넣어주는 형태인데, key는 백엔드에서 넣어주는 값이 있다보니 오히려 제가 임의로 드롭되는 요소에 key값을 넣어주려했을때 값이 안 겹치게 하는 게 어렵더라고요. 그래서 겹치지 않을거라 보장할 수 있는 i값을 key값으로 썼던 것 같습니다.
grid의 i는 없을 경우는 없을 거예요. 혹시나 해서 넣어놨던 건데 옵셔널 체이닝은 빼도록 하겠습니다.
| key: number | ||
| key: number | string |
There was a problem hiding this comment.
어떤 경우에 key가 number가 되는 것인지 궁금합니다!!
There was a problem hiding this comment.
이건 react grid layout이랑 dnd api의 key의 타입이 달라서 그렇습니다. 해당 타입을 둘다 쓰고 있어서요. dnd api에 저장될때는 number로 통일하도록 해보겠습니다.
| ...widget, | ||
| key: index, |
There was a problem hiding this comment.
소나 클라우드에서도 경고를 띄우고 있듯이 key를 index로 설정하게 되면 예상치 못한 에러가 발생할 수 있어요.
아마 number로 key 타입을 통일시키려고 이렇게 처리하지 않았을까 하는 생각이 드는데 위젯에서는 특히 각 위젯을 구분하기 위한 방법으로 key를 사용하다보니까 더더욱 문제가 발생할 가능성이 있을 것 같습니다.
만약에 마땅히 Key로 사용할 값이 없다면 내장객체인 crypto의 메소드인 randomUUID()를 이용해보는 것도 좋을 것 같습니다... string 타입의 난수를 생성해주는 메소드예요.(https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID)
There was a problem hiding this comment.
음 저도 key를 index로 넣는 부분이 문제가 될 것이라는 점에는 동의합니다.
어차피 저 key라는 값은 위젯을 수정할때 보통 쓰일 것이기 때문에, 저장될때도 해당 key값을 저장하는 게 맞을 것 같네요.
다만 string 형태의 난수를 넣으면 백엔드와 key타입이 통일되지 않아서 에러가 나더라고요. (백엔드의 key는 number타입)
이 부분은 백엔드와 상의를 해서 string으로 통일을 해야할 것 같습니다.
# Conflicts: # src/app/teams/[id]/panel/WidgetList.tsx # src/app/teams/[id]/panel/WidgetsRender.tsx # src/app/teams/[id]/panel/widgets/TmpNoticeWidget.tsx
|
@hyeon81 린트 오류난 부분 수정하고 바로 강제 머지 처리해주세요! PR이 쌓이지 않게 하기 위함입니다. |
|
dnd에서 위젯의 정보를 쉽게 업데이트 할 수 있도록 전역상태인 dnd Store를 추가했습니다.
dnd Store에선 팀 아이디와 위젯 정보를 처음에 데이터를 불러올 때 저장해놓고, 위젯의 정보를 업데이트 할 때 사용합니다. 위젯의 정보의 업데이트는 setStoreWidgetData를 통해 진행합니다.
위젯 안에서 일일히 토스트를 띄워주긴 어려울 것 같아서 토스트 메세지도 전역에 담아두었습니다.
위젯 안의 data를 업데이트 시, data 안의 내용이 json의 형태로 날아가지 않는 문제가 있어, 매번 리퀘스트를 날릴때마다 data의 내용을 JSON.stringify로 변환해서 보내는 로직이 있습니다. 해당 로직은 추후 백엔드와 논의 후 지울지 지울지 말지 결정할 것같습니다.
업데이트 테스트를 위해서 @KRimwoo 님이 만드신 text 컴포넌트를 수정했습니다. setStoreWidgetData를 사용할때는 key값이 필요한데, 해당 키 값은 위젯을 클릭하면 쿼리스트링에 세팅하도록 만들어놓았습니다. 쿼리스트링에 있는 key값을 가져와 넣어주시면 됩니다.
참고로 해당 키값은 레이아웃 편집 시에 위젯을 수정하는 경우를 고려하지 않기 때문에, 일전에 같이 논의했던대로, 레이아웃 편집 시에 위젯 편집은 막으면 될 것 같습니다.