Merge branch 'develop' into design/#252_page-ui

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 [isOpenSideBar, setIsOpenSideBar] = useState(false)
+  const loginModal = useModal()
+  const sidebarModal = useModal()
   const [isOpenDialog, setIsOpenDialog] = useState(initDialog)
   const setSearchKeyword = useSetAtom(searchKeywordAtom)
 
   const handleOpenLoginModal = () => {
-    openModal()
+    loginModal.openModal()
   }
 
   const handleSubmitValue = (value?: string) => {
@@ -45,18 +45,14 @@ const Header = (): ReactElement => {
     }
   }
 
-  const handleClickLogin = () => {
-    router.replace(OAUTH_URL.KAKAO)
-  }
-
   const handleClickLogo = () => {
     setIsOpenDialog(initDialog)
     router.push('/')
   }
 
   const handleClickSideBar = () => {
     setIsOpenDialog(initDialog)
-    setIsOpenSideBar(true)
+    sidebarModal.openModal()
   }
 
   return (
@@ -177,25 +173,10 @@ const Header = (): ReactElement => {
       )}
       <SideBar
         isLogin={isLogin}
-        isOpen={isOpenSideBar}
-        onClose={() => setIsOpenSideBar(false)}
-      />
-      <CommonModal
-        buttons={[
-          <Styled.KaKaoButton
-            key="kakao-button"
-            color="kakao"
-            icon="kakao"
-            size="large"
-            onClick={handleClickLogin}>
-            카카오로 시작하기
-          </Styled.KaKaoButton>
-        ]}
-        hasLogo
-        isOpen={isOpen}
-        title={`가격을 제안해보세요\n경매식 중고거래, Offer!`}
-        onClose={closeModal}
+        isOpen={sidebarModal.isOpen}
+        onClose={() => sidebarModal.closeModal()}
       />
+      <LoginModal isOpen={loginModal.isOpen} onClose={loginModal.closeModal} />
     </>
   )
 }

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
 }

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<LoginModal> = {
+  component: LoginModalComponent,
+  title: 'Common/LoginModal'
+}
+
+export default meta
+
+export const Default: StoryObj<LoginModal> = {
+  parameters: {
+    isOpen: true,
+    onClose: () => {
+      action('onChangeTradeStatus')('click')
+    }
+  },
+  render: args => <LoginModalComponent {...args} />
+}

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 (
+    <CommonModal
+      buttons={[
+        <Styled.KaKaoButton
+          key="kakao-button"
+          color="kakao"
+          icon="kakao"
+          size="large"
+          onClick={handleClickLogin}>
+          카카오로 시작하기
+        </Styled.KaKaoButton>
+      ]}
+      hasLogo
+      isOpen={isOpen}
+      title={`가격을 제안해보세요\n경매식 중고거래, Offer!`}
+      onClose={onClose}
+    />
+  )
+}

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
+}

src/components/common/LoginModal/types.ts

@@ -0,0 +1,4 @@
+export type LoginModalProps = {
+  isOpen?: boolean
+  onClose(): void
+}

src/components/common/index.ts

@@ -4,3 +4,4 @@ export * from './Header'
 export * from './AlertModal'
 export * from './Dialog'
 export * from './PostSection'
+export * from './LoginModal'

src/components/home/HomeBanner/index.tsx

@@ -1,8 +1,26 @@
-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 { URL } from '@constants'
+import { useModal } from '@hooks'
 
 const HomeBanner = (): ReactElement => {
+  const router = useRouter()
+  const { isLogin } = useAuth()
+  const loginModal = useModal()
+
+  const handleClickPosting = () => {
+    if (isLogin) {
+      router.push(URL.POST)
+
+      return
+    }
+
+    loginModal.openModal()
+  }
+
   return (
     <>
       <Styled.BannerWrapper>
@@ -11,9 +29,9 @@ const HomeBanner = (): ReactElement => {
             처치곤란한 물건이 있다면?
           </Styled.BannerLeftText1>
           <Styled.BannerLeftText2>Offer에 올려보세요!</Styled.BannerLeftText2>
-          <Link href="/post">
-            <Styled.BannerLeftSellButton>판매하기</Styled.BannerLeftSellButton>
-          </Link>
+          <Styled.BannerLeftSellButton onClick={handleClickPosting}>
+            판매하기
+          </Styled.BannerLeftSellButton>
         </Styled.BannerLeft>
         <Styled.BannerRight>
           <Styled.BannerRightTextWrapper>
@@ -24,6 +42,7 @@ const HomeBanner = (): ReactElement => {
           </Styled.BannerRightTextWrapper>
         </Styled.BannerRight>
       </Styled.BannerWrapper>
+      <LoginModal isOpen={loginModal.isOpen} onClose={loginModal.closeModal} />
     </>
   )
 }

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}