Skip to content

Commit

Permalink
Merge pull request #331 from sharemindteam/feat/beta_payment_page_326
Browse files Browse the repository at this point in the history
[Feat] 베타 테스트 안내 페이지 레이아웃 구현
  • Loading branch information
rmdnps10 authored Jul 1, 2024
2 parents 58a579f + 9770081 commit 082c85a
Showing 1 changed file with 31 additions and 16 deletions.
47 changes: 31 additions & 16 deletions src/pages/Buyer/BuyerFinishPayment.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { HeaderWrapper } from 'components/Buyer/Common/Header';
import { useNavigate } from 'react-router-dom';
import { Green, Grey1, LightGreen } from 'styles/color';
import { Green, Grey1 } from 'styles/color';
import { Body2, Heading } from 'styles/font';
import { ReactComponent as SendGraphic } from 'assets/icons/graphic-send.svg';
import { Button } from 'components/Common/Button';
import styled from 'styled-components';

import { Space } from 'components/Common/Space';
import { APP_WIDTH } from 'styles/AppStyle';
import { Flex } from 'components/Common/Flex';

//
//
Expand All @@ -23,34 +24,41 @@ function BuyerFinishPayment() {
return (
<Wrapper>
<HeaderWrapper>
<Heading color={Grey1}>상담 신청완료</Heading>
<Heading color={Grey1}>결제 신청 완료</Heading>
</HeaderWrapper>
<div className="body">
<SendGraphic />
<Space height="6.5rem" />
<Heading color={Green} margin="0 0 2.2rem 0">
상담 신청 완료
결제 신청 완료!
</Heading>
<Flex direction="column" style={{ maxWidth: '28rem' }}>
<Body2 color={Grey1}>
셰어마인드는 현재 <GreenTypography>베타테스트 중</GreenTypography>
이에요.
</Body2>
<Body2 color={Grey1} style={{ whiteSpace: 'pre-line' }}>
{'모든 결제를 수동으로 승인하고 있어\n시간이 걸릴 수 있어요.'}
</Body2>
<Body2
color={Grey1}
style={{ whiteSpace: 'pre-wrap', wordBreak: 'keep-all' }}
>
결제가 완료되지 않는다면{' '}
<GreenTypography>홈 화면 하단의 고객센터 버튼</GreenTypography>
눌러 문의해주세요.
</Body2>
</Flex>
</div>
<div className="buttons">
<div className="button">
<Button
text="홈으로 가기"
height="5.2rem"
width="45%"
color={Green}
backgroundColor={LightGreen}
width="100%"
onClick={() => {
navigate('/');
}}
/>
<Button
text="상담글 작성하기"
height="5.2rem"
width="45%"
onClick={() => {
navigate('/consult?type=open-consult');
}}
/>
</div>
</Wrapper>
);
Expand All @@ -70,17 +78,24 @@ const Wrapper = styled.div`
flex-direction: column;
align-items: center;
}
.buttons {
.button {
position: fixed;
justify-content: center;
bottom: 1rem;
width: 100%;
@media (min-width: 768px) {
width: ${APP_WIDTH};
}
display: flex;
gap: 1.5rem;
padding: 0 2rem;
box-sizing: border-box;
}
`;

const GreenTypography = styled.span`
color: ${Green};
`;

export default BuyerFinishPayment;

0 comments on commit 082c85a

Please sign in to comment.