Skip to content

Commit 70a418e

Browse files
kwonsaebomkwonsaebom
authored
Merge pull request #96 from SOPT-36-NINEDOT/feat/#93/streackTracker
[Feat]: Streack Tracker 섹션
2 parents 6620118 + f7c1d6e commit 70a418e

File tree

16 files changed

+378
-2
lines changed

16 files changed

+378
-2
lines changed

‎public/svg/ic_streaker_dot.svg‎

Lines changed: 33 additions & 0 deletions
Loading

‎public/svg/ic_streaker_dot_default.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/svg/IcStreakerDot.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import type { SVGProps } from 'react';
2+
const SvgIcStreakerDot = (props: SVGProps<SVGSVGElement>) => (
3+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36" {...props}>
4+
<g filter="url(#ic_streaker_dot_svg__a)">
5+
<rect width={36} height={36} fill="url(#ic_streaker_dot_svg__b)" rx={18} />
6+
<foreignObject width={44} height={44} x={-4} y={-4}>
7+
<div
8+
style={{
9+
backdropFilter: 'blur(2px)',
10+
clipPath: 'url(#ic_streaker_dot_svg__c)',
11+
height: '100%',
12+
width: '100%',
13+
}}
14+
/>
15+
</foreignObject>
16+
<rect
17+
width={36}
18+
height={36}
19+
fill="url(#ic_streaker_dot_svg__d)"
20+
fillOpacity={0.1}
21+
data-figma-bg-blur-radius={4}
22+
rx={18}
23+
/>
24+
</g>
25+
<defs>
26+
<linearGradient
27+
id="ic_streaker_dot_svg__b"
28+
x1={18}
29+
x2={18}
30+
y1={0}
31+
y2={36}
32+
gradientUnits="userSpaceOnUse"
33+
>
34+
<stop stopColor="#3E72F3" />
35+
<stop offset={1} stopColor="#C3D9FF" />
36+
</linearGradient>
37+
<linearGradient
38+
id="ic_streaker_dot_svg__d"
39+
x1={18}
40+
x2={18}
41+
y1={0}
42+
y2={36}
43+
gradientUnits="userSpaceOnUse"
44+
>
45+
<stop stopColor="#508FFF" />
46+
<stop offset={1} stopColor="#8AB4FF" />
47+
</linearGradient>
48+
<clipPath id="ic_streaker_dot_svg__c" transform="translate(4 4)">
49+
<rect width={36} height={36} rx={18} />
50+
</clipPath>
51+
<filter
52+
id="ic_streaker_dot_svg__a"
53+
width={45.6}
54+
height={45.6}
55+
x={-4.8}
56+
y={-4.8}
57+
colorInterpolationFilters="sRGB"
58+
filterUnits="userSpaceOnUse"
59+
>
60+
<feFlood floodOpacity={0} result="BackgroundImageFix" />
61+
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
62+
<feColorMatrix
63+
in="SourceAlpha"
64+
result="hardAlpha"
65+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
66+
/>
67+
<feOffset dx={-2.4} dy={2.4} />
68+
<feGaussianBlur stdDeviation={1.2} />
69+
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
70+
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0" />
71+
<feBlend in2="shape" result="effect1_innerShadow_1979_1516" />
72+
<feColorMatrix
73+
in="SourceAlpha"
74+
result="hardAlpha"
75+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
76+
/>
77+
<feOffset dx={2.4} dy={-2.4} />
78+
<feGaussianBlur stdDeviation={1.2} />
79+
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
80+
<feColorMatrix values="0 0 0 0 0.582788 0 0 0 0 0.76 0 0 0 0 0.674348 0 0 0 0.1 0" />
81+
<feBlend in2="effect1_innerShadow_1979_1516" result="effect2_innerShadow_1979_1516" />
82+
</filter>
83+
</defs>
84+
</svg>
85+
);
86+
export default SvgIcStreakerDot;

‎src/assets/svg/IcStreakerDotDefault.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { SVGProps } from 'react';
2+
const SvgIcStreakerDotDefault = (props: SVGProps<SVGSVGElement>) => (
3+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36" {...props}>
4+
<rect width={36} height={36} fill="#282C33" rx={18} />
5+
</svg>
6+
);
7+
export default SvgIcStreakerDotDefault;

‎src/assets/svg/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export { default as IcPencil } from './IcPencil';
99
export { default as IcRadioChecked } from './IcRadioChecked';
1010
export { default as IcRadioDefault } from './IcRadioDefault';
1111
export { default as IcSmallTextdelete } from './IcSmallTextdelete';
12+
export { default as IcStreakerDot } from './IcStreakerDot';
13+
export { default as IcStreakerDotDefault } from './IcStreakerDotDefault';
1214
export { default as IcTextdelete } from './IcTextdelete';
1315
export { default as IcTooltipDelete } from './IcTooltipDelete';
1416
export { default as IcTriangle } from './IcTriangle';

