From 31ecb7dd8c4299d0c1ce121b0b5fb9be82bc6f1a Mon Sep 17 00:00:00 2001 From: withsang Date: Wed, 29 Nov 2023 16:36:07 +0900 Subject: [PATCH 01/11] fix(typo): remove typo in LocalCouncil: --- src/components/organisms/LocalCouncilReport.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/LocalCouncilReport.tsx b/src/components/organisms/LocalCouncilReport.tsx index a6a3e3f..7778a29 100644 --- a/src/components/organisms/LocalCouncilReport.tsx +++ b/src/components/organisms/LocalCouncilReport.tsx @@ -245,7 +245,7 @@ const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => { > {`${metroName} ${localName}의 ${sgYear}년도 ${ sgType === "candidate" ? "후보자" : "당선인" - } 광역의회 다양성 리포트`} + } 지역의회 다양성 리포트`} Date: Wed, 29 Nov 2023 17:18:08 +0900 Subject: [PATCH 02/11] feat(card): add card navigation --- package.json | 1 + pnpm-lock.yaml | 387 +++++++++++++++++- .../LocalCouncilCard.tsx} | 9 +- .../MetroCouncilCard.tsx} | 9 +- src/components/organisms/NavigationCard.tsx | 20 + src/components/organisms/index.ts | 3 + src/components/pages/MainPage.tsx | 25 ++ src/components/pages/index.ts | 3 +- src/components/templates/Layout.tsx | 10 +- src/router.tsx | 16 +- 10 files changed, 457 insertions(+), 26 deletions(-) rename src/components/{pages/LocalCouncilPage.tsx => organisms/LocalCouncilCard.tsx} (92%) rename src/components/{pages/MetroCouncilPage.tsx => organisms/MetroCouncilCard.tsx} (92%) create mode 100644 src/components/organisms/NavigationCard.tsx create mode 100644 src/components/pages/MainPage.tsx diff --git a/package.json b/package.json index 5e303ee..04cd76a 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@ant-design/charts": "^1.4.2", "@ant-design/icons": "^5.2.6", "@ant-design/plots": "^1.2.5", + "@ant-design/pro-components": "^2.6.43", "@emotion/react": "^11.11.1", "@types/react-scroll": "^1.8.10", "antd": "^5.11.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a75e815..4a36b8c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ dependencies: '@ant-design/plots': specifier: ^1.2.5 version: 1.2.5(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-components': + specifier: ^2.6.43 + version: 2.6.43(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) '@emotion/react': specifier: ^11.11.1 version: 11.11.1(@types/react@18.2.25)(react@18.2.0) @@ -272,6 +275,261 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@ant-design/pro-card@2.5.27(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-KHsX/VD5jsVKxUU/szFPayD2FhdVQ2lob7BlAG03Pn8GG2F9hEPk3vHM5WWyn0w+11g4XmvTlujeNxFeaQQV6Q==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + omit.js: 2.0.2 + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + transitivePeerDependencies: + - react-dom + dev: false + + /@ant-design/pro-components@2.6.43(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-l/xy4dRaS3IXU8urq6btyHD+YeRrSgYVW/L0VaeK79Mllk2i4cKVcxPkV2/EcM9tjsnScS1bUFYvtc2RU4qsig==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@ant-design/pro-card': 2.5.27(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-descriptions': 2.5.27(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-field': 2.14.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-form': 2.23.1(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-layout': 7.17.16(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-list': 2.5.42(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-skeleton': 2.1.10(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-table': 3.13.11(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - '@types/lodash.merge' + - rc-field-form + dev: false + + /@ant-design/pro-descriptions@2.5.27(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-H1KEtDSPuuie3v8vnE9T2nSuAU9KPBHosUlN4Iyf4jWOBLmOKJ9n0RGmM496wMPPwei2BxVZVl4a9qczTvdGsA==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + dependencies: + '@ant-design/pro-field': 2.14.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-form': 2.23.1(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-skeleton': 2.1.10(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 0.2.6(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + transitivePeerDependencies: + - '@types/lodash.merge' + - rc-field-form + - react-dom + dev: false + + /@ant-design/pro-field@2.14.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-G4p8hVBA+D2HiscWMPi3eQt/8nyq9Ylqm270LEpxPcFFPXMTKDda/iDI+ZwBktWEd9FjBsfe0iyq6iIheuDXvw==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + '@chenshuai2144/sketch-color': 1.0.9(react@18.2.0) + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + dayjs: 1.11.10 + lodash.tonumber: 4.0.3 + omit.js: 2.0.2 + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + swr: 2.2.4(react@18.2.0) + transitivePeerDependencies: + - react-dom + dev: false + + /@ant-design/pro-form@2.23.1(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-ia4obGA/AmjSm74Fg2fyd+4AI1VyM9Dpu6VYiiAvkO8ZxfyhDzAT1V9zHSCzU9M7Pu/G2hw/8bhovwy5waVtFg==} + peerDependencies: + '@types/lodash.merge': ^4.6.7 + antd: ^4.24.15 || ^5.11.2 + rc-field-form: ^1.22.0 + react: '>=17.0.0' + react-dom: '>=17.0.0' + peerDependenciesMeta: + '@types/lodash.merge': + optional: true + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-field': 2.14.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + '@chenshuai2144/sketch-color': 1.0.9(react@18.2.0) + '@umijs/use-params': 1.0.9(react@18.2.0) + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + dayjs: 1.11.10 + lodash.merge: 4.6.2 + omit.js: 2.0.2 + rc-field-form: 1.40.0(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@ant-design/pro-layout@7.17.16(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-nBQbAJEUkGqQNBqT30FcbcNXHepxySj/O7est1+2iXPXeVeyQYLHBJXcdvCrUrMty6ev3loG8K+6L3DXQkJ/5Q==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + '@umijs/route-utils': 4.0.1 + '@umijs/use-params': 1.0.9(react@18.2.0) + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + lodash.merge: 4.6.2 + omit.js: 2.0.2 + path-to-regexp: 2.4.0 + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + swr: 2.2.4(react@18.2.0) + warning: 4.0.3 + dev: false + + /@ant-design/pro-list@2.5.42(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-wuWQ6+gv9fPY3H6QfXNuaXy+3WjaBvGDIyc3larC3dzkLuuGL6gFZUC3M38srwzXmVHxTEHcGHH4zamraGNFCg==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-card': 2.5.27(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-field': 2.14.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-table': 3.13.11(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + dayjs: 1.11.10 + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 4.21.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - '@types/lodash.merge' + - rc-field-form + dev: false + + /@ant-design/pro-provider@2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-ZVmzY2cq4nUvgmAlfgyCAaSZYV2l3n/upIQPXPj8sYcT+N/Pt1CeSVkkgW6By3EqokF6apWdIFU7hZMK2rNhrg==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@ant-design/cssinjs': 1.17.2(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + '@ctrl/tinycolor': 3.6.1 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + swr: 2.2.4(react@18.2.0) + dev: false + + /@ant-design/pro-skeleton@2.1.10(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-mrT0lqrwdcAKGWsh8CIiPBnVCwQOg8pNNLUeuVg3zpaKxw6lloUgkrqapmYANHLByamsbrmKNXhR9/OdMOerJw==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@babel/runtime': 7.23.2 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@ant-design/pro-table@3.13.11(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-H8vIApenqscN6zTvtN5SX70WOy9JTCAFwYmQrVHNGQxyrsGZC89AltNdQIw/9JpwOjGYR03icrs7SZAnrmZTag==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + rc-field-form: ^1.22.0 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-card': 2.5.27(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-field': 2.14.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-form': 2.23.1(antd@5.11.1)(rc-field-form@1.40.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-utils': 2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/modifiers': 6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + dayjs: 1.11.10 + omit.js: 2.0.2 + rc-field-form: 1.40.0(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - '@types/lodash.merge' + dev: false + + /@ant-design/pro-utils@2.15.2(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-kzMT658CGrQqoihKPlZhbnRioovwMhM59vqqVXuT6A+IuyxJhs5pxN73C6sN2+ZoeYCo/Gewnfn9v1/2vHU2Zg==} + peerDependencies: + antd: ^4.24.15 || ^5.11.2 + react: '>=17.0.0' + react-dom: '>=17.0.0' + dependencies: + '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-provider': 2.13.5(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.2 + antd: 5.11.1(react-dom@18.2.0)(react@18.2.0) + classnames: 2.3.2 + dayjs: 1.11.10 + lodash.merge: 4.6.2 + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + safe-stable-stringify: 2.4.3 + swr: 2.2.4(react@18.2.0) + dev: false + /@ant-design/react-slick@1.0.2(react@18.2.0): resolution: {integrity: sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==} peerDependencies: @@ -1217,6 +1475,16 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + /@chenshuai2144/sketch-color@1.0.9(react@18.2.0): + resolution: {integrity: sha512-obzSy26cb7Pm7OprWyVpgMpIlrZpZ0B7vbrU0RMbvRg0YAI890S5Xy02Aj1Nhl4+KTbi1lVYHt6HQP8Hm9s+1w==} + peerDependencies: + react: '>=16.12.0' + dependencies: + react: 18.2.0 + reactcss: 1.2.3(react@18.2.0) + tinycolor2: 1.6.0 + dev: false + /@ctrl/tinycolor@3.6.1: resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} engines: {node: '>=10'} @@ -1233,6 +1501,61 @@ packages: engines: {node: '>=10.0.0'} dev: false + /@dnd-kit/accessibility@3.1.0(react@18.2.0): + resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/core@6.1.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@dnd-kit/accessibility': 3.1.0(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.6.2 + dev: false + + /@dnd-kit/modifiers@6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0): + resolution: {integrity: sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==} + peerDependencies: + '@dnd-kit/core': ^6.0.6 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0): + resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==} + peerDependencies: + '@dnd-kit/core': ^6.0.7 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/utilities@3.2.2(react@18.2.0): + resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.6.2 + dev: false + /@emotion/babel-plugin@11.11.0: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: @@ -2295,6 +2618,18 @@ packages: eslint-visitor-keys: 3.4.3 dev: true + /@umijs/route-utils@4.0.1: + resolution: {integrity: sha512-+1ixf1BTOLuH+ORb4x8vYMPeIt38n9q0fJDwhv9nSxrV46mxbLF0nmELIo9CKQB2gHfuC4+hww6xejJ6VYnBHQ==} + dev: false + + /@umijs/use-params@1.0.9(react@18.2.0): + resolution: {integrity: sha512-QlN0RJSBVQBwLRNxbxjQ5qzqYIGn+K7USppMoIOVlf7fxXHsnQZ2bEsa6Pm74bt6DVQxpUE8HqvdStn6Y9FV1w==} + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /@vitejs/plugin-react@4.1.0(vite@4.4.10): resolution: {integrity: sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==} engines: {node: ^14.18.0 || >=16.0.0} @@ -2725,6 +3060,10 @@ packages: resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} dev: false + /client-only@0.0.1: + resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} + dev: false + /cliui@2.1.0: resolution: {integrity: sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==} dependencies: @@ -4435,12 +4774,15 @@ packages: /lodash.merge@4.6.2: 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.tonumber@4.0.3: + resolution: {integrity: sha512-SY0SwuPOHRwKcCNTdsntPYb+Zddz5mDUIVFABzRMqmAiL41pMeyoQFGxYAw5zdc9NnH4pbJqiqqp5ckfxa+zSA==} + dev: false + /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} dev: false @@ -4755,6 +5097,10 @@ packages: es-abstract: 1.22.2 dev: true + /omit.js@2.0.2: + resolution: {integrity: sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==} + dev: false + /once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: @@ -4823,6 +5169,10 @@ packages: /path-parse@1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + /path-to-regexp@2.4.0: + resolution: {integrity: sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==} + dev: false + /path-type@4.0.0: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} @@ -5255,6 +5605,20 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /rc-resize-observer@0.2.6(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-YX6nYnd6fk7zbuvT6oSDMKiZjyngjHoy+fz+vL3Tez38d/G5iGdaDJa2yE7345G6sc4Mm1IGRUIwclvltddhmA==} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.23.2 + classnames: 2.3.2 + rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + resize-observer-polyfill: 1.5.1 + dev: false + /rc-resize-observer@1.4.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==} peerDependencies: @@ -5807,6 +6171,11 @@ packages: get-intrinsic: 1.2.1 is-regex: 1.1.4 + /safe-stable-stringify@2.4.3: + resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==} + engines: {node: '>=10'} + dev: false + /safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: false @@ -6120,6 +6489,16 @@ packages: resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} dev: true + /swr@2.2.4(react@18.2.0): + resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==} + peerDependencies: + react: ^16.11.0 || ^17.0.0 || ^18.0.0 + dependencies: + client-only: 0.0.1 + react: 18.2.0 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false + /tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -6425,6 +6804,12 @@ packages: pbf: 3.2.1 dev: false + /warning@4.0.3: + resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} + dependencies: + loose-envify: 1.4.0 + dev: false + /web-worker-helper@0.0.3: resolution: {integrity: sha512-/TllNPjGenDwjE67M16TD9ALwuY847/zIoH7r+e5rSeG4kEa3HiMTAsUDj80yzIzhtshkv215KfsnQ/RXR3nVA==} dev: false diff --git a/src/components/pages/LocalCouncilPage.tsx b/src/components/organisms/LocalCouncilCard.tsx similarity index 92% rename from src/components/pages/LocalCouncilPage.tsx rename to src/components/organisms/LocalCouncilCard.tsx index 3d9c57e..52b4c7c 100644 --- a/src/components/pages/LocalCouncilPage.tsx +++ b/src/components/organisms/LocalCouncilCard.tsx @@ -1,10 +1,11 @@ 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 { type MetroID } from "static/MapSVGData"; import axios from "@/utils/axios"; +import MapSelector from "./MapSelector"; +import LocalCouncilReport from "./LocalCouncilReport"; type RegionInfo = { id: number; @@ -50,7 +51,7 @@ const LocalCouncil = () => { }); }, []); return metroLocalMap ? ( - + <> {metroName && localName ? ( @@ -61,7 +62,7 @@ const LocalCouncil = () => { /> ) : null} - + ) : null; }; diff --git a/src/components/pages/MetroCouncilPage.tsx b/src/components/organisms/MetroCouncilCard.tsx similarity index 92% rename from src/components/pages/MetroCouncilPage.tsx rename to src/components/organisms/MetroCouncilCard.tsx index 9e938fc..42176e3 100644 --- a/src/components/pages/MetroCouncilPage.tsx +++ b/src/components/organisms/MetroCouncilCard.tsx @@ -1,10 +1,11 @@ import { useEffect, useState } from "react"; -import { MapSelector, MetroCouncilReport } from "@/components/organisms"; import { useParams } from "react-router-dom"; import { Element, scroller } from "react-scroll"; -import { Layout } from "@/components/templates"; + import { type MetroID } from "static/MapSVGData"; import axios from "@/utils/axios"; +import MapSelector from "./MapSelector"; +import MetroCouncilReport from "./MetroCouncilReport"; type RegionInfo = { id: number; @@ -54,7 +55,7 @@ const MetroCouncilPage = () => { }); }, []); return metroLocalMap ? ( - + <> {metroName ? ( @@ -65,7 +66,7 @@ const MetroCouncilPage = () => { /> ) : null} - + ) : null; }; diff --git a/src/components/organisms/NavigationCard.tsx b/src/components/organisms/NavigationCard.tsx new file mode 100644 index 0000000..68d4a63 --- /dev/null +++ b/src/components/organisms/NavigationCard.tsx @@ -0,0 +1,20 @@ +import { PageContainer } from "@ant-design/pro-components"; +import { useNavigate } from "react-router-dom"; + +const NavigationCard = () => { + const navigate = useNavigate(); + return ( + { + navigate(`/${key}`); + }} + tabActiveKey={window.location.pathname.split("/")[1]} + /> + ); +}; + +export default NavigationCard; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 2bb18c2..043d49a 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -5,5 +5,8 @@ export * from "./Histogram"; export * from "./PieChart"; export { default as TestChart } from "./TestChart"; export { default as LocalCouncilReport } from "./LocalCouncilReport"; +export { default as LocalCouncilCard } from "./LocalCouncilCard"; export { default as MapSelector } from "./MapSelector"; export { default as MetroCouncilReport } from "./MetroCouncilReport"; +export { default as MetroCouncilCard } from "./MetroCouncilCard"; +export { default as NavigationCard } from "./NavigationCard"; diff --git a/src/components/pages/MainPage.tsx b/src/components/pages/MainPage.tsx new file mode 100644 index 0000000..cf584e8 --- /dev/null +++ b/src/components/pages/MainPage.tsx @@ -0,0 +1,25 @@ +import { useParams } from "react-router-dom"; +import { Layout } from "@/components/templates"; + +import { LocalCouncilCard, MetroCouncilCard } from "@/components/organisms"; + +const MainPage = () => { + const { reportType } = useParams(); + + return ( + + {(() => { + switch (reportType) { + case "localCouncil": + return ; + case "metroCouncil": + return ; + default: + return ; + } + })()} + + ); +}; + +export default MainPage; diff --git a/src/components/pages/index.ts b/src/components/pages/index.ts index 2bf0976..3fafe27 100644 --- a/src/components/pages/index.ts +++ b/src/components/pages/index.ts @@ -1,3 +1,2 @@ // page 컴포넌트를 모아놓은 파일 -export { default as LocalCouncilPage } from "./LocalCouncilPage"; -export { default as MetroCouncilPage } from "./MetroCouncilPage"; +export { default as MainPage } from "./MainPage"; diff --git a/src/components/templates/Layout.tsx b/src/components/templates/Layout.tsx index 22b0d02..11107d0 100644 --- a/src/components/templates/Layout.tsx +++ b/src/components/templates/Layout.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Col, ConfigProvider, Layout, Row } from "antd"; import { css } from "@emotion/react"; -import { Header, Footer } from "@/components/organisms"; +import { Header, NavigationCard, Footer } from "@/components/organisms"; const { Content } = Layout; @@ -21,10 +21,9 @@ const NewwaysLayout = ({ children }: Props) => ( components: { Layout: { // Header, Content, Footer의 배경색을 설정합니다. - headerBg: "#F0F0F0", - bodyBg: "#00E9A1", // ugly... - // bodyBg: "#F1F1F1", // much better - footerBg: "#F0F0F0", + headerBg: "#CCCCCC", + bodyBg: "#F1F1F1", + footerBg: "#CCCCCC", }, }, }} @@ -34,6 +33,7 @@ const NewwaysLayout = ({ children }: Props) => ( {/* breakpoint: 768px */} + } />, - } />, - } - />, - } />, - } />, - } />, + } />, + } />, + } />, + } />, + } />, ]), ); From ea244c31833ccff6ef0d770546672e024819390f Mon Sep 17 00:00:00 2001 From: withsang Date: Wed, 29 Nov 2023 18:01:07 +0900 Subject: [PATCH 03/11] fix(typo): remove typo in breadcrumb --- src/components/organisms/MapSelector.tsx | 6 +++--- src/components/organisms/NavigationCard.tsx | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/MapSelector.tsx b/src/components/organisms/MapSelector.tsx index c04e906..ba93c56 100644 --- a/src/components/organisms/MapSelector.tsx +++ b/src/components/organisms/MapSelector.tsx @@ -43,7 +43,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => { { title: ( // eslint-disable-next-line jsx-a11y/anchor-is-valid - 뉴웨이즈 다양성 리포트 + 지역의회 다양성 리포트 ), onClick: () => navigate(`/localCouncil`), }, @@ -73,7 +73,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => { `} > { const idData = idMap.get(metroName as MetroID)?.get(local); @@ -112,7 +112,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => { <> {" "} type === "local" diff --git a/src/components/organisms/NavigationCard.tsx b/src/components/organisms/NavigationCard.tsx index 68d4a63..a70a2c8 100644 --- a/src/components/organisms/NavigationCard.tsx +++ b/src/components/organisms/NavigationCard.tsx @@ -9,6 +9,9 @@ const NavigationCard = () => { { tab: "지역의회", key: "localCouncil" }, { tab: "광역의회", key: "metroCouncil" }, ]} + tabProps={{ + type: "card", + }} onTabChange={key => { navigate(`/${key}`); }} From c8540324aa9507a14adc46879a57721baee2d70f Mon Sep 17 00:00:00 2001 From: withsang Date: Wed, 29 Nov 2023 19:21:28 +0900 Subject: [PATCH 04/11] refactor(report): fix graph height and word-break --- src/components/organisms/Histogram.tsx | 1 + .../organisms/LocalCouncilReport.tsx | 7 +- .../organisms/MetroCouncilReport.tsx | 7 +- src/components/organisms/NavigationCard.tsx | 23 ---- src/components/organisms/PieChart.tsx | 1 + src/components/organisms/index.ts | 1 - src/components/templates/Layout.tsx | 101 +++++++++++------- 7 files changed, 77 insertions(+), 64 deletions(-) delete mode 100644 src/components/organisms/NavigationCard.tsx diff --git a/src/components/organisms/Histogram.tsx b/src/components/organisms/Histogram.tsx index 8aeefbb..707a3e9 100644 --- a/src/components/organisms/Histogram.tsx +++ b/src/components/organisms/Histogram.tsx @@ -72,6 +72,7 @@ export const Histogram = ({ data }: Props) => { data: histogramData, binField: "value", binWidth, + height: 200, colorField: "type", color: param => { const [binMin] = param.range as [number, number]; diff --git a/src/components/organisms/LocalCouncilReport.tsx b/src/components/organisms/LocalCouncilReport.tsx index 7778a29..e4bb8e3 100644 --- a/src/components/organisms/LocalCouncilReport.tsx +++ b/src/components/organisms/LocalCouncilReport.tsx @@ -243,7 +243,12 @@ const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => { margin: 40px 0 40px 0; `} > - {`${metroName} ${localName}의 ${sgYear}년도 ${ + <Title + level={1} + css={css` + word-break: keep-all; + `} + >{`${metroName} ${localName}의 ${sgYear}년도 ${ sgType === "candidate" ? "후보자" : "당선인" } 지역의회 다양성 리포트`} { margin: 40px 0 40px 0; `} > - {`${metroName}의 ${sgYear}년도 ${ + <Title + level={1} + css={css` + word-break: keep-all; + `} + >{`${metroName}의 ${sgYear}년도 ${ sgType === "candidate" ? "후보자" : "당선인" } 광역의회 다양성 리포트`} { - const navigate = useNavigate(); - return ( - { - navigate(`/${key}`); - }} - tabActiveKey={window.location.pathname.split("/")[1]} - /> - ); -}; - -export default NavigationCard; diff --git a/src/components/organisms/PieChart.tsx b/src/components/organisms/PieChart.tsx index 7c6d429..11e7614 100644 --- a/src/components/organisms/PieChart.tsx +++ b/src/components/organisms/PieChart.tsx @@ -16,6 +16,7 @@ export const PieChart = ({ data, colorMap }: Props) => { appendPadding: 10, data, angleField: "value", + height: 300, radius: 0.6, label: { type: "outer", diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 043d49a..6434a36 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -9,4 +9,3 @@ export { default as LocalCouncilCard } from "./LocalCouncilCard"; export { default as MapSelector } from "./MapSelector"; export { default as MetroCouncilReport } from "./MetroCouncilReport"; export { default as MetroCouncilCard } from "./MetroCouncilCard"; -export { default as NavigationCard } from "./NavigationCard"; diff --git a/src/components/templates/Layout.tsx b/src/components/templates/Layout.tsx index 11107d0..af5e04a 100644 --- a/src/components/templates/Layout.tsx +++ b/src/components/templates/Layout.tsx @@ -1,7 +1,9 @@ import React from "react"; import { Col, ConfigProvider, Layout, Row } from "antd"; import { css } from "@emotion/react"; -import { Header, NavigationCard, Footer } from "@/components/organisms"; +import { PageContainer, ProCard } from "@ant-design/pro-components"; +import { useNavigate } from "react-router-dom"; +import { Header, Footer } from "@/components/organisms"; const { Content } = Layout; @@ -9,43 +11,66 @@ interface Props { children: React.ReactNode; } -const NewwaysLayout = ({ children }: Props) => ( - { + const navigate = useNavigate(); + return ( + - -
- - {/* breakpoint: 768px */} - - - - {children} - - - -