Skip to content

Commit 431a53f

Browse files
fecaparkfecapark
committed
Refactor: Refactoring GrassGraph
1 parent 314175f commit 431a53f

File tree

10 files changed

+118
-134
lines changed

10 files changed

+118
-134
lines changed

‎components/GrassGraph/Grass/Grass.styled.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from "@emotion/styled";
2+
3+
export const GrassBlock = styled.div<{ backgroundColor: string }>`
4+
width: 100%;
5+
height: 100%;
6+
background-color: ${(props) => props.backgroundColor};
7+
8+
border-radius: 1px;
9+
`;

‎components/GrassGraph/Grass/Grass.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { getGrassColorByValue } from "../GrassGraph.util";
2+
import { GrassBlock } from "./Grass.styled";
3+
import { IGrassProps } from "./Grass.type";
4+
5+
export default function Grass({ value, color, colorBoundary }: IGrassProps) {
6+
return (
7+
<GrassBlock
8+
backgroundColor={getGrassColorByValue(value, color, colorBoundary)}
9+
></GrassBlock>
10+
);
11+
}

‎components/GrassGraph/Grass/Grass.type.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface IGrassProps {
2+
value: number;
3+
color: string;
4+
colorBoundary: [number, number, number, number];
5+
}

‎components/GrassGraph/GrassColorsetInfo/GrassColorsetInfo.styled.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styled from "@emotion/styled";
2+
3+
export const GrassColorsetInfoContainer = styled.div`
4+
margin-top: 16px;
5+
6+
display: flex;
7+
align-items: center;
8+
gap: 4px;
9+
10+
.color {
11+
width: 10px;
12+
height: 10px;
13+
border-radius: 1px;
14+
}
15+
16+
span {
17+
font-size: 12px;
18+
color: #e0e0e0;
19+
}
20+
`;

‎components/GrassGraph/GrassColorsetInfo/GrassColorsetInfo.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { getGrassColorByValue } from "../GrassGraph.util";
2+
import { GrassColorsetInfoContainer } from "./GrassColorsetInfo.styled";
3+
import { IGrassColorsetInfoProps } from "./GrassColorsetInfo.type";
4+
5+
export default function GrassColorsetInfo({
6+
color,
7+
colorBoundary,
8+
leftText,
9+
rightText,
10+
}: IGrassColorsetInfoProps) {
11+
return (
12+
<GrassColorsetInfoContainer>
13+
<span style={{ marginRight: 6 }}>{leftText}</span>
14+
{[0, ...colorBoundary].map((aBoundary) => (
15+
<div
16+
key={aBoundary}
17+
className="color"
18+
style={{
19+
backgroundColor: getGrassColorByValue(
20+
aBoundary,
21+
color,
22+
colorBoundary
23+
),
24+
}}
25+
></div>
26+
))}
27+
<span style={{ marginLeft: 6 }}>{rightText}</span>
28+
</GrassColorsetInfoContainer>
29+
);
30+
}

‎components/GrassGraph/GrassColorsetInfo/GrassColorsetInfo.type.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface IGrassColorsetInfoProps {
2+
color: string;
3+
colorBoundary: [number, number, number, number];
4+
leftText: string;
5+
rightText: string;
6+
}

‎components/GrassGraph/GrassGraph.styled.ts

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -48,30 +48,3 @@ export const GrassGrid = styled.div`
4848
4949
overflow-x: hidden;
5050
`;
51-
52-
export const GrassBlock = styled.div<{ backgroundColor: string }>`
53-
width: 100%;
54-
height: 100%;
55-
background-color: ${(props) => props.backgroundColor};
56-
57-
border-radius: 1px;
58-
`;
59-
60-
export const GrassColorsetInfoContainer = styled.div`
61-
margin-top: 16px;
62-
63-
display: flex;
64-
align-items: center;
65-
gap: 4px;
66-
67-
.color {
68-
width: 10px;
69-
height: 10px;
70-
border-radius: 1px;
71-
}
72-
73-
span {
74-
font-size: 12px;
75-
color: #e0e0e0;
76-
}
77-
`;

‎components/GrassGraph/GrassGraph.tsx

Lines changed: 24 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,46 @@
11
import { useRef, useState, useMemo, useEffect } from "react";
2-
import {
3-
Container,
4-
ContentContainer,
5-
GrassBlock,
6-
GrassColorsetInfoContainer,
7-
GrassGrid,
8-
} from "./GrassGraph.styled";
9-
import {
10-
IGrassColorsetInfoProps,
11-
IGrassGraphProps,
12-
IGrassProps,
13-
} from "./GrassGraph.type";
2+
import { Container, ContentContainer, GrassGrid } from "./GrassGraph.styled";
3+
import { IGrassGraphProps } from "./GrassGraph.type";
144
import { languageOptionValueAtom as LOV } from "../../shared/atom";
155
import { useRecoilValue } from "recoil";
16-
import { Theme } from "../../styles/theme";
17-
18-
const getGrassColorByValue = (
19-
value: number,
20-
hex: string,
21-
boundary: [number, number, number, number]
22-
) => {
23-
if (value < boundary[0]) return `${Theme.background.secondary}`;
24-
if (value < boundary[1]) return `${hex}66`;
25-
if (value < boundary[2]) return `${hex}aa`;
26-
if (value < boundary[3]) return `${hex}dd`;
27-
return `${hex}ff`;
28-
};
29-
30-
function Grass({ value, color, colorBoundary }: IGrassProps) {
31-
return (
32-
<GrassBlock
33-
backgroundColor={getGrassColorByValue(value, color, colorBoundary)}
34-
></GrassBlock>
35-
);
36-
}
37-
38-
function GrassColorsetInfo({
39-
color,
40-
colorBoundary,
41-
leftText,
42-
rightText,
43-
}: IGrassColorsetInfoProps) {
44-
return (
45-
<GrassColorsetInfoContainer>
46-
<span style={{ marginRight: 6 }}>{leftText}</span>
47-
{[0, ...colorBoundary].map((aBoundary) => (
48-
<div
49-
key={aBoundary}
50-
className="color"
51-
style={{
52-
backgroundColor: getGrassColorByValue(
53-
aBoundary,
54-
color,
55-
colorBoundary
56-
),
57-
}}
58-
></div>
59-
))}
60-
<span style={{ marginLeft: 6 }}>{rightText}</span>
61-
</GrassColorsetInfoContainer>
62-
);
63-
}
6+
import GrassColorsetInfo from "./GrassColorsetInfo/GrassColorsetInfo";
7+
import Grass from "./Grass/Grass";
648

