From 1d06d412c114241a45463a9160694c1d4463ff50 Mon Sep 17 00:00:00 2001
From: l2juhan <leejuhan0527@gmail.com>
Date: Thu, 14 May 2026 15:11:15 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EA=B7=BC=EB=AC=B4=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=EC=8B=9C=EA=B0=84=20=EB=B0=95=EC=8A=A4?=
 =?UTF-8?q?=20=EA=B2=B9=EC=B9=A8=20=ED=95=B4=EA=B2=B0=20(#60)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

시:분을 분리된 박스 4개로 두던 구조를 "HH:mm" 통합 박스 2개로
단순화하고, detailHourBox에 flex: 1을 적용해 화면 너비에 자동
적응되도록 변경. 좁은 화면(iPhone SE 등)에서 박스가 겹쳐 보이던
문제 해결.

- BaseRequestCard: 기존/요청 근무 시간 양쪽 박스 통합
- detailTilde 스타일에 color/fontSize 명시로 톤 통일
---
 src/components/mypage/BaseRequestCard.tsx | 42 ++++++++++-------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/mypage/BaseRequestCard.tsx b/src/components/mypage/BaseRequestCard.tsx
index 2d42621..615ae7c 100644
--- a/src/components/mypage/BaseRequestCard.tsx
+++ b/src/components/mypage/BaseRequestCard.tsx
@@ -165,19 +165,15 @@ const BaseRequestCard: React.FC<BaseRequestCardProps> = ({
 											</View>
 											<View style={styles.detailHourRow}>
 												<View style={styles.detailHourBox}>
-													<Text style={styles.detailValueText}>{parseTime(detail.originalStartTime).hour}</Text>
-												</View>
-												<Text>:</Text>
-												<View style={styles.detailHourBox}>
-													<Text style={styles.detailValueText}>{parseTime(detail.originalStartTime).min}</Text>
+													<Text style={styles.detailValueText}>
+														{parseTime(detail.originalStartTime).hour}:{parseTime(detail.originalStartTime).min}
+													</Text>
 												</View>
 												<Text style={styles.detailTilde}>~</Text>
 												<View style={styles.detailHourBox}>
-													<Text style={styles.detailValueText}>{parseTime(detail.originalEndTime!).hour}</Text>
-												</View>
-												<Text>:</Text>
-												<View style={styles.detailHourBox}>
-													<Text style={styles.detailValueText}>{parseTime(detail.originalEndTime!).min}</Text>
+													<Text style={styles.detailValueText}>
+														{parseTime(detail.originalEndTime!).hour}:{parseTime(detail.originalEndTime!).min}
+													</Text>
 												</View>
 											</View>
 										</View>
@@ -193,19 +189,15 @@ const BaseRequestCard: React.FC<BaseRequestCardProps> = ({
 										</View>
 										<View style={styles.detailHourRow}>
 											<View style={styles.detailHourBox}>
-												<Text style={styles.detailValueText}>{parseTime(detail.requestedStartTime).hour}</Text>
-											</View>
-											<Text>:</Text>
-											<View style={styles.detailHourBox}>
-												<Text style={styles.detailValueText}>{parseTime(detail.requestedStartTime).min}</Text>
+												<Text style={styles.detailValueText}>
+													{parseTime(detail.requestedStartTime).hour}:{parseTime(detail.requestedStartTime).min}
+												</Text>
 											</View>
 											<Text style={styles.detailTilde}>~</Text>
 											<View style={styles.detailHourBox}>
-												<Text style={styles.detailValueText}>{parseTime(detail.requestedEndTime).hour}</Text>
-											</View>
-											<Text>:</Text>
-											<View style={styles.detailHourBox}>
-												<Text style={styles.detailValueText}>{parseTime(detail.requestedEndTime).min}</Text>
+												<Text style={styles.detailValueText}>
+													{parseTime(detail.requestedEndTime).hour}:{parseTime(detail.requestedEndTime).min}
+												</Text>
 											</View>
 										</View>
 									</View>
@@ -380,20 +372,22 @@ const styles = StyleSheet.create({
 		flexDirection: "row",
 		alignItems: "center",
 		justifyContent: "center",
-		gap: 4,
+		gap: 8,
 	},
 	detailHourBox: {
+		flex: 1,
 		backgroundColor: colors.backgroundGrey,
 		borderRadius: 8,
 		paddingVertical: 10,
-		paddingHorizontal: 12,
+		paddingHorizontal: 8,
 		borderWidth: 1,
 		borderColor: colors.borderLight,
-		minWidth: 40,
 		alignItems: "center",
 	},
 	detailTilde: {
-		marginHorizontal: 6,
+		marginHorizontal: 2,
+		color: colors.textPrimary,
+		fontSize: 15,
 	},
 });