diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx index 12466a99..cd11650a 100644 --- a/src/components/post/PriceOfferCard/index.tsx +++ b/src/components/post/PriceOfferCard/index.tsx @@ -21,7 +21,7 @@ import { useCreateMessageRoomMutation } from '@apis' import { SORT_OPTIONS } from '@constants' -import { useModal } from '@hooks' +import { useAuth, useModal } from '@hooks' import type { SortOption, SortOptionCodes } from '@types' const PriceOfferCard = ({ @@ -39,6 +39,7 @@ const PriceOfferCard = ({ const router = useRouter() const offerModal = useModal() + const { isLogin } = useAuth() const getPostOffersQuery = useGetPostOffersQuery({ postId, @@ -49,6 +50,10 @@ const PriceOfferCard = ({ const updateLikeStatusMutation = useUpdateLikeStatusMutation() const createOfferMutation = useCreateOfferMutation() + const isOfferDisabled = + getPostOffersQuery.data?.offerCountOfCurrentMember === + getPostOffersQuery.data?.maximumOfferCount + useEffect(() => { setLikePost({ status: Boolean(getPostQuery.data?.liked), @@ -80,6 +85,10 @@ const PriceOfferCard = ({ } const handleChangeOffer = (e: ChangeEvent) => { + if (!isSeller) { + return + } + const offerId = Number(e.target.value) setSelectedOffer(offerId) @@ -160,12 +169,17 @@ const PriceOfferCard = ({ const isSelected = selectedOffer === id return ( - - + + {isSeller && ( + + )} )} - - - - {likePost.status ? ( - - ) : ( - - )} - {likePost.count} - - {isSeller ? ( - - 쪽지하기 - - ) : ( - { - offerModal.openModal() - }}>{`가격 제안하기(${ - getPostOffersQuery.data?.offerCountOfCurrentMember || 0 - }/2)`} - )} - + {isLogin && ( + <> + + + + {likePost.status ? ( + + ) : ( + + )} + {likePost.count} + + {isSeller ? ( + + 쪽지하기 + + ) : ( + {`가격 제안하기(${ + getPostOffersQuery.data?.offerCountOfCurrentMember || 0 + }/2)`} + )} + + + )} ` +const Offer = styled(Radio.Label)<{ isSeller: boolean; isSelected: boolean }>` display: flex; align-items: center; padding: 20px; - border-radius: ${({ theme }): string => theme.radius.round6}; + ${({ theme, isSeller }) => + css` + border-radius: ${theme.radius.round6}; + + cursor: ${isSeller ? 'cursor' : 'default'}; + `}; ${({ theme, isSelected }) => css` border: solid 1px @@ -125,7 +130,7 @@ const OfferContent = styled.div` ` const CardBody = styled.div` - height: 564px; + max-height: 564px; padding: 20px 16px; ${({ theme }): string => ` @@ -170,7 +175,7 @@ const MessageButton = styled(Button)` } `} ` -const LikeButton = styled.div` +const LikeButton = styled.button` display: flex; gap: 4px; align-items: center; @@ -178,7 +183,12 @@ const LikeButton = styled.div` width: 96px; height: 64px; - border: ${({ theme }): string => `solid 1px ${theme.colors.grayScale20}`}; + ${({ theme }) => + css` + border: solid 1px ${theme.colors.grayScale20}; + + background-color: ${theme.colors.white}; + `}; cursor: pointer; @@ -196,6 +206,12 @@ const LikeButton = styled.div` `} ` +const LikeText = styled.span` + ${({ theme }) => css` + ${theme.fonts.body01B} + `} +` + export const Styled = { OfferPriceCardWrapper, OfferListBox, @@ -209,5 +225,6 @@ export const Styled = { CardBody, CardFooter, MessageButton, - LikeButton + LikeButton, + LikeText }