‎src/page/history/History.css.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { style } from '@vanilla-extract/css';
2+
3+
import { colors, fonts } from '@/style/token';
4+
5+
export const historyContainer = style({
6+
backgroundColor: colors.bg_black01,
7+
});
8+
9+
export const layoutContainer = style({
10+
maxWidth: '128rem',
11+
margin: '0 auto',
12+
});
13+
14+
export const streakTrackerWrapper = style({
15+
paddingTop: '8rem',
16+
paddingBottom: '9.8rem',
17+
});
18+
19+
export const streakTitle = style({
20+
marginBottom: '0.4rem',
21+
color: colors.white01,
22+
...fonts.title01,
23+
});
24+
25+
export const streakDescription = style({
26+
marginBottom: '2.8rem',
27+
color: colors.grey6,
28+
...fonts.subtitle04,
29+
});

‎src/page/history/History.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1+
import * as styles from '@/page/history/History.css';
2+
import StreakTracker from '@/page/history/StreakTrackerSection/StreakTrackerSection';
3+
4+
const STREAK_BANNER_MESSAGE = '작은 실천을 66일 이어가면 나의 목표에 도달합니다';
5+
const STREAK_DESCRIPTION_MESSAGE = '하루에 하나라도 실천하면 오늘의 점이 찍혀요!';
6+
17
const History = () => {
28
return (
3-
<div>
4-
<h1>히스토리</h1>
9+
<div className={styles.historyContainer}>
10+
<div className={styles.layoutContainer}>
11+
<section className={styles.streakTrackerWrapper}>
12+
<h3 className={styles.streakTitle}>{STREAK_BANNER_MESSAGE}</h3>
13+
<p className={styles.streakDescription}>{STREAK_DESCRIPTION_MESSAGE}</p>
14+
<StreakTracker />
15+
</section>
16+
</div>
517
</div>
618
);
719
};

‎src/page/history/StreakTrackerSection/StreakTrackerSection.css.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { style } from '@vanilla-extract/css';
2+
3+
export const streakTrackerContainer = style({
4+
display: 'flex',
5+
gap: '2rem',
6+
});

‎src/page/history/StreakTrackerSection/StreakTrackerSection.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import StreakDetail from '@/page/history/component/StreakDetail/StreakDetail';
2+
import StreakGrid from '@/page/history/component/StreakGrid/StreakGrid';
3+
import { dayData } from '@/page/history/sampleData/dayData';
4+
import { todoData } from '@/page/history/sampleData/todoData';
5+
import * as styles from '@/page/history/StreakTrackerSection/StreakTrackerSection.css';
6+
7+
const StreakTracker = () => {
8+
const detailData = todoData.streaks.find((streak) => streak.streakDay === dayData.progressDays);
9+
10+
return (
11+
<div className={styles.streakTrackerContainer}>
12+
<StreakGrid progressDays={dayData.progressDays} />
13+
<StreakDetail detailData={detailData} />
14+
</div>
15+
);
16+
};
17+
18+
export default StreakTracker;

‎src/page/history/component/StreakDetail/StreakDetail.css.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { recipe } from '@vanilla-extract/recipes';
2+
import { style } from '@vanilla-extract/css';
3+
4+
import { colors, fonts } from '@/style/token';
5+
6+
export const detailContainer = recipe({
7+
base: {
8+
width: '41.4rem',
9+
backgroundColor: colors.grey2,
10+
borderRadius: '12px',
11+
},
12+
variants: {
13+
state: {
14+
empty: {
15+
display: 'flex',
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
},
19+
filled: {
20+
padding: '3rem',
21+
},
22+
},
23+
},
24+
defaultVariants: {
25+
state: 'empty',
26+
},
27+
});
28+
29+
export const defaultText = style({
30+
color: colors.grey8,
31+
...fonts.subtitle04,
32+
textAlign: 'center',
33+
});
34+
35+
export const dayText = style({
36+
marginRight: '1.2rem',
37+
color: colors.grey11,
38+
...fonts.subtitle01,
39+
});
40+
41+
export const todoCount = style({
42+
color: colors.blue04,
43+
...fonts.subtitle01,
44+
});
45+
46+
export const todoList = style({
47+
display: 'flex',
48+
flexDirection: 'column',
49+
gap: '1.2rem',
50+
marginTop: '2.4rem',
51+
color: colors.grey11,
52+
...fonts.body03,
53+
});

0 commit comments

Comments
 (0)