From fcf0f20cbde8124c0049fc57ff00b6042da0cf9c Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Fri, 26 Jan 2024 16:57:43 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/LoginModal/LoginModal.stories.tsx | 22 +++++++++++++ src/components/common/LoginModal/index.tsx | 32 +++++++++++++++++++ src/components/common/LoginModal/styled.ts | 15 +++++++++ src/components/common/LoginModal/types.ts | 4 +++ src/components/common/index.ts | 1 + 5 files changed, 74 insertions(+) create mode 100644 src/components/common/LoginModal/LoginModal.stories.tsx create mode 100644 src/components/common/LoginModal/index.tsx create mode 100644 src/components/common/LoginModal/styled.ts create mode 100644 src/components/common/LoginModal/types.ts diff --git a/src/components/common/LoginModal/LoginModal.stories.tsx b/src/components/common/LoginModal/LoginModal.stories.tsx new file mode 100644 index 00000000..2aea7805 --- /dev/null +++ b/src/components/common/LoginModal/LoginModal.stories.tsx @@ -0,0 +1,22 @@ +import { action } from '@storybook/addon-actions/*' +import type { Meta, StoryObj } from '@storybook/react' +import { LoginModal as LoginModalComponent } from './index' + +type LoginModal = typeof LoginModalComponent + +const meta: Meta = { + component: LoginModalComponent, + title: 'Common/LoginModal' +} + +export default meta + +export const Default: StoryObj = { + parameters: { + isOpen: true, + onClose: () => { + action('onChangeTradeStatus')('click') + } + }, + render: args => +} diff --git a/src/components/common/LoginModal/index.tsx b/src/components/common/LoginModal/index.tsx new file mode 100644 index 00000000..afbb3f6d --- /dev/null +++ b/src/components/common/LoginModal/index.tsx @@ -0,0 +1,32 @@ +import { useRouter } from 'next/router' +import { Styled } from './styled' +import type { LoginModalProps } from './types' +import { CommonModal } from '../CommonModal' +import { OAUTH_URL } from '@constants' + +export const LoginModal = ({ isOpen, onClose }: LoginModalProps) => { + const router = useRouter() + + const handleClickLogin = () => { + router.replace(OAUTH_URL.KAKAO) + } + + return ( + + 카카오로 시작하기 + + ]} + hasLogo + isOpen={isOpen} + title={`가격을 제안해보세요\n경매식 중고거래, Offer!`} + onClose={onClose} + /> + ) +} diff --git a/src/components/common/LoginModal/styled.ts b/src/components/common/LoginModal/styled.ts new file mode 100644 index 00000000..44e55641 --- /dev/null +++ b/src/components/common/LoginModal/styled.ts @@ -0,0 +1,15 @@ +import { css } from '@emotion/react' +import styled from '@emotion/styled' +import { Button } from '@offer-ui/react' + +const KaKaoButton = styled(Button)` + ${({ theme }) => css` + background: ${theme.colors.kakao}; + + color: ${theme.colors.grayScale90}; + `}; +` + +export const Styled = { + KaKaoButton +} diff --git a/src/components/common/LoginModal/types.ts b/src/components/common/LoginModal/types.ts new file mode 100644 index 00000000..56d8e4b2 --- /dev/null +++ b/src/components/common/LoginModal/types.ts @@ -0,0 +1,4 @@ +export type LoginModalProps = { + isOpen?: boolean + onClose(): void +} diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 8111c6fb..8018ed51 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -4,3 +4,4 @@ export * from './Header' export * from './AlertModal' export * from './Dialog' export * from './PostSection' +export * from './LoginModal' From c45060487bd74510a1a287acc086b7804a2dcff2 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Fri, 26 Jan 2024 16:58:25 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D,=20=EB=B2=A0?= =?UTF-8?q?=EB=84=88=EC=97=90=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header/index.tsx | 29 ++++-------------------- src/components/common/Header/styled.ts | 12 +--------- src/components/home/HomeBanner/index.tsx | 26 +++++++++++++++++---- 3 files changed, 28 insertions(+), 39 deletions(-) diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 3fdf5cef..f67a73de 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -8,11 +8,11 @@ import { useState } from 'react' import { SearchArea } from './SearchArea' import { SideBar } from './SideBar' import { Styled } from './styled' -import { CommonModal } from '../CommonModal' import { Dialog } from '../Dialog' +import { LoginModal } from '../LoginModal' import { toQueryString } from '@utils/format' import { searchKeywordAtom } from '@atoms' -import { IMAGE, OAUTH_URL } from '@constants' +import { IMAGE } from '@constants' import { useModal, useAuth } from '@hooks' const PREVENT_ACTIVE_PATHS = ['/post'] @@ -25,13 +25,13 @@ const Header = (): ReactElement => { const router = useRouter() const isActivePath = !PREVENT_ACTIVE_PATHS.includes(router.pathname) const { isLogin, user, handleLogout } = useAuth() - const { isOpen, openModal, closeModal } = useModal() + const loginModal = useModal() const [isOpenSideBar, setIsOpenSideBar] = useState(false) const [isOpenDialog, setIsOpenDialog] = useState(initDialog) const setSearchKeyword = useSetAtom(searchKeywordAtom) const handleOpenLoginModal = () => { - openModal() + loginModal.openModal() } const handleSubmitValue = (value?: string) => { @@ -45,10 +45,6 @@ const Header = (): ReactElement => { } } - const handleClickLogin = () => { - router.replace(OAUTH_URL.KAKAO) - } - const handleClickLogo = () => { setIsOpenDialog(initDialog) router.push('/') @@ -180,22 +176,7 @@ const Header = (): ReactElement => { isOpen={isOpenSideBar} onClose={() => setIsOpenSideBar(false)} /> - - 카카오로 시작하기 - - ]} - hasLogo - isOpen={isOpen} - title={`가격을 제안해보세요\n경매식 중고거래, Offer!`} - onClose={closeModal} - /> + ) } diff --git a/src/components/common/Header/styled.ts b/src/components/common/Header/styled.ts index 15bd8a05..43b39d15 100644 --- a/src/components/common/Header/styled.ts +++ b/src/components/common/Header/styled.ts @@ -1,4 +1,3 @@ -import { css } from '@emotion/react' import styled from '@emotion/styled' import { Button, Input } from '@offer-ui/react' import Link from 'next/link' @@ -120,14 +119,6 @@ const TextLink = styled(Link)` text-decoration: none; ` -const KaKaoButton = styled(Button)` - ${({ theme }) => css` - background: ${theme.colors.kakao}; - - color: ${theme.colors.grayScale90}; - `}; -` - export const Styled = { HeaderWrapper, HeaderContent, @@ -141,6 +132,5 @@ export const Styled = { HeaderProfileSection, HeaderNickName, MenuSection, - TextLink, - KaKaoButton + TextLink } diff --git a/src/components/home/HomeBanner/index.tsx b/src/components/home/HomeBanner/index.tsx index 624dfe12..45315d36 100644 --- a/src/components/home/HomeBanner/index.tsx +++ b/src/components/home/HomeBanner/index.tsx @@ -1,8 +1,25 @@ -import Link from 'next/link' +import { useRouter } from 'next/router' import type { ReactElement } from 'react' import { Styled } from './styled' +import { useAuth } from '@hooks/useAuth' +import { LoginModal } from '@components' +import { useModal } from '@hooks' const HomeBanner = (): ReactElement => { + const router = useRouter() + const { isLogin } = useAuth() + const loginModal = useModal() + + const handleClickPosting = () => { + if (isLogin) { + router.push('/post') + + return + } + + loginModal.openModal() + } + return ( <> @@ -11,9 +28,9 @@ const HomeBanner = (): ReactElement => { 처치곤란한 물건이 있다면? Offer에 올려보세요! - - 판매하기 - + + 판매하기 + @@ -24,6 +41,7 @@ const HomeBanner = (): ReactElement => { + ) } From 888442c962f48ec38b5ddf0a6f88f7f423956d50 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Fri, 26 Jan 2024 17:03:49 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20sideBar=20=EC=83=81=ED=83=9C=20useM?= =?UTF-8?q?odal=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index f67a73de..4a114553 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -26,7 +26,7 @@ const Header = (): ReactElement => { const isActivePath = !PREVENT_ACTIVE_PATHS.includes(router.pathname) const { isLogin, user, handleLogout } = useAuth() const loginModal = useModal() - const [isOpenSideBar, setIsOpenSideBar] = useState(false) + const sidebarModal = useModal() const [isOpenDialog, setIsOpenDialog] = useState(initDialog) const setSearchKeyword = useSetAtom(searchKeywordAtom) @@ -52,7 +52,7 @@ const Header = (): ReactElement => { const handleClickSideBar = () => { setIsOpenDialog(initDialog) - setIsOpenSideBar(true) + sidebarModal.openModal() } return ( @@ -173,8 +173,8 @@ const Header = (): ReactElement => { )} setIsOpenSideBar(false)} + isOpen={sidebarModal.isOpen} + onClose={() => sidebarModal.closeModal()} /> From 8611950aea0e65441aa80390671c96cc3363aeab Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Sun, 28 Jan 2024 22:27:13 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20post=20url=20=EC=83=81=EC=88=98?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/HomeBanner/index.tsx | 3 ++- src/constants/index.ts | 1 + src/constants/url.ts | 3 +++ 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 src/constants/url.ts diff --git a/src/components/home/HomeBanner/index.tsx b/src/components/home/HomeBanner/index.tsx index 45315d36..b069a03e 100644 --- a/src/components/home/HomeBanner/index.tsx +++ b/src/components/home/HomeBanner/index.tsx @@ -3,6 +3,7 @@ import type { ReactElement } from 'react' import { Styled } from './styled' import { useAuth } from '@hooks/useAuth' import { LoginModal } from '@components' +import { URL } from '@constants' import { useModal } from '@hooks' const HomeBanner = (): ReactElement => { @@ -12,7 +13,7 @@ const HomeBanner = (): ReactElement => { const handleClickPosting = () => { if (isLogin) { - router.push('/post') + router.push(URL.POST) return } diff --git a/src/constants/index.ts b/src/constants/index.ts index 16722e41..be94283b 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -4,3 +4,4 @@ export * from './app' export * from './env' export * from './message' export * from './oauth' +export * from './url' diff --git a/src/constants/url.ts b/src/constants/url.ts new file mode 100644 index 00000000..15a8a9a4 --- /dev/null +++ b/src/constants/url.ts @@ -0,0 +1,3 @@ +export const URL = { + POST: '/post' +} as const From 9800e91ba031877e07f154a1a8b13ae243b3dc67 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Mon, 29 Jan 2024 14:18:54 +0900 Subject: [PATCH 5/9] =?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 = ({ )} - + {likePost.status ? ( ) : ( )} - {likePost.count} + {likePost.count} {isSeller ? ( ) : ( { 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 Date: Tue, 30 Jan 2024 01:09:07 +0900 Subject: [PATCH 6/9] =?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 = ({ )} - - - - {likePost.status ? ( - - ) : ( - - )} - {likePost.count} - - {isSeller ? ( - - 쪽지하기 - - ) : ( - { - offerModal.openModal() - }}>{`가격 제안하기(${ - getPostOffersQuery.data?.offerCountOfCurrentMember || 0 - }/2)`} - )} - + {isLogin && ( + <> + + + + {likePost.status ? ( + + ) : ( + + )} + {likePost.count} + + {isSeller ? ( + + 쪽지하기 + + ) : ( + { + offerModal.openModal() + }}>{`가격 제안하기(${ + getPostOffersQuery.data?.offerCountOfCurrentMember || 0 + }/2)`} + )} + + + )} `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 Date: Tue, 30 Jan 2024 01:11:58 +0900 Subject: [PATCH 7/9] =?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 Date: Tue, 30 Jan 2024 01:15:44 +0900 Subject: [PATCH 8/9] =?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) => { + if (!isSeller) { + return + } + const offerId = Number(e.target.value) setSelectedOffer(offerId) @@ -165,12 +169,17 @@ const PriceOfferCard = ({ const isSelected = selectedOffer === id return ( - - + + {isSeller && ( + + )} ` +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 Date: Tue, 30 Jan 2024 01:23:30 +0900 Subject: [PATCH 9/9] =?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 = ({ ) : ( { - offerModal.openModal() - }}>{`가격 제안하기(${ + onClick={offerModal.openModal}>{`가격 제안하기(${ getPostOffersQuery.data?.offerCountOfCurrentMember || 0 }/2)`} )}