659
export default function GrassGraph({
6610
color,
6711
recentDatas,
6812
colorBoundary,
6913
}: IGrassGraphProps) {
7014
const gridRef = useRef<HTMLDivElement>(null);
71-
const [gridMaxItems, setGridMaxItems] = useState(0);
7215
const language = useRecoilValue(LOV);
16+
const [gridMaxItems, setGridMaxItems] = useState(0);
7317

74-
/*
75-
Memos
76-
*/
7718
const parsedDatas = useMemo(() => {
78-
const res: number[] = [];
79-
for (let i = gridMaxItems - 1; i >= 0; i--) {
80-
if (i < recentDatas.length) {
81-
res.push(recentDatas[i]);
82-
} else {
83-
res.push(0);
84-
}
85-
}
86-
return res;
19+
const ZERO_SIZE = Math.max(gridMaxItems - recentDatas.length, 0);
20+
const zeros = Array(ZERO_SIZE).fill(0);
21+
const datas = recentDatas.slice(0, gridMaxItems);
22+
return [...zeros, ...datas.reverse()];
8723
}, [recentDatas, gridMaxItems]);
8824

89-
/*
90-
Effects
91-
*/
25+
const grassItems = useMemo(() => {
26+
return parsedDatas.map((v, i) => {
27+
return (
28+
<Grass key={i} color={color} value={v} colorBoundary={colorBoundary} />
29+
);
30+
});
31+
}, [parsedDatas]);
32+
9233
useEffect(() => {
9334
const onResize = () => {
94-
const { width: gridWidth } = gridRef.current!.getBoundingClientRect();
95-
const gridItemPixelSize = 10;
96-
const gridGap = 4;
97-
35+
const GRID_ROW_COUNT = 7;
36+
const GRID_ITEM_SIZE = 10;
37+
const GRID_GAP = 4;
38+
const { width } = gridRef.current!.getBoundingClientRect();
9839
const columns = Math.floor(
99-
(gridWidth + gridGap) / (gridItemPixelSize + gridGap)
40+
(width + GRID_GAP) / (GRID_ITEM_SIZE + GRID_GAP)
10041
);
10142

102-
setGridMaxItems(7 * columns);
43+
setGridMaxItems(GRID_ROW_COUNT * columns);
10344
};
10445

10546
if (!gridRef.current) return;
@@ -119,18 +60,7 @@ export default function GrassGraph({
11960
<span>{language === "kor" ? "예전" : "Past"}</span>
12061
<span>{language === "kor" ? "최근" : "Present"}</span>
12162
</div>
122-
<GrassGrid ref={gridRef}>
123-
{parsedDatas.map((v, i) => {
124-
return (
125-
<Grass
126-
key={i}
127-
color={color}
128-
value={v}
129-
colorBoundary={colorBoundary}
130-
/>
131-
);
132-
})}
133-
</GrassGrid>
63+
<GrassGrid ref={gridRef}>{grassItems}</GrassGrid>
13464
<GrassColorsetInfo
13565
leftText={language === "kor" ? "0분" : "0min"}
13666
rightText={language === "kor" ? "2시간" : "2hrs"}

‎components/GrassGraph/GrassGraph.type.ts

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,3 @@ export interface IGrassGraphProps {
33
recentDatas: Array<number>;
44
colorBoundary: [number, number, number, number];
55
}
6-
7-
export interface IGrassProps {
8-
value: number;
9-
color: string;
10-
colorBoundary: [number, number, number, number];
11-
}
12-
13-
export interface IGrassColorsetInfoProps {
14-
color: string;
15-
colorBoundary: [number, number, number, number];
16-
leftText: string;
17-
rightText: string;
18-
}

‎components/GrassGraph/GrassGraph.util.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Theme } from "../../styles/theme";
2+
3+
export function getGrassColorByValue(
4+
value: number,
5+
hex: string,
6+
boundary: [number, number, number, number]
7+
) {
8+
if (value < boundary[0]) return `${Theme.background.secondary}`;
9+
if (value < boundary[1]) return `${hex}66`;
10+
if (value < boundary[2]) return `${hex}aa`;
11+
if (value < boundary[3]) return `${hex}dd`;
12+
return `${hex}ff`;
13+
}

0 commit comments

Comments
 (0)