-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FE] feat: 꿀조합 댓글 기능 구현 #744
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
타미 UI 깔끔하네요!
코멘트 확인해주세요.!
setCommentValue(e.target.value); | ||
}; | ||
|
||
const handleSubmitComment: FormEventHandler<HTMLFormElement> = async (e) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
async 없어도 잘 동작하겠네요!
{ | ||
onSuccess: () => { | ||
setCommentValue(''); | ||
toast.success('댓글이 등록되었습니다.'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🥪
return ( | ||
<> | ||
<CommentInputForm onSubmit={handleSubmitComment}> | ||
<Input |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
200자면 Input으로 했을 때 내용이 다 보이지 않을거 같아서 Textarea가 좋아보이는데 어떻게 생각하시나요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
좋아요 ~
</Heading> | ||
<Spacing size={12} /> | ||
{recipeComments.map((comment) => ( | ||
<CommentItem key={comment.id} comment={comment} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
List 컴포넌트를 만들어서 Suspense 적용하는건 어떻게 생각하시나요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
옙~
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}, | ||
onError: (error) => { | ||
if (error instanceof Error) { | ||
alert(error.message); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
지워도 될 거 같네여
</SubmitButton> | ||
</CommentInputForm> | ||
<Text size="xs" color={theme.textColors.info} align="right"> | ||
{commentValue.length} / {MAX_COMMENT_LENGTH} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
스크린리더를 위해 '자'를 넣어주세요!
{commentValue.length}자 / {MAX_COMMENT_LENGTH}자
@hae-on @Leejin-Yang |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
파이팅 타미!
|
||
const MAX_COMMENT_LENGTH = 200; | ||
|
||
const CommentForm = ({ recipeId }: CommentFormProps) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
}; | ||
|
||
const useRecipeCommentQuery = (recipeId: number) => { | ||
return useSuspendedQuery(['recipeComment', recipeId], () => fetchRecipeComments(recipeId)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
무한스크롤! 백엔드와 이야기해보세요~
<Heading as="h3" size="lg"> | ||
댓글 ({recipeComments.length}개) | ||
</Heading> | ||
<Spacing size={12} /> | ||
<ErrorBoundary fallback={ErrorComponent} handleReset={reset}> | ||
<Suspense fallback={<Loading />}> | ||
<CommentList comments={recipeComments} /> | ||
</Suspense> | ||
</ErrorBoundary> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
하나를 말해도 열을 아는 천재 타미
파이팅! 👍
@hae-on @Leejin-Yang
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -27,7 +27,7 @@ type ToastStyleProps = Pick<ToastProps, 'isError'> & { isAnimating?: boolean }; | |||
|
|||
const ToastWrapper = styled.div<ToastStyleProps>` | |||
position: relative; | |||
width: 100%; | |||
width: calc(100% - 20px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
짱👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굿굿 확인 완. 수고했어용~
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생했어요 타미 👍
const { fetchNextPage, hasNextPage, data } = useInfiniteRecipeCommentQuery(Number(recipeId)); | ||
useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
♾️👍
|
||
import { SvgIcon } from '@/components/Common'; | ||
import { useToastActionContext } from '@/hooks/context'; | ||
import useRecipeCommentMutation from '@/hooks/queries/recipe/useRecipeCommentMutation'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
index에 추가해주세요.!
getNextPageParam: (prevResponse: CommentResponse) => { | ||
const lastId = prevResponse.comments[prevResponse.comments.length - 1].id; | ||
const totalElements = prevResponse.totalElements; | ||
const lastCursor = { lastId: lastId, totalElements: totalElements }; | ||
return prevResponse.hasNext ? lastCursor : undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
대박..👍
Issue
✨ 구현한 기능
📢 논의하고 싶은 내용
x
🎸 기타
x
⏰ 일정