portfolio-piechart ui complete

QUANT/Entities/MyDataScreen/DutchDetectedButton.js

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     paddingVertical: 11,
     borderRadius: 100,
     position: "absolute",
-    bottom: "7%",
+    bottom: "30%",
     right: "5%",
     elevation: 4,
     shadowColor: "black",

QUANT/Entities/MyDataScreen/PieChart.js

@@ -0,0 +1,65 @@
+import { StyleSheet, Text, View } from "react-native";
+import { G, Path, Svg } from "react-native-svg";
+import * as d3 from 'd3-shape';
+import LeftSkipArrow from "../../assets/images/smallLeftArrow.svg";
+
+const dummyData = [
+  {category: "여행", amount: 600000, color: "#22215B"},
+  {category: "송금", amount: 90000, color: "#4CE364"},
+  {category: "외식", amount: 220000, color: "#567DF4"},
+  {category: "기타", amount: 90000, color: "#FFC700"}
+]
+
+export default function PieChart() {
+  const pieData = d3.pie().value(item => item.amount)(dummyData);
+  const arcGenerator = d3.arc().innerRadius(40).outerRadius(100);
+  const today = new Date();
+  const month = today.getMonth()+1;
+
+  return (
+    <View style={styles.monthlyPieChartContainer}>
+        <View>
+          <LeftSkipArrow />
+        </View>
+        <View style={styles.pieChartContainer}>
+          <Svg style={styles.pieChart}>
+            <G x={100} y={100}>
+              {pieData.map((data, index) => {
+                const path = arcGenerator(data);
+                return (
+                  <Path key={index} d={path} fill={data.data.color} />
+                )
+              })}
+            </G>
+          </Svg>
+          <Text style={styles.monthText}>{month}월</Text>
+        </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  monthlyPieChartContainer: {
+    marginTop: 32,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  pieChartContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "skyblue",
+    position: "relative",
+  },
+  pieChart: {
+    width: 200,
+    height: 200,
+  },
+  monthText: {
+    color: "#1B1D28",
+    fontFamily: "Pretendard-600",
+    fontSize: 20,
+    lineHeight: 28,
+    letterSpacing: -0.5,
+    position: "absolute",
+  }
+})

QUANT/Entities/MyDataScreen/Portfolio.js

@@ -0,0 +1,82 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { G, Path, Svg } from "react-native-svg";
+import * as d3 from 'd3-shape';
+import LeftSkipArrow from "../../assets/images/smallLeftArrow.svg";
+import RightSkipArrow from "../../assets/images/smallRightArrow.svg";
+import { useState } from "react";
+import PortfolioToTalAmountText from "./PortfolioTotalAmountText";
+
+const dummyData = [
+  {category: "여행", amount: 600000, color: "#22215B"},
+  {category: "송금", amount: 90000, color: "#4CE364"},
+  {category: "외식", amount: 220000, color: "#567DF4"},
+  {category: "기타", amount: 90000, color: "#FFC700"}
+]
+
+export default function Portfolio() {
+  const pieData = d3.pie().value(item => item.amount)(dummyData);
+  const arcGenerator = d3.arc().innerRadius(40).outerRadius(100);
+  const [totalAmount , setTotalAmount] = useState(10000000);
+  const today = new Date();
+  const month = today.getMonth()+1;
+
+  return (
+    <>
+      <View style={styles.monthlyPieChartContainer}>
+          <Pressable android_ripple={{color: "#ccc"}} style={({pressed}) => [styles.skipArrowButtonContainer, pressed && {opacity: 0.4}]}>
+            <LeftSkipArrow />
+          </Pressable>
+          <View style={styles.pieChartContainer}>
+            <Svg style={styles.pieChart}>
+              <G x={100} y={100}>
+                {pieData.map((data, index) => {
+                  const path = arcGenerator(data);
+                  return (
+                    <Path key={index} d={path} fill={data.data.color} />
+                  )
+                })}
+              </G>
+            </Svg>
+            <Text style={styles.monthText}>{month}월</Text>
+          </View>
+          <Pressable android_ripple={{color: "#ccc"}} style={({pressed}) => [styles.skipArrowButtonContainer, pressed && {opacity: 0.4}]}>
+            <RightSkipArrow />
+          </Pressable>
+      </View>
+      <PortfolioToTalAmountText totalAmount={totalAmount} />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  monthlyPieChartContainer: {
+    marginTop: 32,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  pieChartContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+  },
+  pieChart: {
+    width: 200,
+    height: 200,
+  },
+  monthText: {
+    color: "#1B1D28",
+    fontFamily: "Pretendard-600",
+    fontSize: 20,
+    lineHeight: 28,
+    letterSpacing: -0.5,
+    position: "absolute",
+  },
+  skipArrowButtonContainer: {
+    backgroundColor: "white",
+    padding: 7.5,
+    borderRadius: 75,
+    justifyContent: "center",
+    alignItems: "center",
+  }
+})

