[feat]복용기록확인 페이지생성

components/ImagePickerComponent.js

@@ -46,12 +46,13 @@ const ImagePickerComponent = ({ navigation }) => {
 
     try {
       const response = await axios.post(
-        "http://34.64.158.243:8080/medicine",
+        "http://34.64.161.34:8080/medicine",
         formData,
         {
           headers: {
             "Content-Type": "multipart/form-data",
           },
+          timeout: 100000000000000000000000, // 10초 시간 제한 설정
         }
       );
       // Handle response from backend

components/KakaoLogin.js

@@ -1,3 +1,4 @@
+// KakaoLogin.js
 import React, { useState } from "react";
 import {
   View,
@@ -31,7 +32,7 @@ const KakaoLogin = ({ navigation }) => {
   }
 
   const sendAuthCodeToBackend = async (authorizationCode) => {
-    var backend_url = "http://34.64.158.243:8080/login/kakao";
+    var backend_url = "http://34.64.161.34:8080/login/kakao";
 
     axios({
       method: "post",
@@ -61,9 +62,7 @@ const KakaoLogin = ({ navigation }) => {
           alignItems: "center",
         }}
       >
-        <Image
-          source={require("../assets/imgs/kakao.png")}
-        />
+        <Image source={require("../assets/imgs/kakao.png")} />
       </TouchableOpacity>
       <Modal
         animationType="slide"
@@ -78,7 +77,7 @@ const KakaoLogin = ({ navigation }) => {
           scalesPageToFit={false}
           style={{ flex: 1 }}
           source={{
-            uri: "https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=9e576a8bbded1fa2161d00ee304cfc6a&redirect_uri=http://34.64.158.243:8080/login/kakao",
+            uri: "https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=9e576a8bbded1fa2161d00ee304cfc6a&redirect_uri=http://34.64.161.34:8080/login/kakao",
           }}
           injectedJavaScript={runFirst}
           javaScriptEnabled={true}
@@ -87,7 +86,7 @@ const KakaoLogin = ({ navigation }) => {
           onMessage={(event) => {
             if (
               event.nativeEvent["url"].startsWith(
-                "http://34.64.158.243:8080/login/kakao"
+                "http://34.64.161.34:8080/login/kakao"
               )
             ) {
               LogInProgress(event.nativeEvent["url"]);

navigation/Screens.js

@@ -9,6 +9,7 @@ import { Block } from "galio-framework";
 import CustomDrawerContent from "./Menu";
 import Elements from "../screens/Elements";
 // screens
+import Description from "../screens/Description";
 import Home from "../screens/Home";
 import Onboarding from "../screens/Onboarding";
 import Pro from "../screens/Pro";
@@ -150,6 +151,54 @@ function ProfileStack(props) {
   );
 }
 
+function DescriptionStack(props) {
+  return (
+    <Stack.Navigator
+      initialRouteName="Description"
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
+      <Stack.Screen
+        name="Description"
+        component={Description}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              transparent
+              white
+              title="Description"
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          cardStyle: { backgroundColor: "#FFFFFF" },
+          headerTransparent: true,
+        }}
+      />
+      <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true,
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+
 function HomeStack(props) {
   return (
     <Stack.Navigator
@@ -261,8 +310,8 @@ function AppStack(props) {
         }}
       />
       <Drawer.Screen
-        name="Account"
-        component={Register}
+        name="복용기록확인"
+        component={DescriptionStack}
         options={{
           headerShown: false,
         }}

package.json

@@ -19,6 +19,7 @@
     "@react-native-masked-view/masked-view": "0.2.9",
     "@react-native-picker/picker": "^2.6.1",
     "@react-native-seoul/kakao-login": "^5.3.1",
+    "@react-native/virtualized-lists": "^0.73.4",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/compat": "^5.1.25",
     "@react-navigation/drawer": "^6.6.6",

screens/Description.js

@@ -0,0 +1,252 @@
+//galio
+import { Block, Text, theme } from "galio-framework";
+import {
+  Dimensions,
+  Image,
+  ImageBackground,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from "react-native";
+//argon
+import { Images, argonTheme, articles } from "../constants/";
+
+import { Card } from "../components/";
+import React from "react";
+
+const { width } = Dimensions.get("screen");
+
+const thumbMeasure = (width - 48 - 32) / 3;
+const cardWidth = width - theme.SIZES.BASE * 2;
+const categories = [
+  {
+    title: "Music Album",
+    description:
+      "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
+    image:
+      "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
+    price: "$125",
+  },
+  {
+    title: "Events",
+    description:
+      "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
+    image:
+      "https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
+    price: "$35",
+  },
+];
+
+class Articles extends React.Component {
+  renderProduct = (item, index) => {
+    const { navigation } = this.props;
+
+    return (
+      <TouchableWithoutFeedback
+        style={{ zIndex: 3 }}
+        key={`product-${item.title}`}
+        onPress={() => navigation.navigate("Pro", { product: item })}
+      >
+        <Block center style={styles.productItem}>
+          <Image
+            resizeMode="cover"
+            style={styles.productImage}
+            source={{ uri: item.image }}
+          />
+          <Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
+            <Text
+              center
+              size={16}
+              color={theme.COLORS.MUTED}
+              style={styles.productPrice}
+            >
+              {item.price}
+            </Text>
+            <Text center size={34}>
+              {item.title}
+            </Text>
+            <Text
+              center
+              size={16}
+              color={theme.COLORS.MUTED}
+              style={styles.productDescription}
+            >
+              {item.description}
+            </Text>
+          </Block>
+        </Block>
+      </TouchableWithoutFeedback>
+    );
+  };
+
+  renderCards = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Cards
+        </Text>
+        <Block flex>
+          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+            <Card item={articles[0]} horizontal />
+            <Block flex row>
+              <Card
+                item={articles[1]}
+                style={{ marginRight: theme.SIZES.BASE }}
+              />
+              <Card item={articles[2]} />
+            </Block>
+            <Card item={articles[4]} full />
+            <Block flex card shadow style={styles.category}>
+              <ImageBackground
+                source={{ uri: Images.Products["View article"] }}
+                style={[
+                  styles.imageBlock,
+                  { width: width - theme.SIZES.BASE * 2, height: 252 },
+                ]}
+                imageStyle={{
+                  width: width - theme.SIZES.BASE * 2,
+                  height: 252,
+                }}
+              >
+                <Block style={styles.categoryTitle}>
+                  <Text size={18} bold color={theme.COLORS.WHITE}>
+                    View article
+                  </Text>
+                </Block>
+              </ImageBackground>
+            </Block>
+          </Block>
+          <Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
+            <ScrollView
+              horizontal={true}
+              pagingEnabled={true}
+              decelerationRate={0}
+              scrollEventThrottle={16}
+              snapToAlignment="center"
+              showsHorizontalScrollIndicator={false}
+              snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
+              contentContainerStyle={{
+                paddingHorizontal: theme.SIZES.BASE / 2,
+              }}
+            >
+              {categories &&
+                categories.map((item, index) =>
+                  this.renderProduct(item, index)
+                )}
+            </ScrollView>
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderAlbum = () => {
+    const { navigation } = this.props;
+
+    return (
+      <Block
+        flex
+        style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
+      >
+        <Text bold size={16} style={styles.title}>
+          Album
+        </Text>
+        <Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
+          <Block flex right>
+            <Text
+              size={12}
+              color={theme.COLORS.PRIMARY}
+              onPress={() => navigation.navigate("Home")}
+            >
+              View All
+            </Text>
+          </Block>
+          <Block
+            row
+            space="between"
+            style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
+          >
+            {Images.Viewed.map((img, index) => (
+              <Block key={`viewed-${img}`} style={styles.shadow}>
+                <Image
+                  resizeMode="cover"
+                  source={{ uri: img }}
+                  style={styles.albumThumb}
+                />
+              </Block>
+            ))}
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  render() {
+    return (
+      <Block flex center>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          {this.renderCards()}
+          {this.renderAlbum()}
+        </ScrollView>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  title: {
+    paddingBottom: theme.SIZES.BASE,
+    paddingHorizontal: theme.SIZES.BASE * 2,
+    marginTop: 22,
+    color: argonTheme.COLORS.HEADER,
+  },
+  group: {
+    paddingTop: theme.SIZES.BASE,
+  },
+  albumThumb: {
+    borderRadius: 4,
+    marginVertical: 4,
+    alignSelf: "center",
+    width: thumbMeasure,
+    height: thumbMeasure,
+  },
+  category: {
+    backgroundColor: theme.COLORS.WHITE,
+    marginVertical: theme.SIZES.BASE / 2,
+    borderWidth: 0,
+  },
+  categoryTitle: {
+    height: "100%",
+    paddingHorizontal: theme.SIZES.BASE,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  imageBlock: {
+    overflow: "hidden",
+    borderRadius: 4,
+  },
+  productItem: {
+    width: cardWidth - theme.SIZES.BASE * 2,
+    marginHorizontal: theme.SIZES.BASE,
+    shadowColor: "black",
+    shadowOffset: { width: 0, height: 7 },
+    shadowRadius: 10,
+    shadowOpacity: 0.2,
+  },
+  productImage: {
+    width: cardWidth - theme.SIZES.BASE,
+    height: cardWidth - theme.SIZES.BASE,
+    borderRadius: 3,
+  },
+  productPrice: {
+    paddingTop: theme.SIZES.BASE,
+    paddingBottom: theme.SIZES.BASE / 2,
+  },
+  productDescription: {
+    paddingTop: theme.SIZES.BASE,
+    // paddingBottom: theme.SIZES.BASE * 2,
+  },
+});
+
+export default Articles;