Merge pull request #50 from dnd-side-project/feature/20

[#20] 4장 미리보기 FeedCard 컴포넌트 추가 & 반응형 디자인 수정

src/components/RecommendFeedCard/RecommendFeedCard.styles.tsx

@@ -4,10 +4,11 @@ import {StyleSheet} from 'react-native';
 import {heightPercentage, widthPercentage} from 'src/styles/ScreenResponse';
 
 export const FeedCardContainer = styled.View({
-  width: widthPercentage(164),
+  width: widthPercentage(166),
   height: heightPercentage(220),
-  borderRadius: 12,
   backgroundColor: '#F6F6F6',
+  marginHorizontal: widthPercentage(5.5),
+  marginVertical: heightPercentage(16),
 });
 
 export const IconContainer = styled.View({
@@ -23,6 +24,7 @@ export const IconContainer = styled.View({
 
 export const styles = StyleSheet.create({
   photoStyle: {
+    borderRadius: 12,
     flex: 1,
     zIndex: 2,
   },

src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.styles.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+
+import {heightPercentage} from 'src/styles/ScreenResponse';
+
+export const PreviewFourCardView = styled.View({
+  alignSelf: 'center',
+  height: heightPercentage(472),
+});

src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.tsx

@@ -0,0 +1,36 @@
+import React, {useCallback} from 'react';
+import {FlatList} from 'react-native';
+
+import RecommendFeedCard from '../RecommendFeedCard';
+import {PreviewFourCardView} from './RecommendPreviewFourCard.styles';
+
+interface Props {
+  data: ReadonlyArray<renderItemList['item']>;
+}
+
+type renderItemList = {
+  item: {
+    url: string;
+    id: string;
+    title: string;
+  };
+};
+
+const RecommendPreviewFourCard = ({data}: Props) => {
+  const renderItem = useCallback(({item}: renderItemList) => {
+    return <RecommendFeedCard imgUrl={item.url} />;
+  }, []);
+  return (
+    <PreviewFourCardView>
+      <FlatList
+        data={data}
+        numColumns={2}
+        keyExtractor={o => o.url}
+        renderItem={renderItem}
+        scrollEnabled={false}
+      />
+    </PreviewFourCardView>
+  );
+};
+
+export default RecommendPreviewFourCard;

src/components/RecommendPreviewFourCard/index.tsx

@@ -0,0 +1,2 @@
+import RecommendPreviewFourCard from './RecommendPreviewFourCard';
+export default RecommendPreviewFourCard;