QUANT/Entities/MyDataScreen/PortfolioTotalAmountText.js

@@ -0,0 +1,31 @@
+import { StyleSheet, Text } from "react-native";
+
+export default function PortfolioToTalAmountText({totalAmount}) {
+  return (
+    <>
+      <Text style={styles.totalAmountText}>총 소비 금액</Text>
+      <Text style={styles.totalAmount}>{totalAmount.toLocaleString()}원</Text>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  totalAmountText: {
+    marginTop: 24,
+    textAlign: "center",
+    color: "#1B1D28",
+    fontFamily: "Pretendard-400",
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: -0.4
+  },
+  totalAmount: {
+    marginTop: 4,
+    textAlign: "center",
+    color: "#1B1D28",
+    fontFamily: "Pretendard-600",
+    fontSize: 24,
+    lineHeight: 34,
+    letterSpacing: -0.6
+  }
+})

QUANT/Entities/MyDataScreen/TabSelector.js

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import TransactionalInformation from "./TransactionalInformation";
+import Portfolio from "./Portfolio";
 
 export default function TabSelector() {
   const [selected, setSelected] = useState("transaction");
@@ -24,6 +25,11 @@ export default function TabSelector() {
         </Pressable>
       </View>
       {selected === "transaction" && <TransactionalInformation />}
+      {selected === "portfolio" && (
+        <ScrollView>
+          <Portfolio />
+        </ScrollView>
+      )}
     </View>
   )
 }

QUANT/Entities/MyDataScreen/TransactionalInformation.js

@@ -2,6 +2,7 @@ import { FlatList, SectionList, StyleSheet, View, Text, Pressable } from "react-
 import { useState } from "react";
 import { useNavigation } from "@react-navigation/native";
 import DetectedDutchPayModal from "./DetectedDutchPayModal";
+import DutchDetectedButton from "./DutchDetectedButton";
 
 const dummyData = [
   {
@@ -130,7 +131,7 @@ export default function TransactionalInformation() {
   }
 
   return (
-      <>
+      <View>
         <SectionList
           sections={transactionData}
           // style={styles.listContainer}
@@ -140,8 +141,9 @@ export default function TransactionalInformation() {
           stickySectionHeadersEnabled={false}
           showsVerticalScrollIndicator={false}
         />
+        <DutchDetectedButton />
         {isModal && <DetectedDutchPayModal isModal={isModal} setIsModal={setIsModal} dutchData={dutchData} />}
-      </>
+      </View>
   )
 }
 

QUANT/Screens/MyDataScreen.js

@@ -9,15 +9,15 @@ export default function MyDataScreen() {
     <View style={styles.screen}>
       <CloseComponent />
       <TabSelector />
-      <DutchDetectedButton />
+      {/* <DutchDetectedButton /> */}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    backgroundColor: "white",
+    backgroundColor: "#F7F7FB",
     paddingHorizontal: 20
   }
 })