Merge pull request #24 from Kusitms-28th-Meetup-D/feat/23

[feat] 결제 완료 페이지 제작

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() {
           <Route path="multipleChoice" element={<MultipleChoice />} />
         </Route>
         <Route path="/profile/:userId" element={<Profile />} />
-        <Route path='/list/:postId' element={<Contest/>}/>
-        <Route path='/list/:postId/:teamId' element={<div>팀 생성페이지입니다</div>}/>
+        <Route path="/list/:postId" element={<Contest />} />
+        <Route
+          path="/list/:postId/:teamId"
+          element={<div>팀 생성페이지입니다</div>}
+        />
         <Route path="/list" element={<CompetitionList />} />
+        <Route path="/payment/complete" element={<PaymentComplete />} />
       </Routes>
       <Footer />
     </BrowserRouter>

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 <ButtonBox onClick={onClick}>{children}</ButtonBox>;
+};
+
+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;
+`;

src/components/header/Header.tsx

@@ -21,7 +21,10 @@ const Header = () => {
     <HeaderLayout>
       <Logo src={logoSrc} onClick={() => navigate('/')} />
       <HeaderContainer>
-        <HeaderItem $isSelected={headerSelectedIndex === Headers.list}>
+        <HeaderItem
+          $isSelected={headerSelectedIndex === Headers.list}
+          onClick={() => navigate('/list')}
+        >
           <HeaderStar src={starSrc} />
           공모전 리스트
         </HeaderItem>

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 (
+    <CompleteContainer>
+      <CompleteImage
+        src="/assets/images/payment/paymentComplete.svg"
+        alt="결제완료"
+      />
+      <CompleteText>
+        <h1>티켓 충전이 완료되었어요!</h1>
+        <h2>티켓으로 한 줄 추천사를 열람하고,</h2>
+        <h2>Wanteam에서 딱 맞는 팀원을 한번에 찾아보세요.</h2>
+      </CompleteText>
+      <PossessionTicket />
+      <Button onClick={() => navigate(-1)}>닫기</Button>
+    </CompleteContainer>
+  );
+};
+
+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};
+  }
+`;

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 (
+    <PossessionTicketContainer>
+      <TicketLeft>충전 후 보유 티켓</TicketLeft>|
+      <TicketRight>
+        <TicketImage src="/assets/images/payment/ticketCount.svg" />
+        {ticketCount}장
+      </TicketRight>
+    </PossessionTicketContainer>
+  );
+};
+
+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;
+`;

src/pages/payment/PaymentComplete.tsx

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components';
+import Complete from '../../components/payment/Complete';
+
+const PaymentComplete = () => {
+  return (
+    <PaymentCompleteContainer>
+      <Complete />
+    </PaymentCompleteContainer>
+  );
+};
+
+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;
+  }
+`;