feat: feed-page 디자인 적용

ios/Podfile.lock

@@ -1,6 +1,8 @@
 PODS:
   - Alamofire (5.9.1)
   - boost (1.84.0)
+  - BVLinearGradient (2.8.3):
+    - React-Core
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.75.2)
   - Firebase/CoreOnly (11.4.0):
@@ -1731,6 +1733,7 @@ PODS:
 
 DEPENDENCIES:
   - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
+  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
@@ -1831,6 +1834,8 @@ SPEC REPOS:
 EXTERNAL SOURCES:
   boost:
     :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
+  BVLinearGradient:
+    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -1986,6 +1991,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Alamofire: f36a35757af4587d8e4f4bfa223ad10be2422b8c
   boost: 4cb898d0bf20404aab1850c656dcea009429d6c1
+  BVLinearGradient: 880f91a7854faff2df62518f0281afb1c60d49a3
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: 38bb611218305c3bc61803e287b8a81c6f63b619
   Firebase: cf1b19f21410b029b6786a54e9764a0cacad3c99

package.json

@@ -37,6 +37,7 @@
     "react-native-date-picker": "^5.0.7",
     "react-native-encrypted-storage": "^4.0.3",
     "react-native-gesture-handler": "^2.18.1",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "^4.10.9",
     "react-native-screens": "^3.34.0",

src/components/feedPage/Market.style.tsx

@@ -1,4 +1,40 @@
 import styled from '@emotion/native';
+import LinearGradient from 'react-native-linear-gradient';
+
+const MarketPickupTime = styled.Text`
+  ${props => props.theme.fonts.body2};
+  padding-left: 10px;
+`;
+
+const MarketAddress = styled.Text`
+  ${props => props.theme.fonts.body2};
+  font-weight: 700;
+  padding-left: 10px;
+`;
+
+const MenuLabel = styled.Text`
+  ${props => props.theme.fonts.caption};
+  position: absolute;
+  width: 100%;
+  top: 5px;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 10px;
+  z-index: 3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const PriceLabel = styled.Text`
+  ${props => props.theme.fonts.body2};
+  font-weight: 700;
+  position: absolute;
+  top: 20px;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 10px;
+  z-index: 3;
+`;
 
 const MarketWrapper = styled.TouchableOpacity`
   display: flex;
@@ -7,48 +43,52 @@ const MarketWrapper = styled.TouchableOpacity`
   border-radius: 8px;
   background-color: white;
   margin-bottom: 10px;
+  padding-bottom: 16px;
 `;
 
 const MarketImageContainer = styled.View`
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 160px;
   flex-direction: row;
-  justify-content: space-between;
-  padding: 10px;
+  padding: 16px;
+`;
+
+const MenuGradation = styled(LinearGradient)`
+  flex: 1;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+  border-radius: 18px;
+  position: absolute;
 `;
 
 const MarketImageBox = styled.View`
-  position: relative;
+  display: flex;
   flex: 1;
 `;
 
 const MarketImage = styled.Image`
-  flex: 1;
-  aspect-ratio: 1;
-  margin-right: 10px;
+  z-index: 1;
   border-radius: 18px;
-  opacity: 0.8;
+  width: 100%;
+  height: 100%;
 `;
 
-const PriceLabel = styled.Text`
-  position: absolute;
-  bottom: 5px;
-  right: 10px;
-  color: white;
-  padding: 5px 10px;
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: bold;
+const MarketInfoDiscription = styled.View`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 `;
 
 const MarketTitle = styled.Text`
-  font-size: 18px;
+  ${props => props.theme.fonts.h6};
   font-weight: 800;
-  padding: 0px 10px 5px 10px;
-`;
-
-const MarketPickupTime = styled.Text`
-  font-size: 12px;
-  font-weight: 400;
   padding-left: 10px;
