Skip to content
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.

Sign up for GitHub

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

fix: 구매자일 때, 선택 라디오 버튼이 뜸 #257

Merged
merged 5 commits into from
Jan 29, 2024
Merged

fix: 구매자일 때, 선택 라디오 버튼이 뜸 #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9800e91
feat: login 안한 경우 오퍼제안, 좋아요 누르지 못하도록
Jan 29, 2024
961dc3c
feat: login시 제안, 좋아요 안보이도록 수정
Jan 29, 2024
50b1f9f
design: 오퍼 카드 높이 수정
Jan 29, 2024
4e55f9f
feat: 구매자는 라디오 선택할 수 없도록
Jan 29, 2024
dca9a6a
chore: 코드 가독성을 위한 네이밍 변경
Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 51 additions & 38 deletions src/components/post/PriceOfferCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -39,6 +39,7 @@ const PriceOfferCard = ({

const router = useRouter()
const offerModal = useModal()
const { isLogin } = useAuth()

const getPostOffersQuery = useGetPostOffersQuery({
postId,
Expand All @@ -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),
Expand Down Expand Up @@ -80,6 +85,10 @@ const PriceOfferCard = ({
}

const handleChangeOffer = (e: ChangeEvent<HTMLFormElement>) => {
if (!isSeller) {
return
}

const offerId = Number(e.target.value)

setSelectedOffer(offerId)
Expand Down Expand Up @@ -160,12 +169,17 @@ const PriceOfferCard = ({
const isSelected = selectedOffer === id

return (
<Styled.Offer key={id} isSelected={isSelected}>
<Radio.Input
checked={isSelected}
formName="offer"
value={String(id)}
/>
<Styled.Offer
key={id}
isSelected={isSeller && isSelected}
isSeller={isSeller}>
{isSeller && (
<Radio.Input
checked={isSelected}
formName="offer"
value={String(id)}
/>
)}
<Styled.OfferContent>
<UserProfile
date={getTimeDiffText(date)}
Expand Down Expand Up @@ -193,37 +207,36 @@ const PriceOfferCard = ({
</Text>
</Styled.BlankCard>
)}
<Divider />
<Styled.CardFooter>
<Styled.LikeButton role="button" onClick={handleClickLike}>
{likePost.status ? (
<Icon color="brandPrimary" type="heartFill" />
) : (
<Icon color="grayScale90" type="heart" />
)}
<Text styleType="body01B">{likePost.count}</Text>
</Styled.LikeButton>
{isSeller ? (
<Styled.MessageButton
disabled={!selectedOffer}
size="large"
onClick={handleClickStartMessage}>
쪽지하기
</Styled.MessageButton>
) : (
<Styled.MessageButton
disabled={
getPostOffersQuery.data?.offerCountOfCurrentMember ===
getPostOffersQuery.data?.maximumOfferCount
}
size="large"
onClick={() => {
offerModal.openModal()
}}>{`가격 제안하기(${
getPostOffersQuery.data?.offerCountOfCurrentMember || 0
}/2)`}</Styled.MessageButton>
)}
</Styled.CardFooter>
{isLogin && (
<>
<Divider />
<Styled.CardFooter>
<Styled.LikeButton onClick={handleClickLike}>
{likePost.status ? (
<Icon color="brandPrimary" type="heartFill" />
) : (
<Icon color="grayScale90" type="heart" />
)}
<Styled.LikeText>{likePost.count}</Styled.LikeText>
</Styled.LikeButton>
{isSeller ? (
<Styled.MessageButton
disabled={!selectedOffer}
size="large"
onClick={handleClickStartMessage}>
쪽지하기
</Styled.MessageButton>
) : (
<Styled.MessageButton
disabled={isOfferDisabled}
size="large"
onClick={offerModal.openModal}>{`가격 제안하기(${
getPostOffersQuery.data?.offerCountOfCurrentMember || 0
}/2)`}</Styled.MessageButton>
)}
</Styled.CardFooter>
</>
)}
</Styled.OfferPriceCardWrapper>
<PriceOfferModal
isOpen={offerModal.isOpen}
Expand Down
29 changes: 23 additions & 6 deletions src/components/post/PriceOfferCard/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,17 @@ const BlankCard = styled.div`
height: 120px;
padding: 20px 0;
`
const Offer = styled(Radio.Label)<{ isSelected: boolean }>`
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
Expand All @@ -125,7 +130,7 @@ const OfferContent = styled.div`
`

const CardBody = styled.div`
height: 564px;
max-height: 564px;
padding: 20px 16px;

${({ theme }): string => `
Expand Down Expand Up @@ -170,15 +175,20 @@ const MessageButton = styled(Button)`
}
`}
`
const LikeButton = styled.div`
const LikeButton = styled.button`
display: flex;
gap: 4px;
align-items: center;
justify-content: center;

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;

Expand All @@ -196,6 +206,12 @@ const LikeButton = styled.div`
`}
`

const LikeText = styled.span`
${({ theme }) => css`
${theme.fonts.body01B}
`}
`

export const Styled = {
OfferPriceCardWrapper,
OfferListBox,
Expand All @@ -209,5 +225,6 @@ export const Styled = {
CardBody,
CardFooter,
MessageButton,
LikeButton
LikeButton,
LikeText
}