diff --git a/src/apis/Pay/PayPageAPI.ts b/src/apis/Pay/PayPageAPI.ts index 963671e..8855be5 100644 --- a/src/apis/Pay/PayPageAPI.ts +++ b/src/apis/Pay/PayPageAPI.ts @@ -1,13 +1,14 @@ -import { DetailPayData, PayReceiveInfo, PayRequestInfo } from "@/pages/PayPage/PayPage"; +import { useNavigate } from "react-router-dom"; + import { createRequestOptionsJSON, - RequestOptions, createRequestOptionsJSON_AUTH, fetchApi, + RequestOptions, } from "@/apis/_createRequestOptions"; -import { BankInfo, ChatUserInfoInSpace } from "@/pages/PayPage/CreateRequestPage"; -import { useNavigate } from "react-router-dom"; import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi"; +import { BankInfo, ChatUserInfoInSpace } from "@/pages/PayPage/CreateRequestPage"; +import { DetailPayData, PayReceiveInfo, PayRequestInfo } from "@/pages/PayPage/PayPage"; interface SpaceSearchAllUserApiResponseType { code: number; @@ -203,24 +204,27 @@ export const getAllChatMemberApi = async ( if (response) { response.json().then((data) => { const _temp: chatRoomList[] = data.result.chatRoomList; - let _temp2: ChatUserInfoInSpace[] = new Array(); - _temp.map(async (value, index) => { - let _temp3: ChatUserInfoInSpace = { - chatRoomId: -1, - chatRoomName: "", - userList: [], - imgUrl: "", - }; - _temp3.chatRoomId = value.id; - _temp3.chatRoomName = value.name; - _temp3.imgUrl = value.imgUrl; - getChatRoomMemberApi(spaceID, value.id).then((res) => { - res ? (_temp3.userList = res.result.userList) : (_temp3.userList = []); - _temp2.push(_temp3); - }); + const _temp2: ChatUserInfoInSpace[] = []; + Promise.all( + _temp.map((value) => { + const _temp3: ChatUserInfoInSpace = { + chatRoomId: value.id, + chatRoomName: value.name, + userList: [], + imgUrl: value.imgUrl, + }; + + return getChatRoomMemberApi(spaceID, value.id).then((res) => { + if (res) { + _temp3.userList = res.result.userList; + _temp2.push(_temp3); + return _temp3; + } + }); + }), + ).then((res) => { + setChatUserInfoData(_temp2); }); - - setChatUserInfoData(_temp2); }); } }; diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx index 48646b0..e37f9df 100644 --- a/src/components/TopBarText.tsx +++ b/src/components/TopBarText.tsx @@ -16,9 +16,18 @@ interface topbarProps { center: string | React.ReactNode; right: string | React.ReactNode; rightHandler?: () => void; + backHandler?: () => void; + logoHandler?: () => void; } -const TopBarText: FC = ({ left, center, right, rightHandler }) => { +const TopBarText: FC = ({ + left, + center, + right, + rightHandler, + backHandler, + logoHandler, +}) => { const navigate = useNavigate(); switch (left) { case "logo": @@ -26,7 +35,11 @@ const TopBarText: FC = ({ left, center, right, rightHandler }) => { { - navigate("/"); + if (logoHandler) { + logoHandler(); + } else { + navigate("/"); + } }} > @@ -49,7 +62,11 @@ const TopBarText: FC = ({ left, center, right, rightHandler }) => { { - navigate(-1); + if (backHandler) { + backHandler(); + } else { + navigate(-1); + } }} > diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx deleted file mode 100644 index 6bc3a9c..0000000 --- a/src/pages/HomePage.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Link } from "react-router-dom"; -import styled from "styled-components"; - -const LinkContainer = styled.div` - display: flex; - flex-direction: column; - font-size: x-large; - gap: 3rem; -`; - -const HomePage = () => { - return ( - //test Link - -

Home page link 모음 입니다

