From 9800e91ba031877e07f154a1a8b13ae243b3dc67 Mon Sep 17 00:00:00 2001
From: shinhyojeong <hyojeonge0@naver.com>
Date: Mon, 29 Jan 2024 14:18:54 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20login=20=EC=95=88=ED=95=9C=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EC=98=A4=ED=8D=BC=EC=A0=9C=EC=95=88,=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EB=88=84=EB=A5=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=AA=BB=ED=95=98=EB=8F=84=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/PriceOfferCard/index.tsx | 16 ++++++------
 src/components/post/PriceOfferCard/styled.ts | 26 ++++++++++++++++++--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx
index 12466a99..e427f314 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 offerDisabled =
+    getPostOffersQuery.data?.offerCountOfCurrentMember ===
+      getPostOffersQuery.data?.maximumOfferCount || !isLogin
+
   useEffect(() => {
     setLikePost({
       status: Boolean(getPostQuery.data?.liked),
@@ -195,13 +200,13 @@ const PriceOfferCard = ({
         )}
         <Divider />
         <Styled.CardFooter>
-          <Styled.LikeButton role="button" onClick={handleClickLike}>
+          <Styled.LikeButton disabled={!isLogin} onClick={handleClickLike}>
             {likePost.status ? (
               <Icon color="brandPrimary" type="heartFill" />
             ) : (
               <Icon color="grayScale90" type="heart" />
             )}
-            <Text styleType="body01B">{likePost.count}</Text>
+            <Styled.LikeText>{likePost.count}</Styled.LikeText>
           </Styled.LikeButton>
           {isSeller ? (
             <Styled.MessageButton
@@ -212,10 +217,7 @@ const PriceOfferCard = ({
             </Styled.MessageButton>
           ) : (
             <Styled.MessageButton
-              disabled={
-                getPostOffersQuery.data?.offerCountOfCurrentMember ===
-                getPostOffersQuery.data?.maximumOfferCount
-              }
+              disabled={offerDisabled}
               size="large"
               onClick={() => {
                 offerModal.openModal()
diff --git a/src/components/post/PriceOfferCard/styled.ts b/src/components/post/PriceOfferCard/styled.ts
index 8fd77e35..cd41f895 100644
--- a/src/components/post/PriceOfferCard/styled.ts
+++ b/src/components/post/PriceOfferCard/styled.ts
@@ -170,7 +170,7 @@ const MessageButton = styled(Button)`
     }
   `}
 `
-const LikeButton = styled.div`
+const LikeButton = styled.button`
   display: flex;
   gap: 4px;
   align-items: center;
@@ -182,6 +182,21 @@ const LikeButton = styled.div`
 
   cursor: pointer;
 
+  &:disabled {
+    ${({ theme }) =>
+      css`
+        background-color: ${theme.colors.grayScale20};
+
+        color: ${theme.colors.white};
+
+        svg {
+          color: ${theme.colors.white};
+        }
+      `};
+
+    cursor: default;
+  }
+
   ${({ theme }): string => `
     ${theme.mediaQuery.tablet} {
       width: 84px;
@@ -196,6 +211,12 @@ const LikeButton = styled.div`
   `}
 `
 
+const LikeText = styled.span`
+  ${({ theme }) => css`
+    ${theme.fonts.body01B}
+  `}
+`
+
 export const Styled = {
   OfferPriceCardWrapper,
   OfferListBox,
@@ -209,5 +230,6 @@ export const Styled = {
   CardBody,
   CardFooter,
   MessageButton,
-  LikeButton
+  LikeButton,
+  LikeText
 }

From 961dc3c8e08b3c1d8c2e701517e90a4bd4cf3cc4 Mon Sep 17 00:00:00 2001
From: shinhyojeong <hyojeonge0@naver.com>
Date: Tue, 30 Jan 2024 01:09:07 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20login=EC=8B=9C=20=EC=A0=9C=EC=95=88?=
 =?UTF-8?q?,=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=95=88=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/PriceOfferCard/index.tsx | 62 +++++++++++---------
 src/components/post/PriceOfferCard/styled.ts | 22 ++-----
 2 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx
index e427f314..97323a5f 100644
--- a/src/components/post/PriceOfferCard/index.tsx
+++ b/src/components/post/PriceOfferCard/index.tsx
@@ -52,7 +52,7 @@ const PriceOfferCard = ({
 
   const offerDisabled =
     getPostOffersQuery.data?.offerCountOfCurrentMember ===
-      getPostOffersQuery.data?.maximumOfferCount || !isLogin
+    getPostOffersQuery.data?.maximumOfferCount
 
   useEffect(() => {
     setLikePost({
@@ -198,34 +198,38 @@ const PriceOfferCard = ({
             </Text>
           </Styled.BlankCard>
         )}
-        <Divider />
-        <Styled.CardFooter>
-          <Styled.LikeButton disabled={!isLogin} 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={offerDisabled}
-              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={offerDisabled}
+                  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
index cd41f895..c0489cfa 100644
--- a/src/components/post/PriceOfferCard/styled.ts
+++ b/src/components/post/PriceOfferCard/styled.ts
@@ -178,24 +178,14 @@ const LikeButton = styled.button`
 
   width: 96px;
   height: 64px;
-  border: ${({ theme }): string => `solid 1px ${theme.colors.grayScale20}`};
+  ${({ theme }) =>
+    css`
+      border: solid 1px ${theme.colors.grayScale20};
 
-  cursor: pointer;
-
-  &:disabled {
-    ${({ theme }) =>
-      css`
-        background-color: ${theme.colors.grayScale20};
-
-        color: ${theme.colors.white};
+      background-color: ${theme.colors.white};
+    `};
 
-        svg {
-          color: ${theme.colors.white};
-        }
-      `};
-
-    cursor: default;
-  }
+  cursor: pointer;
 
   ${({ theme }): string => `
     ${theme.mediaQuery.tablet} {

From 50b1f9ff6e4e376028ce0c9f49aa58be7d4d4573 Mon Sep 17 00:00:00 2001
From: shinhyojeong <hyojeonge0@naver.com>
Date: Tue, 30 Jan 2024 01:11:58 +0900
Subject: [PATCH 3/5] =?UTF-8?q?design:=20=EC=98=A4=ED=8D=BC=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=86=92=EC=9D=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/PriceOfferCard/styled.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 4e55f9f06b6f765795dfff44482636d6d7e4d61e Mon Sep 17 00:00:00 2001
From: shinhyojeong <hyojeonge0@naver.com>
Date: Tue, 30 Jan 2024 01:15:44 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EA=B5=AC=EB=A7=A4=EC=9E=90?=
 =?UTF-8?q?=EB=8A=94=20=EB=9D=BC=EB=94=94=EC=98=A4=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=97=86=EB=8F=84=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/PriceOfferCard/index.tsx | 21 ++++++++++++++------
 src/components/post/PriceOfferCard/styled.ts |  9 +++++++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx
index 97323a5f..cb06a4d6 100644
--- 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
index a0df70d0..8ba1fc4c 100644
--- 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

From dca9a6a0acdc63f0bf5c4697f5f9fabf5617f82b Mon Sep 17 00:00:00 2001
From: shinhyojeong <hyojeonge0@naver.com>
Date: Tue, 30 Jan 2024 01:23:30 +0900
Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EA=B0=80?=
 =?UTF-8?q?=EB=8F=85=EC=84=B1=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/PriceOfferCard/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/post/PriceOfferCard/index.tsx b/src/components/post/PriceOfferCard/index.tsx
index cb06a4d6..cd11650a 100644
--- a/src/components/post/PriceOfferCard/index.tsx
+++ b/src/components/post/PriceOfferCard/index.tsx
@@ -50,7 +50,7 @@ const PriceOfferCard = ({
   const updateLikeStatusMutation = useUpdateLikeStatusMutation()
   const createOfferMutation = useCreateOfferMutation()
 
-  const offerDisabled =
+  const isOfferDisabled =
     getPostOffersQuery.data?.offerCountOfCurrentMember ===
     getPostOffersQuery.data?.maximumOfferCount
 
@@ -228,11 +228,9 @@ const PriceOfferCard = ({
                 </Styled.MessageButton>
               ) : (
                 <Styled.MessageButton
-                  disabled={offerDisabled}
+                  disabled={isOfferDisabled}
                   size="large"
-                  onClick={() => {
-                    offerModal.openModal()
-                  }}>{`가격 제안하기(${
+                  onClick={offerModal.openModal}>{`가격 제안하기(${
                   getPostOffersQuery.data?.offerCountOfCurrentMember || 0
                 }/2)`}</Styled.MessageButton>
               )}