Merge pull request #52 from KUIT-Space/feat#48-pay-home

Feat#48 pay home

.eslintrc.cjs

@@ -39,6 +39,7 @@ module.exports = {
       }
     ],
     "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-unused-vars": [ "warn" ]
   },
   parserOptions: {
     sourceType: "module",

package.json

@@ -15,7 +15,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",
-    "styled-components": "^6.1.11",
+    "react-toastify": "^10.0.5",
+    "styled-components": "^6.1.12",
     "styled-reset": "^4.5.2",
     "vite-plugin-svgr": "^4.2.0"
   },

src/App.tsx

@@ -20,6 +20,10 @@ import VoiceRoomListPage from "@/pages/VoiceRoomPage/VoiceRoomListPage";
 import GlobalStyle from "@/styles/GlobalStyles";
 import { theme } from "@/styles/Theme";
 
+import CompletePay from "./pages/PayPage/CompletePay";
+import CreateRequestPage from "./pages/PayPage/CreateRequestPage";
+import MyRequestPayPage from "./pages/PayPage/MyRequestPayPage";
+import RequestedPayPage from "./pages/PayPage/RequestedPayPage";
 import AccountManage from "./pages/SpacePage/AccountManage";
 import AddSpacePage from "./pages/SpacePage/AddSpacePage";
 import AlarmManage from "./pages/SpacePage/AlarmManage";