- voiceroom link - chatting room link - space room link - Login - - ); -}; - -export default HomePage; diff --git a/src/pages/PayPage/CreatePayComponents.tsx b/src/pages/PayPage/CreatePayComponents.tsx index 11ee08a..c81021f 100644 --- a/src/pages/PayPage/CreatePayComponents.tsx +++ b/src/pages/PayPage/CreatePayComponents.tsx @@ -1,61 +1,54 @@ -import CheckBox from "@/components/CheckBox"; -import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled"; -import ReactImg from "@/assets/react.svg"; import { useState } from "react"; +import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi"; +import CheckBox from "@/components/CheckBox"; +import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled"; import * as s from "@/pages/PayPage/PayPage.styled"; +import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL"; + import { ChatUserInfoInSpace } from "./CreateRequestPage"; -import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi"; -interface payChatDivtype { - img: string; - name: string; - cnt: number; -} +// interface payChatDivtype { +// img: string; +// name: string; +// cnt: number; +// } -const PayChatMemberDiv = ({ props }: { props: UserInfoInSpace }) => { - const imgUrl = props.profileImgUrl === null ? undefined : props.profileImgUrl; +const PayChatMemberDiv = ({ info }: { info: UserInfoInSpace }) => { return ( - + - {props.userName} + {info.userName} ); }; -export const PayChatDiv = ({ props }: { props: ChatUserInfoInSpace }) => { - console.log(props); +export const PayChatDiv = ({ info }: { info: ChatUserInfoInSpace }) => { const [flag, setFlag] = useState(false); const controlFlag = () => { setFlag(!flag); }; + return (
- - {props.chatRoomName} - {props.userList?.length} + + {info.chatRoomName} + {info.userList?.length}
{flag ? ( - { - controlFlag(); - }} - > + ) : ( - { - controlFlag(); - }} - > + )} - {props.userList?.map((value, index) => { - return ; + {info.userList?.map((value, index) => { + return ; })} ); diff --git a/src/pages/PayPage/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx index 28d2c0c..f9cdec0 100644 --- a/src/pages/PayPage/CreateRequestPage.tsx +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -1,15 +1,9 @@ -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 { useEffect, useState } from "react"; -import CompletePay from "@/pages/PayPage/CompletePay"; -import CompleteCreatePay from "@/pages/PayPage/CompleteCreatePay"; -import CheckBox from "@/components/CheckBox"; -import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled"; -import ReactImg from "@/assets/react.svg"; -import { PayChatDiv } from "@/pages/PayPage/CreatePayComponents"; -import SearchIcon from "@/assets/PayPage/search_icon.svg"; +import { useNavigate } from "react-router-dom"; +import { ProgressBar } from "react-toastify/dist/components"; +import { UserInfo, userInfo } from "os"; + +import { chatroomSearchAllApi, SpaceSearchUserProfile, UserProfileResult } from "@/apis"; import { getAllChatMemberApi, getAllMemberApi, @@ -17,17 +11,26 @@ import { recentAccountApi, targetInfoList, } from "@/apis/Pay/PayPageAPI"; -import { SpaceSearchUserProfile, UserProfileResult, chatroomSearchAllApi } from "@/apis"; import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi"; +import SearchIcon from "@/assets/PayPage/search_icon.svg"; +import Kookmin from "@/assets/PayPage/test_bank.svg"; +import ReactImg from "@/assets/react.svg"; +import { BottomBtn } from "@/components/BottomBtn"; +import CheckBox from "@/components/CheckBox"; +import TopBarText, { LeftEnum } from "@/components/TopBarText"; +import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled"; +import CompleteCreatePay from "@/pages/PayPage/CompleteCreatePay"; +import CompletePay from "@/pages/PayPage/CompletePay"; +import { PayChatDiv } from "@/pages/PayPage/CreatePayComponents"; +import * as s from "@/pages/PayPage/PayPage.styled"; import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL"; -import { UserInfo, userInfo } from "os"; + import { addComma } from "./PayPage"; -import { ProgressBar } from "react-toastify/dist/components"; -type payUserInfo = { - name: number; - value: number; -}; +// type payUserInfo = { +// name: number; +// value: number; +// }; export type ChatUserInfoInSpace = { chatRoomId: number; @@ -37,14 +40,14 @@ export type ChatUserInfoInSpace = { }; export type BankInfo = { - bankName: String; - bankAccountNum: String; -}; -type NextPageType = { - nextPage: Function; - setAccount?: Function; - checkUsers?: Set; + bankName: string; + bankAccountNum: string; }; +// type NextPageType = { +// nextPage: () => void; +// setAccount?: () => void; +// checkUsers?: Set; +// }; const idToPrice = new Map(); const RecentAccountDiv = ({ data }: { data: BankInfo }) => { @@ -64,24 +67,26 @@ const CreateRequestPage1 = ({ setAccount, setBankName, }: { - nextPage: Function; + nextPage: () => void; setAccount: React.Dispatch>; setBankName: React.Dispatch>; }) => { const [bankData, setBankData] = useState([]); const [bankValue, setBankValue] = useState(""); const [acc, setAcc] = useState(""); + useEffect(() => { recentAccountApi(3, setBankData); }, []); + const onChangeHandler = (e: React.ChangeEvent) => { setAcc(e.target.value); }; - const onChangeOption = (e: any) => { setBankValue(e.target.value); console.log(e.target.value); }; + return ( <> @@ -126,16 +131,17 @@ const CreateRequestPage1 = ({ ); }; + const CreateRequestPage2 = ({ nextPage, - forceRefresh, + prevPage, setCheckUsers, checkUsers, userInfoData, setUserInfoData, }: { - nextPage: Function; - forceRefresh: Function; + nextPage: () => void; + prevPage: () => void; setCheckUsers: React.Dispatch>>; checkUsers: Set; userInfoData: UserInfoInSpace[] | undefined; @@ -146,26 +152,12 @@ const CreateRequestPage2 = ({ const [chatUserInfoData, setChatUserInfoData] = useState([]); useEffect(() => { - selectMenuHandler(tabIndex); - forceRefresh(1); - }, [chatUserInfoData]); - - useEffect(() => { - // const id = localStorage.getItem("SpaceId"); - const id = "3"; - if (id !== null) { - const _id = Number.parseInt(id); - getAllMemberApi(_id, setUserInfoData); - getAllChatMemberApi(_id, setChatUserInfoData); - } + const id = Number(localStorage.getItem("spaceId")) || 3; + getAllMemberApi(id, setUserInfoData); + getAllChatMemberApi(id, setChatUserInfoData).then((res) => + console.log("chatUser", chatUserInfoData), + ); }, []); - const onKeywordChange = (e: React.ChangeEvent) => { - setSearch(e.target.value); - }; - - const selectMenuHandler = (index: number) => { - setTabIndex(index); - }; const checkUserHandler = (id: number) => { const _checkUsers = new Set(checkUsers); @@ -186,7 +178,7 @@ const CreateRequestPage2 = ({ return ( <> - +
정산할 멤버를 선택해주세요 @@ -197,30 +189,31 @@ const CreateRequestPage2 = ({
  • selectMenuHandler(index)} + onClick={() => setTabIndex(index)} > {value.name}
    • ))} - {tabIndex == 0 ? ( + {tabIndex === 0 ? (
    - {chatUserInfoData !== undefined ? ( - <> - {chatUserInfoData.map((value, index) => ( - - ))} - - ) : ( - <> - )} + <>{console.log(JSON.parse(JSON.stringify(chatUserInfoData)), userInfoData)} + {chatUserInfoData && + chatUserInfoData.map((value, index) => ( + + ))}
    ) : ( - + setSearch(e.target.value)} + > + {userInfoData !== undefined ? ( <> {userInfoData @@ -257,17 +250,19 @@ const CreateRequestPage2 = ({ )} - nextPage()}>{checkUsers.size}명 선택 + {checkUsers.size}명 선택 ); }; const CreateRequestPage3 = ({ nextPage, + prevPage, checkUsers, setTotalPrice, }: { - nextPage: Function; + nextPage: () => void; + prevPage: () => void; checkUsers: Set; setTotalPrice: React.Dispatch>; }) => { @@ -313,11 +308,12 @@ const CreateRequestPage3 = ({ } console.log(idToPrice); }; + useEffect(() => { - let _tempArr: UserProfileResult[] = []; + const _tempArr: UserProfileResult[] = []; if (checkUsers !== undefined) { if (checkUsers?.size > 0) { - for (let value of checkUsers) { + for (const value of checkUsers) { const response = SpaceSearchUserProfile(3, value).then((res) => { if (res?.result !== undefined) { const _tempObj = res.result; @@ -333,7 +329,7 @@ const CreateRequestPage3 = ({ return ( <> - + {menuArr.map((value, index) => ( @@ -357,7 +353,7 @@ const CreateRequestPage3 = ({ onChange={changePriceHandler} >
    - {tempArr.map((value, index) => ( + {tempArr.map((value) => (
    - {tempArr.map((value, index) => ( + {tempArr.map((value) => (
    ); }; + const CreateRequestPage4 = ({ nextPage, + prevPage, userInfoData, totalPrice, array, setArray, }: { - nextPage: Function; + nextPage: () => void; + prevPage: () => void; userInfoData: UserInfoInSpace[] | undefined; totalPrice: number; array: targetInfoList[]; @@ -450,10 +449,11 @@ const CreateRequestPage4 = ({ [...idToPrice!].map(([targetUserId, requestAmount]) => ({ targetUserId, requestAmount })), ); }, []); + const price = addComma(totalPrice); return ( <> - + 이렇게 정산을 요청할까요? @@ -462,7 +462,7 @@ const CreateRequestPage4 = ({ {price} 원
    - {array.map((value, key) => { + {array.map((value) => { const _userData = userInfoData?.find((i) => i.userId === value.targetUserId); const _price = addComma(value.requestAmount); return ( @@ -483,13 +483,15 @@ const CreateRequestPage4 = ({ })}     - nextPage()}>정산요청 + 정산요청 ); }; + const CreateRequestPage = () => { const [page, setPage] = useState(0); - const [refresh, setRefresh] = useState(0); + // const [refresh, setRefresh] = useState(0); + const [checkUsers, setCheckUsers] = useState(new Set()); const [bankAccount, setBankAccount] = useState(""); const [bankName, setBankName] = useState(""); @@ -498,15 +500,22 @@ const CreateRequestPage = () => { const [isComplete, setIsComplete] = useState(false); const [array, setArray] = useState([]); - const forceRefresh = () => { - setRefresh(refresh + 1); - }; + const navigate = useNavigate(); + + // const forceRefresh = () => { + // setRefresh(refresh + 1); + // }; + const nextPage = () => { - setPage(page + 1); + setPage((prev) => prev + 1); }; - const resetPage = () => { - //일단 만들어 둠 - setPage(0); + + const prevPage = () => { + if (page > 0) { + setPage((prev) => prev - 1); + } else { + navigate(-1); + } }; useEffect(() => { @@ -516,6 +525,7 @@ const CreateRequestPage = () => { }); } }, [page]); + switch (page) { case 0: return ( @@ -529,7 +539,8 @@ const CreateRequestPage = () => { return ( { return ( ); case 3: - console.log(userInfoData); + // console.log(userInfoData); return (