fix: 가게 상세 페이지 디자인

src/apis/Bucket.ts

@@ -11,7 +11,7 @@ const dummyCartList: BucketType = {
       id: 1,
       name: '김치',
       image: 'https://legacy.reactjs.org/logo-og.png',
-      originalPrice: 10000,
+      originPrice: 10000,
       discountPrice: 7000,
       count: 3,
       tags: [
@@ -25,7 +25,7 @@ const dummyCartList: BucketType = {
       id: 2,
       name: '깻잎',
       image: 'https://legacy.reactjs.org/logo-og.png',
-      originalPrice: 5000,
+      originPrice: 5000,
       discountPrice: 3000,
       count: 3,
       tags: [
@@ -39,7 +39,7 @@ const dummyCartList: BucketType = {
       id: 3,
       name: '간장게장',
       image: 'https://legacy.reactjs.org/logo-og.png',
-      originalPrice: 20000,
+      originPrice: 20000,
       discountPrice: 17000,
       count: 3,
       tags: [

src/apis/Order.ts

@@ -18,7 +18,7 @@ const dummyHistoryList: OrderType[] = [
         id: 1,
         name: '김치',
         image: 'https://legacy.reactjs.org/logo-og.png',
-        originalPrice: 10000,
+        originPrice: 10000,
         discountPrice: 7000,
         count: 3,
         tags: [
@@ -33,7 +33,7 @@ const dummyHistoryList: OrderType[] = [
         id: 2,
         name: '깻잎',
         image: 'https://legacy.reactjs.org/logo-og.png',
-        originalPrice: 5000,
+        originPrice: 5000,
         discountPrice: 3000,
         count: 3,
         tags: [
@@ -47,7 +47,7 @@ const dummyHistoryList: OrderType[] = [
         id: 3,
         name: '간장게장',
         image: 'https://legacy.reactjs.org/logo-og.png',
-        originalPrice: 20000,
+        originPrice: 20000,
         discountPrice: 17000,
         count: 3,
         tags: [
@@ -74,7 +74,7 @@ const dummyHistoryList: OrderType[] = [
         id: 2,
         name: '띄어쓰기가없는엄청나게긴음식이름은어떻게해야될까요없는엄청나게긴음식이름은어떻게해야될까요',
         image: 'https://legacy.reactjs.org/logo-og.png',
-        originalPrice: 20000,
+        originPrice: 20000,
         discountPrice: 17000,
         count: 3,
         tags: [{id: 1, tagName: '추천메뉴'}],
@@ -97,7 +97,7 @@ const dummyHistoryList: OrderType[] = [
         id: 3,
         name: 'very long product name + very long product name, very long product name, very long product name',
         image: 'https://legacy.reactjs.org/logo-og.png',
-        originalPrice: 20000,
+        originPrice: 20000,
         discountPrice: 17000,
         count: 1,
         tags: [{id: 1, tagName: '추천메뉴'}],

src/components/marketDetailPage/Menu.style.tsx

@@ -24,7 +24,7 @@ const MenuName = styled.Text`
   font-weight: 600;
 `;
 
-const MenuOriginalPrice = styled.Text`
+const MenuoriginPrice = styled.Text`
   color: var(--gray-gray5, #979797);
   font-size: 13px;
   font-weight: 400;
@@ -50,7 +50,6 @@ const MenuBoxRight = styled.View`
 const MenuImage = styled.Image`
   width: 100px;
   height: 100px;
-  margin-right: 10px;
   border-radius: 18px;
 `;
 
@@ -110,7 +109,7 @@ const S = {
   MenuWrapper,
   MenuBoxLeft,
   MenuName,
-  MenuOriginalPrice,
+  MenuoriginPrice,
   MenuDiscountPrice,
   MenuStockCount,
   MenuBoxRight,

src/components/marketDetailPage/Menu.tsx

@@ -55,17 +55,15 @@ const Menu = ({product, initCount, onCountChange, isCart}: Props) => {
     );
   };
   const isDecrease = isCart && menuCount === 1;
-
   return (
     <S.MenuWrapper>
       <S.MenuBoxLeft>
         <S.MenuName>{product.name}</S.MenuName>
-        <S.MenuOriginalPrice>
-          {/* TODO: 타입 수정 */}
-          {/* 정가: {product.originalPrice.toLocaleString()}원 */}
-        </S.MenuOriginalPrice>
+        <S.MenuoriginPrice>
+          정가: {product.originPrice.toLocaleString()}원
+        </S.MenuoriginPrice>
         <S.MenuDiscountPrice>
-          {/* 할인가: {product.discountPrice.toLocaleString()}원 */}
+          할인가: {product.discountPrice.toLocaleString()}원
         </S.MenuDiscountPrice>
         {/* TODO: API연결 후 재고 값 넣기 */}
         <S.MenuStockCount>재고: 1</S.MenuStockCount>

src/components/orderPage/PaymentSummary.tsx

@@ -19,11 +19,11 @@ const PaymentSummaryItem = ({
 };
 
 type Props = {
-  originalPrice: number;
+  originPrice: number;
   discountPrice: number;
 };
 
-const PaymentSummary = ({originalPrice, discountPrice}: Props) => {
+const PaymentSummary = ({originPrice, discountPrice}: Props) => {
   return (
     <S.Card>
       <S.Header>
@@ -33,11 +33,11 @@ const PaymentSummary = ({originalPrice, discountPrice}: Props) => {
       <S.PaymentSummaryItemList>
         <PaymentSummaryItem
           title="주문금액"
-          price={`${originalPrice.toLocaleString()}원`}
+          price={`${originPrice.toLocaleString()}원`}
         />
         <PaymentSummaryItem
           title="할인금액"
-          price={`-${(originalPrice - discountPrice).toLocaleString()}원`}
+          price={`-${(originPrice - discountPrice).toLocaleString()}원`}
           primary
         />
       </S.PaymentSummaryItemList>

src/navigation/DetailNavigator.tsx

@@ -11,6 +11,7 @@ const Stack = createStackNavigator<DetailStackParamList>();
 const screenOptions = {
   headerShown: true,
   headerRight: () => <CartIcon />,
+  headerTitleAlign: 'center' as const,
 };
 
 const DetailNavigator = () => {

src/screens/MarketDetailScreen/MarketDetail.style.tsx

@@ -2,13 +2,18 @@ import styled from '@emotion/native';
 
 const MarketDetailInfoView = styled.View`
   flex: 1;
+`;
+const MarketInfoWrapper = styled.View`
+  display: flex;
+  background-color: #fff;
+  margin-bottom: 16px;
   padding: 16px;
 `;
 const MarketMainInfoWrapper = styled.View`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
+  background-color: #ffffff;
+  align-items: center;
   align-self: stretch;
 `;
 const SpecialView = styled.View``;
@@ -19,36 +24,51 @@ const MarKetName = styled.Text`
   font-weight: 700;
 `;
 const MarketDescription = styled.Text`
-  color: #6a6a6a;
+  ${props => props.theme.fonts.subtitle1};
+  font-family: Pretendard;
+  font-weight: bold;
+  color: black;
+`;
+const MarketPickupTimeWrapper = styled.View`
+  display: flex;
+  flex-direction: row;
+`;
+
+const MarketPickupTime = styled.Text`
+  ${props => props.theme.fonts.titleMedium};
+  color: black;
   font-family: Pretendard;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
+  font-weight: bold;
 `;
 const MarketTimeDescription = styled.Text`
-  color: red;
+  ${props => props.theme.fonts.titleMedium};
+
+  color: #f05650;
   font-family: Pretendard;
-  font-size: 12px;
-  font-style: normal;
   font-weight: 500;
 `;
 
 const MarketSideInfoWrapper = styled.View`
   display: flex;
   padding: 8px 0px;
+  gap: 4px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
 `;
 
 const MarketSideInfo = styled.Text`
+  ${props => props.theme.fonts.titleMedium};
   color: black;
   font-family: Pretendard;
-  font-size: 14px;
-  font-style: normal;
   font-weight: 600;
 `;
-
+const MarketSubscribeIconWrapper = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+`;
 const SideTagBarScrollView = styled.ScrollView`
   padding-bottom: 24px;
 `;
@@ -102,7 +122,16 @@ const ButtonText = styled.Text`
   color: blue;
 `;
 
+const TagWrapper = styled.View`
+  display: flex;
+  padding-left: 16px;
+`;
 const S = {
+  TagWrapper,
+  MarketPickupTime,
+  MarketPickupTimeWrapper,
+  MarketSubscribeIconWrapper,
+  MarketInfoWrapper,
   SpecialView,
   MarketDetailInfoView,
   MarketMainInfoWrapper,

src/screens/MarketDetailScreen/MarketDetailPage.tsx

@@ -2,13 +2,12 @@ import React, {useRef, useState, useCallback} from 'react';
 import {
   Alert,
   TouchableOpacity,
-  View,
   ScrollView,
   NativeSyntheticEvent,
   NativeScrollEvent,
   LayoutChangeEvent,
 } from 'react-native';
-import {format} from '@utils/date';
+import {zeroPad} from '@utils/date';
 import Menu from '@/components/marketDetailPage/Menu';
 import S from './MarketDetail.style';
 import {ProductType} from '@/types/ProductType';
@@ -32,6 +31,7 @@ const MarketDetailPage = ({
   hasLike,
   id,
   specificAddress,
+  summary,
   // TODO: 영업 및 픽업시간 현재 분리, 통일 및 어떤 시간 사용할지 논의
 }: Omit<MarketDetailType, 'images' | 'openAt' | 'closeAt' | 'imageUrls'>) => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
@@ -237,32 +237,55 @@ const MarketDetailPage = ({
     );
   };
 
+  const caculateRemainingPickupTime = () => {
+    const hour = parseInt(Date.now().toString().slice(0, 2), 10);
+    const miniute = parseInt(Date.now().toString().slice(2, 4), 10);
+
+    const pickupEndHour = parseInt(pickupEndAt.slice(0, 2), 10);
+    const pickupEndMinute = parseInt(pickupEndAt.slice(-2), 10);
+
+    let remainingHour = pickupEndHour - hour;
+    let remainingMinute = pickupEndMinute - miniute;
+
+    if (remainingMinute < 0) {
+      remainingHour -= 1;
+      remainingMinute += 60;
+    }
+
+    if (remainingHour < 0) {
+      return '픽업 가능 시간이 지났습니다.';
+    }
+    return `${zeroPad(remainingHour)}시간 ${zeroPad(remainingMinute)}분 남았어요!`;
+  };
+
   return (
     <S.MarketDetailInfoView>
-      <S.MarketMainInfoWrapper>
-        <S.MarketDescription>
-          내 자식에게 준다는 마음으로 음식을 만들고 있습니다^^
-        </S.MarketDescription>
-        <S.MarketTimeDescription>
-          {`픽업 마감까지 ${format(pickupEndAt - Date.now(), 'HH시간 mm분')} 남았습니다!`}
-        </S.MarketTimeDescription>
-      </S.MarketMainInfoWrapper>
-      <S.MarketSideInfoWrapper>
-        <S.MarketSideInfo>{`픽업: ${format(
-          pickupStartAt,
-          'HH시 mm분',
-        )} ~ ${format(pickupEndAt, 'HH시 mm분')}`}</S.MarketSideInfo>
-        <S.MarketSideInfo>
-          {address} {specificAddress}
-        </S.MarketSideInfo>
-      </S.MarketSideInfoWrapper>
-      <View>
-        <SubscribeIcon
-          marketIsLiked={marketIsLiked}
-          marketId={id}
-          handleSubscribe={handleSubscribe}
-        />
-      </View>
+      <S.MarketInfoWrapper>
+        <S.MarketMainInfoWrapper>
+          <S.MarketDescription>{summary}</S.MarketDescription>
+        </S.MarketMainInfoWrapper>
+        <S.MarketSideInfoWrapper>
+          <S.MarketTimeDescription>
+            {caculateRemainingPickupTime()}
+          </S.MarketTimeDescription>
+          <S.MarketPickupTimeWrapper>
+            <S.MarketSideInfo>픽업 가능 시간: </S.MarketSideInfo>
+            <S.MarketPickupTime>
+              {`${pickupStartAt.slice(0, 2)}시 ${pickupStartAt.slice(-2)}분 - ${pickupEndAt.slice(0, 2)}시 ${pickupEndAt.slice(-2)}분`}
+            </S.MarketPickupTime>
+          </S.MarketPickupTimeWrapper>
+          <S.MarketSideInfo>
+            {address} {specificAddress}
+          </S.MarketSideInfo>
+        </S.MarketSideInfoWrapper>
+        <S.MarketSubscribeIconWrapper>
+          <SubscribeIcon
+            marketIsLiked={marketIsLiked}
+            marketId={id}
+            handleSubscribe={handleSubscribe}
+          />
+        </S.MarketSubscribeIconWrapper>
+      </S.MarketInfoWrapper>
       <S.SideTagBarScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
@@ -290,19 +313,19 @@ const MarketDetailPage = ({
         decelerationRate="fast">
         {Object.entries(sortedProductsByTags).map(([tag, productsByTag]) => (
           <S.MenuView key={tag} onLayout={handleLayout(tag)}>
-            <View>
+            <S.TagWrapper>
               <S.MenuText>{tag}</S.MenuText>
-              {productsByTag.map(product => (
-                <Menu
-                  key={product.id}
-                  product={product}
-                  initCount={
-                    cart.find(item => item.productId === product.id)?.count || 0
-                  }
-                  onCountChange={handleCountChange}
-                />
-              ))}
-            </View>
+            </S.TagWrapper>
+            {productsByTag.map(product => (
+              <Menu
+                key={product.id}
+                product={product}
+                initCount={
+                  cart.find(item => item.productId === product.id)?.count || 0
+                }
+                onCountChange={handleCountChange}
+              />
+            ))}
           </S.MenuView>
         ))}
       </S.MenuScrollView>

src/screens/MarketDetailScreen/index.tsx

@@ -49,6 +49,7 @@ const MarketDetailScreen = ({navigation, route}: Props) => {
       products={marketDetail.products}
       id={marketDetail.id}
       specificAddress={marketDetail.specificAddress}
+      summary={marketDetail.summary}
     />
   );
 };