Skip to content

Commit de1e0b8

Browse files
fix: 가게 상세 페이지 design 수정 (#74)
* fix: 가로태그바 디자인/색상 수정 * fix: 네비게이션함수 수정 * fix: 가로스크롤바 디자인 수정 * fix: 카운터 디자인 수정 * 주석 삭제 * fix:색상코드 테마적용
1 parent 2a674fd commit de1e0b8

File tree

6 files changed

+151
-34
lines changed

6 files changed

+151
-34
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{
2+
"originHash" : "c63c63846d9c539229e96de38d6af51417e28c0ee9a0bc48bd0f0f19d923c329",
3+
"pins" : [
4+
{
5+
"identity" : "abseil-cpp-binary",
6+
"kind" : "remoteSourceControl",
7+
"location" : "https://github.com/google/abseil-cpp-binary.git",
8+
"state" : {
9+
"revision" : "194a6706acbd25e4ef639bcaddea16e8758a3e27",
10+
"version" : "1.2024011602.0"
11+
}
12+
},
13+
{
14+
"identity" : "app-check",
15+
"kind" : "remoteSourceControl",
16+
"location" : "https://github.com/google/app-check.git",
17+
"state" : {
18+
"revision" : "61b85103a1aeed8218f17c794687781505fbbef5",
19+
"version" : "11.2.0"
20+
}
21+
},
22+
{
23+
"identity" : "firebase-ios-sdk",
24+
"kind" : "remoteSourceControl",
25+
"location" : "https://github.com/firebase/firebase-ios-sdk",
26+
"state" : {
27+
"revision" : "8328630971a8fdd8072b36bb22bef732eb15e1f0",
28+
"version" : "11.4.0"
29+
}
30+
},
31+
{
32+
"identity" : "googleappmeasurement",
33+
"kind" : "remoteSourceControl",
34+
"location" : "https://github.com/google/GoogleAppMeasurement.git",
35+
"state" : {
36+
"revision" : "4f234bcbdae841d7015258fbbf8e7743a39b8200",
37+
"version" : "11.4.0"
38+
}
39+
},
40+
{
41+
"identity" : "googledatatransport",
42+
"kind" : "remoteSourceControl",
43+
"location" : "https://github.com/google/GoogleDataTransport.git",
44+
"state" : {
45+
"revision" : "617af071af9aa1d6a091d59a202910ac482128f9",
46+
"version" : "10.1.0"
47+
}
48+
},
49+
{
50+
"identity" : "googleutilities",
51+
"kind" : "remoteSourceControl",
52+
"location" : "https://github.com/google/GoogleUtilities.git",
53+
"state" : {
54+
"revision" : "53156c7ec267db846e6b64c9f4c4e31ba4cf75eb",
55+
"version" : "8.0.2"
56+
}
57+
},
58+
{
59+
"identity" : "grpc-binary",
60+
"kind" : "remoteSourceControl",
61+
"location" : "https://github.com/google/grpc-binary.git",
62+
"state" : {
63+
"revision" : "f56d8fc3162de9a498377c7b6cea43431f4f5083",
64+
"version" : "1.65.1"
65+
}
66+
},
67+
{
68+
"identity" : "gtm-session-fetcher",
69+
"kind" : "remoteSourceControl",
70+
"location" : "https://github.com/google/gtm-session-fetcher.git",
71+
"state" : {
72+
"revision" : "5cfe5f090c982de9c58605d2a82a4fc77b774fbd",
73+
"version" : "4.1.0"
74+
}
75+
},
76+
{
77+
"identity" : "interop-ios-for-google-sdks",
78+
"kind" : "remoteSourceControl",
79+
"location" : "https://github.com/google/interop-ios-for-google-sdks.git",
80+
"state" : {
81+
"revision" : "2d12673670417654f08f5f90fdd62926dc3a2648",
82+
"version" : "100.0.0"
83+
}
84+
},
85+
{
86+
"identity" : "leveldb",
87+
"kind" : "remoteSourceControl",
88+
"location" : "https://github.com/firebase/leveldb.git",
89+
"state" : {
90+
"revision" : "a0bc79961d7be727d258d33d5a6b2f1023270ba1",
91+
"version" : "1.22.5"
92+
}
93+
},
94+
{
95+
"identity" : "nanopb",
96+
"kind" : "remoteSourceControl",
97+
"location" : "https://github.com/firebase/nanopb.git",
98+
"state" : {
99+
"revision" : "b7e1104502eca3a213b46303391ca4d3bc8ddec1",
100+
"version" : "2.30910.0"
101+
}
102+
},
103+
{
104+
"identity" : "promises",
105+
"kind" : "remoteSourceControl",
106+
"location" : "https://github.com/google/promises.git",
107+
"state" : {
108+
"revision" : "540318ecedd63d883069ae7f1ed811a2df00b6ac",
109+
"version" : "2.4.0"
110+
}
111+
},
112+
{
113+
"identity" : "swift-protobuf",
114+
"kind" : "remoteSourceControl",
115+
"location" : "https://github.com/apple/swift-protobuf.git",
116+
"state" : {
117+
"revision" : "ebc7251dd5b37f627c93698e4374084d98409633",
118+
"version" : "1.28.2"
119+
}
120+
}
121+
],
122+
"version" : 3
123+
}

src/components/feedPage/Market.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {MarketType} from '@/types/Market';
22
import S from './Market.style';
3-
import {format} from '@utils/date';
43
import React from 'react';
54
type Props = {
65
market: MarketType;
@@ -21,10 +20,7 @@ const Market = ({market, onPress}: Props) => {
2120
</S.MarketImageContainer>
2221
<S.MarketTitle>{market.name}</S.MarketTitle>
2322
<S.MarketPickupTime>
24-
{`픽업: ${format(
25-
market.pickupStartAt,
26-
'HH시 mm분',
27-
)} ~ ${format(market.pickupEndAt, 'HH시 mm분')}`}
23+
{`픽업: ${market.pickupStartAt} ~ ${market.pickupEndAt}`}
2824
</S.MarketPickupTime>
2925
</S.MarketWrapper>
3026
);

src/components/marketDetailPage/Menu.style.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const MenuCounterButtonWrapper = styled.TouchableOpacity`
7777
justify-content: center;
7878
align-items: center;
7979
width: 32px;
80-
background-color: lightblue;
80+
background-color: ${props => props.theme.colors.primary};
8181
height: 30px;
8282
text-align: center;
8383
`;
@@ -88,6 +88,12 @@ const MenuCounterButton = styled.Text`
8888
color: black;
8989
`;
9090

91+
const MenuCounterSideButton = styled.Text`
92+
font-size: 16px;
93+
font-weight: bold;
94+
color: white;
95+
`;
96+
9197
const MenuDeleteButtonWrapper = styled.TouchableOpacity`
9298
display: flex;
9399
width: 70px;
@@ -114,6 +120,7 @@ const S = {
114120
MenuCounterButtonWrapper,
115121
MenuCounterButton,
116122
MenuDeleteButtonWrapper,
123+
MenuCounterSideButton,
117124
MenuDeleteText,
118125
};
119126

src/components/marketDetailPage/Menu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,11 @@ const Menu = ({product, initCount, onCountChange, isCart}: Props) => {
8181
<S.MenuCounterButtonWrapper
8282
disabled={isDecrease}
8383
onPress={decreaseMenuCount}>
84-
<S.MenuCounterButton>-</S.MenuCounterButton>
84+
<S.MenuCounterSideButton>-</S.MenuCounterSideButton>
8585
</S.MenuCounterButtonWrapper>
8686
<S.MenuCounterButton>{menuCount}</S.MenuCounterButton>
8787
<S.MenuCounterButtonWrapper onPress={increaseMenuCount}>
88-
<S.MenuCounterButton>+</S.MenuCounterButton>
88+
<S.MenuCounterSideButton>+</S.MenuCounterSideButton>
8989
</S.MenuCounterButtonWrapper>
9090
</S.MenuCounter>
9191
</S.MenuBoxRight>

src/screens/MarketDetailScreen/MarketDetail.style.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ const MarKetName = styled.Text`
1919
font-weight: 700;
2020
`;
2121
const MarketDescription = styled.Text`
22-
color: #2d3e39;
22+
color: #6a6a6a;
2323
font-family: Pretendard;
2424
font-size: 12px;
2525
font-style: normal;
26-
font-weight: 500;
26+
font-weight: 400;
2727
`;
2828
const MarketTimeDescription = styled.Text`
2929
color: red;
@@ -42,15 +42,15 @@ const MarketSideInfoWrapper = styled.View`
4242
`;
4343

4444
const MarketSideInfo = styled.Text`
45-
color: #78827f;
45+
color: black;
4646
font-family: Pretendard;
47-
font-size: 13px;
47+
font-size: 14px;
4848
font-style: normal;
49-
font-weight: 500;
49+
font-weight: 600;
5050
`;
5151

5252
const SideTagBarScrollView = styled.ScrollView`
53-
padding-bottom: 50px;
53+
padding-bottom: 24px;
5454
`;
5555

5656
const SideBarView = styled.View<{selected: boolean}>`
@@ -59,13 +59,15 @@ const SideBarView = styled.View<{selected: boolean}>`
5959
justify-content: center;
6060
align-items: center;
6161
padding: 5px;
62-
background-color: ${({selected}) =>
63-
selected ? 'skyblue' : 'rgb(154, 211, 232)'};
62+
background-color: ${({selected, theme}) =>
63+
selected ? theme.colors.primary : 'white'};
64+
border: ${({selected, theme}) =>
65+
selected ? '' : `1px solid ${theme.colors.primary}`};
6466
margin: 5px;
6567
border-radius: 10px;
6668
`;
6769
const SideBarText = styled.Text<{selected: boolean}>`
68-
color: ${({selected}) => (selected ? 'black' : 'white')};
70+
color: ${({selected}) => (selected ? 'white' : 'black')};
6971
font-size: 14px;
7072
font-weight: bold;
7173
text-align-vertical: center;

src/screens/MarketDetailScreen/MarketDetailPage.tsx

+6-17
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,14 @@ import {ProductType} from '@/types/ProductType';
1616
import {useNavigation} from '@react-navigation/native';
1717
import {StackNavigationProp} from '@react-navigation/stack';
1818
import {RootStackParamList} from '@/types/StackNavigationType';
19-
19+
import {BottomButton} from '@/components/common';
2020
type CartItem = {
2121
productId: number;
2222
productName: string;
2323
count: number;
2424
};
2525

2626
const MarketDetailPage = ({
27-
name,
2827
pickupStartAt,
2928
pickupEndAt,
3029
address,
@@ -98,16 +97,9 @@ const MarketDetailPage = ({
9897
);
9998

10099
const handleCheckout = () => {
101-
const cartSummary = cart
102-
.map(item => `${item.productName} 수량: ${item.count}`)
103-
.join('\n');
104-
105-
navigation.navigate('Home', {
106-
screen: 'Cart',
107-
params: {cart},
100+
navigation.navigate('Cart', {
101+
screen: 'Market',
108102
});
109-
110-
Alert.alert('장바구니로 이동합니다', cartSummary);
111103
};
112104

113105
const scrollToSection = useCallback(
@@ -238,7 +230,6 @@ const MarketDetailPage = ({
238230
return (
239231
<S.MarketDetailInfoView>
240232
<S.MarketMainInfoWrapper>
241-
<S.MarKetName>{name} </S.MarKetName>
242233
<S.MarketDescription>
243234
내 자식에게 준다는 마음으로 음식을 만들고 있습니다^^
244235
</S.MarketDescription>
@@ -273,8 +264,6 @@ const MarketDetailPage = ({
273264
))}
274265
</S.SideTagBarScrollView>
275266

276-
<S.Divider />
277-
278267
<S.MenuScrollView
279268
ref={scrollViewRef}
280269
onScroll={handleScroll}
@@ -299,9 +288,9 @@ const MarketDetailPage = ({
299288
))}
300289
</S.MenuScrollView>
301290

302-
<S.ReserveButton onPress={navigatePage}>
303-
<S.ButtonText>예약하기 ({cart.length})</S.ButtonText>
304-
</S.ReserveButton>
291+
<BottomButton onPress={navigatePage}>
292+
예약하기 ({cart.length})
293+
</BottomButton>
305294
</S.MarketDetailInfoView>
306295
);
307296
};

0 commit comments

Comments
 (0)