diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 9fb6f67..3df9200 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -39,6 +39,7 @@ module.exports = { } ], "react/react-in-jsx-scope": "off", + "@typescript-eslint/no-unused-vars": [ "warn" ] }, parserOptions: { sourceType: "module", diff --git a/package-lock.json b/package-lock.json index 80fe79f..46d6585 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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" }, @@ -2294,6 +2295,14 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4816,6 +4825,18 @@ "react-dom": ">=16.8" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", @@ -5214,9 +5235,9 @@ } }, "node_modules/styled-components": { - "version": "6.1.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", - "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "version": "6.1.12", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz", + "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==", "dependencies": { "@emotion/is-prop-valid": "1.2.2", "@emotion/unitless": "0.8.1", diff --git a/package.json b/package.json index 7b1a938..a05de10 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.tsx b/src/App.tsx index 170717d..dd738e2 100644 --- a/src/App.tsx +++ b/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,27 +85,52 @@ function Layout({ routes_children }: { routes_children: RouteChildren[] }) { } function App() { - const routes_children = [ - { path: "/", element: , hasBottomBar: true }, - { path: "/voiceroom", element: , hasBottomBar: true }, + const routes_children_chat = [ { path: "/chat", element: , hasBottomBar: true }, { path: "/chat/:id", element: }, { path: "/chat/create", element: }, + ]; + + const routes_children_pay = [ { path: "/pay", element: , hasBottomBar: true }, - { path: "/board", element: , hasBottomBar: true }, + { path: "/pay/create", element: , hasBottomBar: false }, + { path: "/requestingpay", element: , hasBottomBar: false }, + { path: "/requestingpay/:id", element: , hasBottomBar: false }, + { path: "/requestedpay", element: , hasBottomBar: false }, + { path: "/completepay", element: , hasBottomBar: false }, + ]; + + const routes_children_voice = [ + { path: "/voiceroom", element: , hasBottomBar: true }, + { path: "/createvoiceroom", element: , hasBottomBar: false }, + { path: "/joinvoiceroom", element: , hasBottombar: false }, + { path: "/editvoiceroom", element: , hasBottombar: false }, + ]; + + const routes_children_space = [ { path: "/space", element: }, { path: "/space/addspace", element: }, { path: "/space/spaceoption", element: }, { path: "/space/spaceoption/accountmanage", element: }, { path: "/space/spaceoption/profilemanage", element: }, { path: "/space/spaceoption/alarmmanage", element: }, - { path: "/createvoiceroom", element: , hasBottomBar: false }, - { path: "/joinvoiceroom", element: , hasBottombar: false }, - { path: "/editvoiceroom", element: , hasBottombar: false }, + ]; + + const routes_children_login = [ { path: "/login", element: , hasBottombar: false }, { path: "/signup", element: , hasBottombar: false }, ]; + const routes_children = [ + { path: "/", element: , hasBottomBar: true }, + { path: "/board", element: , hasBottomBar: true }, + ...routes_children_chat, + ...routes_children_pay, + ...routes_children_voice, + ...routes_children_space, + ...routes_children_login, + ]; + const routes = [ { element: , @@ -109,7 +138,6 @@ function App() { }, ]; const router = createBrowserRouter(routes, { basename: "/KUIT-Space-front/" }); - return ; } diff --git a/src/assets/PayPage/arrow_right.svg b/src/assets/PayPage/arrow_right.svg new file mode 100644 index 0000000..fd990be --- /dev/null +++ b/src/assets/PayPage/arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/PayPage/bell.svg b/src/assets/PayPage/bell.svg new file mode 100644 index 0000000..52af7e8 --- /dev/null +++ b/src/assets/PayPage/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/PayPage/check.svg b/src/assets/PayPage/check.svg new file mode 100644 index 0000000..1ac18ed --- /dev/null +++ b/src/assets/PayPage/check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/PayPage/search_icon.svg b/src/assets/PayPage/search_icon.svg new file mode 100644 index 0000000..4a16a85 --- /dev/null +++ b/src/assets/PayPage/search_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/PayPage/test_bank.svg b/src/assets/PayPage/test_bank.svg new file mode 100644 index 0000000..7088b45 --- /dev/null +++ b/src/assets/PayPage/test_bank.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/PayPage/CompleteCreatePay.tsx b/src/pages/PayPage/CompleteCreatePay.tsx new file mode 100644 index 0000000..64e841a --- /dev/null +++ b/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 넣어줘야 */} + +
+ +
+ +

정산요청을

+

완료했어요!

+ + + { + navigator("/pay"); + }} + > + 정산 홈으로 + + + + ); +}; + +export default CompleteCreatePay; diff --git a/src/pages/PayPage/CompletePay.tsx b/src/pages/PayPage/CompletePay.tsx new file mode 100644 index 0000000..bec8b48 --- /dev/null +++ b/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 넣어줘야 */} + +
+ +
+ +

