feature: [게시글 상세 조회] 사진 슬라이더

Jenkinsfile

@@ -1,6 +1,9 @@
 node {
+    stage ('clone') {
+        checkout scm
+    }
     stage('build') {
-	sh 'cd back'
+        sh 'cd back'
         sh './gradlew clean build'
     }
 }

front/App.tsx

@@ -1,7 +1,11 @@
+/**
+ * @author kouz95
+ */
+
 import React from "react";
-import BottomTabNavigation from "./src/components/BottomTabNavigation";
 import { NavigationContainer } from "@react-navigation/native";
 import { RecoilRoot } from "recoil/dist";
+import BottomTabNavigation from "./src/components/BottomTabNavigation";
 
 export default function App() {
   return (

front/src/components/ArticleAuthor.tsx

@@ -8,7 +8,7 @@ import AuthorAvatar from "./AuthorAvatar";
 import AuthorName from "./AuthorName";
 import AuthorScore from "./AuthorScore";
 import AuthorTheCheat from "./AuthorTheCheat";
-import { AuthorScoreType, AuthorAvatarType } from "../types/types";
+import { AuthorAvatarType, AuthorScoreType } from "../types/types";
 
 interface ArticleAuthorProps {
   name: string;

front/src/components/ArticleCreateScreenModal.tsx

@@ -6,10 +6,10 @@ import { useNavigation } from "@react-navigation/native";
 import { useRecoilState } from "recoil/dist";
 import {
   Modal,
-  View,
+  StyleSheet,
   Text,
   TouchableHighlight,
-  StyleSheet,
+  View,
 } from "react-native";
 import { articleModalActivationState } from "../states/articleState";
 import { ArticleCreateModalNavigationProp } from "../types/types";

front/src/components/ArticleDetailImageSlider.tsx

@@ -0,0 +1,53 @@
+/**
+ * @author kouz95
+ */
+
+import React from "react";
+import ImageBox from "./ImageBox";
+import { ImageURISource, StyleSheet, TouchableOpacity } from "react-native";
+
+import Swiper from "react-native-swiper";
+import ActiveDot from "./ActiveDot";
+import { useNavigation } from "@react-navigation/native";
+import { ImageSliderNavigationProp } from "../types/types";
+import Dot from "./Dot";
+
+interface ImageSliderProps {
+  images: ImageURISource[];
+}
+
+export default function ArticleDetailImageSlider({ images }: ImageSliderProps) {
+  const navigation = useNavigation<ImageSliderNavigationProp>();
+  return (
+    <Swiper
+      loadMinimal={true}
+      loop={false}
+      dot={<Dot />}
+      activeDot={<ActiveDot />}
+      paginationStyle={styles.pagination}
+      centerContent={true}
+    >
+      {images.map((imageURISource, index) => (
+        <TouchableOpacity
+          activeOpacity={1}
+          style={styles.buttonOnImage}
+          key={index}
+          onPress={() =>
+            navigation.navigate("ArticleDetailImageViewScreen", { images })
+          }
+        >
+          <ImageBox imageURI={imageURISource} marginBottom={0} />
+        </TouchableOpacity>
+      ))}
+    </Swiper>
+  );
+}
+
+const styles = StyleSheet.create({
+  pagination: {
+    bottom: 15,
+  },
+  buttonOnImage: {
+    flex: 1,
+  },
+});

front/src/components/ArticleDetailImageViewSlider.tsx

@@ -0,0 +1,43 @@
+/**
+ * @author kouz95
+ */
+
+import React from "react";
+import ImageBox from "./ImageBox";
+import { ImageURISource, StyleSheet } from "react-native";
+import ImageViewSliderDot from "./ImageViewSliderDot";
+import Swiper from "react-native-swiper";
+import ActiveDot from "./ActiveDot";
+
+interface ImageSliderProps {
+  images: ImageURISource[];
+}
+
+export default function ArticleDetailImageViewSlider({
+  images,
+}: ImageSliderProps) {
+  return (
+    <Swiper
+      loadMinimal={true}
+      loop={false}
+      dot={<ImageViewSliderDot />}
+      activeDot={<ActiveDot />}
+      paginationStyle={styles.pagination}
+      centerContent={true}
+      style={styles.container}
+    >
+      {images.map((imageURISource, index) => (
+        <ImageBox imageURI={imageURISource} key={index} marginBottom={50} />
+      ))}
+    </Swiper>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "black",
+  },
+  pagination: {
+    bottom: 30,
+  },
+});

front/src/components/AuthorName.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 interface AuthorNameProps {
   name: string;

front/src/components/Dot.tsx

@@ -15,9 +15,6 @@ const styles = StyleSheet.create({
     width: 5,
     height: 5,
     borderRadius: 4,
-    marginLeft: 3,
-    marginRight: 3,
-    marginTop: 3,
-    marginBottom: 3,
+    margin: 3,
   },
 });

front/src/components/ImageBox.tsx

@@ -0,0 +1,31 @@
+/**
+ * @author kouz95
+ */
+
+import React from "react";
+import { Image, ImageURISource, StyleSheet, View } from "react-native";
+
+interface ImageBoxProps {
+  imageURI: ImageURISource;
+  marginBottom: number;
+}
+
+export default function ImageBox({ imageURI, marginBottom }: ImageBoxProps) {
+  return (
+    <View style={styles.imageContainer || { marginBottom: marginBottom }}>
+      <Image source={imageURI} style={styles.image} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    flex: 1,
+  },
+  image: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    resizeMode: "contain",
+  },
+});

