Axios 추가

.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://diversity-api.tech4impact.kr

package.json

@@ -21,6 +21,7 @@
     "@ant-design/plots": "^1.2.5",
     "@emotion/react": "^11.11.1",
     "antd": "^5.11.1",
+    "axios": "^1.6.2",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/organisms/Histogram.tsx

@@ -1,15 +1,15 @@
 import { Histogram, type HistogramConfig } from "@ant-design/plots";
 import { css } from "@emotion/react";
 
-interface HistogramData {
+export interface HistogramData {
   value: number;
 }
 
 interface Props {
   data: HistogramData[];
 }
 
-const AgeHistogram = ({ data }: Props) => {
+export const AgeHistogram = ({ data }: Props) => {
   const config: HistogramConfig = {
     data,
     binField: "value",
@@ -37,5 +37,3 @@ const AgeHistogram = ({ data }: Props) => {
     />
   );
 };
-
-export default AgeHistogram;

src/components/organisms/PieChart.tsx

@@ -11,7 +11,7 @@ export interface Props {
   colors: string[];
 }
 
-const PieChart = ({ data, colors }: Props) => {
+export const PieChart = ({ data, colors }: Props) => {
   const config: PieConfig = {
     appendPadding: 10,
     data,
@@ -42,5 +42,3 @@ const PieChart = ({ data, colors }: Props) => {
     />
   );
 };
-
-export default PieChart;

src/components/organisms/index.ts

@@ -1,8 +1,8 @@
 // organism 단계의 컴포넌트들을 한번에 export 하기 위한 index.ts 파일
 export { default as Header } from "./Header";
 export { default as Footer } from "./Footer";
-export { default as Histogram } from "./Histogram";
-export { default as PieChart } from "./PieChart";
+export * from "./Histogram";
+export * from "./PieChart";
 export { default as TestChart } from "./TestChart";
 export { default as MetroSelector } from "./MetroSelector";
 export { default as LocalSelector } from "./LocalSelector";

src/components/pages/LocalCouncilReport.tsx

@@ -4,7 +4,12 @@ import { css } from "@emotion/react";
 import { useParams } from "react-router-dom";
 
 import { Layout } from "@/components/templates";
-import { Histogram, PieChart } from "@/components/organisms";
+import {
+  AgeHistogram,
+  PieChart,
+  // type HistogramData,
+  // type PieChartData,
+} from "@/components/organisms";
 import {
   sampleAgeHistogramData,
   samplePartyPieData,
@@ -15,6 +20,7 @@ const { Title } = Typography;
 
 const LocalCouncilReport: React.FC = () => {
   const { metroId, localId } = useParams();
+
   return (
     <Layout>
       <Flex
@@ -28,7 +34,7 @@ const LocalCouncilReport: React.FC = () => {
           level={1}
         >{`MetroId(${metroId}) LocalId(${localId})의 지역의회 다양성 리포트`}</Title>
         <Title level={2}>연령 다양성</Title>
-        <Histogram data={sampleAgeHistogramData} />
+        <AgeHistogram data={sampleAgeHistogramData} />
         <Title level={2}>정당 다양성</Title>
         <PieChart
           data={samplePartyPieData.data}

src/components/templates/Layout.tsx

@@ -30,10 +30,17 @@ const NewwaysLayout = ({ children }: Props) => (
       <Header />
       <Row justify="center">
         <Col span={22}>
-          <Content style={{ padding: "0" }}>
+          <Content
+            style={{ padding: "0", display: "flex", justifyContent: "center" }}
+          >
             <div
               className="site-layout-content"
-              style={{ background: "#00E9A1" }}
+              style={{
+                background: "#00E9A1",
+                maxWidth: "800px",
+
+                // alignItems: "center",
+              }}
             >
               {children}
             </div>

src/utils/axios.ts

@@ -0,0 +1,10 @@
+import _axios from "axios";
+
+const axios = _axios.create({
+  baseURL:
+    (import.meta.env.VITE_API_BASE_URL as string) ||
+    "https://diversity-api.tech4impact.kr",
+  withCredentials: true,
+});
+
+export default axios;

src/utils/index.ts

@@ -1 +1,2 @@
 export * from "./sampleData";
+export { default as axios } from "./axios";