feature: [피드 조회] 게시글 카드 컴포넌트

front/package.json

@@ -15,8 +15,10 @@
     "@react-navigation/bottom-tabs": "^5.6.1",
     "@react-navigation/native": "^5.6.1",
     "@react-navigation/stack": "^5.6.2",
+    "@types/recompose": "^0.30.7",
     "expo": "~38.0.8",
     "expo-image-picker": "^8.3.0",
+    "expo-permissions": "~9.0.1",
     "expo-status-bar": "^1.0.2",
     "moment": "^2.27.0",
     "react": "~16.11.0",
@@ -27,9 +29,9 @@
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
+    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.11.7",
-    "recoil": "^0.0.10",
-    "expo-permissions": "~9.0.1"
+    "recoil": "^0.0.10"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

front/src/components/BottomTabNavigation.tsx

@@ -5,12 +5,12 @@
 import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import HomeScreen from "../screens/HomeScreen";
 import ChatScreen from "../screens/ChatScreen";
 import ProfileScreen from "../screens/ProfileScreen";
 import CategoryNavigation from "./CategoryNavigation";
 import ArticleCreateOptionsModal from "./ArticleCreateOptionsModal";
 import ArticleCreateNavigation from "./ArticleCreateNavigation";
+import FeedArticleNavigation from "./Feed/FeedArticleNavigation";
 
 const Tab = createBottomTabNavigator();
 