front/src/components/ImageSliderNavigation.tsx

@@ -0,0 +1,26 @@
+/**
+ * @author kouz95
+ */
+
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import ArticleDetailScreen from "../screens/ArticleDetailScreen";
+import ArticleDetailImageViewScreen from "../screens/ArticleDetailImageViewScreen";
+import { ImageSliderParamList } from "../types/types";
+
+const Stack = createStackNavigator<ImageSliderParamList>();
+
+export default function ImageSliderNavigation() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="ArticleDetailScreen"
+        component={ArticleDetailScreen}
+      />
+      <Stack.Screen
+        name="ArticleDetailImageViewScreen"
+        component={ArticleDetailImageViewScreen}
+      />
+    </Stack.Navigator>
+  );
+}

front/src/components/ImageViewSliderDot.tsx

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

front/src/components/Photo.tsx

@@ -13,9 +13,9 @@ import {
 } from "react-native";
 import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons";
 import {
-  PermissionStatus,
   launchImageLibraryAsync,
   MediaTypeOptions,
+  PermissionStatus,
 } from "expo-image-picker";
 import * as Permissions from "expo-permissions";
 import NoticeModal from "./NoticeModal";

front/src/components/Tag.tsx

@@ -12,8 +12,8 @@ import { useRecoilState, useSetRecoilState } from "recoil/dist";
 import {
   inputState,
   isModalOpenState,
-  tagIdState,
   tagBoxesState,
+  tagIdState,
 } from "../states/TagState";
 
 export default function Tag() {

front/src/screens/ArticleContentsFormScreen.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from "react";
-import { StyleSheet, View, TextInput } from "react-native";
+import { StyleSheet, TextInput, View } from "react-native";
 import { articleContentsState } from "../states/articleState";
 import { useRecoilState } from "recoil/dist";
 

front/src/screens/ArticleCreateScreen.tsx

@@ -2,26 +2,26 @@
  * @author kouz95 lxxjn0
  */
 
-import React, { useLayoutEffect, useEffect } from "react";
+import React, { useEffect, useLayoutEffect } from "react";
 import {
-  View,
-  Text,
+  BackHandler,
   Button,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  TouchableOpacity,
   Keyboard,
   Platform,
-  BackHandler,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { HeaderBackButton } from "@react-navigation/stack";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { EvilIcons, MaterialCommunityIcons } from "@expo/vector-icons";
 import {
-  useSetRecoilState,
-  useResetRecoilState,
   useRecoilValue,
+  useResetRecoilState,
+  useSetRecoilState,
 } from "recoil/dist";
 import ArticleTitleForm from "../components/ArticleTitleForm";
 import ArticlePriceForm from "../components/ArticlePriceForm";
@@ -30,8 +30,8 @@ import Photo from "../components/Photo";
 import Tag from "../components/Tag";
 import {
   articleContentsState,
-  articlePhotosState,
   articleModalActivationState,
+  articlePhotosState,
   articlePriceState,
   articleSelectedCategoryState,
   articleTitleState,

front/src/screens/ArticleDetailImageViewScreen.tsx

@@ -0,0 +1,57 @@
+/**
+ * @author kouz95
+ */
+
+import React, { useLayoutEffect } from "react";
+import { StatusBar, StyleSheet, View } from "react-native";
+
+import ArticleDetailImageViewSlider from "../components/ArticleDetailImageViewSlider";
+import { HeaderBackButton } from "@react-navigation/stack";
+import {
+  ImageSliderNavigationProp,
+  ImageSliderParamList,
+} from "../types/types";
+import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import { AntDesign } from "@expo/vector-icons";
+
+export default function ArticleDetailImageViewScreen() {
+  const navigation = useNavigation<ImageSliderNavigationProp>();
+  const route = useRoute<
+    RouteProp<ImageSliderParamList, "ArticleDetailImageViewScreen">
+  >();
+
+  const goBackAndSetStatusBarVisible = () => {
+    navigation.goBack();
+    StatusBar.setHidden(false);
+  };
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      title: "",
+      headerLeft: () => undefined,
+      headerRight: () => (
+        <HeaderBackButton
+          labelVisible={false}
+          onPress={goBackAndSetStatusBarVisible}
+          backImage={() => <AntDesign name="close" size={24} color="white" />}
+        />
+      ),
+      headerRightContainerStyle: { paddingRight: 20 },
+      headerStyle: {
+        backgroundColor: "black",
+      },
+    });
+    StatusBar.setHidden(true);
+  }, [navigation, route]);
+  return (
+    <View style={styles.container}>
+      <ArticleDetailImageViewSlider images={route.params.images} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});