Skip to content

Commit 07beae0

Browse files
a06246a06246
authored
Merge pull request #136 from intel-fit/k
오류 해결 및 운동 기록 ui 수정
2 parents bb268ff + a9c07e0 commit 07beae0

10 files changed

Lines changed: 983 additions & 769 deletions

File tree

‎src/components/ExerciseSetItem.tsx‎

Lines changed: 134 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ interface ExerciseSetItemProps {
1818
onPressRemove: () => void;
1919
onWeightChange?: (weight: number) => void;
2020
onRepsChange?: (reps: number) => void;
21-
onOrderChange?: (order: number) => void;
2221
}
2322

2423
const ExerciseSetItem: React.FC<ExerciseSetItemProps> = ({
@@ -31,7 +30,6 @@ const ExerciseSetItem: React.FC<ExerciseSetItemProps> = ({
3130
onPressRemove,
3231
onWeightChange,
3332
onRepsChange,
34-
onOrderChange,
3533
}) => {
3634
const isHighlighted = isActive || isCompleted;
3735

@@ -49,36 +47,12 @@ const ExerciseSetItem: React.FC<ExerciseSetItemProps> = ({
4947
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
5048
>
5149
<View style={styles.deleteButtonCircle}>
52-
<Icon name="remove" size={14} color="#ffffff" />
50+
<Icon name="close" size={16} color="#ffffff" />
5351
</View>
5452
</TouchableOpacity>
5553

56-
{/* 세트 번호 - 편집 가능 */}
57-
{onOrderChange ? (
58-
<View style={styles.orderContainer}>
59-
<TextInput
60-
style={[
61-
styles.orderInput,
62-
isHighlighted ? styles.textActive : styles.textDefault,
63-
]}
64-
value={(order ?? 1).toString()}
65-
onChangeText={(text) => {
66-
const num = parseInt(text) || 1;
67-
onOrderChange(num);
68-
}}
69-
keyboardType="numeric"
70-
editable={!isCompleted}
71-
/>
72-
<Text
73-
style={[
74-
styles.orderUnit,
75-
isHighlighted ? styles.textActive : styles.textDefault,
76-
]}
77-
>
78-
세트
79-
</Text>
80-
</View>
81-
) : (
54+
{/* 세트 번호 */}
55+
<View style={styles.setNumberContainer}>
8256
<Text
8357
style={[
8458
styles.setNumber,
@@ -87,32 +61,36 @@ const ExerciseSetItem: React.FC<ExerciseSetItemProps> = ({
8761
>
8862
{order ?? 1}세트
8963
</Text>
90-
)}
64+
</View>
9165

9266
{/* 무게 */}
9367
{onWeightChange ? (
9468
<View style={styles.valueContainer}>
95-
<TextInput
96-
style={[
97-
styles.valueInput,
98-
isHighlighted ? styles.textActive : styles.textDefault,
99-
]}
100-
value={(weight ?? 0).toString()}
101-
onChangeText={(text) => {
102-
const num = parseInt(text) || 0;
103-
onWeightChange(num);
104-
}}
105-
keyboardType="numeric"
106-
editable={!isCompleted}
107-
/>
108-
<Text
109-
style={[
110-
styles.unit,
111-
isHighlighted ? styles.textActive : styles.textDefault,
112-
]}
113-
>
114-
kg
115-
</Text>
69+
<View style={styles.inputWrapper}>
70+
<TextInput
71+
style={[
72+
styles.valueInput,
73+
isHighlighted ? styles.valueInputActive : styles.valueInputDefault,
74+
]}
75+
value={(weight ?? 0).toString()}
76+
onChangeText={(text) => {
77+
const num = parseFloat(text) || 0;
78+
onWeightChange(num);
79+
}}
80+
keyboardType="decimal-pad"
81+
editable={!isCompleted}
82+
placeholder="0"
83+
placeholderTextColor="#999"
84+
/>
85+
<Text
86+
style={[
87+
styles.unit,
88+
isHighlighted ? styles.textActive : styles.textDefault,
89+
]}
90+
>
91+
kg
92+
</Text>
93+
</View>
11694
</View>
11795
) : (
11896
<Text
@@ -128,27 +106,31 @@ const ExerciseSetItem: React.FC<ExerciseSetItemProps> = ({
128106
{/* 횟수 */}
129107
{onRepsChange ? (
130108
<View style={styles.valueContainer}>
131-
<TextInput
132-
style={[
133-
styles.valueInput,
134-
isHighlighted ? styles.textActive : styles.textDefault,
135-
]}
136-
value={(reps ?? 0).toString()}
137-
onChangeText={(text) => {
138-
const num = parseInt(text) || 0;
139-
onRepsChange(num);
140-
}}
141-
keyboardType="numeric"
142-
editable={!isCompleted}
143-
/>
144-
<Text
145-
style={[
146-
styles.unit,
147-
isHighlighted ? styles.textActive : styles.textDefault,
148-
]}
149-
>
150-
회
151-
</Text>
109+
<View style={styles.inputWrapper}>
110+
<TextInput
111+
style={[
112+
styles.valueInput,
113+
isHighlighted ? styles.valueInputActive : styles.valueInputDefault,
114+
]}
115+
value={(reps ?? 0).toString()}
116+
onChangeText={(text) => {
117+
const num = parseInt(text) || 0;
118+
onRepsChange(num);
119+
}}
120+
keyboardType="number-pad"
121+
editable={!isCompleted}
122+
placeholder="0"
123+
placeholderTextColor="#999"
124+
/>
125+
<Text
126+
style={[
127+
styles.unit,
128+
isHighlighted ? styles.textActive : styles.textDefault,
129+
]}
130+
>
131+
회
132+
</Text>
133+
</View>
152134
</View>
153135
) : (
154136
<Text
@@ -161,20 +143,19 @@ const ExerciseSetItem: React.FC<ExerciseSetItemProps> = ({
161143
</Text>
162144
)}
163145

164-
{/* 체크박스 */}
146+
{/* 완료 버튼 */}
165147
<TouchableOpacity
166148
style={[
167-
styles.checkbox,
168-
isCompleted ? styles.checkboxCompleted : styles.checkboxDefault,
149+
styles.completeButton,
150+
isCompleted ? styles.completeButtonActive : styles.completeButtonDefault,
169151
]}
170152
onPress={onToggleComplete}
171153
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
172154
>
173-
{isCompleted && (
174-
<Icon name="checkmark" size={18} color="#000000" />
175-
)}
176-
{!isCompleted && (
177-
<Icon name="checkmark" size={18} color="#CCCCCC" />
155+
{isCompleted ? (
156+
<Icon name="checkmark-circle" size={28} color="#4CAF50" />
157+
) : (
158+
<Icon name="ellipse-outline" size={28} color="#CCCCCC" />
178159
)}
179160
</TouchableOpacity>
180161
</View>
@@ -185,26 +166,32 @@ const styles = StyleSheet.create({
185166
container: {
186167
flexDirection: "row",
187168
alignItems: "center",
188-
paddingVertical: 10,
189-
paddingHorizontal: 18,
190-
marginHorizontal: 12,
191-
marginBottom: 8,
192-
borderRadius: 12,
169+
justifyContent: "space-between",
170+
paddingVertical: 16,
171+
paddingHorizontal: 16,
172+
marginHorizontal: 0,
173+
marginBottom: 12,
174+
borderRadius: 16,
193175
position: "relative",
176+
borderWidth: 1.5,
194177
shadowColor: "#000",
195178
shadowOffset: {
196179
width: 0,
197-
height: 1,
180+
height: 2,
198181
},
199-
shadowOpacity: 0.1,
200-
shadowRadius: 2,
182+
shadowOpacity: 0.08,
183+
shadowRadius: 4,
201184
elevation: 2,
185+
gap: 12,
186+
width: "100%",
202187
},
203188
containerDefault: {
204189
backgroundColor: "#FFFFFF",
190+
borderColor: "#E8E8E8",
205191
},
206192
containerActive: {
207-
backgroundColor: "#E8FF8A",
193+
backgroundColor: "#F0F9F0",
194+
borderColor: "#4CAF50",
208195
},
209196
deleteButton: {
210197
position: "absolute",
@@ -213,89 +200,97 @@ const styles = StyleSheet.create({
213200
zIndex: 1,
214201
},
215202
deleteButtonCircle: {
216-
width: 24,
217-
height: 24,
218-
borderRadius: 12,
219-
backgroundColor: "#CCCCCC",
203+
width: 28,
204+
height: 28,
205+
borderRadius: 14,
206+
backgroundColor: "#FF5252",
220207
justifyContent: "center",
221208
alignItems: "center",
209+
shadowColor: "#000",
210+
shadowOffset: { width: 0, height: 2 },
211+
shadowOpacity: 0.2,
212+
shadowRadius: 3,
213+
elevation: 3,
222214
},
223-
setNumber: {
224-
fontSize: 14,
225-
fontWeight: "400",
226-
minWidth: 50,
227-
marginRight: 12,
228-
},
229-
orderContainer: {
230-
flexDirection: "row",
231-
alignItems: "center",
232-
minWidth: 60,
233-
marginRight: 12,
234-
},
235-
orderInput: {
236-
fontSize: 14,
237-
fontWeight: "400",
238-
minWidth: 30,
239-
textAlign: "right",
240-
padding: 0,
215+
setNumberContainer: {
216+
width: 60,
217+
justifyContent: "center",
218+
alignItems: "flex-start",
241219
},
242-
orderUnit: {
243-
fontSize: 14,
244-
fontWeight: "400",
245-
marginLeft: 4,
220+
setNumber: {
221+
fontSize: 15,
222+
fontWeight: "600",
223+
textAlign: "left",
246224
},
247225
weight: {
248-
fontSize: 14,
249-
fontWeight: "400",
226+
fontSize: 15,
227+
fontWeight: "600",
250228
flex: 1,
251-
marginRight: 12,
229+
maxWidth: "35%",
230+
textAlign: "right",
252231
},
253232
reps: {
254-
fontSize: 14,
255-
fontWeight: "400",
233+
fontSize: 15,
234+
fontWeight: "600",
256235
flex: 1,
257-
marginRight: 12,
236+
maxWidth: "35%",
237+
textAlign: "right",
258238
},
259239
valueContainer: {
260240
flex: 1,
241+
maxWidth: "35%",
242+
},
243+
inputWrapper: {
261244
flexDirection: "row",
262245
alignItems: "center",
263-
marginRight: 12,
246+
justifyContent: "flex-end",
247+
backgroundColor: "#F8F8F8",
248+
borderRadius: 10,
249+
paddingHorizontal: 12,
250+
paddingVertical: 10,
251+
borderWidth: 1,
252+
borderColor: "#E0E0E0",
253+
width: "100%",
264254
},
265255
valueInput: {
266-
flex: 1,
267-
fontSize: 14,
268-
fontWeight: "400",
256+
fontSize: 16,
257+
fontWeight: "600",
269258
textAlign: "right",
270-
minWidth: 40,
259+
width: 50,
271260
padding: 0,
261+
color: "#000000",
262+
},
263+
valueInputDefault: {
264+
color: "#000000",
265+
},
266+
valueInputActive: {
267+
color: "#4CAF50",
272268
},
273269
unit: {
274270
fontSize: 14,
275-
fontWeight: "400",
276-
marginLeft: 4,
271+
fontWeight: "600",
272+
marginLeft: 6,
273+
color: "#666666",
274+
width: 24,
277275
},
278276
textDefault: {
279277
color: "#000000",
280278
},
281279
textActive: {
282280
color: "#000000",
283281
},
284-
checkbox: {
285-
width: 32,
286-
height: 32,
287-
borderRadius: 8,
288-
borderWidth: 1,
282+
completeButton: {
283+
width: 50,
284+
height: 50,
289285
justifyContent: "center",
290286
alignItems: "center",
287+
flexShrink: 0,
291288
},
292-
checkboxDefault: {
293-
backgroundColor: "#FFFFFF",
294-
borderColor: "#E0E0E0",
289+
completeButtonDefault: {
290+
backgroundColor: "transparent",
295291
},
296-
checkboxCompleted: {
297-
backgroundColor: "#FFFFFF",
298-
borderColor: "#000000",
292+
completeButtonActive: {
293+
backgroundColor: "transparent",
299294
},
300295
});
301296

0 commit comments

Comments
 (0)