요청받은 정산을

+

완료하였어요!

+ + + + +
정산금액
+
15000원
+ + +
입금 계좌
+
국민 1234-14455-919293
+ + + + + { + navigator("/pay"); + }} + > + 정산 홈으로 + + + + ); +}; + +export default CompletePay; diff --git a/src/pages/PayPage/CreatePayComponents.tsx b/src/pages/PayPage/CreatePayComponents.tsx new file mode 100644 index 0000000..766c6c2 --- /dev/null +++ b/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 ( + + + + 시험 + + + + ); +}; +export const PayChatDiv = ({ img, name, cnt }: payChatDivtype) => { + const [flag, setFlag] = useState(false); + const controlFlag = () => { + setFlag(!flag); + }; + return ( + + +
+ + {name} + {cnt} +
+ {flag ? ( + { + controlFlag(); + }} + > + ) : ( + { + controlFlag(); + }} + > + )} + + + + ); +}; diff --git a/src/pages/PayPage/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx new file mode 100644 index 0000000..82cff27 --- /dev/null +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -0,0 +1,187 @@ +import TopBarText, { LeftEnum } from "@/components/TopBarText"; +import * as s from "@/pages/PayPage/PayPage.styled"; +import Kookmin from "@/assets/PayPage/test_bank.svg"; +import { BottomBtn } from "@/components/BottomBtn"; +import { useState } from "react"; +import CompletePay from "./CompletePay"; +import CompleteCreatePay from "./CompleteCreatePay"; +import CheckBox from "@/components/CheckBox"; +import { Member } from "../ChatPage/ChatCreatePage/ChatCreatePage.styled"; +import ReactImg from "@/assets/react.svg"; +import { PayChatDiv } from "./CreatePayComponents"; +import SearchIcon from "@/assets/PayPage/search_icon.svg"; + +const RecentAccountDiv = () => { + return ( + + + + 국민은행 + 123-1234-12345 + + + ); +}; + +type NextPageType = { + nextPage: Function; +}; +const CreateRequestPage1 = ({ nextPage }: NextPageType) => { + return ( + <> + + +
+ 정산받을 계좌를 입력해주세요 +
+
+ + + + 국민은행 + 신한은행 + +
+
+ 최근 정산받은 계좌 + + + +
+ + nextPage()}>다음으로 + + ); +}; +const CreateRequestPage2 = ({ nextPage }: NextPageType) => { + const [tabIndex, setTabIndex] = useState(0); + const [search, setSearch] = useState(""); + + const onKeywordChange = (e: React.ChangeEvent) => { + console.log(search); + setSearch(e.target.value); + }; + + const selectMenuHandler = (index: number) => { + setTabIndex(index); + console.log(index); + }; + const menuArr = [ + { name: "채팅방", content: "Tab menu ONE" }, + { name: "멤버", content: "Tab menu TWO" }, + ]; + const dataArr = [ + { image: "aa", name: "박규환", amount: "15000원", chk: true }, + { image: "aa", name: "박규환", amount: "15000원", chk: true }, + ]; + const chatroomArr = [ + { img: "aa", name: "GreenJoa 방", cnt: 37 }, + { img: "aa", name: "작업 안 하면 죽는 방", cnt: 24 }, + ]; + + return ( + <> + + + 정산할 멤버를 선택해주세요 + + {menuArr.map((value, index) => ( +
  • selectMenuHandler(index)} + > + {value.name} +
    • + ))} +     + {tabIndex == 0 ? ( +
    + {chatroomArr.map((value, index) => ( + + ))} +
    + ) : ( + + + + + + +
    + + dd +
    + +     +     + )} +     + nextPage()}>{0}명 선택 + + ); +}; + +const CreateRequestPage3 = ({ nextPage }: NextPageType) => { + return ( + <> + + + 이렇게 정산을 요청할까요? + + +
    정산 총 금액
    + 20000원 +     +
    + +
    + + dd +
    +
    4,000
    +     + +
    + + dd +
    +
    4,000
    +     + +
    + + dd +
    +
    4,000
    +     +     +     + nextPage()}>정산요청 + + ); +}; +const CreateRequestPage = () => { + const [page, setPage] = useState(0); + const nextPage = () => { + setPage(page + 1); + console.log(page); + }; + const resetPage = () => { + //일단 만들어 둠 + setPage(0); + }; + switch (page) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + case 3: + return ; + } +}; + +export default CreateRequestPage; diff --git a/src/pages/PayPage/DarkNormalBtn.tsx b/src/pages/PayPage/DarkNormalBtn.tsx new file mode 100644 index 0000000..e226041 --- /dev/null +++ b/src/pages/PayPage/DarkNormalBtn.tsx @@ -0,0 +1,23 @@ +import styled from "styled-components"; +import React from "react"; + +export const DarkNormalBtn = styled.button` + margin: 1rem; + padding: 0.75rem 0rem 0.75rem 0rem; + + border: none; + border-radius: 0.75rem; + background: var(--Foundation-Main-color-Darker, #195942); + + color: var(--foundation-main-color-dark-hover, #2b9971); + text-align: center; + font-family: Freesentation; + font-size: 1.125rem; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 1.575rem */ + letter-spacing: 0.0225rem; + + /* background: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray600, #45454B);" : "var(--Foundation-Main-color-Normal, #48FFBD)")}; + color: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray400, var(--GRAY-400, #ACACB5));" : "var(--Foundation-Gray-gray900_background, #171719)")}; */ +`; diff --git a/src/pages/PayPage/GradientBtn.tsx b/src/pages/PayPage/GradientBtn.tsx new file mode 100644 index 0000000..5767b94 --- /dev/null +++ b/src/pages/PayPage/GradientBtn.tsx @@ -0,0 +1,23 @@ +import styled from "styled-components"; +import React from "react"; + +export const GradientBtn = styled.button` + margin: 0.75rem; + padding: 0.875rem 0rem 0.8125rem 0rem; + + border: none; + border-radius: 0.75rem; + background: var(--Foundation-Main-color-Sub-color-gradient02, linear-gradient(76deg, #5ad7fe -1.06%, #48ffbd 96.33%)); + + color: var(--Foundation-Gray-gray900_background, #171719); + text-align: center; + font-family: Freesentation; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 25.2px */ + letter-spacing: 0.36px; + + /* background: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray600, #45454B);" : "var(--Foundation-Main-color-Normal, #48FFBD)")}; + color: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray400, var(--GRAY-400, #ACACB5));" : "var(--Foundation-Gray-gray900_background, #171719)")}; */ +`; diff --git a/src/pages/PayPage/GrayBtn.tsx b/src/pages/PayPage/GrayBtn.tsx new file mode 100644 index 0000000..bac0c7a --- /dev/null +++ b/src/pages/PayPage/GrayBtn.tsx @@ -0,0 +1,23 @@ +import styled from "styled-components"; +import React from "react"; + +export const GrayBtn = styled.button` + margin: 1rem; + padding: 0.75rem 0rem 0.75rem 0rem; + + border: none; + border-radius: 12px; + background: var(--Foundation-Gray-gray600, #45454b); + + color: var(--Foundation-Gray-gray500, #767681); + text-align: center; + font-family: Freesentation; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 25.2px */ + letter-spacing: 0.36px; + + /* background: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray600, #45454B);" : "var(--Foundation-Main-color-Normal, #48FFBD)")}; + color: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray400, var(--GRAY-400, #ACACB5));" : "var(--Foundation-Gray-gray900_background, #171719)")}; */ +`; diff --git a/src/pages/PayPage/GrayMyReqDataDiv.tsx b/src/pages/PayPage/GrayMyReqDataDiv.tsx new file mode 100644 index 0000000..b6b4bc8 --- /dev/null +++ b/src/pages/PayPage/GrayMyReqDataDiv.tsx @@ -0,0 +1,20 @@ +import * as s from "@/pages/PayPage/PayPage.styled"; + +const GrayMyReqDataDiv = () => { + return ( + + + + 5명 정산완료 + + 40000원 + / 60000원 + + + 이미지 넣어야댐 + + + ); +}; + +export default GrayMyReqDataDiv; diff --git a/src/pages/PayPage/MyReqDataDiv.tsx b/src/pages/PayPage/MyReqDataDiv.tsx new file mode 100644 index 0000000..492e5f8 --- /dev/null +++ b/src/pages/PayPage/MyReqDataDiv.tsx @@ -0,0 +1,20 @@ +import * as s from "@/pages/PayPage/PayPage.styled"; + +const MyReqDataDiv = () => { + return ( + + + + 정산 완료까지 2명 남았어요 + + 40000원 + / 60000원 + + + 이미지 넣어야댐 + + + ); +}; + +export default MyReqDataDiv; diff --git a/src/pages/PayPage/MyRequestPayPage.tsx b/src/pages/PayPage/MyRequestPayPage.tsx new file mode 100644 index 0000000..2281aa0 --- /dev/null +++ b/src/pages/PayPage/MyRequestPayPage.tsx @@ -0,0 +1,69 @@ +import TopBarText, { LeftEnum } from "@/components/TopBarText"; +import * as s from "@/pages/PayPage/PayPage.styled"; +import { useState } from "react"; +import MyReqDataDiv from "./MyReqDataDiv"; +import GrayMyReqDataDiv from "./GrayMyReqDataDiv"; +import { useParams } from "react-router-dom"; + +import PayResult from "./PayResult"; + +const MyRequestPayPage = () => { + const [tabIndex, setTabIndex] = useState(0); + const menuArr = [ + { name: "미정산", content: "Tab menu ONE" }, + { name: "정산완료", content: "Tab menu TWO" }, + ]; + const dataArr = [ + { image: "aa", name: "박규환", amount: "15000원", chk: true }, + { image: "aa", name: "박규환", amount: "15000원", chk: true }, + ]; + const selectMenuHandler = (index: number) => { + setTabIndex(index); + }; + let { id } = useParams(); + return ( + <> + + {typeof id === "undefined" ? ( + +
    + 진행 중인 정산 + +
    +
    + 완료된 정산 + +
    +     + ) : ( + <> + + 정산 완료된 금액 + + 30000원 + / 60000원 + + 요청 날짜 2024.06.12 + + + {menuArr.map((value, index) => ( +
  • selectMenuHandler(index)} + > + {value.name} +
    • + ))} +     + + {dataArr.map((value, index) => ( + + ))} + + + )} + + ); +}; + +export default MyRequestPayPage; diff --git a/src/pages/PayPage/NormalBtn.tsx b/src/pages/PayPage/NormalBtn.tsx new file mode 100644 index 0000000..f24c472 --- /dev/null +++ b/src/pages/PayPage/NormalBtn.tsx @@ -0,0 +1,23 @@ +import styled from "styled-components"; +import React from "react"; + +export const NormalBtn = styled.button` + margin: 1rem; + padding: 0.75rem 0rem 0.75rem 0rem; + + border: none; + border-radius: 12px; + background: var(--Foundation-Main-color-Normal, #48ffbd); + + color: var(--Foundation-Gray-gray900_background, #171719); + text-align: center; + font-family: Freesentation; + font-size: 1.125rem; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 1.575rem */ + letter-spacing: 0.0225rem; + + /* background: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray600, #45454B);" : "var(--Foundation-Main-color-Normal, #48FFBD)")}; + color: ${(props) => (props.disabled ? "var(--Foundation-Gray-gray400, var(--GRAY-400, #ACACB5));" : "var(--Foundation-Gray-gray900_background, #171719)")}; */ +`; diff --git a/src/pages/PayPage/PayPage.styled.ts b/src/pages/PayPage/PayPage.styled.ts new file mode 100644 index 0000000..2a74516 --- /dev/null +++ b/src/pages/PayPage/PayPage.styled.ts @@ -0,0 +1,305 @@ +import styled from "styled-components"; + +export const ContainerDiv = styled.div` + display: flex; + justify-content: center; + margin: 1.25rem; + flex-direction: column; +`; + +export const RoundDiv = styled.div` + margin: 0.75rem; + padding: 0.75rem; + + border-radius: 0.75rem; + background: var(--Foundation-Gray-gray800, #222226); +`; + +export const ContentDiv = styled.div` + display: flex; + flex-direction: column; + padding: 1.25rem 1.5rem 1.25rem 1.5rem; + + border-radius: 0.75rem; + background: var(--GRAY-900, #181818); +`; + +export const TitleDiv = styled.div` + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + + margin-bottom: 0.5938rem; + margin-left: 0.5rem; +`; + +export const TitleContentDiv = styled.div` + color: #fff; + + /* text/Bold 18pt */ + font-family: Freesentation; + font-size: 1.125rem; + font-style: normal; + font-weight: 700; + line-height: 140%; /* 25.2px */ + letter-spacing: 0.045rem; +`; + +export const PriceDiv = styled.div` + display: flex; + flex-direction: row; + align-items: end; + margin-bottom: 0.5rem; +`; +export const NowPriceDiv = styled.div` + color: #fff; + font-family: Freesentation; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 20px */ + letter-spacing: 0.025rem; +`; +export const AllPriceDiv = styled.div` + color: #fff; + font-family: Freesentation; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 12px */ + letter-spacing: 0.015rem; +`; + +export const TextDiv = styled.div` + color: var(--GRAY-400, #acacb5); + + /* text/Regular 14pt */ + font-family: Freesentation; + font-size: 0.875rem; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 19.6px */ + letter-spacing: 0.56px; +`; + +export const ColumnFlexDiv = styled.div` + display: flex; + flex-direction: column; +`; +export const RowFlexDiv = styled.div` + display: flex; + flex-direction: row; +`; + +export const ImgDiv = styled.div` + position: absolute; + top: 0.75rem; + right: 0rem; +`; + +export const GrayRoundDiv = styled.div` + border-radius: 12px; + background: var(--Foundation-Gray-gray700, #303036); + + padding: 0.875rem; + margin: 0.75rem; +`; + +export const GrayTextDiv = styled.div` + color: var(--Foundation-Gray-gray500, #767681); + + /* text/Regular 14pt */ + font-family: Freesentation; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 19.6px */ + letter-spacing: 0.56px; +`; + +export const GrayBTextDiv = styled.div` + color: var(--Foundation-Gray-gray500, #767681); + font-family: Freesentation; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 1.25rem */ + letter-spacing: 0.025rem; +`; + +export const LargeTxt = styled.div` + color: #fff; + text-align: center; + + /* text/SemiBold 24pt */ + font-family: Freesentation; + font-size: 1.5rem; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 2.1rem */ + letter-spacing: 0.03rem; +`; + +export const CompletePayDiv = styled.div` + display: flex; + flex-direction: column; + border-radius: 0.75rem; + background: var(--Foundation-Gray-gray850, #1b1b1d); +`; + +export const TabMenu = styled.ul` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 1.25rem; + .submenu { + display: flex; + width: calc(100% / 2); + padding: 0.75rem 0rem 0.75rem 0rem; + color: var(--Foundation-Gray-gray500, #767681); + + /* text/Regular 14pt */ + font-family: Freesentation; + font-size: 0.875rem; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 1.225rem */ + letter-spacing: 0.035rem; + + justify-content: center; + cursor: pointer; + } + .focused { + color: #fff; + + /* text/Medium 14pt */ + font-family: Freesentation; + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: 140%; /* 1.225rem */ + letter-spacing: 0.035rem; + + border-bottom: 1px solid #48ffbd; + justify-content: center; + cursor: pointer; + } +`; + +export const BoldText = styled.div` + color: var(--Foundation-Gray-white, #fff); + text-align: center; + + /* text/Bold 16pt */ + font-family: Freesentation; + font-size: 1rem; + font-style: normal; + font-weight: 700; + line-height: 140%; /* 1.4rem */ + letter-spacing: 0.02rem; +`; + +export const InputText = styled.input` + border-radius: 0.75rem; + background: var(--Foundation-Gray-gray800, #222226); + + border: none; + width: 100%; + padding: 1rem; + color: var(--Foundation-Gray-gray500, #767681); + + /* text/Regular 16pt */ + font-family: Freesentation; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 1.4rem */ + letter-spacing: 0.04rem; + + &:focus { + outline: none; + box-shadow: 0rem 0rem 0.25rem var(--Foundation-Main-color-Normal, #48ffbd); + } +`; + +export const BankSelect = styled.select` + width: 100%; + padding: 1rem 1rem 1rem 0.75rem; + margin-top: 0.75rem; + border: none; + + color: var(--Foundation-Gray-gray500, #767681); + border-radius: 0.75rem; + background: var(--Foundation-Gray-gray800, #222226); + /* text/Regular 16pt */ + font-family: Freesentation; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 1.4rem */ + letter-spacing: 0.04rem; +`; + +export const BankOption = styled.option` + border-radius: 0.75rem 0.75rem 0rem 0rem; +`; + +export const RegularText = styled.div` + color: var(--WHITE, #fff); + + /* text/Medium 16pt */ + font-family: Freesentation; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 140%; /* 22.4px */ + letter-spacing: 0.64px; +`; + +export const CountText = styled.span` + color: var(--GRAY-600, #767681); + font-family: Pretendard; + font-size: 0.7298rem; + font-style: normal; + font-weight: 400; + line-height: 1.2164rem; /* 166.667% */ + + margin-left: 0.25rem; +`; + +export const SearchBar = styled.input` + border-radius: 0.75rem; + background: #222226; + border: none; + + color: var(--Foundation-Gray-gray500, #767681); + font-family: Pretendard; + font-size: 0.875rem; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 1.225rem */ + letter-spacing: 0.0175rem; + + width: 100%; + padding: 0.875rem 0.875rem 0.875rem 2.5rem; + + &:focus { + outline: none; + } +`; + +export const SearchBarDiv = styled.div` + position: relative; + width: 100%; +`; + +export const SearchIconImg = styled.img` + height: 1.25rem; + width: 1.25rem; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0.5rem; +`; diff --git a/src/pages/PayPage/PayPage.tsx b/src/pages/PayPage/PayPage.tsx index 0f893d8..06bdf9e 100644 --- a/src/pages/PayPage/PayPage.tsx +++ b/src/pages/PayPage/PayPage.tsx @@ -1,7 +1,64 @@ import TopBarText, { LeftEnum } from "@/components/TopBarText"; +import { GradientBtn } from "@/pages/PayPage/GradientBtn"; +import right from "@/assets/PayPage/arrow_right.svg"; +import * as s from "@/pages/PayPage/PayPage.styled"; +import { useNavigate } from "react-router-dom"; const PayPage = () => { - return ; + const navigator = useNavigate(); + return ( + <> + + + { + navigator("/pay/create"); + }} + > + 정산 시작하기 + + { + navigator("/requestingpay"); + }} + > + + 요청한 정산 + + {/* */} + + + {/* 컴포넌트화 예정 */} + + + 30,000원 + /45,000원 + + 정산완료까지 1명 남았어요 + + {/* 컴포넌트화 예정 */} + + { + navigator("/requestedpay"); + }} + > + + 요청받은 정산 + + {/* */} + + + {/* 컴포넌트화 예정 */} + + 김민지 님이 정산을 요청했어요 + 15,000원 + + {/* 컴포넌트화 예정 */} + + + + ); }; export default PayPage; diff --git a/src/pages/PayPage/PayResult.tsx b/src/pages/PayPage/PayResult.tsx new file mode 100644 index 0000000..faf2cfd --- /dev/null +++ b/src/pages/PayPage/PayResult.tsx @@ -0,0 +1,30 @@ +import * as s from "@/pages/PayPage/PayPage.styled"; +import bell from "@/assets/PayPage/bell.svg"; +import check from "@/assets/PayPage/check.svg"; +import ReactImg from "@/assets/react.svg"; + +type PRtype = { + image: string; + name: string; + amount: string; + chk: boolean; +}; +const PayResult = ({ props }: { props: PRtype }) => { + return ( + + + + {props.name} + {props.amount} + + + + ); +}; + +export default PayResult; diff --git a/src/pages/PayPage/ReqDataDiv.tsx b/src/pages/PayPage/ReqDataDiv.tsx new file mode 100644 index 0000000..d3bebda --- /dev/null +++ b/src/pages/PayPage/ReqDataDiv.tsx @@ -0,0 +1,64 @@ +import * as s from "@/pages/PayPage/PayPage.styled"; +import { NormalBtn } from "./NormalBtn"; +import reactIcon from "@/assets/react.svg"; +import { useState } from "react"; +import { DarkNormalBtn } from "./DarkNormalBtn"; + +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + +const ReqDataDiv = () => { + // true : 송금하기 false : 송금완료 + const [chk, setChk] = useState(true); + + const copyToClipboard = async (text: string) => { + try { + await navigator.clipboard.writeText(text); + toast.success("클립보드에 계좌번호가 복사되었습니다!", { + position: "bottom-center", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "dark", + }); + } catch (e) { + alert(e); + } + }; + const onPayClick = () => { + setChk(!chk); + //모달 생성 + //클립보드 복사 + copyToClipboard("씨앗은행 1231109999"); + }; + const onCompleteClick = () => { + setChk(!chk); + //모달 생성 + //클립보드 복사 + }; + return ( + + + + 박규환 + 15,000원 + +
    + {chk ? ( + + 송금하기 + + ) : ( + + 송금완료 + + )} +
    +     + ); +}; + +export default ReqDataDiv; diff --git a/src/pages/PayPage/RequestedPayPage.tsx b/src/pages/PayPage/RequestedPayPage.tsx new file mode 100644 index 0000000..9d13cff --- /dev/null +++ b/src/pages/PayPage/RequestedPayPage.tsx @@ -0,0 +1,46 @@ +import TopBarText, { LeftEnum } from "@/components/TopBarText"; +import * as s from "@/pages/PayPage/PayPage.styled"; +import reactIcon from "@/assets/react.svg"; +import { NormalBtn } from "./NormalBtn"; +import { GrayBtn } from "./GrayBtn"; +import ReqDataDiv from "./ReqDataDiv"; +import { ToastContainer } from "react-toastify"; +import { Transform } from "stream"; + +const RequestedPayPage = () => { + return ( + <> + + + 진행 중인 정산 + + 완료된 정산 + + + + 박규환 + 15,000원 + +
    + 송금하기 +
    +     + +     + + ); +}; + +export default RequestedPayPage;