From 2120a7b4db12a0c856b6fa1664a7380c18c06931 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Thu, 13 Apr 2023 09:46:16 +0900
Subject: [PATCH 1/9] =?UTF-8?q?[C02]=20C02LineChartWithOptionsScreen=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/navigation/RootNavigation.tsx             |  7 ++
 src/navigation/types.ts                       |  1 +
 .../comps/LineChart/LineChartBody/Grid.tsx    | 27 +++++++
 .../comps/LineChart/LineChartBody/Lines.tsx   | 25 +++++++
 .../comps/LineChart/LineChartBody/XAxis.tsx   | 51 +++++++++++++
 .../comps/LineChart/LineChartBody/YAxis.tsx   | 51 +++++++++++++
 .../comps/LineChart/LineChartBody/index.tsx   | 33 +++++++++
 .../comps/LineChart/constants.ts              |  2 +
 .../comps/LineChart/getLinearScale.ts         | 32 +++++++++
 .../comps/LineChart/getTimeScale.ts           | 25 +++++++
 .../comps/LineChart/index.tsx                 | 71 +++++++++++++++++++
 .../comps/LineChart/types.ts                  |  4 ++
 .../C02LineChartWithOptionsScreen/dummy.ts    | 18 +++++
 .../C02LineChartWithOptionsScreen/index.tsx   | 29 ++++++++
 src/screens/HomeScreen/index.tsx              | 26 +++++--
 15 files changed, 398 insertions(+), 4 deletions(-)
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/dummy.ts
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/index.tsx

diff --git a/src/navigation/RootNavigation.tsx b/src/navigation/RootNavigation.tsx
index 80b4309..908bae5 100644
--- a/src/navigation/RootNavigation.tsx
+++ b/src/navigation/RootNavigation.tsx
@@ -2,7 +2,9 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import C01LineChartScreen from '../screens/C01LineChartScreen';
+import C02LineChartWithOptionsScreen from '../screens/C02LineChartWithOptionsScreen';
 import HomeScreen from '../screens/HomeScreen';
+
 import { RootStackParamsList } from './types';
 
 const Stack = createNativeStackNavigator<RootStackParamsList>();
@@ -17,6 +19,11 @@ function RootNavigation() {
           component={C01LineChartScreen}
           options={{ animation: 'none' }}
         />
+        <Stack.Screen
+          name="C02LineChartWithOptions"
+          component={C02LineChartWithOptionsScreen}
+          options={{ animation: 'none' }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/src/navigation/types.ts b/src/navigation/types.ts
index 70b3c35..e3f470b 100644
--- a/src/navigation/types.ts
+++ b/src/navigation/types.ts
@@ -1,4 +1,5 @@
 export type RootStackParamsList = {
   C01LineChart: undefined;
+  C02LineChartWithOptions: undefined;
   Home: undefined;
 };
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx
new file mode 100644
index 0000000..57db7a0
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx
@@ -0,0 +1,27 @@
+import { G, Line } from 'react-native-svg';
+
+type GridProps = {
+  yScale: d3.ScaleLinear<number, number, never>;
+  x1: number;
+  x2: number;
+};
+function Grid({ yScale, x1, x2 }: GridProps) {
+  const ticks = yScale.ticks();
+  return (
+    <G>
+      {ticks.map(tick => (
+        <Line
+          key={`${tick}`}
+          x1={x1}
+          x2={x2}
+          y1={yScale(tick)}
+          y2={yScale(tick)}
+          stroke="lightgray"
+          strokeWidth={1}
+        />
+      ))}
+    </G>
+  );
+}
+
+export default Grid;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
new file mode 100644
index 0000000..72dc651
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
@@ -0,0 +1,25 @@
+import { G, Path } from 'react-native-svg';
+import { TimeSeries } from '../types';
+
+type LinesProps = {
+  series: TimeSeries[];
+  lineFunc: d3.Line<TimeSeries['data'][0]>;
+};
+function Lines({ series, lineFunc }: LinesProps) {
+  return (
+    <G>
+      {series.map((sr, i) => (
+        <Path
+          key={i}
+          d={lineFunc(sr.data) ?? undefined}
+          stroke="blue"
+          strokeLinecap="round"
+          fill="transparent"
+          strokeWidth={1}
+        />
+      ))}
+    </G>
+  );
+}
+
+export default Lines;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
new file mode 100644
index 0000000..ffddabc
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
@@ -0,0 +1,51 @@
+import * as d3 from 'd3';
+import { G, Line, Text } from 'react-native-svg';
+import dateFormat from '../../../../../utils/dateFormat';
+
+const TICK_HEIGHT = 6;
+
+type XAxisProps = {
+  scale: d3.ScaleTime<number, number, never>;
+  x?: number;
+  y?: number;
+};
+function XAxis({ scale, x = 0, y = 0 }: XAxisProps) {
+  const range = scale.range();
+  const ticks = scale.ticks();
+  return (
+    <G>
+      <Line
+        x1={range[0] + x}
+        x2={range[1] + x}
+        y1={y}
+        y2={y}
+        stroke="black"
+        strokeWidth={1}
+      />
+      {ticks.map(tick => (
+        <Line
+          key={`${tick}`}
+          x1={scale(tick)}
+          x2={scale(tick)}
+          y1={y}
+          y2={y + TICK_HEIGHT}
+          stroke="black"
+        />
+      ))}
+      {ticks.map(tick => (
+        <Text
+          key={`${tick}`}
+          x={scale(tick)}
+          y={y + TICK_HEIGHT + 2}
+          fill="black"
+          textAnchor="middle"
+          alignmentBaseline="hanging"
+        >
+          {`${dateFormat(tick)}`}
+        </Text>
+      ))}
+    </G>
+  );
+}
+
+export default XAxis;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
new file mode 100644
index 0000000..398c279
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
@@ -0,0 +1,51 @@
+import { G, Line, Text } from 'react-native-svg';
+
+const TICK_WIDTH = 6;
+
+type YAxisProps = {
+  scale: d3.ScaleLinear<number, number, never>;
+  x: number;
+  y: number;
+};
+function YAxis({ scale, x, y }: YAxisProps) {
+  const range = scale.range();
+  const ticks = scale.ticks();
+
+  return (
+    <G>
+      <Line
+        x1={x}
+        x2={x}
+        y1={range[0] + y}
+        y2={range[1] + y}
+        stroke="black"
+        strokeWidth={1}
+      />
+      {ticks.map(tick => (
+        <Line
+          key={`${tick}`}
+          x1={x - TICK_WIDTH}
+          x2={x}
+          y1={scale(tick)}
+          y2={scale(tick)}
+          stroke="black"
+          strokeWidth={1}
+        />
+      ))}
+      {ticks.map(tick => (
+        <Text
+          key={`${tick}`}
+          x={x - TICK_WIDTH - 2}
+          y={scale(tick)}
+          fill="black"
+          textAnchor="end"
+          alignmentBaseline="middle"
+        >
+          {`${tick}`}
+        </Text>
+      ))}
+    </G>
+  );
+}
+
+export default YAxis;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
new file mode 100644
index 0000000..96df617
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -0,0 +1,33 @@
+import { Fragment } from 'react';
+import XAxis from './XAxis';
+import YAxis from './YAxis';
+import Grid from './Grid';
+import { TimeSeries } from '../types';
+import Lines from './Lines';
+import PaneBoundary from '../../../../../utils/PaneBoundary';
+
+type LineChartBodyProps = {
+  series: TimeSeries[];
+  xScale: d3.ScaleTime<number, number, never>;
+  yScale: d3.ScaleLinear<number, number, never>;
+  lineFunc: d3.Line<TimeSeries['data'][0]>;
+  paneBoundary: PaneBoundary;
+};
+function LineChartBody({
+  series,
+  xScale,
+  yScale,
+  lineFunc,
+  paneBoundary,
+}: LineChartBodyProps) {
+  return (
+    <Fragment>
+      <XAxis scale={xScale} y={paneBoundary.y1} />
+      <YAxis scale={yScale} x={paneBoundary.x1} y={0} />
+      <Grid yScale={yScale} x1={paneBoundary.x1} x2={paneBoundary.x2} />
+      <Lines series={series} lineFunc={lineFunc} />
+    </Fragment>
+  );
+}
+
+export default LineChartBody;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
new file mode 100644
index 0000000..76564cc
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
@@ -0,0 +1,2 @@
+export const X_AXIS_HEIGHT = 25;
+export const Y_AXIS_WIDTH = 40;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts
new file mode 100644
index 0000000..cb02f05
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts
@@ -0,0 +1,32 @@
+import * as d3 from 'd3';
+import { TimeSeries } from './types';
+
+function getLinearScale(series: TimeSeries[], range: [number, number]) {
+  if (!series?.length) {
+    return null;
+  }
+  if (range[0] === 0 && range[1] === 0) {
+    return null;
+  }
+
+  const allData = series.reduce(
+    (acc, sr) => [...acc, ...sr.data],
+    [] as TimeSeries['data']
+  );
+  if (!allData.length) {
+    return null;
+  }
+
+  const domain = d3.extent(allData, dt => dt.value) as [number, number];
+
+  const offsetDelta = 0.2;
+  const offset = (domain[1] - domain[0]) * offsetDelta;
+  domain[0] -= offset;
+  domain[1] += offset;
+
+  const scale = d3.scaleLinear().domain(domain).range(range);
+
+  return scale;
+}
+
+export default getLinearScale;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts
new file mode 100644
index 0000000..75d9dca
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts
@@ -0,0 +1,25 @@
+import * as d3 from 'd3';
+import { TimeSeries } from './types';
+
+function getTimeScale(
+  series: TimeSeries[] | undefined,
+  range: [number, number]
+) {
+  if (!series?.length) {
+    return null;
+  }
+  if (range[0] === 0 && range[1] === 0) {
+    return null;
+  }
+
+  const allData = series.reduce(
+    (acc, sr) => [...acc, ...sr.data],
+    [] as TimeSeries['data']
+  );
+  const domain = d3.extent(allData, dt => dt.date) as [Date, Date];
+  const scale = d3.scaleTime().domain(domain).range(range);
+
+  return scale;
+}
+
+export default getTimeScale;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
new file mode 100644
index 0000000..694e60d
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -0,0 +1,71 @@
+import * as d3 from 'd3';
+import { Svg, SvgProps } from 'react-native-svg';
+import { useImmer } from 'use-immer';
+import { TimeSeries } from './types';
+import getTimeScale from './getTimeScale';
+import getLinearScale from './getLinearScale';
+import LineChartBody from './LineChartBody';
+import { X_AXIS_HEIGHT, Y_AXIS_WIDTH } from './constants';
+import PaneBoundary from '../../../../utils/PaneBoundary';
+
+type LineChartProps = {
+  series: TimeSeries[];
+  width?: string | number;
+  height?: string | number;
+};
+function LineChart({ series, width = '100%', height = 200 }: LineChartProps) {
+  const [state, setState] = useImmer({
+    width: 0,
+    height: 0,
+    paneBoundary: new PaneBoundary({ x1: 0, x2: 0, y1: 0, y2: 0 }),
+  });
+
+  const onLayout: SvgProps['onLayout'] = evt => {
+    const { layout } = evt.nativeEvent;
+    setState(dr => {
+      dr.width = Math.round(layout.width);
+      dr.height = Math.round(layout.height);
+
+      const marginTop = 10;
+      const marginLeft = 10;
+      const marginRight = 10;
+      const marginBottom = 10;
+
+      dr.paneBoundary = new PaneBoundary({
+        x1: marginLeft + Y_AXIS_WIDTH,
+        x2: dr.width - marginRight,
+        y1: dr.height - marginBottom - X_AXIS_HEIGHT,
+        y2: marginTop,
+      });
+    });
+  };
+
+  const xScale = getTimeScale(series, state.paneBoundary.xs);
+  const yScale = getLinearScale(series, state.paneBoundary.ys);
+  const lineFunc =
+    !xScale || !yScale
+      ? null
+      : d3
+          .line<TimeSeries['data'][0]>()
+          .defined(dt => !isNaN(dt.value))
+          .x(dt => xScale(dt.date))
+          .y(dt => yScale(dt.value));
+
+  const loaded = xScale !== null && yScale !== null && lineFunc !== null;
+
+  return (
+    <Svg width={width} height={height} onLayout={onLayout}>
+      {loaded && (
+        <LineChartBody
+          series={series}
+          xScale={xScale}
+          yScale={yScale}
+          lineFunc={lineFunc}
+          paneBoundary={state.paneBoundary}
+        />
+      )}
+    </Svg>
+  );
+}
+
+export default LineChart;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
new file mode 100644
index 0000000..5653f1a
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -0,0 +1,4 @@
+export type TimeSeriesDatum = { date: Date; value: number };
+export type TimeSeries = {
+  data: TimeSeriesDatum[];
+};
diff --git a/src/screens/C02LineChartWithOptionsScreen/dummy.ts b/src/screens/C02LineChartWithOptionsScreen/dummy.ts
new file mode 100644
index 0000000..4aee2b9
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/dummy.ts
@@ -0,0 +1,18 @@
+const dummyValues = [
+  990810, 921890, 1080000, 857030, 865140, 780000, 978650, 1136757, 1258378,
+  1002973, 1286757, 1477297, 1671892, 1469189, 1440811, 1400270, 1538108,
+  1371892, 1363784, 1542162, 1497568, 1570541, 1631351, 1542162, 1667838,
+  1757027, 1813784, 1854324, 1931352, 1732703, 1744865, 1680000, 1643514,
+  1558378, 1400270, 1602973, 1611081, 1546216, 1615135, 1651622, 1700270,
+  1838108, 1915136, 1980000, 1793514, 1740811, 1748919, 1882703, 1821892,
+  1728649, 1761081, 1631351, 1594865, 1448919, 1388108, 1448919,
+];
+const dummyDate = new Date('2022-01-01');
+
+const dummy = dummyValues.map((value, i) => {
+  const date = new Date(dummyDate);
+  date.setDate(date.getDate() + i);
+  return { date, value: Math.floor(value / 1000) };
+});
+
+export default dummy;
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
new file mode 100644
index 0000000..e4db3fd
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -0,0 +1,29 @@
+import { StyleSheet, View } from 'react-native';
+import ScreenContainer from '../../components/ScreenContainer';
+import Text from '../../components/Text';
+import LineChart from './comps/LineChart';
+import dummy from './dummy';
+
+function C02LineChartWithOptionsScreen() {
+  return (
+    <ScreenContainer>
+      <View style={styles.header}>
+        <Text style={styles.title}>C02LineChartWithOptionsScreen</Text>
+        <Text style={styles.subtitle}>- 라인 차트 옵션 기능 구현</Text>
+      </View>
+
+      <LineChart series={[{ data: dummy }]} width="100%" height={250} />
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+  },
+  subtitle: {},
+});
+export default C02LineChartWithOptionsScreen;
diff --git a/src/screens/HomeScreen/index.tsx b/src/screens/HomeScreen/index.tsx
index b4fbd8b..dc1e920 100644
--- a/src/screens/HomeScreen/index.tsx
+++ b/src/screens/HomeScreen/index.tsx
@@ -3,6 +3,16 @@ import Button from '../../components/Button';
 import ScreenContainer from '../../components/ScreenContainer';
 import Text from '../../components/Text';
 import useNavigation from '../../navigation/useNavigation';
+import { RootStackParamsList } from '../../navigation/types';
+import { Fragment } from 'react';
+
+const buttons: { title: string; screenName: keyof RootStackParamsList }[] = [
+  { title: 'C01 - 라인차트 기본 기능 구현', screenName: 'C01LineChart' },
+  {
+    title: 'C02 - 라인차트 옵션 기능 구현',
+    screenName: 'C02LineChartWithOptions',
+  },
+];
 
 function HomeScreen() {
   const nav = useNavigation();
@@ -11,10 +21,15 @@ function HomeScreen() {
       <View style={styles.header}>
         <Text>화면 목록</Text>
       </View>
-      <Button
-        title="C01 - 라인차트 기본 기능 구현"
-        onPress={() => nav.navigate('C01LineChart')}
-      />
+      {buttons.map((btn, i) => (
+        <Fragment key={i}>
+          {i !== 0 && <View style={styles.separator} />}
+          <Button
+            title={btn.title}
+            onPress={() => nav.navigate(btn.screenName)}
+          />
+        </Fragment>
+      ))}
     </ScreenContainer>
   );
 }
@@ -23,6 +38,9 @@ const styles = StyleSheet.create({
   header: {
     padding: 16,
   },
+  separator: {
+    height: 8,
+  },
 });
 
 export default HomeScreen;

From fae1c97b2149101f75d295cba21c73fc58f363e6 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Thu, 13 Apr 2023 13:27:36 +0900
Subject: [PATCH 2/9] =?UTF-8?q?[C02]=20babel-plugin-module-resolver=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9.=20=EC=BD=94=EB=93=9C=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 babel.config.js                          | 14 +++++
 package.json                             |  1 +
 src/components/Button.tsx                |  6 +-
 src/components/ScreenContainer/index.tsx |  6 +-
 src/components/Text.tsx                  |  2 +-
 src/navigation/RootNavigation.tsx        |  6 +-
 src/navigation/useNavigation.ts          |  6 +-
 src/screens/HomeScreen/index.tsx         | 13 +++--
 tsconfig.json                            | 11 +++-
 yarn.lock                                | 74 +++++++++++++++++++++++-
 10 files changed, 118 insertions(+), 21 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index f842b77..14f311c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,17 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./'],
+        alias: {
+          components: './src/components',
+          navigation: './src/navigation',
+          screens: './src/screens',
+          utils: './src/utils',
+        },
+      },
+    ],
+  ],
 };
