Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 모달 사용시 필요한 액션, prop 추가
Browse files Browse the repository at this point in the history
shinhyojeong committed Aug 19, 2023
1 parent b3fd879 commit e68a05d
Showing 6 changed files with 148 additions and 43 deletions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import type { Meta, Story } from '@storybook/react'
import type { PriceOfferModalProps } from './types'
import { PriceOfferModal } from './index'

export default {
component: PriceOfferModal,
title: 'Product/PriceOfferModal'
} as Meta
} as Meta<PriceOfferModalProps>

const Template: Story = args => <PriceOfferModal {...args} />
const Template: Story<PriceOfferModalProps> = args => (
<PriceOfferModal {...args} />
)

export const Default = Template.bind({})
Default.args = {}
141 changes: 107 additions & 34 deletions src/components/product/PriceOfferModal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Modal, Input, Divider, Radio, Button } from '@offer-ui/react'
import { Modal, Input, Divider, Radio } from '@offer-ui/react'
import type { ReactElement } from 'react'
import { useState } from 'react'
import { Styled } from './styled'
import type { OfferForm, PriceOfferModalProps } from './types'
import { TRADE_METHOD } from '@constants'

const MOCK_CITY = [
@@ -15,7 +17,52 @@ const MOCK_CITY = [
}
]

