From 49d5db443cf4884fe3eeabbea004e6544708d582 Mon Sep 17 00:00:00 2001 From: YangJJune Date: Mon, 19 Aug 2024 13:00:16 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat=20:=20=20=ED=99=88=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20view=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/HomePage/HomePage.styled.ts | 120 +++++++++++++++++- src/pages/HomePage/HomePage.tsx | 90 +++++++++---- src/pages/PayPage/PayPage.tsx | 2 +- src/pages/VoiceRoomPage/VoiceRoomListPage.tsx | 2 +- 4 files changed, 181 insertions(+), 33 deletions(-) diff --git a/src/pages/HomePage/HomePage.styled.ts b/src/pages/HomePage/HomePage.styled.ts index f95297a..a0965fc 100644 --- a/src/pages/HomePage/HomePage.styled.ts +++ b/src/pages/HomePage/HomePage.styled.ts @@ -122,12 +122,10 @@ export const Settlement = styled.div` .content { display: flex; - padding: 1.3125rem 9.5rem 1.25rem 1rem; + padding: 1.25rem 1rem 1.25rem 1rem; align-items: center; align-self: stretch; border-radius: 0rem 0rem 0.75rem 0.75rem; - background: #222226; - width: 20rem; } .subText { @@ -221,3 +219,119 @@ export const ReceivedButton = styled.button` width: 6.625rem; height: 2.75rem; `; + +export const TabMenu = styled.ul` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + color: var(--Foundation-Gray-white, #fff); + + .submenu { + display: flex; + width: calc(100% / 2); + padding: 0.75rem 0rem 0.75rem 0rem; + color: var(--Foundation-Gray-gray600, var(--GRAY-700, #45454b)); + + /* text/Regular 16pt */ + font-family: Freesentation; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 1.4rem */ + letter-spacing: 0.04rem; + + justify-content: center; + cursor: pointer; + } + .focused { + color: var(--Foundation-Gray-white, #fff); + + /* text/Medium 16pt */ + font-family: Freesentation; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 140%; /* 1.4rem */ + letter-spacing: 0.04rem; + + border-bottom: 1px solid #48ffbd; + justify-content: center; + cursor: pointer; + } +`; +export const RoundDiv = styled.div` + padding: 0.75rem; + + border-radius: 0.75rem; + background: var(--Foundation-Gray-gray800, #222226); + + color: var(--material-theme-Gray-gray200, #efeff0); + + /* 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 ColumnFlexDiv = styled.div` + display: flex; + flex-direction: column; +`; +export const RowFlexDiv = styled.div` + display: flex; + flex-direction: row; +`; + +export const NoticeRoundDiv = styled.div` + border-radius: 8px; + border: 1px solid var(--normal, #48ffbd); + + padding: 4px 10px; + + color: var(--Foundation-Main-color-Normal, var(--normal, #48ffbd)); + text-align: center; + + /* text/Regular 12pt */ + font-family: Freesentation; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 16.8px */ + letter-spacing: 0.24px; + + margin-right: 0.625rem; +`; + +export const HomeVoiceRoomDiv = styled.div` + border-radius: 12px; + background: linear-gradient(99deg, #f098f1 0%, #549af7 100%); + padding: 1rem; + + height: 10rem; + + color: #000; + + /* text/SemiBold 20pt */ + font-family: Freesentation; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 28px */ + letter-spacing: 0.4px; +`; + +export const VoiceRoomTitleDiv = styled.div` + color: #000; + + /* text/SemiBold 20pt */ + font-family: Freesentation; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 28px */ + letter-spacing: 0.4px; +`; diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 3785eb2..7ab5ba5 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -13,12 +13,28 @@ import next from "@/pages/HomePage/icon_next.svg"; const HomePage = () => { const navigate = useNavigate(); const [activeTab, setActiveTab] = useState("requested"); + const [tabIndex, setTabIndex] = useState(0); const receivedSettlements = [{ name: "김민지", amount: 30000 }]; - - const handleTabClick = (tab: SetStateAction) => { - setActiveTab(tab); + const menuArr = [ + { name: "정산 현황", content: "Tab menu ONE" }, + { name: "요청한 정산", content: "Tab menu TWO" }, + { name: "요청받은 정산", content: "Tab menu Three" }, + ]; + const NoticeComponent = () => { + return ( + + + 공지 +
디자인 공부를 어디서 해야할 지 모르겠다면
+ + + ); + }; + const selectMenuHandler = (index: number) => { + setTabIndex(index); }; + return ( <> @@ -59,30 +75,21 @@ const HomePage = () => { -
-
- handleTabClick("status")} - > - 정산 현황 - - handleTabClick("requested")} - > - 요청한 정산 - - handleTabClick("received")} - > - 요청받은 정산 - -
+ + + {menuArr.map((value, index) => ( +
  • selectMenuHandler(index)} + > + {value.name} +
    • + ))} +
    - {activeTab === "requested" && ( + {tabIndex === 0 && (
    정산 완료까지 1 @@ -92,7 +99,7 @@ const HomePage = () => { /45,000 원
    )} - {activeTab === "received" && ( + {tabIndex === 1 && (
    {receivedSettlements.map((settlement, index) => (
    @@ -104,8 +111,8 @@ const HomePage = () => { ))}
    )} - {activeTab === "status" && ( -
    + {tabIndex === 2 && ( +
    요청한 정산이 1 건 @@ -116,7 +123,34 @@ const HomePage = () => {
    )}
    + + + {/* 여기는 공지사항 */} +
    +
    공지사항
    +
    + + + {/* 여기는 공지사항 */} +
    +
    활동 중인 보이스룸
    + +
    + + + 작업 안하면 죽는 방 + + 대화 중인 스페이서 6명 + + + diff --git a/src/pages/PayPage/PayPage.tsx b/src/pages/PayPage/PayPage.tsx index 839e738..73b557b 100644 --- a/src/pages/PayPage/PayPage.tsx +++ b/src/pages/PayPage/PayPage.tsx @@ -46,7 +46,7 @@ export type payTargetInfoDtoList = { isComplete: boolean; }; const PayRequestInfo = ({ data }: { data: PayRequestInfo }) => { - const res: number = data.totalTargetNum - data.receiveAmount; + const res: number = data.totalTargetNum - data.receiveTargetNum; const now = addComma(data.receiveAmount); const all = addComma(data.totalAmount); return ( diff --git a/src/pages/VoiceRoomPage/VoiceRoomListPage.tsx b/src/pages/VoiceRoomPage/VoiceRoomListPage.tsx index e65dbed..c1d47e5 100644 --- a/src/pages/VoiceRoomPage/VoiceRoomListPage.tsx +++ b/src/pages/VoiceRoomPage/VoiceRoomListPage.tsx @@ -36,7 +36,7 @@ const VoiceRoomPortal = ({ vrList }: { vrList: VrList }) => { 대화 중인 스페이서 {vrList.numParticipant}명 {vrList.numParticipant === 0 ? ( -
    + <> ) : ( ; From 00be544bcec24f4e34c3272b1d659802bdf14226 Mon Sep 17 00:00:00 2001 From: YangJJune Date: Mon, 19 Aug 2024 16:16:25 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat=20:=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=96=B4=EB=8A=90=EC=A0=95=EB=8F=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20/=20=EB=B3=B4=EC=9D=B4=EC=8A=A4=EB=A3=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/HomePage/GetHomepageApi.ts | 63 +++++++++ src/pages/HomePage/HomePage.tsx | 81 ++++++++--- src/pages/PayPage/CreateRequestPage.tsx | 131 +++++++++--------- src/pages/VoiceRoomPage/EditVoiceRoomPage.tsx | 21 ++- src/pages/VoiceRoomPage/JoinVoiceRoomPage.tsx | 53 +++++-- 5 files changed, 243 insertions(+), 106 deletions(-) create mode 100644 src/apis/HomePage/GetHomepageApi.ts diff --git a/src/apis/HomePage/GetHomepageApi.ts b/src/apis/HomePage/GetHomepageApi.ts new file mode 100644 index 0000000..7459172 --- /dev/null +++ b/src/apis/HomePage/GetHomepageApi.ts @@ -0,0 +1,63 @@ +import { PayReceiveInfo, PayRequestInfo } from "@/pages/PayPage/PayPage"; +import { RequestOptions, createRequestOptionsJSON_AUTH } from "@/apis/_createRequestOptions"; +import { VrList } from "@/pages/VoiceRoomPage/VoiceRoomListPage"; + +export type HomeApiResponse = { + spaceName: string; + spaceProfileImg: null; + payRequestInfoDtoList: PayRequestInfo[]; + payReceiveInfoDtoList: PayReceiveInfo[]; + noticeList: noticeInfo[]; + memberNum: number; + userAuth: string; +}; +export type VoiceRoomApiResponse = { + voiceRoomList: VrList[]; +}; +export type noticeInfo = { + postId: number; + title: string; +}; + +const fetchHomeApi = async (url: string, options: RequestOptions) => { + const response = await fetch(url, options).catch((err) => { + console.error(err); + }); + return response; +}; + +export const getHomeApi = async ( + spaceID: number, + setHomeData: React.Dispatch>, +) => { + const requestOptions = createRequestOptionsJSON_AUTH("GET"); + if (!requestOptions) { + return null; + } + const response = await fetchHomeApi( + `${import.meta.env.VITE_API_BACK_URL}/space/${spaceID}`, + requestOptions, + ).then((res) => + res?.json?.().then((data: any) => { + setHomeData(data.result); + }), + ); +}; + +export const getVrApi = async ( + spaceID: number, + setVrData: React.Dispatch>, +) => { + const requestOptions = createRequestOptionsJSON_AUTH("GET"); + if (!requestOptions) { + return null; + } + const response = await fetchHomeApi( + `${import.meta.env.VITE_API_BACK_URL}/space/${spaceID}/voiceRoom`, + requestOptions, + ).then((res) => + res?.json?.().then((data: any) => { + setVrData(data.result); + }), + ); +}; diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 7ab5ba5..dd3c21a 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,4 +1,4 @@ -import { SetStateAction, useState } from "react"; +import { SetStateAction, useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import alarm from "@/assets/icon_alarm.svg"; @@ -9,6 +9,14 @@ import bannerImage from "@/pages/HomePage/bannerImage.svg"; import bannerImageCover from "@/pages/HomePage/bannerImageCover.svg"; import * as sty from "@/pages/HomePage/HomePage.styled"; import next from "@/pages/HomePage/icon_next.svg"; +import { + HomeApiResponse, + VoiceRoomApiResponse, + getHomeApi, + getVrApi, +} from "@/apis/HomePage/GetHomepageApi"; +import { VrList } from "@/pages/VoiceRoomPage/VoiceRoomListPage"; +import { noticeInfo } from "@/apis/HomePage/GetHomepageApi"; const HomePage = () => { const navigate = useNavigate(); @@ -21,6 +29,11 @@ const HomePage = () => { { name: "요청한 정산", content: "Tab menu TWO" }, { name: "요청받은 정산", content: "Tab menu Three" }, ]; + + const [homeData, setHomeData] = useState(); + const [vrData, setVrData] = useState(); + const [noticeList, setNoticeList] = useState([]); + const NoticeComponent = () => { return ( @@ -31,10 +44,30 @@ const HomePage = () => { ); }; + const selectMenuHandler = (index: number) => { setTabIndex(index); }; + useEffect(() => {}, [noticeList]); + + useEffect(() => { + if (homeData?.noticeList !== undefined) { + let _temp = homeData?.noticeList; + + let newArr = [..._temp]; + setNoticeList(newArr); + } + }, [homeData]); + + useEffect(() => { + const id = localStorage.getItem("spaceId"); + if (id !== null) { + getHomeApi(Number.parseInt(id), setHomeData); + getVrApi(Number.parseInt(id), setVrData); + } + }, []); + return ( <> @@ -56,10 +89,13 @@ const HomePage = () => { - 배너이미지 + 배너이미지 오버레이 이미지 -
    작업 안하면 죽는 방
    -
    스페이서 20
    +
    {homeData?.spaceName}
    +
    스페이서 {homeData?.memberNum}
     @@ -132,25 +168,38 @@ const HomePage = () => { 자세히보기
    - - {/* 여기는 공지사항 */} + {noticeList !== undefined && + noticeList.map((value, index) =>
    {value.title}
    )} + + <>{/* 여기는 보이스룸 */} +
    활동 중인 보이스룸
    - - - 작업 안하면 죽는 방 - - 대화 중인 스페이서 6명 - - - + {vrData !== undefined && + vrData.voiceRoomList.map( + (value, index) => + value.active === true && ( + + + {value.name} + + 대화 중인 스페이서 {value.numParticipant}명 + + + + ), + )} diff --git a/src/pages/PayPage/CreateRequestPage.tsx b/src/pages/PayPage/CreateRequestPage.tsx index 2533f96..28d2c0c 100644 --- a/src/pages/PayPage/CreateRequestPage.tsx +++ b/src/pages/PayPage/CreateRequestPage.tsx @@ -231,27 +231,25 @@ const CreateRequestPage2 = ({ return val; } }) - .map((value) => { - return ( - -
    - - {value.userName} -
    - { - checkUserHandler(value.userId); - }} - > -     - ); - })} + .map((value) => ( + +
    + + {value.userName} +
    + { + checkUserHandler(value.userId); + }} + > +     + ))} ) : ( <> @@ -359,59 +357,54 @@ const CreateRequestPage3 = ({ onChange={changePriceHandler} >
    - {tempArr.map((value, index) => { - return ( - -
    - - {value.userName} -
    - - - {" "} - {nPrice !== undefined ? nPrice / tempArr.length : "NaN"} - - 원 - -     - ); - })} + {tempArr.map((value, index) => ( + +
    + + {value.userName} +
    + + + {nPrice !== undefined ? nPrice / tempArr.length : "NaN"} + + 원 + +     + ))}
    ) : (
    - {tempArr.map((value, index) => { - return ( - -
    - - {value.userName} -
    - - { - selfChangePriceHandler(value.userId!, e); - }} - > - -     - ); - })} + {tempArr.map((value, index) => ( + +
    + + {value.userName} +
    + + { + selfChangePriceHandler(value.userId!, e); + }} + > + +     + ))}
    diff --git a/src/pages/VoiceRoomPage/EditVoiceRoomPage.tsx b/src/pages/VoiceRoomPage/EditVoiceRoomPage.tsx index 67418d8..7b9e0f0 100644 --- a/src/pages/VoiceRoomPage/EditVoiceRoomPage.tsx +++ b/src/pages/VoiceRoomPage/EditVoiceRoomPage.tsx @@ -14,6 +14,7 @@ export type updateRoom = { }; const EditVoiceRoomPage = () => { + const navigator = useNavigate(); const [vrList, setVrList] = useState([]); const [nameArr, setNameArr] = useState([]); @@ -29,16 +30,13 @@ const EditVoiceRoomPage = () => { }; useEffect(() => { - VrEditApi(3, newRoomInfo); - // if (cnt >= total) { - // VrEditApi(3, newRoomInfo); - // } else { - // cnt += 1; - // } - // console.log("CHECK"); - // console.log(`CNT : ${cnt} TOTAL : ${total}`); + console.log("dddd"); + if (newRoomInfo.length > 0) { + VrEditApi(3, newRoomInfo).then(() => { + navigator("/voiceroom"); + }); + } }, [newRoomInfo]); - const navigator = useNavigate(); //_name 바뀔 이름 const editVrList = (index: number, _name: string) => { @@ -49,7 +47,6 @@ const EditVoiceRoomPage = () => { }; const rightClickHandler = () => { - //api 보내기 pushRoomInfo(); }; @@ -87,7 +84,9 @@ const EditVoiceRoomPage = () => { left={LeftEnum.None} center="보이스룸" right="완료" - rightHandler={rightClickHandler} + rightHandler={() => { + rightClickHandler(); + }} /> 보이스룸 목록 diff --git a/src/pages/VoiceRoomPage/JoinVoiceRoomPage.tsx b/src/pages/VoiceRoomPage/JoinVoiceRoomPage.tsx index 40a5d97..5029dc6 100644 --- a/src/pages/VoiceRoomPage/JoinVoiceRoomPage.tsx +++ b/src/pages/VoiceRoomPage/JoinVoiceRoomPage.tsx @@ -4,13 +4,15 @@ import * as s from "@/pages/VoiceRoomPage/JoinVoiceRoom.styled"; import redo from "@/assets/icon_redo.svg"; //임시로 적용하는 프로필 이미지 -import reactLogo from "@/assets/react.svg"; import { BottomBtn } from "@/components/BottomBtn"; import { useLocation, useNavigate } from "react-router-dom"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import VoiceRoomPage from "@/pages/VoiceRoomPage/VoiceRoomPage"; import { VrList } from "@/pages/VoiceRoomPage/VoiceRoomListPage"; import { VrTokenApi } from "@/apis/voiceroomApi"; +import { GetUserProfileApi } from "@/apis/GetUserProfileApi"; +import { UserProfile } from "@/apis/GetUserProfileApi"; +import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL"; const JoinVoiceRoomPage = () => { const location = useLocation(); @@ -19,18 +21,49 @@ const JoinVoiceRoomPage = () => { const title = data.name; const user_num = data.numParticipant; - // 프로필 수정 - const userProfile = reactLogo; - - // 임시 이름 - const userName = "임시"; - const [isJoined, setJoin] = useState(false); + const [userData, setUserData] = useState(); + const [userName, setUserName] = useState(); + const [userImg, setUserImg] = useState(); + const [userId, setUserId] = useState(); const onJoin = () => { VrTokenApi(3, data.id, setJoin); }; const navigate = useNavigate(); + + useEffect(() => { + if (userData !== undefined) { + setUserName(userData.userName); + console.log(userData.userName); + setUserImg(userData.userProfileImg); + if (userData.userId !== undefined) { + setUserId(userData.userId); + } + } + }, [userData]); + + useEffect(() => { + const spaceId = localStorage.getItem("spaceId"); + const userId = localStorage.getItem("userId"); + if (spaceId !== null) { + GetUserProfileApi().then((data) => { + console.log(data); + // + let _temp: UserProfile | undefined = data?.result.userProfileList.find((e) => { + return e.spaceId === Number.parseInt(spaceId); + }); + if (_temp !== undefined) { + if (userId != null) { + _temp.userId = Number.parseInt(userId); + } + console.log(_temp); + setUserData(_temp); + } + }); + } + }, []); + return (
    {isJoined ? ( @@ -43,11 +76,11 @@ const JoinVoiceRoomPage = () => { {title} - + - +
    {userName}