대시보드 UI 구현 #40
Closed
대시보드 UI 구현 #40
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 한국 통화 변환 함수 구현 * open 시간, time시간 체크 함수 구현
* 대시보드 Card 컴포넌트 * 카드 List 컴포넌트 * 주문 목록 테이블 * 가게 정보 * 옵션 메뉴 컴포넌트
AyoungWon
approved these changes
Sep 19, 2024
Comment on lines
+42
to
+71
| const columns: ColumnDef<Order>[] = useMemo( | ||
| () => [ | ||
| { | ||
| header: 'OrderID', | ||
| accessorKey: 'orderId', | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'storeName', | ||
| accessorKey: 'storeName', | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'ordererName', | ||
| accessorKey: 'ordererName', | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'menutotalPrice', | ||
| accessorKey: 'menutotalPrice', | ||
| accessorFn: (data) => formatToKoreanCurrency(data.menutotalPrice), | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'status', | ||
| accessorKey: 'status', | ||
| enableSorting: true, | ||
| }, | ||
| ], | ||
| [], |
There was a problem hiding this comment.
최근에는 굳이 써야하는 곳이 아니라면 useMemo를 안쓰는게 오히려 메모리 측면에 낫다는 이야기가 있더라구요. 저도 적정선이 어딘지 참으로 고민이되요 ㅎ...
There was a problem hiding this comment.
맞아요!! useMemo는 저도 최대한 지양 해야 한다고 생각하는데, React table 예시에서 useMemo로 표현한게 있길래 일단은 급하게 구현하느라 메모를 써서 표현해봤어요. 좀더 찾아봐서 수정해야하는 포인트라고 생각합니다 ㅎㅎ React table을 처음 사용해봐서요ㅠ
There was a problem hiding this comment.
요기서 columns 배열은 컴포넌트 외부로 분리되어도 괜찮을 것 같네요!
Comment on lines
+17
to
+32
| return ( | ||
| <ImageLoader | ||
| accept=".jpg, .jpeg, .png .JPG" | ||
| onMetadataLoaded={(data) => { | ||
| setSrc(data.src); | ||
| }} | ||
| limit={{ | ||
| width: { | ||
| max: 3000, | ||
| onError: (error) => { | ||
| console.log(error); | ||
| }, | ||
| }, | ||
| height: 3000, | ||
| }} | ||
| > |
There was a problem hiding this comment.
정말 편한 라이브러리 입니다 굿굿!! pic-pik
Comment on lines
+10
to
+12
| const ImageUpload = () => { | ||
| return <PicPickComponent />; | ||
| }; |
There was a problem hiding this comment.
단순 궁금증인데 한번더 감싸신 이유가뭘까용?
There was a problem hiding this comment.
지금 코드가 이전 코드인거 같네요 ?? 이상하넹 수정한지 좀 됐는데 다시 확인해볼게요. 현재는 아래와 같아요
export const ImageUpload = () => {
const [originalImageMetadata, setOriginalImageMetadata] =
useState<ImageMetadata | null>(null);
const { metadata } = useResizeImage({
metadata: originalImageMetadata,
option: {
mode: 'aspectRatio',
...(originalImageMetadata &&
originalImageMetadata.width > originalImageMetadata.height
? { height: 352 }
: { width: 352 }),
},
});
return (
<div css={_imageWrapper}>
<ImageLoader onMetadataLoaded={setOriginalImageMetadata}>
{originalImageMetadata && metadata ? (
<div css={_imageLoader}>
<img src={metadata.src} width={'100%'} />
</div>
) : (
<div css={_imageLoader}>Please upload a picture</div>
)}
</ImageLoader>
</div>
);
};
Seung-wan
approved these changes
Sep 19, 2024
Comment on lines
+42
to
+71
| const columns: ColumnDef<Order>[] = useMemo( | ||
| () => [ | ||
| { | ||
| header: 'OrderID', | ||
| accessorKey: 'orderId', | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'storeName', | ||
| accessorKey: 'storeName', | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'ordererName', | ||
| accessorKey: 'ordererName', | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'menutotalPrice', | ||
| accessorKey: 'menutotalPrice', | ||
| accessorFn: (data) => formatToKoreanCurrency(data.menutotalPrice), | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| header: 'status', | ||
| accessorKey: 'status', | ||
| enableSorting: true, | ||
| }, | ||
| ], | ||
| [], |
There was a problem hiding this comment.
요기서 columns 배열은 컴포넌트 외부로 분리되어도 괜찮을 것 같네요!
Comment on lines
+33
to
+42
| const OpeningHoursAndFees = ({ | ||
| open, | ||
| close, | ||
| minCost, | ||
| delivery, | ||
| }: OpeningHoursAndFeesProps) => { | ||
| const [openTime, setOpenTime] = useState<string>(open); | ||
| const [closeTime, setCloseTime] = useState<string>(close); | ||
| const [minOrder, setMinOrder] = useState<number>(minCost); | ||
| const [deliveryFee, setDeliveryFee] = useState<string>(delivery); |
There was a problem hiding this comment.
props로 받은 값을 useState의 초기값으로 넣으면 props 값이 변경이 되어도 useState의 값은 초기값을 계속 유지하게 되어서 요렇게 작성하는 건 좋지 않은 패턴인 것 같아요!
부모 컴포넌트에서 OpeningHoursAndFees 컴포넌트에 상태를 변경하는 함수를 전달해주는게 어떨까 싶네요!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
관련 이슈
변경 사항
코드 리뷰 시 주의 사항
기타 사항