export const PriceOfferModal = (): ReactElement => {
const initialOfferForm = {
tradeMethod: 0,
tradeLocation: {
city: 0,
country: 0,
town: 0
}
}

export const PriceOfferModal = ({
handleClickOffer
}: PriceOfferModalProps): ReactElement => {
const [offerForm, setOfferForm] = useState<OfferForm>(initialOfferForm)
const isTradeDirect = offerForm.tradeMethod !== 8
const canOffer =
!!offerForm.price &&
!!offerForm.tradeMethod &&
!!offerForm.tradeLocation.city &&
!!offerForm.tradeLocation.country &&
!!offerForm.tradeLocation.town

const handleChangeForm = (
name: 'price' | 'tradeMethod',
value: string
): void => {
const numberValue = Number(value.split(',').join(''))

setOfferForm(prev => ({
...prev,
[name]: numberValue
}))
}

const handleChangeSelectBox = (
name: keyof OfferForm['tradeLocation'],
value: number
): void => {
setOfferForm(prev => ({
...prev,
tradeLocation: {
...prev.tradeLocation,
[name]: value
}
}))
}

return (
<Modal isOpen>
<Styled.Header>
@@ -27,7 +74,12 @@ export const PriceOfferModal = (): ReactElement => {
<Styled.Body>
<Styled.FormItemContainer>
<div>제안 가격</div>
<Input isPrice placeholder="제안할 가격을 적어주세요" />
<Input
isPrice
placeholder="제안할 가격을 적어주세요"
value={offerForm.price}
onChange={(e): void => handleChangeForm('price', e.target.value)}
/>
</Styled.FormItemContainer>
<Divider />
<Styled.FormItemContainer isMainItem>
@@ -36,41 +88,62 @@ export const PriceOfferModal = (): ReactElement => {
direction="horizontal"
formName="trade-method"
items={TRADE_METHOD}
onChange={(): void => {
// do something
}}
/>
</Styled.FormItemContainer>
<Divider />
<Styled.FormItemContainer>
<div>거래 지역</div>
<Styled.LocationSelectBoxWrapper
items={MOCK_CITY}
placeholder="선택"
size="medium"
onChange={(e): void =>
handleChangeForm('tradeMethod', e.target.value)
}
/>
</Styled.FormItemContainer>
<Styled.TradeLocation>
<Styled.FormItemContainer>
<div>시/군/구</div>
<Styled.LocationSelectBoxWrapper
items={MOCK_CITY}
placeholder="선택"
size="medium"
/>
</Styled.FormItemContainer>
<Styled.FormItemContainer>
<div>읍/면/동</div>
<Styled.LocationSelectBoxWrapper
items={MOCK_CITY}
placeholder="선택"
size="medium"
/>
</Styled.FormItemContainer>
</Styled.TradeLocation>
{isTradeDirect && (
<>
<Divider />
<Styled.FormItemContainer>
<div>거래 지역</div>
<Styled.LocationSelectBoxWrapper
items={MOCK_CITY}
placeholder="선택"
size="medium"
value={offerForm.tradeLocation.city}
onChange={(item): void =>
handleChangeSelectBox('city', item.code)
}
/>
</Styled.FormItemContainer>
<Styled.TradeLocation>
<Styled.FormItemContainer>
<div>시/군/구</div>
<Styled.LocationSelectBoxWrapper
items={MOCK_CITY}
placeholder="선택"
size="medium"
value={offerForm.tradeLocation.country}
onChange={(item): void =>
handleChangeSelectBox('country', item.code)
}
/>
</Styled.FormItemContainer>
<Styled.FormItemContainer>
<div>읍/면/동</div>
<Styled.LocationSelectBoxWrapper
items={MOCK_CITY}
placeholder="선택"
size="medium"
value={offerForm.tradeLocation.town}
onChange={(item): void =>
handleChangeSelectBox('town', item.code)
}
/>
</Styled.FormItemContainer>
</Styled.TradeLocation>
</>
)}
</Styled.Body>
<div>
<Button size="large">Offer !</Button>
<Styled.OfferButton
disabled={!canOffer}
size="large"
onClick={(): void => handleClickOffer(offerForm)}>
Offer !
</Styled.OfferButton>
</div>
</Modal>
)
24 changes: 20 additions & 4 deletions src/components/product/PriceOfferModal/styled.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type { SerializedStyles } from '@emotion/react'
import { css } from '@emotion/react'
import styled from '@emotion/styled'
import { SelectBox } from '@offer-ui/react'
import { Button, SelectBox } from '@offer-ui/react'

const Header = styled.div`
text-align: center;
@@ -30,8 +32,15 @@ const FormItemContainer = styled.div<{ isMainItem?: boolean }>`
& > div:first-of-type {
margin-bottom: 8px;
${({ theme, isMainItem }): string =>
isMainItem ? theme.fonts.subtitle01B : theme.fonts.body01R};
${({ theme, isMainItem }): SerializedStyles => css`
margin-bottom: ${isMainItem ? '20px' : '8px'};
${isMainItem ? theme.fonts.subtitle01B : theme.fonts.body01R}
`};
}
label > span {
${({ theme }): string => theme.fonts.body02R};
}
`

@@ -50,6 +59,12 @@ const TradeLocation = styled.div`
}
`

const OfferButton = styled(Button)`
:disabled {
background-color: ${({ theme }): string => theme.colors.grayScale20};
}
`

export const Styled = {
Header,
Title,
@@ -58,5 +73,6 @@ export const Styled = {
Label,
FormItemContainer,
LocationSelectBoxWrapper,
TradeLocation
TradeLocation,
OfferButton
}
13 changes: 13 additions & 0 deletions src/components/product/PriceOfferModal/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export type OfferForm = {
price?: number
tradeMethod: number
tradeLocation: {
city: number
country: number
town: number
}
}

export type PriceOfferModalProps = {
handleClickOffer(offerForm: OfferForm): void
}
2 changes: 1 addition & 1 deletion src/constants/app.ts
Original file line number Diff line number Diff line change
@@ -68,7 +68,7 @@ export const TRADE_METHOD: TradeMethod[] = [
},
{
code: 8,
name: '상관없음'
name: '직거래/택배거래'
}
]

4 changes: 2 additions & 2 deletions src/types/service.ts
Original file line number Diff line number Diff line change
@@ -86,10 +86,10 @@ export type TradeMethodOnDelivery = {
}
export type TradeMethodOnAny = {
code: 8
name: '상관없음'
name: '직거래/택배거래'
}
export type TradeMethodCode = 2 | 4 | 8
export type TradeMethodName = '직거래' | '택배거래' | '상관없음'
export type TradeMethodName = '직거래' | '택배거래' | '직거래/택배거래'
export type TradeMethod =
| TradeMethodOnDirect
| TradeMethodOnDelivery

0 comments on commit e68a05d

Please sign in to comment.