fix: 가게 상세 페이지 design 수정

ios/ClientApp.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,123 @@
+{
+  "originHash" : "c63c63846d9c539229e96de38d6af51417e28c0ee9a0bc48bd0f0f19d923c329",
+  "pins" : [
+    {
+      "identity" : "abseil-cpp-binary",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/abseil-cpp-binary.git",
+      "state" : {
+        "revision" : "194a6706acbd25e4ef639bcaddea16e8758a3e27",
+        "version" : "1.2024011602.0"
+      }
+    },
+    {
+      "identity" : "app-check",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/app-check.git",
+      "state" : {
+        "revision" : "61b85103a1aeed8218f17c794687781505fbbef5",
+        "version" : "11.2.0"
+      }
+    },
+    {
+      "identity" : "firebase-ios-sdk",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/firebase/firebase-ios-sdk",
+      "state" : {
+        "revision" : "8328630971a8fdd8072b36bb22bef732eb15e1f0",
+        "version" : "11.4.0"
+      }
+    },
+    {
+      "identity" : "googleappmeasurement",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/GoogleAppMeasurement.git",
+      "state" : {
+        "revision" : "4f234bcbdae841d7015258fbbf8e7743a39b8200",
+        "version" : "11.4.0"
+      }
+    },
+    {
+      "identity" : "googledatatransport",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/GoogleDataTransport.git",
+      "state" : {
+        "revision" : "617af071af9aa1d6a091d59a202910ac482128f9",
+        "version" : "10.1.0"
+      }
+    },
+    {
+      "identity" : "googleutilities",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/GoogleUtilities.git",
+      "state" : {
+        "revision" : "53156c7ec267db846e6b64c9f4c4e31ba4cf75eb",
+        "version" : "8.0.2"
+      }
+    },
+    {
+      "identity" : "grpc-binary",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/grpc-binary.git",
+      "state" : {
+        "revision" : "f56d8fc3162de9a498377c7b6cea43431f4f5083",
+        "version" : "1.65.1"
+      }
+    },
+    {
+      "identity" : "gtm-session-fetcher",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/gtm-session-fetcher.git",
+      "state" : {
+        "revision" : "5cfe5f090c982de9c58605d2a82a4fc77b774fbd",
+        "version" : "4.1.0"
+      }
+    },
+    {
+      "identity" : "interop-ios-for-google-sdks",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/interop-ios-for-google-sdks.git",
+      "state" : {
+        "revision" : "2d12673670417654f08f5f90fdd62926dc3a2648",
+        "version" : "100.0.0"
+      }
+    },
+    {
+      "identity" : "leveldb",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/firebase/leveldb.git",
+      "state" : {
+        "revision" : "a0bc79961d7be727d258d33d5a6b2f1023270ba1",
+        "version" : "1.22.5"
+      }
+    },
+    {
+      "identity" : "nanopb",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/firebase/nanopb.git",
+      "state" : {
+        "revision" : "b7e1104502eca3a213b46303391ca4d3bc8ddec1",
+        "version" : "2.30910.0"
+      }
+    },
+    {
+      "identity" : "promises",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/google/promises.git",
+      "state" : {
+        "revision" : "540318ecedd63d883069ae7f1ed811a2df00b6ac",
+        "version" : "2.4.0"
+      }
+    },
+    {
+      "identity" : "swift-protobuf",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/apple/swift-protobuf.git",
+      "state" : {
+        "revision" : "ebc7251dd5b37f627c93698e4374084d98409633",
+        "version" : "1.28.2"
+      }
+    }
+  ],
+  "version" : 3
+}

src/components/feedPage/Market.tsx

@@ -1,6 +1,5 @@
 import {MarketType} from '@/types/Market';
 import S from './Market.style';
