UI design

App.js

@@ -1,5 +1,5 @@
 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";
@@ -46,7 +46,7 @@ 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"),
         });
       } catch (e) {
         console.warn(e);
@@ -73,12 +73,13 @@ export default function App() {
   }
 
   return (
-    <NavigationContainer onReady={onLayoutRootView}>
-      <GalioProvider theme={argonTheme}>
-        <Block flex>
-          <Screens />
-        </Block>
-      </GalioProvider>
-    </NavigationContainer>
+      <NavigationContainer onReady={onLayoutRootView}>
+        <GalioProvider theme={argonTheme}>
+          <Block flex>
+            <Screens />
+          </Block>
+        </GalioProvider>
+      </NavigationContainer>
+
   );
 }

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

@@ -10,7 +10,7 @@ class DrawerItem extends React.Component {
     const { title, focused } = this.props;
 
     switch (title) {
-      case "Home":
+      case "홈":
         return (
           <Icon
             name="shop"
@@ -19,7 +19,7 @@ class DrawerItem extends React.Component {
             color={focused ? "white" : argonTheme.COLORS.PRIMARY}
           />
         );
-      case "Elements":
+      case "복용기록확인":
         return (
           <Icon
             name="map-big"
@@ -28,7 +28,7 @@ class DrawerItem extends React.Component {
             color={focused ? "white" : argonTheme.COLORS.ERROR}
           />
         );
-      case "Articles":
+      case "복용알람":
         return (
           <Icon
             name="spaceship"
@@ -37,7 +37,7 @@ class DrawerItem extends React.Component {
             color={focused ? "white" : argonTheme.COLORS.PRIMARY}
           />
         );
-      case "Profile":
+      case "중독위험도":
         return (
           <Icon
             name="chart-pie-35"
@@ -46,7 +46,7 @@ class DrawerItem extends React.Component {
             color={focused ? "white" : argonTheme.COLORS.WARNING}
           />
         );
-      case "Account":
+      case "프로필":
         return (
           <Icon
             name="calendar-date"

components/DrugCard.js

@@ -0,0 +1,112 @@
+import React from "react";
+import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
+
+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;
+}
+
+const DrugCard = ({ item }) => {
+  const { itemName, efficiency, warn, sideEffect, image, typeName } = item;
+
+  // decodeHtmlEntity 함수를 적용하여 출력
+  const renderTextWithNewLines = (text) => {
+    const formattedText = decodeHtmlEntity(text);
+    return formattedText.split("\n").map((line, index) => (
+      <Text key={index} style={styles.text}>
+        {line}
+      </Text>
+    ));
+  };
+
+  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)}
+        </>
+      )}
+    </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;

components/DrugRecordCard.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+import { FontAwesome } from '@expo/vector-icons';
+
+const DrugRecordCard = ({ item }) => {
+  const { medicineName, dailyFrequency, duration, startDate, endDate, isActive, image, typeName } = item;
+
+  const calculateDrugIntakeDates = (startDate, duration) => {
+    const intakeDates = [];
+    const start = new Date(startDate);
+
+    for (let day = 0; day < duration; day++) {
+      const date = new Date(start);
+      date.setDate(start.getDate() + day);
+
+      intakeDates.push(date.toLocaleDateString("ko-KR")); 
+    }
+
+    return intakeDates;
+  };
+
+  const drugIntakeDates = calculateDrugIntakeDates(startDate, duration);
+
+  return (
+  <View style={styles.card}>
+    <View style={styles.contentContainer}>
+      <View style={styles.imageContainer}>
+        {image && <Image source={{ uri: image }} style={styles.image} />}
+      </View>
+      <View style={styles.textContainer}>
+        <Text style={styles.title}>이름 {medicineName}</Text>
+        <View style={styles.periodContainer}>
+          <FontAwesome name="calendar" size={12} color="#6a6c6c" style={styles.calendarIcon} />
+          <Text style={styles.period}> <Text style={styles.lightText}>{startDate} ~ {endDate}</Text> | <Text style={styles.boldText}>총{duration}일</Text></Text>
+        </View>
+        <Text style={styles.boldText}>위험 분류 {typeName}</Text>
+      </View>
+    </View>
+  </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 20,
+    elevation: 5,
+    flexDirection: 'row', 
+    alignItems: 'center',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start' 
+  },
+  imageContainer: {
+    marginRight: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: 80, 
+    height: 60, 
+    resizeMode: "cover",
+    borderRadius: 5
+  },
+  icon: {
+    width: 68, 
+    height: 19, 
+    marginTop: 5
+  },
+  statusText: {
+    marginTop: 8,
+  },
+  textContainer: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 5, 
+  },
+  periodContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  calendarIcon: {
+    marginRight: 5,
+  },
+  period: {
+    fontSize: 12,
+    marginBottom: 5,
+  },
+  lightText: {
+    color: '#6a6c6c', 
+    fontSize: 12,
+  },
+  boldText: {
+    fontWeight: 'bold',
+    color: '#171717', 
+  }
+});
+
+export default DrugRecordCard;