@@ -22,7 +22,7 @@ export default function BottomTabNavigation() {
     >
       <Tab.Screen
         name="홈"
-        component={HomeScreen}
+        component={FeedArticleNavigation}
         options={{
           tabBarIcon: ({ color }) => (
             <MaterialCommunityIcons

front/src/components/ArticleCard.tsx → front/src/components/CategoryArticleCard.tsx

@@ -17,7 +17,7 @@ type ArticleAdditional = {
   chatCount: number;
 };
 
-export interface ArticleCardProps {
+export interface CategoryArticleCardProps {
   title: string;
   price: number;
   createdAt: string;
@@ -26,14 +26,14 @@ export interface ArticleCardProps {
   thumbnail: ImageProps;
 }
 
-export default function ArticleCard({
+export default function CategoryArticleCard({
   title,
   price,
   createdAt,
   detail,
   additional,
   thumbnail,
-}: ArticleCardProps) {
+}: CategoryArticleCardProps) {
   return (
     <View style={styles.writeButtonContainer}>
       <View style={styles.imageContainer}>

front/src/components/CategoryNavigation.tsx

@@ -7,9 +7,9 @@ import { createStackNavigator } from "@react-navigation/stack";
 import CategoryHomeScreen from "../screens/CategoryHomeScreen";
 import CategoryDetailScreen from "../screens/CategoryDetailScreen";
 import SearchScreen from "../screens/SearchScreen";
-import { categoryParamList } from "../types/types";
+import { CategoryParamList } from "../types/types";
 
-const Stack = createStackNavigator<categoryParamList>();
+const Stack = createStackNavigator<CategoryParamList>();
 
 export default function CategoryNavigation() {
   return (

front/src/components/Feed/ActiveDot.tsx

@@ -0,0 +1,23 @@
+/**
+ * @author joseph415
+ */
+
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+export default function ActiveDot() {
+  return <View style={styles.activeDot} />;
+}
+
+const styles = StyleSheet.create({
+  activeDot: {
+    backgroundColor: "#eeecda",
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 3,
+    marginRight: 3,
+    marginTop: 3,
+    marginBottom: 3,
+  },
+});

front/src/components/Feed/Dot.tsx

@@ -0,0 +1,23 @@
+/**
+ * @author
+ */
+
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+export default function () {
+  return <View style={styles.dot} />;
+}
+
+const styles = StyleSheet.create({
+  dot: {
+    backgroundColor: "rgba(0,0,0,.2)",
+    width: 5,
+    height: 5,
+    borderRadius: 4,
+    marginLeft: 3,
+    marginRight: 3,
+    marginTop: 3,
+    marginBottom: 3,
+  },
+});

front/src/components/Feed/FeedArticleCard.tsx

@@ -0,0 +1,125 @@
+/**
+ * @author joseph415
+ */
+
+import React, { useRef } from "react";
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+import { FeedArticle, FeedNavigationProp } from "../../types/types";
+import FeedArticleTag from "./FeedArticleTag";
+import replacePriceWithCommas from "../../replacePriceWithCommas";
+import Heart from "./Heart";
+import FeedSliderImage from "./FeedSliderImage";
+import { useSetRecoilState } from "recoil/dist";
+import { favoriteState } from "../../states/heartState";
+import { useNavigation } from "@react-navigation/native";
+
+export default function FeedArticleCard({ feedArticle }: FeedArticle) {
+  const navigation = useNavigation<FeedNavigationProp>();
+  const setFavorite = useSetRecoilState(favoriteState);
+  setFavorite(feedArticle.favorite);
+
+  const AnimateTouchableWithoutFeedback = Animated.createAnimatedComponent(
+    TouchableWithoutFeedback,
+  );
+
+  const clickValue = useRef(new Animated.Value(1)).current;
+
+  const clickArticle = () => {
+    clickValue.setValue(0.98);
+    Animated.timing(clickValue, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  return (
+    <AnimateTouchableWithoutFeedback
+      onPress={() => {
+        clickArticle();
+        navigation.navigate("FeedArticle");
+      }}
+      style={{
+        transform: [{ scale: clickValue }],
+      }}
+    >
+      <View style={styles.articleContainer}>
+        <View style={styles.photoContainer}>
+          <FeedSliderImage feedArticle={feedArticle} />
+        </View>
+        <View style={styles.articleSemiDetailsContainer}>
+          <View style={styles.detailsContainer}>
+            <Heart />
+            <View style={styles.detailsPriceContainer}>
+              <Text style={styles.text}>
+                {replacePriceWithCommas(feedArticle.price)}원
+              </Text>
+            </View>
+          </View>
+          <View style={styles.tagContainer}>
+            {feedArticle.tagBoxes.map((tagItem) => (
+              <FeedArticleTag key={tagItem.id} tagBox={tagItem} />
+            ))}
+          </View>
+        </View>
+      </View>
+    </AnimateTouchableWithoutFeedback>
+  );
+}
+
+const styles = StyleSheet.create({
+  articleContainer: {
+    marginHorizontal: 4,
+    backgroundColor: "#FFF",
+    paddingVertical: 15,
+    borderRadius: 8,
+    aspectRatio: 4 / 3,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+
+    elevation: 6,
+  },
+  photoContainer: {
+    paddingHorizontal: 8,
+    flex: 3,
+  },
+  pagination: {
+    bottom: 15,
+  },
+  articleSemiDetailsContainer: {
+    flex: 1.3,
+  },
+  detailsContainer: {
+    flexDirection: "row",
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  detailsHeartContainer: {
+    flexDirection: "row",
+    flex: 1,
+    alignItems: "center",
+  },
+  text: { fontWeight: "bold" },
+  detailsPriceContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "flex-end",
+  },
+  tagContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+  },
+});

front/src/components/Feed/FeedArticleNavigation.tsx

@@ -0,0 +1,20 @@
+/**
+ * @author joseph415
+ */
+
+import React from "react";
+import SelectedArticleScreen from "../../screens/SelectedArticleScreen";
+import { createStackNavigator } from "@react-navigation/stack";
+import HomeScreen from "../../screens/HomeScreen";
+import { FeedParamList } from "../../types/types";
+
+const Stack = createStackNavigator<FeedParamList>();
+
+export default function FeedArticleNavigation() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="SellerLee" component={HomeScreen} />
+      <Stack.Screen name="FeedArticle" component={SelectedArticleScreen} />
+    </Stack.Navigator>
+  );
+}

front/src/components/Feed/FeedArticleTag.tsx

@@ -0,0 +1,31 @@
+/**
+ * @author joseph415
+ */
+
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { TagItemProps } from "../../types/types";
+
+export default function FeedArticleTag({ tagBox }: TagItemProps) {
+  return (
+    <View style={styles.tagItem}>
+      <View style={styles.tagItemTextWrapper}>
+        <Text>{tagBox.tag}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tagItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: "80%",
+    marginRight: 5,
+    borderRadius: 10,
+    backgroundColor: "#eeecda",
+  },
+  tagItemTextWrapper: {
+    paddingHorizontal: 3,
+  },
+});

front/src/components/Feed/FeedSliderImage.tsx

@@ -0,0 +1,69 @@
+/**
+ * @author joseph415
+ */
+
+import React from "react";
+import ImageBox from "./ImageBox";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import { FeedArticle } from "../../types/types";
+import Dot from "./Dot";
+import ActiveDot from "./ActiveDot";
+import Swiper from "react-native-swiper";
+import { useRecoilState } from "recoil/dist";
+import { favoriteState, isFavoriteState } from "../../states/heartState";
+
+export default function FeedSliderImage({ feedArticle }: FeedArticle) {
+  let lastTap: number | null = null;
+  const [isFavorite, setIsFavorite] = useRecoilState(isFavoriteState);
+  const [favorite, setFavorite] = useRecoilState(favoriteState);
+
+  const checkFavorite = () => {
+    if (isFavorite) {
+      setIsFavorite(false);
+      setFavorite(favorite - 1);
+    } else {
+      setIsFavorite(true);
+      setFavorite(favorite + 1);
+    }
+  };
+
+  const detectDoubleTap = () => {
+    const now = Date.now();
+    const DOUBLE_PRESS_DELAY = 300;
+    if (lastTap && now - lastTap < DOUBLE_PRESS_DELAY) {
+      checkFavorite();
+    } else {
+      lastTap = now;
+    }
+  };
+
+  return (
+    <Swiper
+      loadMinimal={true}
+      loop={false}
+      dot={Dot()}
+      activeDot={ActiveDot()}
+      paginationStyle={styles.pagination}
+      centerContent={true}
+    >
+      {feedArticle.images.map((image) => (
+        <TouchableOpacity
+          activeOpacity={1}
+          style={{ flex: 1 }}
+          key={image.id}
+          onPress={() => {
+            detectDoubleTap();
+          }}
+        >
+          <ImageBox imageTypeProps={image} />
+        </TouchableOpacity>
+      ))}
+    </Swiper>
+  );
+}
+
+const styles = StyleSheet.create({
+  pagination: {
+    bottom: 15,
+  },
+});