diff --git a/public/assets/images/payment/paymentComplete.svg b/public/assets/images/payment/paymentComplete.svg
new file mode 100644
index 0000000..3c56895
--- /dev/null
+++ b/public/assets/images/payment/paymentComplete.svg
@@ -0,0 +1,16 @@
+
diff --git a/public/assets/images/payment/ticketCount.svg b/public/assets/images/payment/ticketCount.svg
new file mode 100644
index 0000000..86dafe4
--- /dev/null
+++ b/public/assets/images/payment/ticketCount.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/Router.tsx b/src/Router.tsx
index 86c9428..61691c2 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -10,6 +10,7 @@ import MultipleChoice from './pages/recommendation/MultipleChoice';
import Subjective from './pages/recommendation/Subjective';
import Contest from './pages/contest/Contest';
import CompetitionList from './pages/competitionList/CompetitionList';
+import PaymentComplete from './pages/payment/PaymentComplete';
function Router() {
return (
@@ -25,9 +26,13 @@ function Router() {
} />
} />
- }/>
- 팀 생성페이지입니다}/>
+ } />
+ 팀 생성페이지입니다}
+ />
} />
+ } />
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
new file mode 100644
index 0000000..db9b2e3
--- /dev/null
+++ b/src/components/common/Button.tsx
@@ -0,0 +1,25 @@
+import { styled } from 'styled-components';
+
+interface ButtonProps {
+ children: React.ReactNode;
+ onClick?: () => void;
+}
+
+const Button = ({ children, onClick }: ButtonProps) => {
+ return {children};
+};
+
+export default Button;
+
+const ButtonBox = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background: ${({ theme }) => theme.colors.primary60};
+ color: ${({ theme }) => theme.colors.white};
+ ${({ theme }) => theme.fonts.buttonL};
+ border-radius: 36px;
+ padding: 1.4rem 7.5rem;
+ cursor: pointer;
+`;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 16f6dc3..bc1101c 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -21,7 +21,10 @@ const Header = () => {
navigate('/')} />
-
+ navigate('/list')}
+ >
공모전 리스트
diff --git a/src/components/payment/Complete.tsx b/src/components/payment/Complete.tsx
new file mode 100644
index 0000000..6b95caf
--- /dev/null
+++ b/src/components/payment/Complete.tsx
@@ -0,0 +1,55 @@
+import { styled } from 'styled-components';
+import PossessionTicket from './PossessionTicket';
+import Button from '../common/Button';
+import { useNavigate } from 'react-router-dom';
+
+const Complete = () => {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+ 티켓 충전이 완료되었어요!
+ 티켓으로 한 줄 추천사를 열람하고,
+ Wanteam에서 딱 맞는 팀원을 한번에 찾아보세요.
+
+
+
+
+ );
+};
+
+export default Complete;
+
+const CompleteContainer = styled.div`
+ padding: 5rem;
+ border-radius: 2rem;
+ border: 1px solid ${({ theme }) => theme.colors.gray20};
+ background: ${({ theme }) => theme.colors.white};
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4rem;
+ margin: 4rem 0;
+`;
+
+const CompleteImage = styled.img`
+ width: 20rem;
+ height: 12.6rem;
+`;
+
+const CompleteText = styled.div`
+ text-align: center;
+ h1 {
+ ${({ theme }) => theme.fonts.heading2_1};
+ margin-bottom: 1rem;
+ }
+ h2 {
+ ${({ theme }) => theme.fonts.bodyXL};
+ }
+`;
diff --git a/src/components/payment/PossessionTicket.tsx b/src/components/payment/PossessionTicket.tsx
new file mode 100644
index 0000000..23c60c8
--- /dev/null
+++ b/src/components/payment/PossessionTicket.tsx
@@ -0,0 +1,50 @@
+import { styled } from 'styled-components';
+import { useState } from 'react';
+
+const PossessionTicket = () => {
+ const [ticketCount, setTicketCount] = useState(0);
+ setTicketCount; // 임시
+
+ return (
+
+ 충전 후 보유 티켓|
+
+
+ {ticketCount}장
+
+
+ );
+};
+
+export default PossessionTicket;
+
+const PossessionTicketContainer = styled.div`
+ background: ${({ theme }) => theme.colors.primary20};
+ border-radius: 13px;
+ padding: 1rem 3rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ ${({ theme }) => theme.fonts.bodyM};
+ color: ${({ theme }) => theme.colors.gray40};
+`;
+
+const TicketLeft = styled.div`
+ ${({ theme }) => theme.fonts.heading5};
+ color: ${({ theme }) => theme.colors.gray90};
+`;
+
+const TicketRight = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ ${({ theme }) => theme.fonts.subtitleXL};
+ color: ${({ theme }) => theme.colors.primary60};
+`;
+
+const TicketImage = styled.img`
+ width: 3.3rem;
+ height: 1.7rem;
+`;
diff --git a/src/pages/payment/PaymentComplete.tsx b/src/pages/payment/PaymentComplete.tsx
new file mode 100644
index 0000000..89b5932
--- /dev/null
+++ b/src/pages/payment/PaymentComplete.tsx
@@ -0,0 +1,24 @@
+import { styled } from 'styled-components';
+import Complete from '../../components/payment/Complete';
+
+const PaymentComplete = () => {
+ return (
+
+
+
+ );
+};
+
+export default PaymentComplete;
+
+const PaymentCompleteContainer = styled.div`
+ margin: 0 auto;
+
+ @media ${({ theme }) => theme.devices.mobile} {
+ }
+ @media ${({ theme }) => theme.devices.tablet} {
+ }
+ @media ${({ theme }) => theme.devices.desktop} {
+ width: 64.6rem;
+ }
+`;