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

price-offer · Jan 29, 2024 · 3f305f6 · 3f305f6
2 parents 1dfc370 + dca9a6a
commit 3f305f6
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 44 deletions.
diff --git 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<HTMLFormElement>) => {
+    if (!isSeller) {
+      return
+    }
+
     const offerId = Number(e.target.value)
 
     setSelectedOffer(offerId)
@@ -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)}
@@ -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}

diff --git a/src/components/post/PriceOfferCard/styled.ts b/src/components/post/PriceOfferCard/styled.ts
@@ -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
@@ -125,7 +130,7 @@ const OfferContent = styled.div`
 `
 
 const CardBody = styled.div`
-  height: 564px;
+  max-height: 564px;
   padding: 20px 16px;
 
   ${({ theme }): string => `
@@ -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;
 
@@ -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
 }