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.
design: 모달 반응형 대응
Browse files Browse the repository at this point in the history
shinhyojeong committed Aug 20, 2023
1 parent 23c79ea commit 5ee81f9
Showing 3 changed files with 41 additions and 9 deletions.
11 changes: 7 additions & 4 deletions src/components/product/PriceOfferModal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Modal, Input, Divider, Radio } from '@offer-ui/react'
import { Input, Divider, Radio, IconButton } from '@offer-ui/react'
import type { ReactElement } from 'react'
import { useState } from 'react'
import { Styled } from './styled'
@@ -65,8 +65,11 @@ export const PriceOfferModal = ({
}

return (
<Modal {...props}>
<Styled.PriceOfferModal {...props}>
<Styled.Header>
<Styled.CloseIconWrapper>
<IconButton color="grayScale30" icon="close" size={24} />
</Styled.CloseIconWrapper>
<Styled.Title>가격을 제안해볼까요?</Styled.Title>
<Styled.Description>
가격이 마음에 든다면, 연락이 올거에요!
@@ -142,10 +145,10 @@ export const PriceOfferModal = ({
<Styled.OfferButton
disabled={!canOffer}
size="large"
onClick={(): void => handleClickOffer(offerForm)}>
onClick={(): void => handleClickOffer?.(offerForm)}>
Offer !
</Styled.OfferButton>
</div>
</Modal>
</Styled.PriceOfferModal>
)
}
35 changes: 32 additions & 3 deletions src/components/product/PriceOfferModal/styled.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,35 @@
import type { SerializedStyles } from '@emotion/react'
import { css } from '@emotion/react'
import styled from '@emotion/styled'
import { Button, SelectBox } from '@offer-ui/react'
import { Button, SelectBox, Modal } from '@offer-ui/react'

const PriceOfferModal = styled(Modal)`
width: 400px;
${({ theme }): SerializedStyles => css`
${theme.mediaQuery.tablet} {
width: 320px;
}
${theme.mediaQuery.mobile} {
width: 100vw;
height: 100vh;
}
`}
`

const Header = styled.div`
text-align: center;
`

const CloseIconWrapper = styled.div`
display: flex;
justify-content: end;
width: 100%;
margin-bottom: 12px;
`

const Title = styled.div`
${({ theme }): string => theme.fonts.headline01B}
`
@@ -39,8 +62,12 @@ const FormItemContainer = styled.div<{ isMainItem?: boolean }>`
`};
}
label > span {
${({ theme }): string => theme.fonts.body02R};
form {
flex-wrap: wrap;
label > span {
${({ theme }): string => theme.fonts.body02R};
}
}
`

@@ -66,7 +93,9 @@ const OfferButton = styled(Button)`
`

export const Styled = {
PriceOfferModal,
Header,
CloseIconWrapper,
Title,
Description,
Body,
4 changes: 2 additions & 2 deletions src/components/product/PriceOfferModal/types.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,6 @@ export type OfferForm = {
}
}

export type PriceOfferModalProps = ModalProps & {
handleClickOffer(offerForm: OfferForm): void
export type PriceOfferModalProps = Omit<ModalProps, 'children'> & {
handleClickOffer?(offerForm: OfferForm): void
}

0 comments on commit 5ee81f9

Please sign in to comment.