Conversation
There was a problem hiding this comment.
https://velog.io/@j8won/%EB%A6%AC%EC%95%A1%ED%8A%B8-Portal%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%AA%A8%EB%8B%AC%EC%B0%BD%EC%9D%84-%EC%83%9D%EC%84%B1%ED%95%98%EC%9E%90#portal%EC%9D%98-%ED%8A%B9%EC%A7%95
위의 링크가 가장 핵심적으로 모달 구현한 거 같아서 첨부해요!
createProtal + children 으로 내부 내용 넘기는게 가장 일반적인 모달 구현인 거 같아요!
| clickEvent?: (value?: any, index?: number) => void; | ||
| $clickEventName?: string; | ||
| $clickIndex?: number | undefined; | ||
| $type?: 'button' | 'reset' | 'submit' | undefined; |
There was a problem hiding this comment.
| $type?: 'button' | 'reset' | 'submit' | undefined; | |
| $type?: ButtonHTMLAttributes<HTMLButtonElement>['type'] |
동일할 거 같아요!
| } | ||
|
|
||
| function CheckBox({ $data }: ICheckBoxData) { | ||
| if (typeof $data) { |
There was a problem hiding this comment.
typeof 로 분기처리하는 것은 트랜스파일시에 문제는 없지만, $data.data 가 있는지 판단하는 식으로 짜는 것을 추천드려요!
| }: IButtonModule) { | ||
| const [value, setValue] = useState(''); |
There was a problem hiding this comment.
| const [value, setValue] = useState(''); | |
| const [value, setValue] = useState<string>(''); |
string 타입같은 경우엔 확실히 타입을 정해주시는 게 좋아요!
| /> | ||
| {$btnShow && <Button $btnClass={$btnClass}>{$btnText}</Button>} | ||
| {$btnShow && ( | ||
| <Button $btnClass={$btnClass} onclick={() => handleButtonEvent(value)}> |
There was a problem hiding this comment.
return 부에서 가져오는 value 가 아닌 위쪽에 있는 state 상의 value 인 경우에는 그냥 handleButtonEvent에 input 을 안받고 바로 value 를 참조하게 하시는 것을 추천드려요!
근데 handleButtonEvent가 input 으로 받은 text 를 쓰는 곳이 없는 거 같아요...!
| contant: IFolderContent[] | [] | undefined | null; | ||
| loading: boolean; |
There was a problem hiding this comment.
IFolderContent[] 타입 내부에 [] 도 들어있어서 하나만 적어주시면 될 거 같아요!
| contant: IFolderContent[] | [] | undefined | null; | |
| loading: boolean; | |
| contant: IFolderContent[] | undefined | null; | |
| isLoading: boolean; |
| {loading ? ( | ||
| <EmptyBox>Loading...</EmptyBox> | ||
| ) : contant ? ( | ||
| <PostCardWrap> | ||
| {contant?.map((data) => ( | ||
| <PostCard key={data.id} {...data} /> | ||
| ))} | ||
| </PostCardWrap> | ||
| ) : ( | ||
| <EmptyBox>저장된 링크가 없습니다.</EmptyBox> | ||
| )} |
There was a problem hiding this comment.
렌더부에 3항 연산자를 중복으로 쓰면 가독성이 많이 떨어지게 되어서 loading 일 때를 따로 early return 해주시는 걸 추천드려요!
| {loading ? ( | |
| <EmptyBox>Loading...</EmptyBox> | |
| ) : contant ? ( | |
| <PostCardWrap> | |
| {contant?.map((data) => ( | |
| <PostCard key={data.id} {...data} /> | |
| ))} | |
| </PostCardWrap> | |
| ) : ( | |
| <EmptyBox>저장된 링크가 없습니다.</EmptyBox> | |
| )} | |
| if(loading) { | |
| return <EmptyBox>Loading...</EmptyBox> | |
| } | |
| return | |
| contant ? ( | |
| <PostCardWrap> | |
| {contant?.map((data) => ( | |
| <PostCard key={data.id} {...data} /> | |
| ))} | |
| </PostCardWrap> | |
| ) : ( | |
| <EmptyBox>저장된 링크가 없습니다.</EmptyBox> | |
| )} |
| interface IButtonList { | ||
| $menu: IFolderMenuButtonApi | null; | ||
| $loading: boolean; | ||
| $btnActive: number; |
There was a problem hiding this comment.
변수 이름을 보면 number 자료형과 맞지 않는 거 같아요! id 를 뜻한다면 $activeBtnId 가 좋을 거 같아요!
| return; | ||
| } | ||
| // api/users/1/links?folderId={해당 폴더 ID} | ||
| setDynamicAPI(`${FOLDERCONTANTLISTAPI}?folderId=${api}`); | ||
| const result = menu?.data.filter((data) => +data.id === +api); |
There was a problem hiding this comment.
api 의 자료형은 string 이라 숫자로 변화하는 것보다 data.id 를 toString 하는 게 혹시 모를 위험을 대비하기 좋아요! (number 로 바꾸는데는 side effect 가 많은 경우가 많아서요ㅠㅜ)
| }; | ||
|
|
||
| // contant list | ||
| const contantSearch = search ? search : contant?.data; |
There was a problem hiding this comment.
| const contantSearch = search ? search : contant?.data; | |
| const contantSearch = search ?? contant?.data; |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
어떤 방법으로 작업하는게 좋은지 대챡적인 으로라도 알려주세요!