diff --git a/package.json b/package.json index 5aef830..21d9cfe 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,15 @@ "@ant-design/icons": "^5.2.6", "@ant-design/plots": "^1.2.5", "@emotion/react": "^11.11.1", + "@types/react-scroll": "^1.8.10", "antd": "^5.11.1", "axios": "^1.6.2", "immer": "^10.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.16.0", + "react-scroll": "^1.9.0", + "recoil": "^0.7.7", "zustand": "^4.4.3" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1b4390c..6a56d1d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,13 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@ant-design/charts': specifier: ^1.4.2 - version: 1.4.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + version: 1.4.2(@ant-design/icons@5.2.6)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13) '@ant-design/icons': specifier: ^5.2.6 version: 5.2.6(react-dom@18.2.0)(react@18.2.0) @@ -13,6 +17,9 @@ dependencies: '@emotion/react': specifier: ^11.11.1 version: 11.11.1(@types/react@18.2.25)(react@18.2.0) + '@types/react-scroll': + specifier: ^1.8.10 + version: 1.8.10 antd: specifier: ^5.11.1 version: 5.11.1(react-dom@18.2.0)(react@18.2.0) @@ -31,6 +38,12 @@ dependencies: react-router-dom: specifier: ^6.16.0 version: 6.16.0(react-dom@18.2.0)(react@18.2.0) + react-scroll: + specifier: ^1.9.0 + version: 1.9.0(react-dom@18.2.0)(react@18.2.0) + recoil: + specifier: ^0.7.7 + version: 0.7.7(react-dom@18.2.0)(react@18.2.0) zustand: specifier: ^4.4.3 version: 4.4.3(@types/react@18.2.25)(immer@10.0.3)(react@18.2.0) @@ -116,7 +129,7 @@ packages: '@jridgewell/trace-mapping': 0.3.19 dev: true - /@ant-design/charts@1.4.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + /@ant-design/charts@1.4.2(@ant-design/icons@5.2.6)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13): resolution: {integrity: sha512-BcVx6AAnwxSdzAVUZReSuvUVtnT5AkJivq3wmcYj17scll26HHficg35yimGskAj3Gu1upYjBQBz6Tk7GEMJsQ==} peerDependencies: '@ant-design/icons': ^4.6.0 @@ -125,17 +138,19 @@ packages: react: '>=16.8.4' react-dom: '>=16.8.4' dependencies: - '@ant-design/flowchart': 1.2.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/flowchart': 1.2.2(@ant-design/icons@5.2.6)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13) '@ant-design/graphs': 1.4.0(react-dom@18.2.0)(react@18.2.0) '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) '@ant-design/maps': 1.0.7(react-dom@18.2.0)(react@18.2.0) '@ant-design/plots': 1.2.5(react-dom@18.2.0)(react@18.2.0) antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + lodash: 4.17.21 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) transitivePeerDependencies: - bufferutil - classnames + - reflect-metadata - utf-8-validate dev: false @@ -168,7 +183,7 @@ packages: stylis: 4.2.0 dev: false - /@ant-design/flowchart@1.2.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + /@ant-design/flowchart@1.2.2(@ant-design/icons@5.2.6)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13): resolution: {integrity: sha512-bzHZ81qqHjWIrXcCMInDB6eMTzbswaVCOAdUTCQJ+B45aybkVsU9LMCKquyOwRM7U7PWNfPC9S/lAlx2i2BvBQ==} peerDependencies: '@ant-design/icons': ^4.6.0 @@ -182,14 +197,16 @@ packages: '@antv/x6': 1.35.0 '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0) - '@antv/xflow': 1.0.55(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@antv/xflow': 1.0.55(@ant-design/icons@5.2.6)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13) antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + lodash: 4.17.21 react: 18.2.0 react-color: 2.17.3(react@18.2.0) react-dom: 18.2.0(react@18.2.0) react-use: 17.3.1(react-dom@18.2.0)(react@18.2.0) transitivePeerDependencies: - classnames + - reflect-metadata dev: false /@ant-design/graphs@1.4.0(react-dom@18.2.0)(react@18.2.0): @@ -887,7 +904,7 @@ packages: utility-types: 3.10.0 dev: false - /@antv/xflow-core@1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + /@antv/xflow-core@1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-FhjTstp/ZdO6mj8ERARJ6M9PWgikXvOpWwMTLCjc+i8vS4O3t4XL/fIu16MqJNuNdqfETcjJluHd06c32MTB/w==} peerDependencies: '@ant-design/icons': ^4.6.0 @@ -907,6 +924,7 @@ packages: antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) classnames: 2.3.2 immer: 9.0.21 + lodash: 4.17.21 mana-common: 0.3.2 mana-syringe: 0.2.2 react: 18.2.0 @@ -915,7 +933,7 @@ packages: rxjs: 6.6.7 dev: false - /@antv/xflow-extension@1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + /@antv/xflow-extension@1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13): resolution: {integrity: sha512-iHRfO/ae4/9xvC5xVFmA9eIFg813DQa06hTgTdxLlt0Aojnfa5VnsGrIrPQoDDQovCXG8SavMDlnLZUpa491GQ==} peerDependencies: '@ant-design/icons': ^4.6.0 @@ -926,14 +944,16 @@ packages: classnames: ^2.2.6 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 + reflect-metadata: ^0.1.13 dependencies: '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) '@antv/x6': 1.35.0 '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0) - '@antv/xflow-core': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@antv/xflow-core': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0) '@antv/xflow-hook': 1.0.55 antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 mana-syringe: 0.2.2 moment: 2.29.4 rc-field-form: 1.40.0(react-dom@18.2.0)(react@18.2.0) @@ -951,7 +971,7 @@ packages: toposort: 2.0.2 dev: false - /@antv/xflow@1.0.55(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + /@antv/xflow@1.0.55(@ant-design/icons@5.2.6)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13): resolution: {integrity: sha512-1LRFZsDZDVuRwEYD0xFt7SGCbHducgXQ4GgPOzmaCMA5FMbQfZVpXhsOG4o/a9X+gKfYdpOELCLqpz7iykyArQ==} peerDependencies: '@ant-design/icons': ^4.6.0 @@ -965,14 +985,16 @@ packages: '@antv/x6': 1.35.0 '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0) - '@antv/xflow-core': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) - '@antv/xflow-extension': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@antv/xflow-core': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0) + '@antv/xflow-extension': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13) '@antv/xflow-hook': 1.0.55 antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + lodash: 4.17.21 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) transitivePeerDependencies: - classnames + - reflect-metadata dev: false /@babel/code-frame@7.22.13: @@ -2119,6 +2141,12 @@ packages: '@types/react': 18.2.25 dev: true + /@types/react-scroll@1.8.10: + resolution: {integrity: sha512-RD4Z7grbdNGOKwKnUBKar6zNxqaW3n8m9QSrfvljW+gmkj1GArb8AFBomVr6xMOgHPD3v1uV3BrIf01py57daQ==} + dependencies: + '@types/react': 18.2.25 + dev: false + /@types/react@18.2.25: resolution: {integrity: sha512-24xqse6+VByVLIr+xWaQ9muX1B4bXJKXBbjszbld/UEDslGLY53+ZucF44HCmLbMPejTzGG9XgR+3m2/Wqu1kw==} dependencies: @@ -3351,7 +3379,7 @@ packages: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.50.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0) eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0) fast-glob: 3.3.1 get-tsconfig: 4.7.2 @@ -3394,35 +3422,6 @@ packages: - supports-color dev: true - /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0): - resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} - engines: {node: '>=4'} - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: '*' - eslint-import-resolver-node: '*' - eslint-import-resolver-typescript: '*' - eslint-import-resolver-webpack: '*' - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - eslint: - optional: true - eslint-import-resolver-node: - optional: true - eslint-import-resolver-typescript: - optional: true - eslint-import-resolver-webpack: - optional: true - dependencies: - '@typescript-eslint/parser': 6.7.4(eslint@8.50.0)(typescript@5.2.2) - debug: 3.2.7 - eslint: 8.50.0 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.7.4)(eslint-plugin-import@2.28.1)(eslint@8.50.0) - transitivePeerDependencies: - - supports-color - dev: true - /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0): resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==} engines: {node: '>=4'} @@ -3945,6 +3944,10 @@ packages: engines: {node: '>=0.8.0'} dev: false + /hamt_plus@1.0.2: + resolution: {integrity: sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==} + dev: false + /has-ansi@2.0.0: resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==} engines: {node: '>=0.10.0'} @@ -4441,6 +4444,10 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash.throttle@4.1.1: + resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==} + dev: false + /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} dev: false @@ -5599,6 +5606,18 @@ packages: react: 18.2.0 dev: false + /react-scroll@1.9.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==} + peerDependencies: + react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + lodash.throttle: 4.1.1 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.2): resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: @@ -5649,6 +5668,23 @@ packages: react: 18.2.0 dev: false + /recoil@0.7.7(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==} + peerDependencies: + react: '>=16.13.1' + react-dom: '*' + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + dependencies: + hamt_plus: 1.0.2 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /reflect-metadata@0.1.13: resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==} dev: false @@ -6574,7 +6610,3 @@ packages: react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) dev: false - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/src/components/organisms/LocalSelector.tsx b/src/components/molecules/LocalSelector.tsx similarity index 100% rename from src/components/organisms/LocalSelector.tsx rename to src/components/molecules/LocalSelector.tsx diff --git a/src/components/organisms/MetroSelector.tsx b/src/components/molecules/MetroSelector.tsx similarity index 100% rename from src/components/organisms/MetroSelector.tsx rename to src/components/molecules/MetroSelector.tsx diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index e69de29..685be4c 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -0,0 +1,2 @@ +export { default as MetroSelector } from "./MetroSelector"; +export { default as LocalSelector } from "./LocalSelector"; diff --git a/src/components/organisms/LocalCouncilReport.tsx b/src/components/organisms/LocalCouncilReport.tsx new file mode 100644 index 0000000..2db6f16 --- /dev/null +++ b/src/components/organisms/LocalCouncilReport.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { Flex, Typography } from "antd"; +import { css } from "@emotion/react"; +import { useParams } from "react-router-dom"; +import { AgeHistogram } from "@/components/organisms/Histogram"; +import { PieChart } from "@/components/organisms/PieChart"; + +import { + sampleAgeHistogramData, + samplePartyPieData, + sampleSexPieData, +} from "@/utils"; + +const { Title } = Typography; + +const LocalCouncilReport: React.FC = () => { + const { metroId, localId } = useParams(); + + return ( + + {`MetroId(${metroId}) LocalId(${localId})의 지역의회 다양성 리포트`} + 연령 다양성 + + 정당 다양성 + + 성별 다양성 + + + ); +}; + +export default LocalCouncilReport; diff --git a/src/components/organisms/MapSelector.tsx b/src/components/organisms/MapSelector.tsx new file mode 100644 index 0000000..afc1df7 --- /dev/null +++ b/src/components/organisms/MapSelector.tsx @@ -0,0 +1,55 @@ +import { useState, useEffect } from "react"; +import { Flex } from "antd"; +import { css } from "@emotion/react"; +import { LocalSelector, MetroSelector } from "@/components/molecules"; +import { type MetroID } from "static/MapSVGData"; +import { useNavigate, useParams } from "react-router-dom"; + +interface Props { + idMap: Map>; +} + +const LocalCouncil = ({ idMap }: Props) => { + const [metroId, setMetroId] = useState(); + const { metroId: metroParam } = useParams(); + const navigate = useNavigate(); + useEffect(() => { + if (metroParam) { + idMap.forEach((value, key) => { + if (value) { + if (value.values().next().value[0] === metroParam) { + setMetroId(key as MetroID); + } + } + }); + } + }, [metroParam]); + return ( + + {metroId ? ( + { + const idData = idMap.get(metroId)?.get(id); + if (!idData) return; + navigate(`/localCouncilReport/${idData[0]}/${idData[1]}`); + }} + /> + ) : ( + { + setMetroId(id as MetroID); + }} + /> + )} + + ); +}; + +export default LocalCouncil; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index ad6bbcc..e876113 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -4,5 +4,5 @@ export { default as Footer } from "./Footer"; export * from "./Histogram"; export * from "./PieChart"; export { default as TestChart } from "./TestChart"; -export { default as MetroSelector } from "./MetroSelector"; -export { default as LocalSelector } from "./LocalSelector"; +export { default as LocalCouncilReport } from "./LocalCouncilReport"; +export { default as MapSelector } from "./MapSelector"; diff --git a/src/components/pages/LocalCouncil.tsx b/src/components/pages/LocalCouncil.tsx index fce190f..0842e92 100644 --- a/src/components/pages/LocalCouncil.tsx +++ b/src/components/pages/LocalCouncil.tsx @@ -1,41 +1,62 @@ -import React, { useState } from "react"; -import { Flex } from "antd"; -import { css } from "@emotion/react"; - +import { useEffect, useState } from "react"; +import { MapSelector, LocalCouncilReport } from "@/components/organisms"; +import { useParams } from "react-router-dom"; +import { Element, scroller } from "react-scroll"; import { Layout } from "@/components/templates"; -import { LocalSelector, MetroSelector } from "@/components/organisms"; import { type MetroID } from "static/MapSVGData"; -import { useNavigate } from "react-router-dom"; +import axios from "@/utils/axios"; + +type RegionInfo = { + id: number; + name: MetroID; + local: LocalInfo[]; +}; + +type LocalInfo = { + name: string; + id: number; +}; -const LocalCouncil: React.FC = () => { - const [metroId, setMetroId] = useState(); - const navigate = useNavigate(); - return ( +const LocalCouncil = () => { + const { metroId, localId } = useParams(); + const [metroLocalMap, setMetroLocalMap] = + useState>>(); + useEffect(() => { + if (!metroId || !localId) return; + scroller.scrollTo("Report", { + duration: 1000, + delay: 50, + smooth: "easeInOutQuart", + }); + }, [metroId, localId]); + useEffect(() => { + const idMap = new Map>(); + axios.get("/localCouncil/regionInfo").then(response => { + response.data.forEach((region: RegionInfo) => { + region.local.forEach((local: LocalInfo) => { + if (idMap.has(region.name)) { + idMap.get(region.name)?.set(local.name, [region.id, local.id]); + return; + } + idMap.set( + region.name, + new Map([ + [local.name, [region.id, local.id]], + ]), + ); + }); + }); + setMetroLocalMap(idMap); + }); + }, []); + return metroLocalMap ? ( - - {metroId ? ( - { - navigate(`/localCouncilReport/${metroId}/${id}`); - }} - /> - ) : ( - { - setMetroId(id as MetroID); - }} - /> - )} - + + + {metroId && localId ? : null} + - ); + ) : null; }; export default LocalCouncil; diff --git a/src/components/pages/LocalCouncilReport.tsx b/src/components/pages/LocalCouncilReport.tsx deleted file mode 100644 index 7d2ddd0..0000000 --- a/src/components/pages/LocalCouncilReport.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import { Flex, Typography } from "antd"; -import { css } from "@emotion/react"; -import { useParams } from "react-router-dom"; - -import { Layout } from "@/components/templates"; -import { - AgeHistogram, - PieChart, - // type HistogramData, - // type PieChartData, -} from "@/components/organisms"; -import { - sampleAgeHistogramData, - samplePartyPieData, - sampleSexPieData, -} from "@/utils"; - -const { Title } = Typography; - -const LocalCouncilReport: React.FC = () => { - const { metroId, localId } = useParams(); - - return ( - - - {`MetroId(${metroId}) LocalId(${localId})의 지역의회 다양성 리포트`} - 연령 다양성 - - 정당 다양성 - - 성별 다양성 - - - - ); -}; - -export default LocalCouncilReport; diff --git a/src/components/pages/index.ts b/src/components/pages/index.ts index 7b8f2cb..ec466e4 100644 --- a/src/components/pages/index.ts +++ b/src/components/pages/index.ts @@ -1,3 +1,2 @@ // page 컴포넌트를 모아놓은 파일 export { default as LocalCouncil } from "./LocalCouncil"; -export { default as LocalCouncilReport } from "./LocalCouncilReport"; diff --git a/src/main.tsx b/src/main.tsx index b3f6f18..97857b5 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,10 @@ import { createRoot } from "react-dom/client"; import { RouterProvider } from "react-router-dom"; import router from "@/router"; +import { RecoilRoot } from "recoil"; createRoot(document.getElementById("root")!).render( - , + + , + , ); diff --git a/src/router.tsx b/src/router.tsx index 2385f69..424c87d 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -4,14 +4,15 @@ import { Route, Navigate, } from "react-router-dom"; -import { LocalCouncil, LocalCouncilReport } from "@/components/pages"; +import { LocalCouncil } from "@/components/pages"; const router = createBrowserRouter( createRoutesFromElements([ } />, + } />, } + element={} />, } />, ]),