Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat#96 space home #101

Merged
merged 2 commits into from
Aug 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions src/apis/HomePage/GetHomepageApi.ts
Original file line number Diff line number Diff line change
@@ -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<React.SetStateAction<HomeApiResponse | undefined>>,
) => {
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<React.SetStateAction<VoiceRoomApiResponse | undefined>>,
) => {
const requestOptions = createRequestOptionsJSON_AUTH("GET");
if (!requestOptions) {
return null;
}
const response = await fetchHomeApi(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사실 분량은 그리 많진 않지만
fetchApi<> 있어서 이거 가져다 쓰면 localhost.remove item이나 나중에 오류 처리 공통으로 할 수 있어서 좋을거 같아요

`${import.meta.env.VITE_API_BACK_URL}/space/${spaceID}/voiceRoom`,
requestOptions,
).then((res) =>
res?.json?.().then((data: any) => {
setVrData(data.result);
}),
);
};
120 changes: 117 additions & 3 deletions src/pages/HomePage/HomePage.styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
`;
Loading