-import {format} from '@utils/date';
 import React from 'react';
 type Props = {
   market: MarketType;
@@ -21,10 +20,7 @@ const Market = ({market, onPress}: Props) => {
       </S.MarketImageContainer>
       <S.MarketTitle>{market.name}</S.MarketTitle>
       <S.MarketPickupTime>
-        {`픽업: ${format(
-          market.pickupStartAt,
-          'HH시 mm분',
-        )} ~ ${format(market.pickupEndAt, 'HH시 mm분')}`}
+        {`픽업: ${market.pickupStartAt} ~ ${market.pickupEndAt}`}
       </S.MarketPickupTime>
     </S.MarketWrapper>
   );

src/components/marketDetailPage/Menu.style.tsx

@@ -77,7 +77,7 @@ const MenuCounterButtonWrapper = styled.TouchableOpacity`
   justify-content: center;
   align-items: center;
   width: 32px;
-  background-color: lightblue;
+  background-color: ${props => props.theme.colors.primary};
   height: 30px;
   text-align: center;
 `;
@@ -88,6 +88,12 @@ const MenuCounterButton = styled.Text`
   color: black;
 `;
 
+const MenuCounterSideButton = styled.Text`
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+`;
+
 const MenuDeleteButtonWrapper = styled.TouchableOpacity`
   display: flex;
   width: 70px;
@@ -114,6 +120,7 @@ const S = {
   MenuCounterButtonWrapper,
   MenuCounterButton,
   MenuDeleteButtonWrapper,
+  MenuCounterSideButton,
   MenuDeleteText,
 };
 

src/components/marketDetailPage/Menu.tsx

@@ -81,11 +81,11 @@ const Menu = ({product, initCount, onCountChange, isCart}: Props) => {
           <S.MenuCounterButtonWrapper
             disabled={isDecrease}
             onPress={decreaseMenuCount}>
-            <S.MenuCounterButton>-</S.MenuCounterButton>
+            <S.MenuCounterSideButton>-</S.MenuCounterSideButton>
           </S.MenuCounterButtonWrapper>
           <S.MenuCounterButton>{menuCount} 개</S.MenuCounterButton>
           <S.MenuCounterButtonWrapper onPress={increaseMenuCount}>
-            <S.MenuCounterButton>+</S.MenuCounterButton>
+            <S.MenuCounterSideButton>+</S.MenuCounterSideButton>
           </S.MenuCounterButtonWrapper>
         </S.MenuCounter>
       </S.MenuBoxRight>

src/screens/MarketDetailScreen/MarketDetail.style.tsx

@@ -19,11 +19,11 @@ const MarKetName = styled.Text`
   font-weight: 700;
 `;
 const MarketDescription = styled.Text`
-  color: #2d3e39;
+  color: #6a6a6a;
   font-family: Pretendard;
   font-size: 12px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
 `;
 const MarketTimeDescription = styled.Text`
   color: red;
@@ -42,15 +42,15 @@ const MarketSideInfoWrapper = styled.View`
 `;
 
 const MarketSideInfo = styled.Text`
-  color: #78827f;
+  color: black;
   font-family: Pretendard;
-  font-size: 13px;
+  font-size: 14px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 600;
 `;
 
 const SideTagBarScrollView = styled.ScrollView`
-  padding-bottom: 50px;
+  padding-bottom: 24px;
 `;
 
 const SideBarView = styled.View<{selected: boolean}>`
@@ -59,13 +59,15 @@ const SideBarView = styled.View<{selected: boolean}>`
   justify-content: center;
   align-items: center;
   padding: 5px;
-  background-color: ${({selected}) =>
-    selected ? 'skyblue' : 'rgb(154, 211, 232)'};
+  background-color: ${({selected, theme}) =>
+    selected ? theme.colors.primary : 'white'};
+  border: ${({selected, theme}) =>
+    selected ? '' : `1px solid ${theme.colors.primary}`};
   margin: 5px;
   border-radius: 10px;
 `;
 const SideBarText = styled.Text<{selected: boolean}>`
-  color: ${({selected}) => (selected ? 'black' : 'white')};
+  color: ${({selected}) => (selected ? 'white' : 'black')};
   font-size: 14px;
   font-weight: bold;
   text-align-vertical: center;

src/screens/MarketDetailScreen/MarketDetailPage.tsx

@@ -16,15 +16,14 @@ import {ProductType} from '@/types/ProductType';
 import {useNavigation} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {RootStackParamList} from '@/types/StackNavigationType';
-
+import {BottomButton} from '@/components/common';
 type CartItem = {
   productId: number;
   productName: string;
   count: number;
 };
 
 const MarketDetailPage = ({
-  name,
   pickupStartAt,
   pickupEndAt,
   address,
@@ -98,16 +97,9 @@ const MarketDetailPage = ({
     );
 
   const handleCheckout = () => {
-    const cartSummary = cart
-      .map(item => `${item.productName} 수량: ${item.count}`)
-      .join('\n');
-
-    navigation.navigate('Home', {
-      screen: 'Cart',
-      params: {cart},
+    navigation.navigate('Cart', {
+      screen: 'Market',
     });
-
-    Alert.alert('장바구니로 이동합니다', cartSummary);
   };
 
   const scrollToSection = useCallback(
@@ -238,7 +230,6 @@ const MarketDetailPage = ({
   return (
     <S.MarketDetailInfoView>
       <S.MarketMainInfoWrapper>
-        <S.MarKetName>{name} </S.MarKetName>
         <S.MarketDescription>
           내 자식에게 준다는 마음으로 음식을 만들고 있습니다^^
         </S.MarketDescription>
@@ -273,8 +264,6 @@ const MarketDetailPage = ({
         ))}
       </S.SideTagBarScrollView>
 
-      <S.Divider />
-
       <S.MenuScrollView
         ref={scrollViewRef}
         onScroll={handleScroll}
@@ -299,9 +288,9 @@ const MarketDetailPage = ({
         ))}
       </S.MenuScrollView>
 
-      <S.ReserveButton onPress={navigatePage}>
-        <S.ButtonText>예약하기 ({cart.length})</S.ButtonText>
-      </S.ReserveButton>
+      <BottomButton onPress={navigatePage}>
+        예약하기 ({cart.length})
+      </BottomButton>
     </S.MarketDetailInfoView>
   );
 };