From 7479bc1f2c3bc396b11ccb52113ebd4269805c27 Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Mon, 19 Aug 2024 16:27:34 +0900 Subject: [PATCH 1/6] chore: type error fuction --- src/pages/HomePage.tsx | 24 ---------- src/pages/PayPage/CreateRequestPage.tsx | 58 ++++++++++++++----------- 2 files changed, 32 insertions(+), 50 deletions(-) delete mode 100644 src/pages/HomePage.tsx 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/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx index 2533f96..6970b7a 100644 --- a/src/pages/PayPage/CreateRequestPage.tsx +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -1,15 +1,8 @@ -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 { ProgressBar } from "react-toastify/dist/components"; +import { UserInfo, userInfo } from "os"; + +import { chatroomSearchAllApi, SpaceSearchUserProfile, UserProfileResult } from "@/apis"; import { getAllChatMemberApi, getAllMemberApi, @@ -17,12 +10,21 @@ 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; @@ -37,12 +39,12 @@ export type ChatUserInfoInSpace = { }; export type BankInfo = { - bankName: String; - bankAccountNum: String; + bankName: string; + bankAccountNum: string; }; type NextPageType = { - nextPage: Function; - setAccount?: Function; + nextPage: () => void; + setAccount?: () => void; checkUsers?: Set; }; @@ -64,7 +66,7 @@ const CreateRequestPage1 = ({ setAccount, setBankName, }: { - nextPage: Function; + nextPage: () => void; setAccount: React.Dispatch>; setBankName: React.Dispatch>; }) => { @@ -134,8 +136,8 @@ const CreateRequestPage2 = ({ userInfoData, setUserInfoData, }: { - nextPage: Function; - forceRefresh: Function; + nextPage: () => void; + forceRefresh: (arg: number) => void; setCheckUsers: React.Dispatch>>; checkUsers: Set; userInfoData: UserInfoInSpace[] | undefined; @@ -269,7 +271,7 @@ const CreateRequestPage3 = ({ checkUsers, setTotalPrice, }: { - nextPage: Function; + nextPage: () => void; checkUsers: Set; setTotalPrice: React.Dispatch>; }) => { @@ -316,10 +318,10 @@ 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; @@ -439,6 +441,7 @@ const CreateRequestPage3 = ({ ); }; + const CreateRequestPage4 = ({ nextPage, userInfoData, @@ -446,7 +449,7 @@ const CreateRequestPage4 = ({ array, setArray, }: { - nextPage: Function; + nextPage: () => void; userInfoData: UserInfoInSpace[] | undefined; totalPrice: number; array: targetInfoList[]; @@ -494,6 +497,7 @@ const CreateRequestPage4 = ({ ); }; + const CreateRequestPage = () => { const [page, setPage] = useState(0); const [refresh, setRefresh] = useState(0); @@ -509,7 +513,7 @@ const CreateRequestPage = () => { setRefresh(refresh + 1); }; const nextPage = () => { - setPage(page + 1); + setPage((prev) => prev + 1); }; const resetPage = () => { //일단 만들어 둠 @@ -517,12 +521,14 @@ const CreateRequestPage = () => { }; useEffect(() => { + console.log("page: ", page); if (page === 4) { payCreateApi(totalPrice, bankName, bankAccount, array, 3).then(() => { setIsComplete(true); }); } }, [page]); + switch (page) { case 0: return ( From e69f7a952dcc8bb210e8adf18ef1a60ca5f49946 Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Mon, 19 Aug 2024 16:36:45 +0900 Subject: [PATCH 2/6] feat: add logoHandler, backHandler like custom logo navigate or back navigate --- src/components/TopBarText.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx index 48646b0..bb16341 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,6 +35,9 @@ const TopBarText: FC = ({ left, center, right, rightHandler }) => { { + if (logoHandler) { + logoHandler(); + } navigate("/"); }} > @@ -49,6 +61,9 @@ const TopBarText: FC = ({ left, center, right, rightHandler }) => { { + if (backHandler) { + backHandler(); + } navigate(-1); }} > From 613dfe04e58b42eafe96168bae7a3e7f9874344d Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Mon, 19 Aug 2024 16:49:41 +0900 Subject: [PATCH 3/6] fix: add else!!!!! --- src/components/TopBarText.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx index bb16341..e37f9df 100644 --- a/src/components/TopBarText.tsx +++ b/src/components/TopBarText.tsx @@ -37,8 +37,9 @@ const TopBarText: FC = ({ onClick={() => { if (logoHandler) { logoHandler(); + } else { + navigate("/"); } - navigate("/"); }} > @@ -63,8 +64,9 @@ const TopBarText: FC = ({ onClick={() => { if (backHandler) { backHandler(); + } else { + navigate(-1); } - navigate(-1); }} > From b60c3cdb62d8d9ceadc946da691fe4636c7db9e3 Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Mon, 19 Aug 2024 17:30:22 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=EB=B9=84=EB=8F=99=EA=B8=B0=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=9C=BC=EB=A1=9C=20=EC=A0=9C=EB=8C=80?= =?UTF-8?q?=EB=A1=9C=20state=20set=20=EB=90=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/Pay/PayPageAPI.ts | 16 +-- src/pages/PayPage/CreateRequestPage.tsx | 124 +++++++++++++----------- 2 files changed, 75 insertions(+), 65 deletions(-) diff --git a/src/apis/Pay/PayPageAPI.ts b/src/apis/Pay/PayPageAPI.ts index 963671e..0cdefef 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,9 +204,9 @@ export const getAllChatMemberApi = async ( if (response) { response.json().then((data) => { const _temp: chatRoomList[] = data.result.chatRoomList; - let _temp2: ChatUserInfoInSpace[] = new Array(); + const _temp2: ChatUserInfoInSpace[] = []; _temp.map(async (value, index) => { - let _temp3: ChatUserInfoInSpace = { + const _temp3: ChatUserInfoInSpace = { chatRoomId: -1, chatRoomName: "", userList: [], @@ -217,10 +218,9 @@ export const getAllChatMemberApi = async ( getChatRoomMemberApi(spaceID, value.id).then((res) => { res ? (_temp3.userList = res.result.userList) : (_temp3.userList = []); _temp2.push(_temp3); + setChatUserInfoData(_temp2); }); }); - - setChatUserInfoData(_temp2); }); } }; diff --git a/src/pages/PayPage/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx index de83caf..5023fde 100644 --- a/src/pages/PayPage/CreateRequestPage.tsx +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; import { ProgressBar } from "react-toastify/dist/components"; import { UserInfo, userInfo } from "os"; @@ -26,10 +27,10 @@ import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL"; import { addComma } from "./PayPage"; -type payUserInfo = { - name: number; - value: number; -}; +// type payUserInfo = { +// name: number; +// value: number; +// }; export type ChatUserInfoInSpace = { chatRoomId: number; @@ -42,11 +43,11 @@ export type BankInfo = { bankName: string; bankAccountNum: string; }; -type NextPageType = { - nextPage: () => void; - setAccount?: () => void; - checkUsers?: Set; -}; +// type NextPageType = { +// nextPage: () => void; +// setAccount?: () => void; +// checkUsers?: Set; +// }; const idToPrice = new Map(); const RecentAccountDiv = ({ data }: { data: BankInfo }) => { @@ -73,17 +74,19 @@ const CreateRequestPage1 = ({ 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 ( <> @@ -128,16 +131,17 @@ const CreateRequestPage1 = ({ ); }; + const CreateRequestPage2 = ({ nextPage, - forceRefresh, + prevPage, setCheckUsers, checkUsers, userInfoData, setUserInfoData, }: { nextPage: () => void; - forceRefresh: (arg: number) => void; + prevPage: () => void; setCheckUsers: React.Dispatch>>; checkUsers: Set; userInfoData: UserInfoInSpace[] | undefined; @@ -148,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); @@ -188,7 +178,7 @@ const CreateRequestPage2 = ({ return ( <> - +
정산할 멤버를 선택해주세요 @@ -199,30 +189,34 @@ const CreateRequestPage2 = ({
  • selectMenuHandler(index)} + onClick={() => setTabIndex(index)} > {value.name}
    • ))} - {tabIndex == 0 ? ( + {tabIndex === 0 ? (
    - {chatUserInfoData !== undefined ? ( - <> + <>{console.log(chatUserInfoData, userInfoData)} + {chatUserInfoData && ( +
    {chatUserInfoData.map((value, index) => ( ))} - - ) : ( - <> +
    )}
    ) : ( - + setSearch(e.target.value)} + > + {userInfoData !== undefined ? ( <> {userInfoData @@ -259,17 +253,19 @@ const CreateRequestPage2 = ({ )} - nextPage()}>{checkUsers.size}명 선택 + {checkUsers.size}명 선택 ); }; const CreateRequestPage3 = ({ nextPage, + prevPage, checkUsers, setTotalPrice, }: { nextPage: () => void; + prevPage: () => void; checkUsers: Set; setTotalPrice: React.Dispatch>; }) => { @@ -315,6 +311,7 @@ const CreateRequestPage3 = ({ } console.log(idToPrice); }; + useEffect(() => { const _tempArr: UserProfileResult[] = []; if (checkUsers !== undefined) { @@ -335,7 +332,7 @@ const CreateRequestPage3 = ({ return ( <> - + {menuArr.map((value, index) => ( @@ -359,7 +356,7 @@ const CreateRequestPage3 = ({ onChange={changePriceHandler} >
    - {tempArr.map((value, index) => ( + {tempArr.map((value) => (
    - {tempArr.map((value, index) => ( + {tempArr.map((value) => (
    void; + prevPage: () => void; userInfoData: UserInfoInSpace[] | undefined; totalPrice: number; array: targetInfoList[]; @@ -453,10 +452,11 @@ const CreateRequestPage4 = ({ [...idToPrice!].map(([targetUserId, requestAmount]) => ({ targetUserId, requestAmount })), ); }, []); + const price = addComma(totalPrice); return ( <> - + 이렇게 정산을 요청할까요? @@ -465,7 +465,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 ( @@ -486,14 +486,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(""); @@ -502,19 +503,25 @@ 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((prev) => prev + 1); }; - const resetPage = () => { - //일단 만들어 둠 - setPage(0); + + const prevPage = () => { + if (page > 0) { + setPage((prev) => prev - 1); + } else { + navigate(-1); + } }; useEffect(() => { - console.log("page: ", page); if (page === 4) { payCreateApi(totalPrice, bankName, bankAccount, array, 3).then(() => { setIsComplete(true); @@ -535,7 +542,8 @@ const CreateRequestPage = () => { return ( { return ( ); case 3: - console.log(userInfoData); + // console.log(userInfoData); return ( Date: Mon, 19 Aug 2024 17:34:28 +0900 Subject: [PATCH 5/6] fix: props attribute name is not props --- src/pages/PayPage/CreatePayComponents.tsx | 29 ++++++++++++----------- src/pages/PayPage/CreateRequestPage.tsx | 2 +- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/pages/PayPage/CreatePayComponents.tsx b/src/pages/PayPage/CreatePayComponents.tsx index 11ee08a..b557647 100644 --- a/src/pages/PayPage/CreatePayComponents.tsx +++ b/src/pages/PayPage/CreatePayComponents.tsx @@ -1,31 +1,32 @@ -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 ReactImg from "@/assets/react.svg"; +import CheckBox from "@/components/CheckBox"; +import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled"; import * as s from "@/pages/PayPage/PayPage.styled"; + import { ChatUserInfoInSpace } from "./CreateRequestPage"; -import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi"; 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 }) => { + const imgUrl = info.profileImgUrl === null ? undefined : info.profileImgUrl; return ( - {props.userName} + {info.userName} ); }; -export const PayChatDiv = ({ props }: { props: ChatUserInfoInSpace }) => { - console.log(props); +export const PayChatDiv = ({ info }: { info: ChatUserInfoInSpace }) => { + console.log(info); const [flag, setFlag] = useState(false); const controlFlag = () => { setFlag(!flag); @@ -34,9 +35,9 @@ export const PayChatDiv = ({ props }: { props: ChatUserInfoInSpace }) => {
    - - {props.chatRoomName} - {props.userList?.length} + + {info.chatRoomName} + {info.userList?.length}
    {flag ? ( { > )}     - {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 5023fde..b7f8100 100644 --- a/src/pages/PayPage/CreateRequestPage.tsx +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -201,7 +201,7 @@ const CreateRequestPage2 = ({ {chatUserInfoData && (
    {chatUserInfoData.map((value, index) => ( - + ))}
    )} From 5af6b092567d987efb0490a6c608169ba96ea38d Mon Sep 17 00:00:00 2001 From: Jihwan Kim Date: Mon, 19 Aug 2024 17:52:28 +0900 Subject: [PATCH 6/6] fix: rendering child when every async fetch ended by use promise.all --- src/apis/Pay/PayPageAPI.ts | 34 +++++++++++++---------- src/pages/PayPage/CreatePayComponents.tsx | 34 +++++++++-------------- src/pages/PayPage/CreateRequestPage.tsx | 13 ++++----- 3 files changed, 37 insertions(+), 44 deletions(-) diff --git a/src/apis/Pay/PayPageAPI.ts b/src/apis/Pay/PayPageAPI.ts index 0cdefef..8855be5 100644 --- a/src/apis/Pay/PayPageAPI.ts +++ b/src/apis/Pay/PayPageAPI.ts @@ -205,21 +205,25 @@ export const getAllChatMemberApi = async ( response.json().then((data) => { const _temp: chatRoomList[] = data.result.chatRoomList; const _temp2: ChatUserInfoInSpace[] = []; - _temp.map(async (value, index) => { - const _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); - setChatUserInfoData(_temp2); - }); + 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); }); }); } diff --git a/src/pages/PayPage/CreatePayComponents.tsx b/src/pages/PayPage/CreatePayComponents.tsx index b557647..c81021f 100644 --- a/src/pages/PayPage/CreatePayComponents.tsx +++ b/src/pages/PayPage/CreatePayComponents.tsx @@ -1,23 +1,25 @@ import { useState } from "react"; import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi"; -import ReactImg from "@/assets/react.svg"; 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"; -interface payChatDivtype { - img: string; - name: string; - cnt: number; -} +// interface payChatDivtype { +// img: string; +// name: string; +// cnt: number; +// } const PayChatMemberDiv = ({ info }: { info: UserInfoInSpace }) => { - const imgUrl = info.profileImgUrl === null ? undefined : info.profileImgUrl; return ( - + {info.userName} @@ -26,11 +28,11 @@ const PayChatMemberDiv = ({ info }: { info: UserInfoInSpace }) => { ); }; export const PayChatDiv = ({ info }: { info: ChatUserInfoInSpace }) => { - console.log(info); const [flag, setFlag] = useState(false); const controlFlag = () => { setFlag(!flag); }; + return ( @@ -40,19 +42,9 @@ export const PayChatDiv = ({ info }: { info: ChatUserInfoInSpace }) => { {info.userList?.length}
    {flag ? ( - { - controlFlag(); - }} - > + ) : ( - { - controlFlag(); - }} - > + )}     {info.userList?.map((value, index) => { diff --git a/src/pages/PayPage/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx index b7f8100..f9cdec0 100644 --- a/src/pages/PayPage/CreateRequestPage.tsx +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -197,14 +197,11 @@ const CreateRequestPage2 = ({ {tabIndex === 0 ? (
    - <>{console.log(chatUserInfoData, userInfoData)} - {chatUserInfoData && ( -
    - {chatUserInfoData.map((value, index) => ( - - ))} -
    - )} + <>{console.log(JSON.parse(JSON.stringify(chatUserInfoData)), userInfoData)} + {chatUserInfoData && + chatUserInfoData.map((value, index) => ( + + ))}
    ) : (