diff --git a/package.json b/package.json
index 26b1f33..b6625ea 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.73.9",
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a0bcfb5..dcd8266 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,12 +1,12 @@
-import {ReactNode} from 'react';
-import {Pressable, PressableProps, StyleSheet} from 'react-native';
+import { ReactNode } from 'react';
+import { Pressable, PressableProps, StyleSheet } from 'react-native';
 import Text from './Text';
 
 type ButtonProps = {
   title?: string;
   children?: ReactNode;
 } & PressableProps;
-function Button({title, children, ...props}: ButtonProps) {
+function Button({ title, children, ...props }: ButtonProps) {
   return (
     <Pressable style={styles.container} {...props}>
       {children}
diff --git a/src/components/ScreenContainer/index.tsx b/src/components/ScreenContainer/index.tsx
index 00facdc..be1e680 100644
--- a/src/components/ScreenContainer/index.tsx
+++ b/src/components/ScreenContainer/index.tsx
@@ -1,10 +1,10 @@
-import {ReactNode} from 'react';
-import {StyleSheet, View} from 'react-native';
+import { ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 type ScreenContainerProps = {
   children: ReactNode;
 };
-function ScreenContainer({children}: ScreenContainerProps) {
+function ScreenContainer({ children }: ScreenContainerProps) {
   return <View style={styles.container}>{children}</View>;
 }
 
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index db55246..49c97e7 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -6,7 +6,7 @@ import {
 
 type TextProps = RNTextProps;
 
-function Text({style, ...props}: TextProps) {
+function Text({ style, ...props }: TextProps) {
   return <RNText {...props} style={[styles.container, style]} />;
 }
 
diff --git a/src/navigation/RootNavigation.tsx b/src/navigation/RootNavigation.tsx
index 908bae5..3e54054 100644
--- a/src/navigation/RootNavigation.tsx
+++ b/src/navigation/RootNavigation.tsx
@@ -1,9 +1,9 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import C01LineChartScreen from '../screens/C01LineChartScreen';
-import C02LineChartWithOptionsScreen from '../screens/C02LineChartWithOptionsScreen';
-import HomeScreen from '../screens/HomeScreen';
+import C01LineChartScreen from 'screens/C01LineChartScreen';
+import C02LineChartWithOptionsScreen from 'screens/C02LineChartWithOptionsScreen';
+import HomeScreen from 'screens/HomeScreen';
 
 import { RootStackParamsList } from './types';
 
diff --git a/src/navigation/useNavigation.ts b/src/navigation/useNavigation.ts
index fbb6a2e..0c51552 100644
--- a/src/navigation/useNavigation.ts
+++ b/src/navigation/useNavigation.ts
@@ -1,6 +1,6 @@
-import {useNavigation as useRNNavigation} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import {RootStackParamsList} from './types';
+import { useNavigation as useRNNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamsList } from './types';
 
 type RootStackNavigationProp<RouteKey extends keyof RootStackParamsList> =
   NativeStackNavigationProp<RootStackParamsList, RouteKey>;
diff --git a/src/screens/HomeScreen/index.tsx b/src/screens/HomeScreen/index.tsx
index dc1e920..f9d8a01 100644
--- a/src/screens/HomeScreen/index.tsx
+++ b/src/screens/HomeScreen/index.tsx
@@ -1,10 +1,11 @@
-import { StyleSheet, View } from 'react-native';
-import Button from '../../components/Button';
-import ScreenContainer from '../../components/ScreenContainer';
-import Text from '../../components/Text';
-import useNavigation from '../../navigation/useNavigation';
-import { RootStackParamsList } from '../../navigation/types';
 import { Fragment } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Button from 'components/Button';
+import ScreenContainer from 'components/ScreenContainer';
+import Text from 'components/Text';
+import useNavigation from 'navigation/useNavigation';
+import { RootStackParamsList } from 'navigation/types';
 
 const buttons: { title: string; screenName: keyof RootStackParamsList }[] = [
   { title: 'C01 - 라인차트 기본 기능 구현', screenName: 'C01LineChart' },
diff --git a/tsconfig.json b/tsconfig.json
index 45a6c70..e00fb9c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,12 @@
 {
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "components/*": ["src/components/*"],
+      "navigation/*": ["src/navigation/*"],
+      "screens/*": ["src/screens/*"],
+      "utils/*": ["src/utils/*"]
+    }
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 4b7dd9c..eac1eb1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2431,6 +2431,17 @@ babel-plugin-jest-hoist@^29.5.0:
     "@types/babel__core" "^7.1.14"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-module-resolver@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.0.tgz#2b7fc176bd55da25f516abf96015617b4f70fc73"
+  integrity sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==
+  dependencies:
+    find-babel-config "^2.0.0"
+    glob "^8.0.3"
+    pkg-up "^3.1.0"
+    reselect "^4.1.7"
+    resolve "^1.22.1"
+
 babel-plugin-polyfill-corejs2@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
@@ -2564,6 +2575,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -3933,6 +3951,14 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-2.0.0.tgz#a8216f825415a839d0f23f4d18338a1cc966f701"
+  integrity sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==
+  dependencies:
+    json5 "^2.1.1"
+    path-exists "^4.0.0"
+
 find-cache-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -4126,6 +4152,17 @@ glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -4439,6 +4476,13 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
+is-core-module@^2.11.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
+  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
+  dependencies:
+    has "^1.0.3"
+
 is-core-module@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@@ -5214,7 +5258,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json5@^2.2.2:
+json5@^2.1.1, json5@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5753,6 +5797,13 @@ minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatc
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -6209,6 +6260,13 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -6567,6 +6625,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+reselect@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
+  integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -6608,6 +6671,15 @@ resolve@^1.14.2, resolve@^1.20.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.1:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+  dependencies:
+    is-core-module "^2.11.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"

From 0f66fc765a489f64054d15d184f2c293cf6c7f62 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Thu, 13 Apr 2023 13:46:40 +0900
Subject: [PATCH 3/9] =?UTF-8?q?[C02]=20=EB=9D=BC=EC=9D=B8=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=EC=9D=98=20X=20=EC=B6=95=20=EC=98=B5=EC=85=98=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/LineChartBody/XAxis.tsx   | 100 ++++++++++++------
 .../comps/LineChart/LineChartBody/index.tsx   |  11 +-
 .../comps/LineChart/constants.ts              |   4 +-
 .../comps/LineChart/index.tsx                 |  25 +++--
 .../comps/LineChart/types.ts                  |  28 +++++
 .../C02LineChartWithOptionsScreen/index.tsx   |  23 +++-
 6 files changed, 144 insertions(+), 47 deletions(-)

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
index ffddabc..21c0bad 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
@@ -1,17 +1,47 @@
 import * as d3 from 'd3';
 import { G, Line, Text } from 'react-native-svg';
-import dateFormat from '../../../../../utils/dateFormat';
 
-const TICK_HEIGHT = 6;
+import dateFormat from 'utils/dateFormat';
 
-type XAxisProps = {
+import { TimeAxisOptions } from '../types';
+
+const DEFAULT_TICK_HEIGHT = 6;
+
+type XAxisProps = TimeAxisOptions & {
   scale: d3.ScaleTime<number, number, never>;
-  x?: number;
-  y?: number;
 };
-function XAxis({ scale, x = 0, y = 0 }: XAxisProps) {
+function XAxis({
+  scale,
+  x = 0,
+  y = 0,
+
+  enabled = true,
+
+  lineColor = 'black',
+  lineWidth = 1,
+
+  showTicks = true,
+  ticks: _ticks,
+
+  tickLength = DEFAULT_TICK_HEIGHT,
+  tickWidth = 1,
+  tickColor = 'black',
+
+  tickLabelSize,
+  tickLabelFont,
+  tickLabelColor = 'black',
+  tickLabelFormatter = dateFormat,
+}: XAxisProps) {
   const range = scale.range();
-  const ticks = scale.ticks();
+  const ticks = !_ticks
+    ? scale.ticks()
+    : typeof _ticks === 'function'
+    ? _ticks(scale)
+    : _ticks;
+
+  if (!enabled) {
+    return null;
+  }
   return (
     <G>
       <Line
@@ -19,31 +49,39 @@ function XAxis({ scale, x = 0, y = 0 }: XAxisProps) {
         x2={range[1] + x}
         y1={y}
         y2={y}
-        stroke="black"
-        strokeWidth={1}
+        stroke={lineColor}
+        strokeWidth={lineWidth}
       />
-      {ticks.map(tick => (
-        <Line
-          key={`${tick}`}
-          x1={scale(tick)}
-          x2={scale(tick)}
-          y1={y}
-          y2={y + TICK_HEIGHT}
-          stroke="black"
-        />
-      ))}
-      {ticks.map(tick => (
-        <Text
-          key={`${tick}`}
-          x={scale(tick)}
-          y={y + TICK_HEIGHT + 2}
-          fill="black"
-          textAnchor="middle"
-          alignmentBaseline="hanging"
-        >
-          {`${dateFormat(tick)}`}
-        </Text>
-      ))}
+
+      {showTicks && (
+        <>
+          {ticks.map(tick => (
+            <Line
+              key={`${tick}`}
+              x1={scale(tick)}
+              x2={scale(tick)}
+              y1={y}
+              y2={y + tickLength}
+              stroke={tickColor}
+              strokeWidth={tickWidth}
+            />
+          ))}
+          {ticks.map(tick => (
+            <Text
+              key={`${tick}`}
+              x={scale(tick)}
+              y={y + tickLength + 2}
+              fill={tickLabelColor}
+              fontSize={tickLabelSize}
+              fontFamily={tickLabelFont}
+              textAnchor="middle"
+              alignmentBaseline="hanging"
+            >
+              {`${tickLabelFormatter(tick)}`}
+            </Text>
+          ))}
+        </>
+      )}
     </G>
   );
 }
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
index 96df617..f383503 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -1,10 +1,12 @@
 import { Fragment } from 'react';
+
+import PaneBoundary from 'utils/PaneBoundary';
+
+import { TimeSeries, TimeAxisOptions } from '../types';
 import XAxis from './XAxis';
 import YAxis from './YAxis';
 import Grid from './Grid';
-import { TimeSeries } from '../types';
 import Lines from './Lines';
-import PaneBoundary from '../../../../../utils/PaneBoundary';
 
 type LineChartBodyProps = {
   series: TimeSeries[];
@@ -12,6 +14,8 @@ type LineChartBodyProps = {
   yScale: d3.ScaleLinear<number, number, never>;
   lineFunc: d3.Line<TimeSeries['data'][0]>;
   paneBoundary: PaneBoundary;
+
+  xAxisOptions?: TimeAxisOptions;
 };
 function LineChartBody({
   series,
@@ -19,10 +23,11 @@ function LineChartBody({
   yScale,
   lineFunc,
   paneBoundary,
+  xAxisOptions,
 }: LineChartBodyProps) {
   return (
     <Fragment>
-      <XAxis scale={xScale} y={paneBoundary.y1} />
+      <XAxis scale={xScale} y={paneBoundary.y1} {...xAxisOptions} />
       <YAxis scale={yScale} x={paneBoundary.x1} y={0} />
       <Grid yScale={yScale} x1={paneBoundary.x1} x2={paneBoundary.x2} />
       <Lines series={series} lineFunc={lineFunc} />
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
index 76564cc..d6387e6 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
@@ -1,2 +1,2 @@
-export const X_AXIS_HEIGHT = 25;
-export const Y_AXIS_WIDTH = 40;
+export const DEFAULT_X_AXIS_HEIGHT = 35;
+export const DEFAULT_Y_AXIS_WIDTH = 50;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
index 694e60d..87939c3 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -1,19 +1,27 @@
 import * as d3 from 'd3';
 import { Svg, SvgProps } from 'react-native-svg';
 import { useImmer } from 'use-immer';
-import { TimeSeries } from './types';
+
+import PaneBoundary from 'utils/PaneBoundary';
+
+import { TimeSeries, TimeAxisOptions } from './types';
 import getTimeScale from './getTimeScale';
 import getLinearScale from './getLinearScale';
 import LineChartBody from './LineChartBody';
-import { X_AXIS_HEIGHT, Y_AXIS_WIDTH } from './constants';
-import PaneBoundary from '../../../../utils/PaneBoundary';
+import { DEFAULT_X_AXIS_HEIGHT, DEFAULT_Y_AXIS_WIDTH } from './constants';
 
 type LineChartProps = {
   series: TimeSeries[];
   width?: string | number;
   height?: string | number;
+  xAxis?: TimeAxisOptions;
 };
-function LineChart({ series, width = '100%', height = 200 }: LineChartProps) {
+function LineChart({
+  series,
+  width = '100%',
+  height = 200,
+  xAxis: xAxisOptions,
+}: LineChartProps) {
   const [state, setState] = useImmer({
     width: 0,
     height: 0,
@@ -27,14 +35,14 @@ function LineChart({ series, width = '100%', height = 200 }: LineChartProps) {
       dr.height = Math.round(layout.height);
 
       const marginTop = 10;
-      const marginLeft = 10;
+      const marginLeft = DEFAULT_Y_AXIS_WIDTH;
       const marginRight = 10;
-      const marginBottom = 10;
+      const marginBottom = DEFAULT_X_AXIS_HEIGHT;
 
       dr.paneBoundary = new PaneBoundary({
-        x1: marginLeft + Y_AXIS_WIDTH,
+        x1: marginLeft,
         x2: dr.width - marginRight,
-        y1: dr.height - marginBottom - X_AXIS_HEIGHT,
+        y1: dr.height - marginBottom,
         y2: marginTop,
       });
     });
@@ -62,6 +70,7 @@ function LineChart({ series, width = '100%', height = 200 }: LineChartProps) {
           yScale={yScale}
           lineFunc={lineFunc}
           paneBoundary={state.paneBoundary}
+          xAxisOptions={xAxisOptions}
         />
       )}
     </Svg>
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
index 5653f1a..19d1ea7 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -1,4 +1,32 @@
+import { ScaleTime } from 'd3';
+
 export type TimeSeriesDatum = { date: Date; value: number };
 export type TimeSeries = {
   data: TimeSeriesDatum[];
 };
+
+export type AxisOptions<Scale, Value> = {
+  enabled?: boolean;
+
+  x?: number;
+  y?: number;
+
+  lineColor?: string;
+  lineWidth?: number;
+
+  showTicks?: boolean;
+  ticks?: Date[] | ((scale: Scale) => Date[]);
+
+  tickLength?: number;
+  tickWidth?: number;
+  tickColor?: string;
+
+  tickLabelSize?: number;
+  tickLabelFont?: string;
+  tickLabelColor?: string;
+  tickLabelFormatter?: (value: Value) => string;
+};
+export type TimeAxisOptions = AxisOptions<
+  ScaleTime<number, number, never>,
+  Date
+>;
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
index e4db3fd..31401b0 100644
--- a/src/screens/C02LineChartWithOptionsScreen/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -1,6 +1,8 @@
 import { StyleSheet, View } from 'react-native';
-import ScreenContainer from '../../components/ScreenContainer';
-import Text from '../../components/Text';
+
+import ScreenContainer from 'components/ScreenContainer';
+import Text from 'components/Text';
+
 import LineChart from './comps/LineChart';
 import dummy from './dummy';
 
@@ -12,7 +14,22 @@ function C02LineChartWithOptionsScreen() {
         <Text style={styles.subtitle}>- 라인 차트 옵션 기능 구현</Text>
       </View>
 
-      <LineChart series={[{ data: dummy }]} width="100%" height={250} />
+      <LineChart
+        series={[{ data: dummy }]}
+        width="100%"
+        height={250}
+        xAxis={{
+          enabled: true,
+          lineColor: 'red',
+          lineWidth: 2,
+          tickLength: 15,
+          tickWidth: 3,
+          tickColor: 'green',
+          tickLabelSize: 20,
+          tickLabelFormatter: date =>
+            `${date.getMonth() + 1}.${date.getDate()}`,
+        }}
+      />
     </ScreenContainer>
   );
 }

From 64b44bf70f010ebcd690209441cf674f0c7df5a7 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Thu, 13 Apr 2023 14:10:34 +0900
Subject: [PATCH 4/9] =?UTF-8?q?[C02]=20=EB=9D=BC=EC=9D=B8=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=EC=9D=98=20Y=20=EC=B6=95=20=EC=98=B5=EC=85=98=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/LineChartBody/XAxis.tsx   |  8 +-
 .../comps/LineChart/LineChartBody/YAxis.tsx   | 96 +++++++++++++------
 .../comps/LineChart/LineChartBody/index.tsx   |  6 +-
 .../comps/LineChart/index.tsx                 |  5 +-
 .../comps/LineChart/types.ts                  | 10 +-
 .../C02LineChartWithOptionsScreen/index.tsx   | 12 +++
 6 files changed, 98 insertions(+), 39 deletions(-)

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
index 21c0bad..ebd293a 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
@@ -5,7 +5,7 @@ import dateFormat from 'utils/dateFormat';
 
 import { TimeAxisOptions } from '../types';
 
-const DEFAULT_TICK_HEIGHT = 6;
+const DEFAULT_TICK_LENGTH = 6;
 
 type XAxisProps = TimeAxisOptions & {
   scale: d3.ScaleTime<number, number, never>;
@@ -23,12 +23,13 @@ function XAxis({
   showTicks = true,
   ticks: _ticks,
 
-  tickLength = DEFAULT_TICK_HEIGHT,
+  tickLength = DEFAULT_TICK_LENGTH,
   tickWidth = 1,
   tickColor = 'black',
 
   tickLabelSize,
   tickLabelFont,
+  tickLabelWeight,
   tickLabelColor = 'black',
   tickLabelFormatter = dateFormat,
 }: XAxisProps) {
@@ -74,10 +75,11 @@ function XAxis({
               fill={tickLabelColor}
               fontSize={tickLabelSize}
               fontFamily={tickLabelFont}
+              fontWeight={tickLabelWeight}
               textAnchor="middle"
               alignmentBaseline="hanging"
             >
-              {`${tickLabelFormatter(tick)}`}
+              {tickLabelFormatter(tick)}
             </Text>
           ))}
         </>
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
index 398c279..d59be4d 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
@@ -1,16 +1,43 @@
 import { G, Line, Text } from 'react-native-svg';
+import { LinearAxisOptions } from '../types';
 
-const TICK_WIDTH = 6;
+const DEFAULT_TICK_LENGTH = 6;
 
-type YAxisProps = {
+type YAxisProps = LinearAxisOptions & {
   scale: d3.ScaleLinear<number, number, never>;
-  x: number;
-  y: number;
 };
-function YAxis({ scale, x, y }: YAxisProps) {
+function YAxis({
+  scale,
+  x = 0,
+  y = 0,
+
+  enabled = true,
+
+  lineColor = 'black',
+  lineWidth = 1,
+
+  showTicks = true,
+  ticks: _ticks,
+  tickLength = DEFAULT_TICK_LENGTH,
+  tickWidth = 1,
+  tickColor = 'black',
+
+  tickLabelSize,
+  tickLabelFont,
+  tickLabelWeight,
+  tickLabelColor = 'black',
+  tickLabelFormatter = val => `${val}`,
+}: YAxisProps) {
   const range = scale.range();
-  const ticks = scale.ticks();
+  const ticks = !_ticks
+    ? scale.ticks()
+    : typeof _ticks === 'function'
+    ? _ticks(scale)
+    : _ticks;
 
+  if (!enabled) {
+    return null;
+  }
   return (
     <G>
       <Line
@@ -18,32 +45,39 @@ function YAxis({ scale, x, y }: YAxisProps) {
         x2={x}
         y1={range[0] + y}
         y2={range[1] + y}
-        stroke="black"
-        strokeWidth={1}
+        stroke={lineColor}
+        strokeWidth={lineWidth}
       />
-      {ticks.map(tick => (
-        <Line
-          key={`${tick}`}
-          x1={x - TICK_WIDTH}
-          x2={x}
-          y1={scale(tick)}
-          y2={scale(tick)}
-          stroke="black"
-          strokeWidth={1}
-        />
-      ))}
-      {ticks.map(tick => (
-        <Text
-          key={`${tick}`}
-          x={x - TICK_WIDTH - 2}
-          y={scale(tick)}
-          fill="black"
-          textAnchor="end"
-          alignmentBaseline="middle"
-        >
-          {`${tick}`}
-        </Text>
-      ))}
+      {showTicks && (
+        <>
+          {ticks.map(tick => (
+            <Line
+              key={`${tick}`}
+              x1={x - tickLength}
+              x2={x}
+              y1={scale(tick)}
+              y2={scale(tick)}
+              stroke={tickColor}
+              strokeWidth={tickWidth}
+            />
+          ))}
+          {ticks.map(tick => (
+            <Text
+              key={`${tick}`}
+              x={x - tickLength - 2}
+              y={scale(tick)}
+              fill={tickLabelColor}
+              fontSize={tickLabelSize}
+              fontFamily={tickLabelFont}
+              fontWeight={tickLabelWeight}
+              textAnchor="end"
+              alignmentBaseline="middle"
+            >
+              {tickLabelFormatter(tick)}
+            </Text>
+          ))}
+        </>
+      )}
     </G>
   );
 }
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
index f383503..a395969 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 
 import PaneBoundary from 'utils/PaneBoundary';
 
-import { TimeSeries, TimeAxisOptions } from '../types';
+import { TimeSeries, TimeAxisOptions, LinearAxisOptions } from '../types';
 import XAxis from './XAxis';
 import YAxis from './YAxis';
 import Grid from './Grid';
@@ -16,6 +16,7 @@ type LineChartBodyProps = {
   paneBoundary: PaneBoundary;
 
   xAxisOptions?: TimeAxisOptions;
+  yAxisOptions?: LinearAxisOptions;
 };
 function LineChartBody({
   series,
@@ -24,11 +25,12 @@ function LineChartBody({
   lineFunc,
   paneBoundary,
   xAxisOptions,
+  yAxisOptions,
 }: LineChartBodyProps) {
   return (
     <Fragment>
       <XAxis scale={xScale} y={paneBoundary.y1} {...xAxisOptions} />
-      <YAxis scale={yScale} x={paneBoundary.x1} y={0} />
+      <YAxis scale={yScale} x={paneBoundary.x1} {...yAxisOptions} />
       <Grid yScale={yScale} x1={paneBoundary.x1} x2={paneBoundary.x2} />
       <Lines series={series} lineFunc={lineFunc} />
     </Fragment>
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
index 87939c3..a62d4f3 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -4,7 +4,7 @@ import { useImmer } from 'use-immer';
 
 import PaneBoundary from 'utils/PaneBoundary';
 
-import { TimeSeries, TimeAxisOptions } from './types';
+import { TimeSeries, TimeAxisOptions, LinearAxisOptions } from './types';
 import getTimeScale from './getTimeScale';
 import getLinearScale from './getLinearScale';
 import LineChartBody from './LineChartBody';
@@ -15,12 +15,14 @@ type LineChartProps = {
   width?: string | number;
   height?: string | number;
   xAxis?: TimeAxisOptions;
+  yAxis?: LinearAxisOptions;
 };
 function LineChart({
   series,
   width = '100%',
   height = 200,
   xAxis: xAxisOptions,
+  yAxis: yAxisOptions,
 }: LineChartProps) {
   const [state, setState] = useImmer({
     width: 0,
@@ -71,6 +73,7 @@ function LineChart({
           lineFunc={lineFunc}
           paneBoundary={state.paneBoundary}
           xAxisOptions={xAxisOptions}
+          yAxisOptions={yAxisOptions}
         />
       )}
     </Svg>
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
index 19d1ea7..be0cae3 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -1,4 +1,5 @@
-import { ScaleTime } from 'd3';
+import { ScaleLinear, ScaleTime } from 'd3';
+import { FontWeight } from 'react-native-svg';
 
 export type TimeSeriesDatum = { date: Date; value: number };
 export type TimeSeries = {
@@ -15,7 +16,7 @@ export type AxisOptions<Scale, Value> = {
   lineWidth?: number;
 
   showTicks?: boolean;
-  ticks?: Date[] | ((scale: Scale) => Date[]);
+  ticks?: Value[] | ((scale: Scale) => Value[]);
 
   tickLength?: number;
   tickWidth?: number;
@@ -23,6 +24,7 @@ export type AxisOptions<Scale, Value> = {
 
   tickLabelSize?: number;
   tickLabelFont?: string;
+  tickLabelWeight?: FontWeight;
   tickLabelColor?: string;
   tickLabelFormatter?: (value: Value) => string;
 };
@@ -30,3 +32,7 @@ export type TimeAxisOptions = AxisOptions<
   ScaleTime<number, number, never>,
   Date
 >;
+export type LinearAxisOptions = AxisOptions<
+  ScaleLinear<number, number, never>,
+  number
+>;
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
index 31401b0..ce22db7 100644
--- a/src/screens/C02LineChartWithOptionsScreen/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -26,9 +26,21 @@ function C02LineChartWithOptionsScreen() {
           tickWidth: 3,
           tickColor: 'green',
           tickLabelSize: 20,
+          tickLabelWeight: 100,
           tickLabelFormatter: date =>
             `${date.getMonth() + 1}.${date.getDate()}`,
         }}
+        yAxis={{
+          enabled: true,
+          lineColor: 'brown',
+          lineWidth: 3,
+          tickLength: 2,
+          tickWidth: 3,
+          tickColor: 'yellow',
+          tickLabelSize: 8,
+          tickLabelWeight: 700,
+          tickLabelFormatter: val => val.toLocaleString(),
+        }}
       />
     </ScreenContainer>
   );

From bc3eac784d5439228b3e8b56500a253c54087889 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Fri, 14 Apr 2023 15:06:55 +0900
Subject: [PATCH 5/9] =?UTF-8?q?[C02]=20=EB=9D=BC=EC=9D=B8=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=EC=9D=98=20=EA=B7=B8=EB=A6=AC=EB=93=9C=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B4=80=EB=A0=A8=20=EC=98=B5=EC=85=98=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/LineChartBody/Grid.tsx    | 27 ---------------
 .../comps/LineChart/LineChartBody/XAxis.tsx   | 20 +++++++++++
 .../comps/LineChart/LineChartBody/YAxis.tsx   | 23 +++++++++++++
 .../comps/LineChart/LineChartBody/index.tsx   | 16 ++++++---
 .../comps/LineChart/types.ts                  |  5 +++
 .../C02LineChartWithOptionsScreen/dummy.ts    | 18 ----------
 .../dummySeries.ts                            | 34 +++++++++++++++++++
 .../C02LineChartWithOptionsScreen/index.tsx   | 10 ++++--
 8 files changed, 102 insertions(+), 51 deletions(-)
 delete mode 100644 src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx
 delete mode 100644 src/screens/C02LineChartWithOptionsScreen/dummy.ts
 create mode 100644 src/screens/C02LineChartWithOptionsScreen/dummySeries.ts

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx
deleted file mode 100644
index 57db7a0..0000000
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Grid.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { G, Line } from 'react-native-svg';
-
-type GridProps = {
-  yScale: d3.ScaleLinear<number, number, never>;
-  x1: number;
-  x2: number;
-};
-function Grid({ yScale, x1, x2 }: GridProps) {
-  const ticks = yScale.ticks();
-  return (
-    <G>
-      {ticks.map(tick => (
-        <Line
-          key={`${tick}`}
-          x1={x1}
-          x2={x2}
-          y1={yScale(tick)}
-          y2={yScale(tick)}
-          stroke="lightgray"
-          strokeWidth={1}
-        />
-      ))}
-    </G>
-  );
-}
-
-export default Grid;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
index ebd293a..3fe6fc0 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import { G, Line, Text } from 'react-native-svg';
 
 import dateFormat from 'utils/dateFormat';
+import PaneBoundary from 'utils/PaneBoundary';
 
 import { TimeAxisOptions } from '../types';
 
@@ -9,9 +10,11 @@ const DEFAULT_TICK_LENGTH = 6;
 
 type XAxisProps = TimeAxisOptions & {
   scale: d3.ScaleTime<number, number, never>;
+  paneBoundary?: PaneBoundary;
 };
 function XAxis({
   scale,
+  paneBoundary,
   x = 0,
   y = 0,
 
@@ -32,6 +35,10 @@ function XAxis({
   tickLabelWeight,
   tickLabelColor = 'black',
   tickLabelFormatter = dateFormat,
+
+  showGridLines = false,
+  gridLineWidth = 1,
+  gridLineColor = 'lightgray',
 }: XAxisProps) {
   const range = scale.range();
   const ticks = !_ticks
@@ -84,6 +91,19 @@ function XAxis({
           ))}
         </>
       )}
+
+      {showGridLines &&
+        ticks.map(tick => (
+          <Line
+            key={`${tick}`}
+            x1={scale(tick)}
+            x2={scale(tick)}
+            y1={paneBoundary?.y1}
+            y2={paneBoundary?.y2}
+            stroke={gridLineColor}
+            strokeWidth={gridLineWidth}
+          />
+        ))}
     </G>
   );
 }
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
index d59be4d..0751cb4 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
@@ -1,13 +1,19 @@
+import * as d3 from 'd3';
 import { G, Line, Text } from 'react-native-svg';
+
+import PaneBoundary from 'utils/PaneBoundary';
+
 import { LinearAxisOptions } from '../types';
 
 const DEFAULT_TICK_LENGTH = 6;
 
 type YAxisProps = LinearAxisOptions & {
   scale: d3.ScaleLinear<number, number, never>;
+  paneBoundary?: PaneBoundary;
 };
 function YAxis({
   scale,
+  paneBoundary,
   x = 0,
   y = 0,
 
@@ -27,6 +33,10 @@ function YAxis({
   tickLabelWeight,
   tickLabelColor = 'black',
   tickLabelFormatter = val => `${val}`,
+
+  showGridLines = true,
+  gridLineWidth = 1,
+  gridLineColor = 'lightgray',
 }: YAxisProps) {
   const range = scale.range();
   const ticks = !_ticks
@@ -78,6 +88,19 @@ function YAxis({
           ))}
         </>
       )}
+
+      {showGridLines &&
+        ticks.map(tick => (
+          <Line
+            key={`${tick}`}
+            x1={paneBoundary?.x1}
+            x2={paneBoundary?.x2}
+            y1={scale(tick)}
+            y2={scale(tick)}
+            stroke={gridLineColor}
+            strokeWidth={gridLineWidth}
+          />
+        ))}
     </G>
   );
 }
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
index a395969..04a5a09 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -5,7 +5,6 @@ import PaneBoundary from 'utils/PaneBoundary';
 import { TimeSeries, TimeAxisOptions, LinearAxisOptions } from '../types';
 import XAxis from './XAxis';
 import YAxis from './YAxis';
-import Grid from './Grid';
 import Lines from './Lines';
 
 type LineChartBodyProps = {
@@ -29,9 +28,18 @@ function LineChartBody({
 }: LineChartBodyProps) {
   return (
     <Fragment>
-      <XAxis scale={xScale} y={paneBoundary.y1} {...xAxisOptions} />
-      <YAxis scale={yScale} x={paneBoundary.x1} {...yAxisOptions} />
-      <Grid yScale={yScale} x1={paneBoundary.x1} x2={paneBoundary.x2} />
+      <XAxis
+        scale={xScale}
+        y={paneBoundary.y1}
+        {...xAxisOptions}
+        paneBoundary={paneBoundary}
+      />
+      <YAxis
+        scale={yScale}
+        x={paneBoundary.x1}
+        {...yAxisOptions}
+        paneBoundary={paneBoundary}
+      />
       <Lines series={series} lineFunc={lineFunc} />
     </Fragment>
   );
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
index be0cae3..17c2411 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -1,5 +1,6 @@
 import { ScaleLinear, ScaleTime } from 'd3';
 import { FontWeight } from 'react-native-svg';
+import PaneBoundary from 'utils/PaneBoundary';
 
 export type TimeSeriesDatum = { date: Date; value: number };
 export type TimeSeries = {
@@ -27,6 +28,10 @@ export type AxisOptions<Scale, Value> = {
   tickLabelWeight?: FontWeight;
   tickLabelColor?: string;
   tickLabelFormatter?: (value: Value) => string;
+
+  showGridLines?: boolean;
+  gridLineWidth?: number;
+  gridLineColor?: string;
 };
 export type TimeAxisOptions = AxisOptions<
   ScaleTime<number, number, never>,
diff --git a/src/screens/C02LineChartWithOptionsScreen/dummy.ts b/src/screens/C02LineChartWithOptionsScreen/dummy.ts
deleted file mode 100644
index 4aee2b9..0000000
--- a/src/screens/C02LineChartWithOptionsScreen/dummy.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-const dummyValues = [
-  990810, 921890, 1080000, 857030, 865140, 780000, 978650, 1136757, 1258378,
-  1002973, 1286757, 1477297, 1671892, 1469189, 1440811, 1400270, 1538108,
-  1371892, 1363784, 1542162, 1497568, 1570541, 1631351, 1542162, 1667838,
-  1757027, 1813784, 1854324, 1931352, 1732703, 1744865, 1680000, 1643514,
-  1558378, 1400270, 1602973, 1611081, 1546216, 1615135, 1651622, 1700270,
-  1838108, 1915136, 1980000, 1793514, 1740811, 1748919, 1882703, 1821892,
-  1728649, 1761081, 1631351, 1594865, 1448919, 1388108, 1448919,
-];
-const dummyDate = new Date('2022-01-01');
-
-const dummy = dummyValues.map((value, i) => {
-  const date = new Date(dummyDate);
-  date.setDate(date.getDate() + i);
-  return { date, value: Math.floor(value / 1000) };
-});
-
-export default dummy;
diff --git a/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts b/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
new file mode 100644
index 0000000..59420bd
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
@@ -0,0 +1,34 @@
+const dummyValues = [
+  990810, 921890, 1080000, 857030, 865140, 780000, 978650, 1136757, 1258378,
+  1002973, 1286757, 1477297, 1671892, 1469189, 1440811, 1400270, 1538108,
+  1371892, 1363784, 1542162, 1497568, 1570541, 1631351, 1542162, 1667838,
+  1757027, 1813784, 1854324, 1931352, 1732703, 1744865, 1680000, 1643514,
+  1558378, 1400270, 1602973, 1611081, 1546216, 1615135, 1651622, 1700270,
+  1838108, 1915136, 1980000, 1793514, 1740811, 1748919, 1882703, 1821892,
+  1728649, 1761081, 1631351, 1594865, 1448919, 1388108, 1448919,
+];
+const dummyValues2 = [
+  1631351, 1546216, 1440811, 1732703, 1757027, 1980000, 1915136, 1748919,
+  1286757, 1728649, 1667838, 1793514, 1002973, 1882703, 1136757, 1761081,
+  1615135, 1671892, 1388108, 1631351, 780000, 1542162, 1570541, 1448919,
+  1813784, 1538108, 990810, 978650, 921890, 1680000, 1821892, 1080000, 1558378,
+  1448919, 1363784, 857030, 1838108, 1651622, 1602973, 1611081, 1400270,
+  1700270, 1477297, 1594865, 1744865, 1931352, 1258378, 1854324, 1643514,
+  1497568, 1400270, 1469189, 865140, 1371892, 1542162, 1740811,
+];
+
+const makeDummySeriesData = (values: number[]) => {
+  const dummyDate = new Date('2022-01-01');
+  return values.map((value, i) => {
+    const date = new Date(dummyDate);
+    date.setDate(date.getDate() + i);
+    return { date, value: Math.floor(value / 1000) };
+  });
+};
+
+const dummySeries = [
+  { data: makeDummySeriesData(dummyValues) },
+  { data: makeDummySeriesData(dummyValues2) },
+];
+
+export default dummySeries;
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
index ce22db7..95de8ca 100644
--- a/src/screens/C02LineChartWithOptionsScreen/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -4,7 +4,7 @@ import ScreenContainer from 'components/ScreenContainer';
 import Text from 'components/Text';
 
 import LineChart from './comps/LineChart';
-import dummy from './dummy';
+import dummySeries from './dummySeries';
 
 function C02LineChartWithOptionsScreen() {
   return (
@@ -15,7 +15,7 @@ function C02LineChartWithOptionsScreen() {
       </View>
 
       <LineChart
-        series={[{ data: dummy }]}
+        series={dummySeries}
         width="100%"
         height={250}
         xAxis={{
@@ -29,6 +29,10 @@ function C02LineChartWithOptionsScreen() {
           tickLabelWeight: 100,
           tickLabelFormatter: date =>
             `${date.getMonth() + 1}.${date.getDate()}`,
+
+          showGridLines: true,
+          gridLineWidth: 2,
+          gridLineColor: 'rgba(0, 0, 0, 0.5)',
         }}
         yAxis={{
           enabled: true,
@@ -40,6 +44,8 @@ function C02LineChartWithOptionsScreen() {
           tickLabelSize: 8,
           tickLabelWeight: 700,
           tickLabelFormatter: val => val.toLocaleString(),
+
+          showGridLines: false,
         }}
       />
     </ScreenContainer>

From 317cc1e8e1fc0e4bbc45e169f03b4ace361c8238 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Fri, 14 Apr 2023 16:15:26 +0900
Subject: [PATCH 6/9] =?UTF-8?q?[C02]=20=EB=9D=BC=EC=9D=B8=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=EC=9D=98=20=EB=9D=BC=EC=9D=B8=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EC=98=B5=EC=85=98=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/LineChartBody/Lines.tsx   |  26 +++-
 .../comps/LineChart/LineChartBody/index.tsx   |  11 +-
 .../comps/LineChart/index.tsx                 |  18 ++-
 .../comps/LineChart/types.ts                  |   8 +-
 .../dummySeries.ts                            |  70 ++++++----
 .../C02LineChartWithOptionsScreen/index.tsx   | 126 +++++++++++++-----
 6 files changed, 185 insertions(+), 74 deletions(-)

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
index 72dc651..a6ea5fd 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
@@ -1,21 +1,37 @@
 import { G, Path } from 'react-native-svg';
-import { TimeSeries } from '../types';
+import { LinesOptions, TimeSeries } from '../types';
 
-type LinesProps = {
+type LinesProps = LinesOptions & {
   series: TimeSeries[];
   lineFunc: d3.Line<TimeSeries['data'][0]>;
 };
-function Lines({ series, lineFunc }: LinesProps) {
+function Lines({
+  series,
+  lineFunc,
+  colors = [
+    'skyblue',
+    'blue',
+    'green',
+    'brown',
+    'gray',
+    'orange',
+    'purple',
+    'red',
+    'pink',
+    'black',
+  ],
+  lineWidth = 1,
+}: LinesProps) {
   return (
     <G>
       {series.map((sr, i) => (
         <Path
           key={i}
           d={lineFunc(sr.data) ?? undefined}
-          stroke="blue"
+          stroke={sr.color ?? colors[i % colors.length]}
           strokeLinecap="round"
           fill="transparent"
-          strokeWidth={1}
+          strokeWidth={sr.lineWidth ?? lineWidth}
         />
       ))}
     </G>
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
index 04a5a09..b8de1ba 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -2,7 +2,12 @@ import { Fragment } from 'react';
 
 import PaneBoundary from 'utils/PaneBoundary';
 
-import { TimeSeries, TimeAxisOptions, LinearAxisOptions } from '../types';
+import {
+  TimeSeries,
+  TimeAxisOptions,
+  LinearAxisOptions,
+  LinesOptions,
+} from '../types';
 import XAxis from './XAxis';
 import YAxis from './YAxis';
 import Lines from './Lines';
@@ -16,6 +21,7 @@ type LineChartBodyProps = {
 
   xAxisOptions?: TimeAxisOptions;
   yAxisOptions?: LinearAxisOptions;
+  linesOptions?: LinesOptions;
 };
 function LineChartBody({
   series,
@@ -25,6 +31,7 @@ function LineChartBody({
   paneBoundary,
   xAxisOptions,
   yAxisOptions,
+  linesOptions,
 }: LineChartBodyProps) {
   return (
     <Fragment>
@@ -40,7 +47,7 @@ function LineChartBody({
         {...yAxisOptions}
         paneBoundary={paneBoundary}
       />
-      <Lines series={series} lineFunc={lineFunc} />
+      <Lines series={series} lineFunc={lineFunc} {...linesOptions} />
     </Fragment>
   );
 }
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
index a62d4f3..bcf1b2d 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -4,7 +4,12 @@ import { useImmer } from 'use-immer';
 
 import PaneBoundary from 'utils/PaneBoundary';
 
-import { TimeSeries, TimeAxisOptions, LinearAxisOptions } from './types';
+import {
+  TimeSeries,
+  TimeAxisOptions,
+  LinearAxisOptions,
+  LinesOptions,
+} from './types';
 import getTimeScale from './getTimeScale';
 import getLinearScale from './getLinearScale';
 import LineChartBody from './LineChartBody';
@@ -14,15 +19,17 @@ type LineChartProps = {
   series: TimeSeries[];
   width?: string | number;
   height?: string | number;
-  xAxis?: TimeAxisOptions;
-  yAxis?: LinearAxisOptions;
+  xAxisOptions?: TimeAxisOptions;
+  yAxisOptions?: LinearAxisOptions;
+  linesOptions?: LinesOptions;
 };
 function LineChart({
   series,
   width = '100%',
   height = 200,
-  xAxis: xAxisOptions,
-  yAxis: yAxisOptions,
+  xAxisOptions,
+  yAxisOptions,
+  linesOptions,
 }: LineChartProps) {
   const [state, setState] = useImmer({
     width: 0,
@@ -74,6 +81,7 @@ function LineChart({
           paneBoundary={state.paneBoundary}
           xAxisOptions={xAxisOptions}
           yAxisOptions={yAxisOptions}
+          linesOptions={linesOptions}
         />
       )}
     </Svg>
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
index 17c2411..ee87354 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -1,9 +1,10 @@
 import { ScaleLinear, ScaleTime } from 'd3';
 import { FontWeight } from 'react-native-svg';
-import PaneBoundary from 'utils/PaneBoundary';
 
 export type TimeSeriesDatum = { date: Date; value: number };
 export type TimeSeries = {
+  color?: string;
+  lineWidth?: number;
   data: TimeSeriesDatum[];
 };
 
@@ -41,3 +42,8 @@ export type LinearAxisOptions = AxisOptions<
   ScaleLinear<number, number, never>,
   number
 >;
+
+export type LinesOptions = {
+  colors?: string[];
+  lineWidth?: number;
+};
diff --git a/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts b/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
index 59420bd..6074a1e 100644
--- a/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
@@ -1,34 +1,52 @@
+import { TimeSeries } from './comps/LineChart/types';
+
 const dummyValues = [
-  990810, 921890, 1080000, 857030, 865140, 780000, 978650, 1136757, 1258378,
-  1002973, 1286757, 1477297, 1671892, 1469189, 1440811, 1400270, 1538108,
-  1371892, 1363784, 1542162, 1497568, 1570541, 1631351, 1542162, 1667838,
-  1757027, 1813784, 1854324, 1931352, 1732703, 1744865, 1680000, 1643514,
-  1558378, 1400270, 1602973, 1611081, 1546216, 1615135, 1651622, 1700270,
-  1838108, 1915136, 1980000, 1793514, 1740811, 1748919, 1882703, 1821892,
-  1728649, 1761081, 1631351, 1594865, 1448919, 1388108, 1448919,
-];
-const dummyValues2 = [
-  1631351, 1546216, 1440811, 1732703, 1757027, 1980000, 1915136, 1748919,
-  1286757, 1728649, 1667838, 1793514, 1002973, 1882703, 1136757, 1761081,
-  1615135, 1671892, 1388108, 1631351, 780000, 1542162, 1570541, 1448919,
-  1813784, 1538108, 990810, 978650, 921890, 1680000, 1821892, 1080000, 1558378,
-  1448919, 1363784, 857030, 1838108, 1651622, 1602973, 1611081, 1400270,
-  1700270, 1477297, 1594865, 1744865, 1931352, 1258378, 1854324, 1643514,
-  1497568, 1400270, 1469189, 865140, 1371892, 1542162, 1740811,
+  [
+    990810, 921890, 1080000, 857030, 865140, 780000, 978650, 1136757, 1258378,
+    1002973, 1286757, 1477297, 1671892, 1469189, 1440811, 1400270, 1538108,
+    1371892, 1363784, 1542162, 1497568, 1570541, 1631351, 1542162, 1667838,
+    1757027, 1813784, 1854324, 1931352, 1732703, 1744865, 1680000, 1643514,
+    1558378, 1400270, 1602973, 1611081, 1546216, 1615135, 1651622, 1700270,
+    1838108, 1915136, 1980000, 1793514, 1740811, 1748919, 1882703, 1821892,
+    1728649, 1761081, 1631351, 1594865, 1448919, 1388108, 1448919,
+  ],
+  [
+    1631351, 1546216, 1440811, 1732703, 1757027, 1980000, 1915136, 1748919,
+    1286757, 1728649, 1667838, 1793514, 1002973, 1882703, 1136757, 1761081,
+    1615135, 1671892, 1388108, 1631351, 780000, 1542162, 1570541, 1448919,
+    1813784, 1538108, 990810, 978650, 921890, 1680000, 1821892, 1080000,
+    1558378, 1448919, 1363784, 857030, 1838108, 1651622, 1602973, 1611081,
+    1400270, 1700270, 1477297, 1594865, 1744865, 1931352, 1258378, 1854324,
+    1643514, 1497568, 1400270, 1469189, 865140, 1371892, 1542162, 1740811,
+  ],
+  [
+    780000, 857030, 865140, 921890, 978650, 990810, 1002973, 1080000, 1136757,
+    1258378, 1286757, 1363784, 1371892, 1388108, 1400270, 1400270, 1440811,
+    1448919, 1448919, 1469189, 1477297, 1497568, 1538108, 1542162, 1542162,
+    1546216, 1558378, 1570541, 1594865, 1602973, 1611081, 1615135, 1631351,
+    1631351, 1643514, 1651622, 1667838, 1671892, 1680000, 1700270, 1728649,
+    1732703, 1740811, 1744865, 1748919, 1757027, 1761081, 1793514, 1813784,
+    1821892, 1838108, 1854324, 1882703, 1915136, 1931352, 1980000,
+  ],
+  [
+    1980000, 1931352, 1915136, 1882703, 1854324, 1838108, 1821892, 1813784,
+    1793514, 1761081, 1757027, 1748919, 1744865, 1740811, 1732703, 1728649,
+    1700270, 1680000, 1671892, 1667838, 1651622, 1643514, 1631351, 1631351,
+    1615135, 1611081, 1602973, 1594865, 1570541, 1558378, 1546216, 1542162,
+    1542162, 1538108, 1497568, 1477297, 1469189, 1448919, 1448919, 1440811,
+    1400270, 1400270, 1388108, 1371892, 1363784, 1286757, 1258378, 1136757,
+    1080000, 1002973, 990810, 978650, 921890, 865140, 857030, 780000,
+  ],
 ];
 
-const makeDummySeriesData = (values: number[]) => {
-  const dummyDate = new Date('2022-01-01');
-  return values.map((value, i) => {
+const dummyDate = new Date('2022-01-01');
+
+const dummySeries: TimeSeries[] = dummyValues.map(values => ({
+  data: values.map((value, i) => {
     const date = new Date(dummyDate);
     date.setDate(date.getDate() + i);
     return { date, value: Math.floor(value / 1000) };
-  });
-};
-
-const dummySeries = [
-  { data: makeDummySeriesData(dummyValues) },
-  { data: makeDummySeriesData(dummyValues2) },
-];
+  }),
+}));
 
 export default dummySeries;
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
index 95de8ca..a153dd9 100644
--- a/src/screens/C02LineChartWithOptionsScreen/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import ScreenContainer from 'components/ScreenContainer';
 import Text from 'components/Text';
@@ -6,48 +6,100 @@ import Text from 'components/Text';
 import LineChart from './comps/LineChart';
 import dummySeries from './dummySeries';
 
+const dummySeriesWithCustom = [...dummySeries.map(sr => ({ ...sr }))];
+dummySeriesWithCustom[0].color = 'black';
+dummySeriesWithCustom[0].lineWidth = 4;
+
 function C02LineChartWithOptionsScreen() {
   return (
     <ScreenContainer>
       <View style={styles.header}>
         <Text style={styles.title}>C02LineChartWithOptionsScreen</Text>
-        <Text style={styles.subtitle}>- 라인 차트 옵션 기능 구현</Text>
+        <Text style={styles.desc}>- 라인 차트 옵션 기능 구현</Text>
       </View>
 
-      <LineChart
-        series={dummySeries}
-        width="100%"
-        height={250}
-        xAxis={{
-          enabled: true,
-          lineColor: 'red',
-          lineWidth: 2,
-          tickLength: 15,
-          tickWidth: 3,
-          tickColor: 'green',
-          tickLabelSize: 20,
-          tickLabelWeight: 100,
-          tickLabelFormatter: date =>
-            `${date.getMonth() + 1}.${date.getDate()}`,
+      <ScrollView>
+        <Text style={styles.subtitle}>옵션 적용 안 함</Text>
+        <LineChart series={dummySeries} width="100%" height={200} />
+
+        <Text style={styles.subtitle}>X 축 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          xAxisOptions={{
+            enabled: true,
+            lineColor: 'red',
+            lineWidth: 2,
+            tickLength: 15,
+            tickWidth: 3,
+            tickColor: 'green',
+            tickLabelSize: 20,
+            tickLabelWeight: 100,
+            tickLabelFormatter: date =>
+              `${date.getMonth() + 1}.${date.getDate()}`,
+          }}
+        />
+
+        <Text style={styles.subtitle}>Y 축 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          yAxisOptions={{
+            enabled: true,
+            lineColor: 'brown',
+            lineWidth: 3,
+            tickLength: 2,
+            tickWidth: 3,
+            tickColor: 'yellow',
+            tickLabelSize: 8,
+            tickLabelWeight: 700,
+            tickLabelFormatter: val => val.toLocaleString(),
+          }}
+        />
 
-          showGridLines: true,
-          gridLineWidth: 2,
-          gridLineColor: 'rgba(0, 0, 0, 0.5)',
-        }}
-        yAxis={{
-          enabled: true,
-          lineColor: 'brown',
-          lineWidth: 3,
-          tickLength: 2,
-          tickWidth: 3,
-          tickColor: 'yellow',
-          tickLabelSize: 8,
-          tickLabelWeight: 700,
-          tickLabelFormatter: val => val.toLocaleString(),
+        <Text style={styles.subtitle}>그리드라인 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          xAxisOptions={{
+            showGridLines: true,
+            gridLineWidth: 2,
+            gridLineColor: 'rgba(0, 0, 0, 0.2)',
+          }}
+          yAxisOptions={{
+            showGridLines: false,
+          }}
+        />
 
-          showGridLines: false,
-        }}
-      />
+        <Text style={styles.subtitle}>라인 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          xAxisOptions={{ showTicks: false, showGridLines: true }}
+          yAxisOptions={{ showTicks: false, showGridLines: true }}
+          linesOptions={{
+            colors: ['red', 'orange', 'green', 'blue'],
+            lineWidth: 2,
+          }}
+        />
+
+        <Text style={styles.subtitle}>series 에 직접 라인 옵션 적용</Text>
+        <LineChart
+          series={dummySeriesWithCustom}
+          width="100%"
+          height={200}
+          xAxisOptions={{ showTicks: false, showGridLines: true }}
+          yAxisOptions={{ showTicks: false, showGridLines: true }}
+          linesOptions={{
+            colors: ['red', 'orange', 'green', 'blue'],
+            lineWidth: 2,
+          }}
+        />
+      </ScrollView>
     </ScreenContainer>
   );
 }
@@ -59,6 +111,10 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 20,
   },
-  subtitle: {},
+  desc: {},
+  subtitle: {
+    marginTop: 16,
+    fontSize: 16,
+  },
 });
 export default C02LineChartWithOptionsScreen;

From 3cb30cf9664b83d2862cf5c1d20fa5075b5690e6 Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Fri, 14 Apr 2023 16:46:48 +0900
Subject: [PATCH 7/9] =?UTF-8?q?[C02]=20=EB=9D=BC=EC=9D=B8=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=EC=9D=98=20pane=20=EC=98=B5=EC=85=98=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/index.tsx                 | 43 +++++++++++++------
 .../comps/LineChart/types.ts                  |  8 ++++
 .../C02LineChartWithOptionsScreen/index.tsx   |  2 +
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
index bcf1b2d..e1061da 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -1,4 +1,5 @@
 import * as d3 from 'd3';
+import { useEffect } from 'react';
 import { Svg, SvgProps } from 'react-native-svg';
 import { useImmer } from 'use-immer';
 
@@ -9,6 +10,7 @@ import {
   TimeAxisOptions,
   LinearAxisOptions,
   LinesOptions,
+  PaneOptions,
 } from './types';
 import getTimeScale from './getTimeScale';
 import getLinearScale from './getLinearScale';
@@ -22,6 +24,7 @@ type LineChartProps = {
   xAxisOptions?: TimeAxisOptions;
   yAxisOptions?: LinearAxisOptions;
   linesOptions?: LinesOptions;
+  paneOptions?: PaneOptions;
 };
 function LineChart({
   series,
@@ -30,6 +33,7 @@ function LineChart({
   xAxisOptions,
   yAxisOptions,
   linesOptions,
+  paneOptions = {},
 }: LineChartProps) {
   const [state, setState] = useImmer({
     width: 0,
@@ -37,26 +41,39 @@ function LineChart({
     paneBoundary: new PaneBoundary({ x1: 0, x2: 0, y1: 0, y2: 0 }),
   });
 
-  const onLayout: SvgProps['onLayout'] = evt => {
-    const { layout } = evt.nativeEvent;
-    setState(dr => {
-      dr.width = Math.round(layout.width);
-      dr.height = Math.round(layout.height);
+  const { margin, marginTop, marginLeft, marginRight, marginBottom } =
+    paneOptions;
 
-      const marginTop = 10;
-      const marginLeft = DEFAULT_Y_AXIS_WIDTH;
-      const marginRight = 10;
-      const marginBottom = DEFAULT_X_AXIS_HEIGHT;
+  const updatePaneBoundary = (width?: number, height?: number) => {
+    setState(dr => {
+      if (width !== undefined) {
+        dr.width = Math.round(width);
+      }
+      if (height !== undefined) {
+        dr.height = Math.round(height);
+      }
 
       dr.paneBoundary = new PaneBoundary({
-        x1: marginLeft,
-        x2: dr.width - marginRight,
-        y1: dr.height - marginBottom,
-        y2: marginTop,
+        x1: marginLeft ?? margin ?? DEFAULT_Y_AXIS_WIDTH,
+        x2: dr.width - (marginRight ?? margin ?? 10),
+        y1: dr.height - (marginBottom ?? margin ?? DEFAULT_X_AXIS_HEIGHT),
+        y2: marginTop ?? margin ?? 10,
       });
     });
   };
 
+  useEffect(() => {
+    if (!state.width || !state.height) {
+      return;
+    }
+    updatePaneBoundary();
+  }, [margin, marginTop, marginLeft, marginRight, marginBottom]);
+
+  const onLayout: SvgProps['onLayout'] = evt => {
+    const { layout } = evt.nativeEvent;
+    updatePaneBoundary(layout.width, layout.height);
+  };
+
   const xScale = getTimeScale(series, state.paneBoundary.xs);
   const yScale = getLinearScale(series, state.paneBoundary.ys);
   const lineFunc =
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
index ee87354..2daf2e7 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -47,3 +47,11 @@ export type LinesOptions = {
   colors?: string[];
   lineWidth?: number;
 };
+
+export type PaneOptions = {
+  margin?: number;
+  marginTop?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginBottom?: number;
+};
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
index a153dd9..2be8914 100644
--- a/src/screens/C02LineChartWithOptionsScreen/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -81,6 +81,7 @@ function C02LineChartWithOptionsScreen() {
           height={200}
           xAxisOptions={{ showTicks: false, showGridLines: true }}
           yAxisOptions={{ showTicks: false, showGridLines: true }}
+          paneOptions={{ margin: 4 }}
           linesOptions={{
             colors: ['red', 'orange', 'green', 'blue'],
             lineWidth: 2,
@@ -94,6 +95,7 @@ function C02LineChartWithOptionsScreen() {
           height={200}
           xAxisOptions={{ showTicks: false, showGridLines: true }}
           yAxisOptions={{ showTicks: false, showGridLines: true }}
+          paneOptions={{ margin: 4 }}
           linesOptions={{
             colors: ['red', 'orange', 'green', 'blue'],
             lineWidth: 2,

From 16870ed17dd75e0101da851f4faba7852c0c394c Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Fri, 14 Apr 2023 18:08:36 +0900
Subject: [PATCH 8/9] =?UTF-8?q?[C02]=20=EB=9D=BC=EC=9D=B8=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=EC=9D=98=20X=20=EC=B6=95,=20Y=20=EC=B6=95=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/LineChartBody/Lines.tsx        |  2 +-
 .../comps/LineChart/LineChartBody/XAxis.tsx        |  8 ++++----
 .../comps/LineChart/LineChartBody/YAxis.tsx        |  8 ++++----
 .../comps/LineChart/LineChartBody/index.tsx        | 14 ++------------
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
index a6ea5fd..7899116 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
@@ -9,8 +9,8 @@ function Lines({
   series,
   lineFunc,
   colors = [
-    'skyblue',
     'blue',
+    'skyblue',
     'green',
     'brown',
     'gray',
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
index 3fe6fc0..f009090 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
@@ -10,13 +10,13 @@ const DEFAULT_TICK_LENGTH = 6;
 
 type XAxisProps = TimeAxisOptions & {
   scale: d3.ScaleTime<number, number, never>;
-  paneBoundary?: PaneBoundary;
+  paneBoundary: PaneBoundary;
 };
 function XAxis({
   scale,
   paneBoundary,
   x = 0,
-  y = 0,
+  y = paneBoundary.y1,
 
   enabled = true,
 
@@ -98,8 +98,8 @@ function XAxis({
             key={`${tick}`}
             x1={scale(tick)}
             x2={scale(tick)}
-            y1={paneBoundary?.y1}
-            y2={paneBoundary?.y2}
+            y1={paneBoundary.y1}
+            y2={paneBoundary.y2}
             stroke={gridLineColor}
             strokeWidth={gridLineWidth}
           />
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
index 0751cb4..832682e 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
@@ -9,12 +9,12 @@ const DEFAULT_TICK_LENGTH = 6;
 
 type YAxisProps = LinearAxisOptions & {
   scale: d3.ScaleLinear<number, number, never>;
-  paneBoundary?: PaneBoundary;
+  paneBoundary: PaneBoundary;
 };
 function YAxis({
   scale,
   paneBoundary,
-  x = 0,
+  x = paneBoundary.x1,
   y = 0,
 
   enabled = true,
@@ -93,8 +93,8 @@ function YAxis({
         ticks.map(tick => (
           <Line
             key={`${tick}`}
-            x1={paneBoundary?.x1}
-            x2={paneBoundary?.x2}
+            x1={paneBoundary.x1}
+            x2={paneBoundary.x2}
             y1={scale(tick)}
             y2={scale(tick)}
             stroke={gridLineColor}
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
index b8de1ba..b6f9925 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -35,18 +35,8 @@ function LineChartBody({
 }: LineChartBodyProps) {
   return (
     <Fragment>
-      <XAxis
-        scale={xScale}
-        y={paneBoundary.y1}
-        {...xAxisOptions}
-        paneBoundary={paneBoundary}
-      />
-      <YAxis
-        scale={yScale}
-        x={paneBoundary.x1}
-        {...yAxisOptions}
-        paneBoundary={paneBoundary}
-      />
+      <XAxis scale={xScale} paneBoundary={paneBoundary} {...xAxisOptions} />
+      <YAxis scale={yScale} paneBoundary={paneBoundary} {...yAxisOptions} />
       <Lines series={series} lineFunc={lineFunc} {...linesOptions} />
     </Fragment>
   );

From 41d09a416ad93606a9b8a16f33005bd21d40e38d Mon Sep 17 00:00:00 2001
From: ricale <kim.kangseong@gmail.com>
Date: Tue, 18 Apr 2023 16:33:57 +0900
Subject: [PATCH 9/9] =?UTF-8?q?[C02]=20=EC=BD=94=EB=93=9C=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comps/LineChart/LineChartBody/Lines.tsx   | 26 ++++++++++---------
 .../comps/LineChart/index.tsx                 |  2 +-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
index 7899116..51db84f 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
@@ -1,6 +1,19 @@
 import { G, Path } from 'react-native-svg';
 import { LinesOptions, TimeSeries } from '../types';
 
+const DEFAULT_COLORS = [
+  'blue',
+  'skyblue',
+  'green',
+  'brown',
+  'gray',
+  'orange',
+  'purple',
+  'red',
+  'pink',
+  'black',
+];
+
 type LinesProps = LinesOptions & {
   series: TimeSeries[];
   lineFunc: d3.Line<TimeSeries['data'][0]>;
@@ -8,18 +21,7 @@ type LinesProps = LinesOptions & {
 function Lines({
   series,
   lineFunc,
-  colors = [
-    'blue',
-    'skyblue',
-    'green',
-    'brown',
-    'gray',
-    'orange',
-    'purple',
-    'red',
-    'pink',
-    'black',
-  ],
+  colors = DEFAULT_COLORS,
   lineWidth = 1,
 }: LinesProps) {
   return (
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
index e1061da..d9870f0 100644
--- a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -42,7 +42,7 @@ function LineChart({
   });
 
   const { margin, marginTop, marginLeft, marginRight, marginBottom } =
-    paneOptions;
+    paneOptions || {};
 
   const updatePaneBoundary = (width?: number, height?: number) => {
     setState(dr => {