Feat/analyzing screen #2

App.js

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Image } from "react-native";
+import { Image, View } from "react-native";
 import * as SplashScreen from "expo-splash-screen";
 import * as Font from "expo-font";
 import { Asset } from "expo-asset";
 import { Block, GalioProvider } from "galio-framework";
 import { NavigationContainer } from "@react-navigation/native";
+import { Provider } from 'react-redux';
+import store from './store/store'; // 스토어 파일의 위치에 맞게 경로를 조정하세요.
 
 // Before rendering any navigation stack
 import { enableScreens } from "react-native-screens";
@@ -46,7 +48,14 @@ export default function App() {
         await _loadResourcesAsync();
         // Pre-load fonts, make any API calls you need to do here
         await Font.loadAsync({
-          ArgonExtra: require("./assets/font/argon.ttf"),
+          ArgonExtra: require("./assets/font/Orbit-Regular.ttf"),
+          KoPubWorldBatang_Pro_Bold: require("./assets/font/KoPubWorld_Batang_Pro_Bold.otf"),
+          KoPubWorldBatang_Pro_Light: require("./assets/font/KoPubWorld_Batang_Pro_Light.otf"),
+          KoPubWorldBatang_Pro_Medium: require("./assets/font/KoPubWorld_Batang_Pro_Medium.otf"),
+          KoPubWorldDotum_Pro_Bold: require("./assets/font/KoPubWorld_Dotum_Pro_Bold.otf"),
+          KoPubWorldDotum_Pro_Light: require("./assets/font/KoPubWorld_Dotum_Pro_Light.otf"),
+          KoPubWorldDotum_Pro_Medium: require("./assets/font/KoPubWorld_Dotum_Pro_Medium.otf"),
+          Gugi: require("./assets/font/Gugi-Regular.ttf"),
         });
       } catch (e) {
         console.warn(e);
@@ -73,12 +82,14 @@ export default function App() {
   }
 
   return (
-    <NavigationContainer onReady={onLayoutRootView}>
-      <GalioProvider theme={argonTheme}>
-        <Block flex>
-          <Screens />
-        </Block>
-      </GalioProvider>
-    </NavigationContainer>
+    <Provider store={store}>
+      <NavigationContainer onReady={onLayoutRootView}>
+        <GalioProvider theme={argonTheme}>
+          <Block flex>
+            <Screens />
+          </Block>
+        </GalioProvider>
+      </NavigationContainer>
+    </Provider>
   );
 }

app.json

@@ -3,10 +3,7 @@
     "name": "Argon FREE React Native",
     "slug": "argon-free-react-native",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android"
-    ],
+    "platforms": ["ios", "android", "web"],
     "version": "1.7.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -18,9 +15,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },

babel.config.js

@@ -9,7 +9,7 @@ module.exports = function (api) {
           extensions: [".tsx", ".ts", ".js", ".json"],
         },
       ],
-      "react-native-reanimated/plugin",
+     ["react-native-reanimated/plugin"],
     ],
   };
 };

components/DrawerItem.js

@@ -1,58 +1,64 @@
 import React from "react";
 import { StyleSheet, TouchableOpacity, Linking } from "react-native";
 import { Block, Text, theme } from "galio-framework";
