Skip to content

Commit

Permalink
Merge branch 'common/dev/feat_coin#1604' of github.com:innovationacad…
Browse files Browse the repository at this point in the history 
…emy-kr/Cabi into common/dev/feat_coin#1604
  • Loading branch information
@chyo1
chyo1 committed Jun 4, 2024
2 parents d50067d + e7227ed commit 008412f
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 135 deletions.
53 changes: 24 additions & 29 deletions frontend/src/Cabinet/components/AdminInfo/Chart/CoinFlow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,10 @@ import {
} from "@/Cabinet/pages/admin/AdminStorePage";
import { CoinDateType, CoinFlowType } from "@/Cabinet/types/enum/store.enum";

// interface ICoinAmountDto {
// date: Date;
// amount: number;
// }

// 가짜 데이터를 생성하는 함수
function generateDummyData(
startDate: string,
endDate: string
// totalCoinUseData : ICoinStatisticsDto[];
): {
issueCoin: ICoinAmountDto[];
unusedCoin: ICoinAmountDto[];
Expand Down Expand Up @@ -52,6 +46,29 @@ function generateDummyData(
return dummyData;
}

// const calculateEndDate = (startDate: Date, type: CoinDateType) => {
// switch (type) {
// case CoinDateType.DAY:
// return new Date(startDate.getTime() + 7 * 24 * 60 * 60 * 1000); // 7일 뒤
// case CoinDateType.WEEK:
// return new Date(startDate.getTime() + 4 * 7 * 24 * 60 * 60 * 1000); // 4주 뒤
// case CoinDateType.MONTH:
// const endDate = new Date(startDate);
// endDate.setMonth(startDate.getMonth() + 4); // 4개월 뒤
// return endDate;
// default:
// return startDate;
// }
// };
// 현재 날짜
// const today = new Date();
// today.setHours(0, 0, 0, 0); // 현재 날짜의 시간을 00:00:00으로 설정
// const endDate = calculateEndDate(today, toggleType);
// const dummyData = generateDummyData(
// today.toISOString().split("T")[0], // 형식 YYYY-MM-DD
// endDate.toISOString().split("T")[0] // 형식 YYYY-MM-DD
// );

const CoinFlow = ({
toggleType,
coinToggleType,
Expand All @@ -61,32 +78,10 @@ const CoinFlow = ({
coinToggleType: CoinFlowType;
totalCoinUseData: ICoinStatisticsDto | undefined;
}) => {
// const calculateEndDate = (startDate: Date, type: CoinDateType) => {
// switch (type) {
// case CoinDateType.DAY:
// return new Date(startDate.getTime() + 7 * 24 * 60 * 60 * 1000); // 7일 뒤
// case CoinDateType.WEEK:
// return new Date(startDate.getTime() + 4 * 7 * 24 * 60 * 60 * 1000); // 4주 뒤
// case CoinDateType.MONTH:
// const endDate = new Date(startDate);
// endDate.setMonth(startDate.getMonth() + 4); // 4개월 뒤
// return endDate;
// default:
// return startDate;
// }
// };
// 현재 날짜
// const today = new Date();
// today.setHours(0, 0, 0, 0); // 현재 날짜의 시간을 00:00:00으로 설정
// const endDate = calculateEndDate(today, toggleType);
// const dummyData = generateDummyData(
// today.toISOString().split("T")[0], // 형식 YYYY-MM-DD
// endDate.toISOString().split("T")[0] // 형식 YYYY-MM-DD
// );
console.log("totalCoinUseData: ", totalCoinUseData);
const formattedData = [
{
id: "issueCoin",
id: "issuedCoin",
data:
totalCoinUseData?.issueCoin?.map((item) => ({
x: item.date,
Expand Down
33 changes: 12 additions & 21 deletions frontend/src/Cabinet/components/AdminInfo/Chart/ItemBarChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,40 @@
import {ResponsiveBar } from "@nivo/bar";
import { ResponsiveBar } from "@nivo/bar";
import styled from "styled-components";

export interface IitemUseCountDto {
export interface IItemUseCountDto {
itemName: string;
itemDetails: string;
useCount: number;
userCount: number;
}

interface ITransformedItem {
item: string;
[key: string]: number | string;
}

function transformData(itemCount: IitemUseCountDto[]): ITransformedItem[] {
const transformData = (itemArr: IItemUseCountDto[]): ITransformedItem[] => {
const transformedData: ITransformedItem[] = [];

itemCount.forEach((item) => {
const { itemName, itemDetails, useCount } = item;
itemArr.forEach((item) => {
const { itemName, itemDetails, userCount } = item;
const existingItem = transformedData.find(
(transformed) => transformed.item === itemName
);

if (existingItem) {
const typeNumber = itemDetails.split("_")[1];
if (typeNumber)
existingItem[`type_${typeNumber}`] = useCount;
else
existingItem[`type`] = useCount;
existingItem[itemDetails] = userCount;
} else {
const newItem: ITransformedItem = {
item: itemName,
[itemDetails]: userCount,
};

const typeNumber = itemDetails.split("_")[1];
if (typeNumber)
newItem[`type_${typeNumber}`] = useCount;
else
newItem[`type`] = useCount;

transformedData.push(newItem);
}
});
return transformedData;
}
};

const ItemBarChart = ({ data }: { data: IitemUseCountDto[] }) => (
const ItemBarChart = ({ data }: { data: IItemUseCountDto[] }) => (
<ItemBarChartStyled>
<ResponsiveBar
theme={{
Expand All @@ -61,7 +51,7 @@ const ItemBarChart = ({ data }: { data: IitemUseCountDto[] }) => (
},
}}
data={transformData(data)}
keys={["type", "type_31", "type_15", "type_7", "type_3"]}
keys={["이사권", "알림 등록권", "31일", "15일", "7일", "3일"]}
indexBy="item"
margin={{ top: 50, right: 60, bottom: 50, left: 60 }}
padding={0.2}
Expand All @@ -70,6 +60,7 @@ const ItemBarChart = ({ data }: { data: IitemUseCountDto[] }) => (
valueScale={{ type: "linear" }}
indexScale={{ type: "band", round: true }}
colors={[
"var(--sys-main-color)",
"var(--sys-main-color)",
"var(--sys-main-color)",
"var(--ref-purple-400)",
Expand Down
1 change: 0 additions & 1 deletion frontend/src/Cabinet/components/ItemLog/AdminItemUsageLog.container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
import AdminItemUsageLog from "@/Cabinet/components/ItemLog/AdminItemUsageLog";
import { ItemLogResponseType } from "@/Cabinet/types/dto/admin.dto";
import useMenu from "@/Cabinet/hooks/useMenu";
import { STATUS_400_BAD_REQUEST } from "@/Cabinet/constants/StatusCode";

const AdminItemUsageLogContainer = () => {
const { closeStore } = useMenu();
Expand Down
100 changes: 31 additions & 69 deletions frontend/src/Cabinet/pages/admin/AdminItemUsageLogPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,42 @@
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import AdminItemProvideContainer from "@/Cabinet/components/ItemLog/AdminItemProvideLog.container";
import AdminItemUsageLogContainer from "@/Cabinet/components/ItemLog/AdminItemUsageLog.container";
import useMenu from "@/Cabinet/hooks/useMenu";

const AdminItemUsageLogPage = ({
toggleType = "PROVIDE",
}: {
toggleType?: string;
}) => {
const AdminItemUsageLogPage = () => {
const { closeUserStore } = useMenu();
const [currentToggleType, setToggleType] = useState<string>(toggleType);
const isSearchPage = window.location.pathname === "/admin/search";

useEffect(() => {
if (!isSearchPage && toggleType !== currentToggleType) {
setToggleType("PROVIDE");
}
}, [isSearchPage, toggleType]);

const switchToggleType = () => {
setToggleType(currentToggleType === "PROVIDE" ? "LIST" : "PROVIDE");
};

return (
<AdminItemLogStyled id="itemInfo">
<TitleContainer>
<TitleStyled isClick={isSearchPage} onClick={switchToggleType}>
{isSearchPage && (
<ImageStyled>
<img
src="/src/Cabinet/assets/images/LeftSectionButton.svg"
alt=""
/>
</ImageStyled>
)}
{currentToggleType === "PROVIDE" ? "아이템 지급 기록" : "아이템 내역"}
</TitleStyled>
<GoBackButtonStyled onClick={closeUserStore}>뒤로가기</GoBackButtonStyled>
<TitleStyled isClick={isSearchPage}>아이템 내역</TitleStyled>
<GoBackButtonStyled onClick={closeUserStore}>
뒤로가기
</GoBackButtonStyled>
</TitleContainer>
{currentToggleType === "PROVIDE" ? (
<AdminItemProvideContainer />
) : (
<AdminItemUsageLogContainer />
)}
<AdminItemUsageLogContainer />
</AdminItemLogStyled>
);
};

const GoBackButtonStyled = styled.div`
const AdminItemLogStyled = styled.div`
position: absolute;
top: 3%;
color: var(--sys-sub-color);
right: 6%;
font-size: 0.875rem;
text-decoration: underline;
cursor: pointer;
top: 120px;
right: 0;
min-width: 330px;
min-height: 100%;
padding: 40px 20px 10px 20px;
z-index: 9;
transform: translateX(120%);
transition: transform 0.3s ease-in-out;
box-shadow: 0 0 40px 0 var(--page-btn-shadow-color);
display: flex;
flex-direction: column;
align-items: center;
background: var(--bg-color);
&.on {
transform: translateX(0);
}
`;

const TitleContainer = styled.div`
Expand All @@ -68,39 +49,20 @@ const TitleContainer = styled.div`
`;

const TitleStyled = styled.h1<{ isClick: boolean }>`
margin-left: 15px;
font-size: 1.5rem;
font-weight: 700;
display: flex;
cursor: ${(props) => (props.isClick ? "pointer" : "default")};
&:hover {
color: ${(props) => (props.isClick ? "var(--sys-main-color)" : "")};
}
`;

const ImageStyled = styled.div`
width: 24px;
transform: rotate(-90deg);
margin-right: 4px;
`;

const AdminItemLogStyled = styled.div`
const GoBackButtonStyled = styled.div`
position: absolute;
top: 120px;
right: 0;
min-width: 330px;
min-height: 100%;
padding: 40px 20px 10px 20px;
z-index: 9;
transform: translateX(120%);
transition: transform 0.3s ease-in-out;
box-shadow: 0 0 40px 0 var(--page-btn-shadow-color);
display: flex;
flex-direction: column;
align-items: center;
background: var(--bg-color);
&.on {
transform: translateX(0);
}
top: 3%;
color: var(--sys-sub-color);
right: 6%;
font-size: 0.875rem;
text-decoration: underline;
cursor: pointer;
`;

export default AdminItemUsageLogPage;
Loading

0 comments on commit 008412f

Please sign in to comment.