[Feature/BAR-155] 참고하는 레이아웃 수정 및 폴더 저장 삭제 기능 추가 #63
Conversation
| { | ||
| onSuccess: async () => { | ||
| await queryClient.invalidateQueries({ | ||
| queryKey: ['templates'], | ||
| }); | ||
| showToast({ message: '글이 저장됐어요.' }); | ||
| }, | ||
| }, |
There was a problem hiding this comment.
이 부분은 useSaveTemplate 내부에 작성해도 되지 않을까요?
그리고 onSuccess에 async, await 키워드는 없어도 됩니다!
There was a problem hiding this comment.
해당 부분 반영해보았습니다 감사합니다 ㅎㅎ
src/domain/참고하는/components/index.tsx
Outdated
| /> | ||
| ))} | ||
| </ul> | ||
| <ResponsiveMasonry columnsCountBreakPoints={{ 768: 2, 1080: 3 }}> |
There was a problem hiding this comment.
여러 곳에서 활용할 수 있게 합성 컴포넌트로 만들어보는 건 어떨까요!
There was a problem hiding this comment.
@dmswl98
기존 Card 컴포넌트 내부에 해당 요소를 넣자는 말씀이실까요?
There was a problem hiding this comment.
엇 아뇨!!
다른 페이지도 768px일 때 2줄, 1080일 때 3줄이라
const Responsive = ({ children }) => {
return <ResponsiveMasonry columnsCountBreakPoints={{ 768: 2, 1080: 3 }}>{children}</ResponsiveMasonry>
}이렇게 구현해두면 어디에서든 쓸 수 있을 것 같아서요
There was a problem hiding this comment.
@dmswl98
아아 해당 부분도 반영해두었습니다 !! ㅎㅎ
src/domain/참고하는/components/index.tsx
Outdated
| </ul> | ||
| <ResponsiveMasonry columnsCountBreakPoints={{ 768: 2, 1080: 3 }}> | ||
| <Masonry className={styles.referCardsWrapper} gutter="16px"> | ||
| {data.content.map((data) => ( |
There was a problem hiding this comment.
어떤 코드인지 불명확해서...! 아래처럼 변경되면 좋을 것 같아요
| {data.content.map((data) => ( | |
| const { data: templates } = useGetTemplates({ | |
| category: selectedFilterHeader, | |
| sort: selectedFilterButton, | |
| }); | |
| {templates.content.map((template) => ()} |
There was a problem hiding this comment.
해당 부분 반영해보았습니다 감사합니다 ㅎㅎ
| import { COLORS } from '@styles/tokens'; | ||
|
|
||
| import useDeleteTemplate from '../queries/useDeleteTemplate'; | ||
| import useSaveTemplate from '../queries/useSaveTemplate'; | ||
|
|
||
| interface FolderDialogProps { | ||
| templateId: number; |
There was a problem hiding this comment.
요런 것도 정의된 타입에 의존시켜 작성하는 건 어떨까요?
There was a problem hiding this comment.
해당 부분 반영해보았습니다 감사합니다 ㅎㅎ
768px 이하인 경우에는 padding이 아예 없는 것 같아요...! |
@dmswl98 |
Summary
To Reviewers
react-responsive-masonry를 사용하여 벽돌식 컴포넌트를 구성하였습니다.
기존 카드 컴포넌트를 래핑하는 방식이기 때문에 큰 영향 없을 것 같습니다.
How To Test