결제, 결제 완료 페이지

src/components/common/Infromation.tsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+interface InfromationProps {
+  title: string[];
+  content: string[];
+  color: string[];
+}
+
+export default function Infromation({ title, content, color }: InfromationProps) {
+  return (
+    <>
+      {title.map((value, index) => {
+        return (
+          <InfromationContainer key={index} color={color[index]}>
+            <h1>{value}</h1>
+            <p>{content[index]}</p>
+          </InfromationContainer>
+        );
+      })}
+    </>
+  );
+}
+
+const InfromationContainer = styled.section<{ color: string }>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 3.2rem;
+
+  h1 {
+    color: ${({ theme }) => theme.colors.light_green};
+    font: ${({ theme }) => theme.fonts.M_17};
+  }
+
+  p {
+    color: ${({ color }) => (color === 'gray' ? '#9BA3A2' : color === 'blue' ? '#3674FF' : '#2A3E3B')};
+    font: ${({ theme }) => theme.fonts.M_17};
+  }
+`;

src/components/common/Layout.tsx

@@ -17,8 +17,10 @@ export default function Layout({ children }: LayoutProps) {
     <Container>
       {/* 헤더: 확인된 헤더 종류는 2가지, 라우터 체크해서 동적으로 넣어주기 */}
       {location.pathname === '/' && <MainHeader />}
-      {location.pathname.includes('/post') && <FuncHeader title="거래글" leftFunc rightFunc="more" />}
-      {location.pathname.includes('/pay') && <FuncHeader title="저스트페이 안전결제" leftFunc={true} />}
+      {location.pathname.includes('/done') && <FuncHeader rightFunc="close" />}
+      {location.pathname.match(/pay(?!.*done)/) && <FuncHeader title="저스트페이 안전결제" leftFunc={true} />}
+
+      <BottomLine />
       {/* 메인 컨텐츠 */}
       {children}
     </Container>
@@ -32,3 +34,9 @@ const Container = styled.section`
   overflow: scroll;
   padding: 0 16px;
 `;
+
+const BottomLine = styled.div`
+  height: 0.5px;
+  background-color: ${({ theme }) => theme.colors.light_green};
+  margin: 0 -16px;
+`;

src/components/pay/Margin.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface MarginProps {
+  height: number;
+}
+
+export default function Margin({ height }: MarginProps) {
+  return <MarginContainer height={height}></MarginContainer>;
+}
+
+const MarginContainer = styled.section<{ height: number }>`
+  height: ${({ height }) => `${height}px`};
+`;

src/components/pay/PayWarning.tsx

@@ -1,8 +1,10 @@
 import FullWidthButton from 'components/common/FullWidthButton';
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 export default function PayWarning() {
+  const navigate = useNavigate();
   return (
     <PayWarningContainer>
       <h1>결제 전 반드시 읽어주세요!</h1>
@@ -17,7 +19,7 @@ export default function PayWarning() {
       <FullWidthButton
         text={'결제하기'}
         onClick={() => {
-          alert('결제완료 창 이동');
+          navigate('/pay/done');
         }}
         color={'black'}
       />
@@ -30,7 +32,7 @@ const PayWarningContainer = styled.section`
   flex-direction: column;
   padding: 2.4rem;
   background-color: ${({ theme }) => theme.colors.background};