+import { FontAwesome, MaterialIcons, Feather, MaterialCommunityIcons } from '@expo/vector-icons';
 
 import Icon from "./Icon";
 import argonTheme from "../constants/Theme";
 
 class DrawerItem extends React.Component {
+
+  iconColor = "#67B779";
+
   renderIcon = () => {
     const { title, focused } = this.props;
 
+    const iconColor = focused ? "white" : this.iconColor;
+
     switch (title) {
-      case "Home":
+      case "홈":
         return (
           <Icon
-            name="shop"
-            family="ArgonExtra"
+            name="home"
+            family="FontAwesome"
             size={14}
-            color={focused ? "white" : argonTheme.COLORS.PRIMARY}
+            color={iconColor}
           />
         );
-      case "Elements":
+      case "복용 기록 확인":
         return (
           <Icon
-            name="map-big"
-            family="ArgonExtra"
+            name="history"
+            family="MaterialIcons"
             size={14}
-            color={focused ? "white" : argonTheme.COLORS.ERROR}
+            color={iconColor}
           />
         );
-      case "Articles":
+      case "복용 알람":
         return (
           <Icon
-            name="spaceship"
-            family="ArgonExtra"
+            name="bell"
+            family="Feather"
             size={14}
-            color={focused ? "white" : argonTheme.COLORS.PRIMARY}
+            color={iconColor}
           />
         );
-      case "Profile":
+      case "중독 위험도":
         return (
           <Icon
-            name="chart-pie-35"
-            family="ArgonExtra"
+            name="warning"
+            family="MaterialIcons"
             size={14}
-            color={focused ? "white" : argonTheme.COLORS.WARNING}
+            color={iconColor}
           />
         );
-      case "Account":
+      case "프로필":
         return (
           <Icon
-            name="calendar-date"
-            family="ArgonExtra"
+            name="account-circle"
+            family="MaterialIcons"
             size={14}
-            color={focused ? "white" : argonTheme.COLORS.INFO}
+            color={iconColor}
           />
         );
       case "Getting Started":
@@ -113,7 +119,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16
   },
   activeStyle: {
-    backgroundColor: argonTheme.COLORS.ACTIVE,
+    backgroundColor: "#67B779",
     borderRadius: 4
   },
   shadow: {

components/DrugCard.js

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  Button,
+} from "react-native";
+import ModalComponent from "./ModalComponent";
+import { addRecord } from "../store/actions/recordActions";
+
+// decodeHtmlEntity 함수를 적용하여 출력
+const renderTextWithNewLines = (text) => {
+  const formattedText = decodeHtmlEntity(text);
+  return formattedText.split("\n").map((line, index) => (
+    <Text key={index} style={styles.text}>
+      {line}
+    </Text>
+  ));
+};
+
+function decodeHtmlEntity(str) {
+  const entities = {
+    "&lt;": "<",
+    "&gt;": ">",
+    "&amp;": "&",
+    "&quot;": '"',
+    "&apos;": "'",
+    "&nbsp;": " ",
+    "&copy;": "©",
+    "&reg;": "®",
+    // 필요한 추가 HTML 엔티티를 여기에 추가하세요.
+  };
+
+  let decodedString = Object.keys(entities).reduce((acc, entity) => {
+    const regex = new RegExp(entity, "g");
+    return acc.replace(regex, entities[entity]);
+  }, str);
+
+  // 문자열의 시작과 끝에 있는 따옴표 제거
+  decodedString = decodedString.replace(/^"|"$/g, "");
+  // 이스케이프된 줄바꿈 문자 처리
+  decodedString = decodedString.replace(/\\n/g, "\n");
+
+  return decodedString;
+}
+
+
+// 컴포넌트의 props에서 item을 받아오도록 수정
+const DrugCard = ({ item }) => {
+  const { itemName, image, efficiency, warn, sideEffect, typeName } = item; // item 객체에서 필요한 데이터 추출
+  const accessToken = useSelector((state) => state.auth.accessToken); // Redux 스토어에서 accessToken 가져오기
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const [isTaking, setIsTaking] = useState(true);
+  const [timesPerDay, setTimesPerDay] = useState(1);
+
+  const dispatch = useDispatch();
+
+  const onSubmit = (newRecord) => {
+    // newRecord 객체 구조를 확인하고 적절히 구성해야 함
+    dispatch(addRecord({ ...newRecord, accessToken })); // Redux 액션 디스패치
+    setModalVisible(false);
+  };
+
+  // 모달을 열고 닫는 함수
+  const toggleModal = () => setModalVisible(!modalVisible);
+
+  return (
+    <ScrollView style={styles.card}>
+      <Text style={styles.title}>{itemName}</Text>
+      {image && <Image source={{ uri: image }} style={styles.image} />}
+      {efficiency && (
+        <>
+          <Text style={styles.subtitle}>효능</Text>
+          {renderTextWithNewLines(efficiency)}
+        </>
+      )}
+      {warn && (
+        <>
+          <Text style={styles.subtitle}>주의</Text>
+          {renderTextWithNewLines(warn)}
+        </>
+      )}
+      {sideEffect && (
+        <>
+          <Text style={styles.subtitle}>부작용</Text>
+          {renderTextWithNewLines(sideEffect)}
+        </>
+      )}
+      {typeName && (
+        <>
+          <Text style={styles.subtitle}>위험분류</Text>
+          {renderTextWithNewLines(typeName)}
+        </>
+      )}
+      <Button title="저장하기" onPress={toggleModal} />
+
+      <ModalComponent
+        modalVisible={modalVisible}
+        onRequestClose={toggleModal}
+        drugName={itemName}
+        startDate={startDate}
+        endDate={endDate}
+        isTaking={isTaking}
+        onSubmit={onSubmit}
+        timesPerDay={timesPerDay}
+        onStartDateChange={setStartDate}
+        onEndDateChange={setEndDate}
+        onTakingPress={() => setIsTaking(true)}
+        offTakingPress={() => setIsTaking(false)}
+        onTimesPerDayChange={setTimesPerDay}
+        // accessToken을 ModalComponent에 전달할 필요 없음
+      />
+    </ScrollView>
+  );
+};
+
+
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#fff",
+    borderRadius: 8,
+    padding: 20,
+    marginBottom: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  subtitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginTop: 10,
+  },
+  text: {
+    fontSize: 14,
+    marginTop: 5,
+  },
+  image: {
+    width: 100,
+    height: 100,
+    resizeMode: "cover",
+    marginBottom: 10,
+  },
+});
+
+export default DrugCard;