Skip to content

Commit a08859c

Browse files
ryd10227ryd10227
committed
css 변경
1 parent a4de3d9 commit a08859c

File tree

9 files changed

+118
-194
lines changed

9 files changed

+118
-194
lines changed

‎src/screens/homeScreen/components/IssueBox.tsx

+23-15
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { COLOR } from '@/global/constants';
55
import IssuesBanner from './IssuesBanner';
66
import RecommendedRoutes from './RecommendedRoutes';
77
import SubwayRoute from '@/screens/selectNewRouteScreen/components/SubwayRoute';
8+
import styled from '@emotion/native';
89

910
const IssueBox = () => {
1011
const hasSavedRoutes = true;
@@ -16,33 +17,34 @@ const IssueBox = () => {
1617
<View style={styles.textContainer}>
1718
<FontText
1819
value="출근길 "
19-
textSize="20px"
20+
textSize="18px"
2021
textWeight="Bold"
21-
lineHeight="25px"
22+
lineHeight="23px"
2223
textColor={COLOR.BASIC_BLACK}
2324
/>
24-
<FontText
25-
style={styles.grayEllipse}
26-
value="42분 이상 예상"
27-
textSize="16px"
28-
textWeight="Medium"
29-
lineHeight="21px"
30-
textColor={COLOR.GRAY_999}
31-
/>
25+
<GrayEllipse>
26+
<FontText
27+
value="42분 이상 예상"
28+
textSize="12px"
29+
textWeight="Medium"
30+
lineHeight="14px"
31+
textColor={COLOR.GRAY_999}
32+
/>
33+
</GrayEllipse>
3234
</View>
3335
<View style={styles.textContainer}>
3436
<FontText
3537
value="세부정보 "
36-
textSize="16px"
37-
textWeight="Medium"
38-
lineHeight="21px"
38+
textSize="13px"
39+
textWeight="Regular"
40+
lineHeight="19px"
3941
textColor={COLOR.GRAY_999}
4042
/>
4143
<IconButton
4244
isFontIcon={false}
4345
imagePath="more_gray"
44-
iconWidth="8px"
45-
iconHeight="14px"
46+
iconWidth="4.5px"
47+
iconHeight="8px"
4648
/>
4749
</View>
4850
</View>
@@ -95,3 +97,9 @@ const styles = StyleSheet.create({
9597
});
9698

9799
export default IssueBox;
100+
101+
const GrayEllipse = styled.View`
102+
padding: 4px 6px;
103+
border-radius: 16px;
104+
background: #f7f7f9;
105+
`;

‎src/screens/homeScreen/components/IssuesBanner.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ const IssuesBanner = () => {
1515
<FontText
1616
style={styles.buttonIssues}
1717
value="폭우로 인한 4호선 운행정지"
18-
textSize="17px"
18+
textSize="13px"
1919
textWeight="SemiBold"
20-
lineHeight="21px"
20+
lineHeight="19px"
2121
textColor={COLOR.BASIC_BLACK}
2222
/>
23-
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="7px" iconHeight="12px" />
23+
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="4.5px" iconHeight="8px" />
2424
</View>
2525
);
2626
};
@@ -34,8 +34,8 @@ const styles = StyleSheet.create({
3434
borderRadius: 40,
3535
marginTop: 25,
3636
marginBottom: 30,
37-
paddingHorizontal: 13,
38-
paddingVertical: 8,
37+
paddingHorizontal: 12.5,
38+
paddingVertical: 6,
3939
},
4040
buttonIssues: {
4141
flex: 1,

‎src/screens/homeScreen/components/RecentSearchBox.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,29 @@ const RecentSearchBox = () => {
1818
<View style={styles.textContainer}>
1919
<FontText
2020
value={`${recentSearchData[0].stationName} -> ${recentSearchData[0].destination}`}
21-
textSize="20px"
21+
textSize="18px"
2222
textWeight="Bold"
23-
lineHeight="25px"
23+
lineHeight="23px"
2424
textColor={COLOR.BASIC_BLACK}
2525
/>
2626
<FontText
2727
value={`${recentSearchData[0].duration} 소요`}
28-
textSize="16px"
28+
textSize="12px"
2929
textWeight="Medium"
30-
lineHeight="21px"
30+
lineHeight="14px"
3131
textColor={COLOR.GRAY_999}
3232
/>
3333
</View>
3434
<View style={styles.textContainer}>
3535
<TextButton
3636
value="세부정보 "
37-
textSize="16px"
37+
textSize="13px"
38+
textWeight="Regular"
39+
lineHeight="19px"
3840
textColor={COLOR.GRAY_999}
39-
textWeight="Medium"
40-
lineHeight="21px"
4141
onPress={routeDetail}
4242
/>
43-
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="8px" iconHeight="14px" />
43+
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="4.5px" iconHeight="8px" />
4444
</View>
4545
</View>
4646
<View style={styles.containerSubwayRoute}>

‎src/screens/homeScreen/components/RecommendedRoutes.tsx

+12-13
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ const RecommendedRoutes = () => {
1616
<View style={styles.textContainer}>
1717
<FontText
1818
value="대체 경로 "
19-
textSize="20px"
20-
textWeight="Bold"
21-
lineHeight="25px"
19+
textSize="16px"
20+
textWeight="SemiBold"
21+
lineHeight="21px"
2222
textColor={COLOR.BASIC_BLACK}
2323
/>
2424
<FontText
2525
value="평균 42분"
26-
textSize="14px"
26+
textSize="12px"
2727
textWeight="Regular"
2828
lineHeight="15px"
2929
textColor={COLOR.BASIC_BLACK}
@@ -32,28 +32,27 @@ const RecommendedRoutes = () => {
3232
<View style={styles.textContainer}>
3333
<TextButton
3434
value="세부정보 "
35-
textSize="16px"
35+
textSize="13px"
3636
textColor={COLOR.GRAY_999}
37-
textWeight="Medium"
38-
lineHeight="21px"
37+
textWeight="Regular"
38+
lineHeight="19px"
3939
onPress={routeDetail}
4040
/>
41-
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="8px" iconHeight="14px" />
41+
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="4.5px" iconHeight="8px" />
4242
</View>
4343
</View>
4444

4545
<View style={styles.containerSubwayRoute}>
4646
<SubwayRoute />
4747
</View>
48-
</Container>
48+
</Container>
4949
);
5050
};
5151

5252
const Container = styled.View`
53-
backgroundcolor: #f2f2f2;
54-
padding: 0 16px;
55-
borderradius: 13px;
56-
padding: 20px;
53+
background: #f7f7f9;
54+
padding: 16px;
55+
border-radius: 8px;
5756
`;
5857

5958
const styles = StyleSheet.create({

‎src/screens/homeScreen/components/SavedRouteBox.tsx

+22-14
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import IssuesBanner from './IssuesBanner';
66
import RecommendedRoutes from './RecommendedRoutes';
77
import SubwayRoute from '@/screens/selectNewRouteScreen/components/SubwayRoute';
88
import { useGetSavedRoutesQuery } from '@/global/apis/hook';
9+
import styled from '@emotion/native';
910

1011
const SavedRouteBox = () => {
1112
const { data: savedRoutes } = useGetSavedRoutesQuery();
@@ -17,29 +18,30 @@ const SavedRouteBox = () => {
1718
<View style={styles.textContainer}>
1819
<FontText
1920
value={`${savedRoutes[0].roadName} `}
20-
textSize="20px"
21+
textSize="18px"
2122
textWeight="Bold"
22-
lineHeight="25px"
23+
lineHeight="23px"
2324
textColor={COLOR.BASIC_BLACK}
2425
/>
25-
<FontText
26-
style={styles.grayEllipse}
27-
value="42분 이상 예상"
28-
textSize="16px"
29-
textWeight="Medium"
30-
lineHeight="21px"
31-
textColor={COLOR.GRAY_999}
32-
/>
26+
<GrayEllipse>
27+
<FontText
28+
value="42분 이상 예상"
29+
textSize="12px"
30+
textWeight="Medium"
31+
lineHeight="14px"
32+
textColor={COLOR.GRAY_999}
33+
/>
34+
</GrayEllipse>
3335
</View>
3436
<View style={styles.textContainer}>
3537
<FontText
3638
value="세부정보 "
37-
textSize="16px"
38-
textWeight="Medium"
39-
lineHeight="21px"
39+
textSize="13px"
40+
textWeight="Regular"
41+
lineHeight="19px"
4042
textColor={COLOR.GRAY_999}
4143
/>
42-
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="8px" iconHeight="14px" />
44+
<IconButton isFontIcon={false} imagePath="more_gray" iconWidth="4.5px" iconHeight="8px" />
4345
</View>
4446
</View>
4547
<View style={styles.containerSubwayRoute}>
@@ -92,3 +94,9 @@ const styles = StyleSheet.create({
9294
});
9395

9496
export default SavedRouteBox;
97+
98+
const GrayEllipse = styled.View`
99+
padding: 4px 6px;
100+
border-radius: 16px;
101+
background: #f7f7f9;
102+
`;

‎src/screens/homeScreen/components/SavedRouteIssues.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ const SavedRouteIssues = () => {
1919
<TouchableOpacity
2020
key={text}
2121
onPress={() => handleButtonClick(text)}
22-
style={[styles.navButton, { backgroundColor: activeButton === text ? '#474747' : 'white' }]}
22+
style={[
23+
styles.navButton,
24+
{
25+
backgroundColor: activeButton === text ? '#474747' : 'white',
26+
borderColor: activeButton === text ? 'transparent' : '#EBEBEB',
27+
},
28+
]}
2329
>
2430
<FontText
2531
value={text}

0 commit comments

Comments
 (0)