-  margin: 0px -16px 3.2rem -16px;
+  margin: 0px -16px 0 -16px;
 
   h1 {
     color: ${({ theme }) => theme.colors.middle_green};

src/pages/Pay.tsx → src/pages/pay/Pay.tsx

@@ -9,6 +9,7 @@ import Title from 'components/pay/Title';
 import InputButton from 'components/common/InputButton';
 import Comment from 'components/common/Comment';
 import WarningMessage from 'components/pay/WarningMessage';
+import Margin from 'components/pay/Margin';
 
 export default function Pay() {
   const dummyPost = {
@@ -31,6 +32,7 @@ export default function Pay() {
 
   return (
     <Layout>
+      <Margin height={24} />
       <PostInformation
         postThumbnail={dummyPost.postThumbnail}
         postTitle={dummyPost.postTitle}

src/pages/pay/PayDone.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from 'styled-components';
+import Layout from 'components/common/Layout';
+import PostInformation from 'components/PostInformation';
+import AddressInformation from 'components/common/AddressInformation';
+import { ReactComponent as CompleteIcon } from '../../assets/icon/Complete.svg';
+import FullWidthButton from 'components/common/FullWidthButton';
+import Title from 'components/pay/Title';
+import InputButton from 'components/common/InputButton';
+import Comment from 'components/common/Comment';
+import WarningMessage from 'components/pay/WarningMessage';
+import Infromation from 'components/common/Infromation';
+import Margin from 'components/pay/Margin';
+
+export default function PayDone() {
+  const dummyPost = {
+    postThumbnail:
+      'https://github.com/Team-JustPay/JustPay-Release-Client/assets/62867581/6735d47e-d79d-425d-9ed0-96a58ece02bb',
+    postTitle: 'NCTDREAM Best Friend Ever 포카 양도합니다 ',
+    postWriter: {
+      userThumbnail:
+        'https://github.com/Team-JustPay/JustPay-Release-Client/assets/62867581/0debb408-1969-4372-9863-5f0ae7082f4f',
+      userName: '거래계',
+      userTwitterId: '@music_stars',
+    },
+    // postDate: '23.08.03', // 4~ 뷰에서 사용
+  };
+
+  const dummyComment = [
+    { userName: '일상다반사', content: '고글 제노 포카 구매가능한가요?', index: 0 },
+    { userName: '거래계', content: '아직 구매가능합니다!', index: 1 },
+  ];
+
+  return (
+    <Layout>
+      <MessageContainer>
+        <CompleteIcon />
+        <h1>안전하게 주문이 완료됐습니다!</h1>
+        <p>
+          배송 현황은 제시 및 구매내역에서 확인 가능합니다 <br /> 홈 혹은 프로필의 ‘우측 상단 메뉴’
+        </p>
+      </MessageContainer>
+      <PostInformation
+        postThumbnail={dummyPost.postThumbnail}
+        postTitle={dummyPost.postTitle}
+        postWriter={dummyPost.postWriter}
+      />
+      <Comment comment={dummyComment} />
+      <Margin height={24} />
+      <Title color={'black'} content={'결제 정보'} />
+      <Infromation
+        title={['판매자 정산 상태', '상품 금액']}
+        content={['정산 전(배송 전)', '48000원']}
+        color={['blue', 'black']}
+      />
+      <Title color={'black'} content={'운송장 정보'} />
+      <Infromation
+        title={['택배 방법', '운송장 번호']}
+        content={['우체국 준등기', '판매자가 입력하기 전입니다.']}
+        color={['gray', 'gray']}
+      />
+      <BorderLine />
+      <Title color={'black'} content={'받는 사람'} />
+      <AddressInformation
+        name={'송우영'}
+        phone={'01050312685'}
+        address={'16295, 경기도 수원시 장안구 경수대로 976번길 22(수원 한일타운)'}
+      />
+
+      <Title color={'black'} content={'환불 계좌'} />
+      <WarningMessage color={'gray'} text={'판매자가 운송장 입력을 10일간하지 않은 경우 환불됩니다'} />
+      <FullWidthButton text={'송우영 | 우리은행 1002955768226'} color={'gray'} />
+      <Title color={'black'} content={'배송 메시지 (선택)'} />
+      <InputButton text={'배송 메시지 내용을 적으세요'} />
+      <Margin height={64} />
+    </Layout>
+  );
+}
+
+const MessageContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-top: 32px;
+  margin-bottom: 50px;
+  h1 {
+    color: ${({ theme }) => theme.colors.balck_green};
+    font: ${({ theme }) => theme.fonts.B_22};
+    margin-top: 22px;
+    margin-bottom: 8px;
+  }
+
+  p {
+    color: ${({ theme }) => theme.colors.light_green};
+    font: ${({ theme }) => theme.fonts.R_14};
+    text-align: center;
+  }
+`;
+
+const BorderLine = styled.div`
+  height: 16px;
+  background-color: ${({ theme }) => theme.colors.background};
+  margin: 16px -16px 3.2rem -16px;
+`;

src/pages/routes.tsx

@@ -3,17 +3,19 @@ import { lazy, Suspense } from 'react';
 import { BrowserRouter, Routes as PageRoutes, Route as PageRoute } from 'react-router-dom';
 
 const HomePage = lazy(() => import('pages/Home'));
-const PayPage = lazy(() => import('pages/Pay'));
 const PostPage = lazy(() => import('pages/Post'));
+const PayPage = lazy(() => import('pages/pay/Pay'));
+const PayDonePage = lazy(() => import('pages/pay/PayDone'));
 
 export default function Routes() {
   return (
     <BrowserRouter>
       <Suspense fallback={<div>Loading...</div>}>
         <PageRoutes>
           <PageRoute path="/" element={<HomePage />} />
-          <PageRoute path="/pay" element={<PayPage />} />
           <PageRoute path="/post/:postSeq" element={<PostPage />} />
+          <PageRoute path="/pay" element={<PayPage />} />
+          <PageRoute path="/pay/done" element={<PayDonePage />} />
         </PageRoutes>
       </Suspense>
     </BrowserRouter>