+  margin-bottom: 4px;
 `;
 
 const S = {
@@ -57,8 +97,12 @@ const S = {
   MarketImageBox,
   MarketImage,
   PriceLabel,
+  MenuLabel,
   MarketTitle,
   MarketPickupTime,
+  MenuGradation,
+  MarketAddress,
+  MarketInfoDiscription,
 };
 
 export default S;

src/components/feedPage/Market.tsx

@@ -12,16 +12,32 @@ const Market = ({market, onPress}: Props) => {
         {market.products.map(product => (
           <S.MarketImageBox key={product.id}>
             <S.MarketImage source={{uri: product.image}} />
+            <S.MenuGradation
+              colors={[
+                'rgba(0, 0, 0, 0.7)',
+                'rgba(0, 0, 0, 0.28)',
+                'rgba(0, 0, 0, 0)',
+              ]}
+              locations={[0, 0.3, 0.7]}
+              start={{x: 0.5, y: 0}}
+              end={{x: 0.5, y: 1}}
+            />
+            <S.MenuLabel numberOfLines={1}>{product.name}</S.MenuLabel>
             <S.PriceLabel>
-              {product.name}: {product.discountPrice.toLocaleString()}원
+              {product.discountPrice.toLocaleString()}원
             </S.PriceLabel>
           </S.MarketImageBox>
         ))}
       </S.MarketImageContainer>
-      <S.MarketTitle>{market.name}</S.MarketTitle>
-      <S.MarketPickupTime>
-        {`픽업: ${market.pickupStartAt} ~ ${market.pickupEndAt}`}
-      </S.MarketPickupTime>
+      <S.MarketInfoDiscription>
+        <S.MarketTitle>{market.name}</S.MarketTitle>
+        <S.MarketAddress>
+          {market.address} {market.specificAddress}
+        </S.MarketAddress>
+        <S.MarketPickupTime>
+          픽업 가능 시간: {market.openAt}~ {market.closeAt}
+        </S.MarketPickupTime>
+      </S.MarketInfoDiscription>
     </S.MarketWrapper>
   );
 };

src/context/theme.ts

@@ -23,91 +23,91 @@ const theme = {
       fontSize: 96,
       fontWeight: 'light',
       letterSpacing: -1.5,
-      lineHeight: 96,
+      lineHeight: 104,
       fontFamily: 'Roboto',
     },
     h2: {
       fontSize: 60,
       fontWeight: 'light',
       letterSpacing: -0.5,
-      lineHeight: 60,
+      lineHeight: 68,
       fontFamily: 'Roboto',
     },
     h3: {
       fontSize: 48,
       fontWeight: 'regular',
       letterSpacing: 0,
-      lineHeight: 48,
+      lineHeight: 56,
       fontFamily: 'Roboto',
     },
     h4: {
       fontSize: 34,
       fontWeight: 'regular',
       letterSpacing: 0.25,
-      lineHeight: 34,
+      lineHeight: 42,
       fontFamily: 'Roboto',
     },
     h5: {
       fontSize: 24,
       fontWeight: 'regular',
       letterSpacing: 0,
-      lineHeight: 24,
+      lineHeight: 32,
       fontFamily: 'Roboto',
     },
     h6: {
       fontSize: 20,
       fontWeight: 'medium',
       letterSpacing: 0.15,
-      lineHeight: 20,
+      lineHeight: 28,
       fontFamily: 'Roboto',
     },
     subtitle1: {
       fontSize: 16,
       fontWeight: 'regular',
       letterSpacing: 0.15,
-      lineHeight: 16,
+      lineHeight: 20,
       fontFamily: 'Roboto',
     },
     subtitle2: {
       fontSize: 14,
       fontWeight: 'medium',
       letterSpacing: 0.1,
-      lineHeight: 14,
+      lineHeight: 18,
       fontFamily: 'Roboto',
     },
     body1: {
       fontSize: 16,
       fontWeight: 'regular',
       letterSpacing: 0.5,
-      lineHeight: 16,
+      lineHeight: 20,
       fontFamily: 'Roboto',
     },
     body2: {
       fontSize: 14,
       fontWeight: 'regular',
       letterSpacing: 0.25,
-      lineHeight: 14,
+      lineHeight: 18,
       fontFamily: 'Roboto',
     },
     button: {
       fontSize: 14,
       fontWeight: 'medium',
       letterSpacing: 1.25,
-      lineHeight: 14,
+      lineHeight: 18,
       fontFamily: 'Roboto',
     },
     caption: {
       fontSize: 12,
       fontWeight: 'regular',
       letterSpacing: 0.4,
-      lineHeight: 12,
+      lineHeight: 16,
       fontFamily: 'Roboto',
     },
     overline: {
       fontSize: 10,
       fontWeight: 'regular',
       letterSpacing: 1.5,
-      lineHeight: 10,
+      lineHeight: 14,
       fontFamily: 'Roboto',
     },
   },

src/screens/MarketDetailScreen/MarketDetailPage.tsx

@@ -28,7 +28,10 @@ const MarketDetailPage = ({
   pickupEndAt,
   address,
   products,
-}: Omit<MarketType, 'id' | 'images'>) => {
+}: Omit<
+  MarketType,
+  'id' | 'images' | 'openAt' | 'closeAt' | 'specificAddress'
+>) => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [cart, setCart] = useState<CartItem[]>([]);
   const [selectedTag, setSelectedTag] = useState<string>('추천메뉴');

src/types/Market.ts

@@ -8,4 +8,7 @@ export type MarketType = {
   address: string;
   products: ProductType[];
   images: string[];
+  openAt: string;
+  closeAt: string;
+  specificAddress: string;
 };

yarn.lock

@@ -4048,6 +4048,7 @@ __metadata:
     react-native-date-picker: ^5.0.7
     react-native-encrypted-storage: ^4.0.3
     react-native-gesture-handler: ^2.18.1
+    react-native-linear-gradient: ^2.8.3
     react-native-paper: ^5.12.5
     react-native-safe-area-context: ^4.10.9
     react-native-screens: ^3.34.0
@@ -9562,6 +9563,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-linear-gradient@npm:^2.8.3":
+  version: 2.8.3
+  resolution: "react-native-linear-gradient@npm:2.8.3"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: f980d324e551bbc475c6406bdc5250a08242020cbe653412fa169bbdf51e28a502e225de105b4d696d6a1a1b733d44782469020f4936d8b3ce0e2c78e51cf58f
+  languageName: node
+  linkType: hard
+
 "react-native-paper@npm:^5.12.5":
   version: 5.12.5
   resolution: "react-native-paper@npm:5.12.5"