feat: 구매자는 라디오 선택할 수 없도록

price-offer · Jan 29, 2024 · 4e55f9f · 4e55f9f
1 parent 50b1f9f
commit 4e55f9f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx
@@ -85,6 +85,10 @@ const PriceOfferCard = ({
   }
 
   const handleChangeOffer = (e: ChangeEvent<HTMLFormElement>) => {
+    if (!isSeller) {
+      return
+    }
+
     const offerId = Number(e.target.value)
 
     setSelectedOffer(offerId)
@@ -165,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)}

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