@@ -81,35 +85,59 @@ function Layout({ routes_children }: { routes_children: RouteChildren[] }) {
 }
 
 function App() {
-  const routes_children = [
-    { path: "/", element: <HomePage />, hasBottomBar: true },
-    { path: "/voiceroom", element: <VoiceRoomListPage />, hasBottomBar: true },
+  const routes_children_chat = [
     { path: "/chat", element: <ChatPage />, hasBottomBar: true },
     { path: "/chat/:id", element: <ChattingPage /> },
     { path: "/chat/create", element: <ChatCreatePage /> },
+  ];
+
+  const routes_children_pay = [
     { path: "/pay", element: <PayPage />, hasBottomBar: true },
-    { path: "/board", element: <BoardPage />, hasBottomBar: true },
+    { path: "/pay/create", element: <CreateRequestPage />, hasBottomBar: false },
+    { path: "/requestingpay", element: <MyRequestPayPage />, hasBottomBar: false },
+    { path: "/requestingpay/:id", element: <MyRequestPayPage />, hasBottomBar: false },
+    { path: "/requestedpay", element: <RequestedPayPage />, hasBottomBar: false },
+    { path: "/completepay", element: <CompletePay />, hasBottomBar: false },
+  ];
+
+  const routes_children_voice = [
+    { path: "/voiceroom", element: <VoiceRoomListPage />, hasBottomBar: true },
+    { path: "/createvoiceroom", element: <CreateVoiceRoomPage />, hasBottomBar: false },
+    { path: "/joinvoiceroom", element: <JoinVoiceRoomPage />, hasBottombar: false },
+    { path: "/editvoiceroom", element: <EditVoiceRoomPage />, hasBottombar: false },
+  ];
+
+  const routes_children_space = [
     { path: "/space", element: <SpacePage /> },
     { path: "/space/addspace", element: <AddSpacePage /> },
     { path: "/space/spaceoption", element: <SpaceOption /> },
     { path: "/space/spaceoption/accountmanage", element: <AccountManage /> },
     { path: "/space/spaceoption/profilemanage", element: <ProfileManage /> },
     { path: "/space/spaceoption/alarmmanage", element: <AlarmManage /> },
-    { path: "/createvoiceroom", element: <CreateVoiceRoomPage />, hasBottomBar: false },
-    { path: "/joinvoiceroom", element: <JoinVoiceRoomPage />, hasBottombar: false },
-    { path: "/editvoiceroom", element: <EditVoiceRoomPage />, hasBottombar: false },
+  ];
+
+  const routes_children_login = [
     { path: "/login", element: <LoginPage />, hasBottombar: false },
     { path: "/signup", element: <SignUpPage />, hasBottombar: false },
   ];
 
+  const routes_children = [
+    { path: "/", element: <HomePage />, hasBottomBar: true },
+    { path: "/board", element: <BoardPage />, hasBottomBar: true },
+    ...routes_children_chat,
+    ...routes_children_pay,
+    ...routes_children_voice,
+    ...routes_children_space,
+    ...routes_children_login,
+  ];
+
   const routes = [
     {
       element: <Layout routes_children={routes_children} />,
       children: routes_children,
     },
   ];
   const router = createBrowserRouter(routes, { basename: "/KUIT-Space-front/" });
-
   return <RouterProvider router={router} />;
 }
 

src/pages/PayPage/CompleteCreatePay.tsx

@@ -0,0 +1,32 @@
+import { BottomBtn } from "@/components/BottomBtn";
+import Check from "@/assets/PayPage/check.svg";
+import * as s from "@/pages/PayPage/PayPage.styled";
+import { useNavigate } from "react-router-dom";
+
+const CompleteCreatePay = () => {
+  const navigator = useNavigate();
+  return (
+    <>
+      {/* 여기에 지금 height 넣어줘야 */}
+      <s.ContainerDiv>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <img src={Check}></img>
+        </div>
+        <s.LargeTxt style={{ flex: 1, textAlign: "center" }}>
+          <p>정산요청을</p>
+          <p>완료했어요!</p>
+        </s.LargeTxt>
+
+        <BottomBtn
+          onClick={() => {
+            navigator("/pay");
+          }}
+        >
+          정산 홈으로
+        </BottomBtn>
+      </s.ContainerDiv>
+    </>
+  );
+};
+
+export default CompleteCreatePay;

src/pages/PayPage/CompletePay.tsx

@@ -0,0 +1,51 @@
+import { BottomBtn } from "@/components/BottomBtn";
+import Check from "@/assets/PayPage/check.svg";
+import * as s from "@/pages/PayPage/PayPage.styled";
+import { useNavigate } from "react-router-dom";
+
+export type CompletePayType = {
+  money?: number;
+  account?: string;
+};
+
+const CompletePay = ({ money, account }: CompletePayType) => {
+  const navigator = useNavigate();
+  console.log(money);
+  console.log(account);
+  return (
+    <>
+      {/* 여기에 지금 height 넣어줘야 */}
+      <s.ContainerDiv>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <img src={Check}></img>
+        </div>
+        <s.LargeTxt style={{ flex: 1, textAlign: "center" }}>
+          <p>요청받은 정산을</p>
+          <p>완료하였어요!</p>
+        </s.LargeTxt>
+        <s.RoundDiv>
+          <s.ColumnFlexDiv>
+            <s.RowFlexDiv>
+              <div>정산금액</div>
+              <div>15000원</div>
+            </s.RowFlexDiv>
+            <s.RowFlexDiv>
+              <div>입금 계좌</div>
+              <div>국민 1234-14455-919293</div>
+            </s.RowFlexDiv>
+          </s.ColumnFlexDiv>
+        </s.RoundDiv>
+
+        <BottomBtn
+          onClick={() => {
+            navigator("/pay");
+          }}
+        >
+          정산 홈으로
+        </BottomBtn>
+      </s.ContainerDiv>
+    </>
+  );
+};
+
+export default CompletePay;

src/pages/PayPage/CreatePayComponents.tsx

@@ -0,0 +1,56 @@
+import CheckBox from "@/components/CheckBox";
+import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled";
+import ReactImg from "@/assets/react.svg";
+import { useState } from "react";
+
+import * as s from "@/pages/PayPage/PayPage.styled";
+interface payChatDivtype {
+  img: string;
+  name: string;
+  cnt: number;
+}
+
+const PayChatMemberDiv = () => {
+  return (
+    <s.RowFlexDiv style={{ alignItems: "center" }}>
+      <img style={{ width: "2.5rem", height: "2.5rem", marginLeft: "1.875rem" }} src={ReactImg} />
+      <span className="name" style={{ marginLeft: "0.75rem" }}>
+        시험
+      </span>
+      <CheckBox></CheckBox>
+    </s.RowFlexDiv>
+  );
+};
+export const PayChatDiv = ({ img, name, cnt }: payChatDivtype) => {
+  const [flag, setFlag] = useState(false);
+  const controlFlag = () => {
+    setFlag(!flag);
+  };
+  return (
+    <s.ColumnFlexDiv>
+      <Member>
+        <section>
+          <img src={ReactImg} />
+          <span className="name">{name}</span>
+          <s.CountText className="count">{cnt}</s.CountText>
+        </section>
+        {flag ? (
+          <CheckBox
+            checked={true}
+            onClick={() => {
+              controlFlag();
+            }}
+          ></CheckBox>
+        ) : (
+          <CheckBox
+            checked={false}
+            onClick={() => {
+              controlFlag();
+            }}
+          ></CheckBox>
+        )}
+      </Member>
+      <PayChatMemberDiv></PayChatMemberDiv>
+    </s.ColumnFlexDiv>
+  );
+};