Skip to content

Commit e695a8a

Browse files
siniseongsiniseong
authored
Merge pull request #97 from Boundary-org/feat/#91
DOCS :: ν•™μŠ΅μž λ§ˆμ΄νŽ˜μ΄μ§€ ν‹€ κ΅¬ν˜„
2 parents 416fbc1 + 0aae40d commit e695a8a

File tree

3 files changed

+207
-5
lines changed

3 files changed

+207
-5
lines changed

β€Žapp/child/mypage.jsx

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React, { useState } from 'react';
2+
import { View, Text, StyleSheet } from 'react-native';
3+
import { Calendar, LocaleConfig } from 'react-native-calendars';
4+
import dayjs from 'dayjs';
5+
import 'dayjs/locale/ko';
6+
import { globalStyles } from '../../styles/global';
7+
8+
const configureLocalization = () => {
9+
dayjs.locale('ko');
10+
11+
LocaleConfig.locales.ko = {
12+
monthNames: ['1μ›”', '2μ›”', '3μ›”', '4μ›”', '5μ›”', '6μ›”', '7μ›”', '8μ›”', '9μ›”', '10μ›”', '11μ›”', '12μ›”'],
13+
monthNamesShort: ['1μ›”', '2μ›”', '3μ›”', '4μ›”', '5μ›”', '6μ›”', '7μ›”', '8μ›”', '9μ›”', '10μ›”', '11μ›”', '12μ›”'],
14+
dayNames: ['μΌμš”μΌ', 'μ›”μš”μΌ', 'ν™”μš”μΌ', 'μˆ˜μš”μΌ', 'λͺ©μš”일', 'κΈˆμš”μΌ', 'ν† μš”μΌ'],
15+
dayNamesShort: ['일', 'μ›”', 'ν™”', '수', 'λͺ©', '금', 'ν† '],
16+
today: '였늘',
17+
};
18+
19+
LocaleConfig.defaultLocale = 'ko';
20+
};
21+
22+
const ProgressBar = ({ name, level, progress }) => {
23+
return (
24+
<View style={styles.progressBarContainer}>
25+
<Text style={styles.levelText}>
26+
<Text style={styles.nameHighlight}>{name}λ‹˜</Text>{' '}
27+
<Text style={styles.defaultColor}>레벨 </Text>
28+
<Text style={styles.levelHighlight}>{level}</Text>
29+
</Text>
30+
31+
<View style={styles.progressBarWrapper}>
32+
<Text style={styles.progressLeftText}>470/1000</Text>
33+
<Text style={styles.progressRightText}>pt</Text>
34+
</View>
35+
<View style={styles.progressBar}>
36+
<View style={[styles.progress, { width: `${progress * 100}%` }]} />
37+
</View>
38+
</View>
39+
);
40+
};
41+
42+
const App = () => {
43+
configureLocalization();
44+
const [progress, setProgress] = useState(0.47);
45+
46+
const calendarTheme = {
47+
todayTextColor: '#FFFFFF',
48+
todayBackgroundColor: '#5772FF',
49+
selectedDayTextColor: '#FFFFFF',
50+
textDayFontSize: 20,
51+
textDayFontWeight: 'bold',
52+
textMonthFontSize: 20,
53+
textMonthFontWeight: 'bold',
54+
textSectionTitleColor: 'rgba(138, 138, 138, 1)',
55+
selectedDayBackgroundColor: '#5772FF',
56+
arrowColor: '#5772FF',
57+
textDayFontFamily: 'Pretendard',
58+
textMonthFontFamily: 'Pretendard',
59+
textDayHeaderFontFamily: 'Pretendard',
60+
textDayHeaderFontWeight: 'bold',
61+
backgroundColor: '#F3F4F6',
62+
calendarBackground: '#F3F4F6',
63+
dayTextColor: '#000000',
64+
};
65+
66+
const markedDates = {
67+
'2025-01-24': {
68+
selected: true,
69+
selectedColor: '#5772FF',
70+
selectedTextColor: '#',
71+
},
72+
'2025-05-15': { marked: true, dotColor: '#50cebb' },
73+
'2025-05-16': { marked: true, dotColor: '#50cebb' },
74+
'2025-05-21': {
75+
startingDay: true,
76+
color: '#50cebb',
77+
textColor: 'white',
78+
},
79+
'2025-05-22': { color: '#70d7c7', textColor: 'white' },
80+
'2025-05-23': {
81+
color: '#70d7c7',
82+
textColor: 'white',
83+
marked: true,
84+
dotColor: 'white',
85+
},
86+
'2025-05-24': { color: '#70d7c7', textColor: 'white' },
87+
'2025-05-25': {
88+
endingDay: true,
89+
color: '#50cebb',
90+
textColor: 'white',
91+
},
92+
};
93+
94+
return (
95+
<View style={[globalStyles.container]}>
96+
<View style={globalStyles.header}>
97+
<Text style={[globalStyles.subtitle, styles.text]}>
98+
아이 ν•™μŠ΅ 진행도 확인
99+
</Text>
100+
<Text style={[globalStyles.description]}>
101+
μ•„μ΄μ˜ ν•™μŠ΅ κ²°κ³Όλ₯Ό ν™•μΈν•˜λ©° λ„μ™€μ£Όμ„Έμš”.
102+
</Text>
103+
</View>
104+
105+
<ProgressBar
106+
name="신희성"
107+
level={46}
108+
progress={progress}
109+
/>
110+
111+
<View style={styles.calendarContainer}>
112+
<Calendar
113+
style={styles.calendar}
114+
theme={calendarTheme}
115+
markingType={'period'}
116+
markedDates={markedDates}
117+
monthFormat={'yyyyλ…„ MMμ›”'}
118+
firstDay={0}
119+
/>
120+
</View>
121+
</View>
122+
);
123+
};
124+
125+
const styles = StyleSheet.create({
126+
description: {
127+
color: '#565656',
128+
fontSize: 18,
129+
textAlign: 'center',
130+
fontWeight: '300',
131+
marginBottom: -10,
132+
marginTop: 30,
133+
fontFamily: 'Pretendard',
134+
},
135+
text: {
136+
fontFamily: 'Pretendard',
137+
},
138+
progressBarContainer: {
139+
alignItems: 'center',
140+
marginTop: 50,
141+
},
142+
levelText: {
143+
fontSize: 24,
144+
fontWeight: '700',
145+
color: '#000000',
146+
marginTop: -30,
147+
marginBottom: 30,
148+
marginLeft: -150,
149+
fontFamily: 'Pretendard',
150+
},
151+
nameHighlight: {
152+
color: '#5772FF',
153+
},
154+
levelHighlight: {
155+
color: '#5772FF',
156+
},
157+
defaultColor: {
158+
color: '#000000',
159+
},
160+
progressBarWrapper: {
161+
width: 320,
162+
flexDirection: 'row',
163+
justifyContent: 'space-between',
164+
marginBottom: 5,
165+
},
166+
progressLeftText: {
167+
fontSize: 14,
168+
fontWeight: '500',
169+
color: '#8E8E8E',
170+
fontFamily: 'Pretendard',
171+
},
172+
progressRightText: {
173+
fontSize: 14,
174+
fontWeight: '500',
175+
color: '#8E8E8E',
176+
fontFamily: 'Pretendard',
177+
},
178+
progressBar: {
179+
width: 320,
180+
height: 10,
181+
backgroundColor: '#E0E0E0',
182+
borderRadius: 5,
183+
overflow: 'hidden',
184+
},
185+
progress: {
186+
height: '100%',
187+
backgroundColor: '#5772FF',
188+
},
189+
calendarContainer: {
190+
marginTop: 50,
191+
paddingHorizontal: 20,
192+
},
193+
calendar: {
194+
borderRadius: 10,
195+
elevation: 4,
196+
backgroundColor: '#F3F4F6',
197+
},
198+
});
199+
200+
export default App;

β€Žpackage-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

β€Žpackage.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@react-navigation/native": "^6.1.18",
1616
"@react-navigation/stack": "^6.4.1",
1717
"axios": "^1.7.7",
18+
"dayjs": "^1.11.13",
1819
"expo": "^51.0.32",
1920
"expo-blur": "^13.0.2",
2021
"expo-constants": "~16.0.2",
@@ -25,7 +26,7 @@
2526
"react-dom": "18.2.0",
2627
"react-native": "0.74.5",
2728
"react-native-blob-util": "^0.21.2",
28-
"react-native-calendars": "^1.1306.0",
29+
"react-native-calendars": "^1.1308.1",
2930
"react-native-image": "^0.1.1",
3031
"react-native-pdf": "^6.7.6",
3132
"react-native-safe-area-context": "^4.10.5",

0 commit comments

Comments
Β (0)