Skip to content

Commit

Permalink
refactor(format): format codes
Browse files Browse the repository at this point in the history
  • Loading branch information
@withSang
withSang committed Nov 22, 2023
1 parent d32279b commit 37097cb
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 120 deletions.
73 changes: 41 additions & 32 deletions src/components/organisms/LocalSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,50 @@
import {MapSVG, type MetroID, MetroInfo} from "@/../static/MapSVGData";
import {type ReactNode} from "react";
import {Dropdown, Flex} from "antd";
import {DownOutlined} from "@ant-design/icons";
import {css} from "@emotion/react";
import { MapSVG, type MetroID, MetroInfo } from "@/../static/MapSVGData";
import { type ReactNode } from "react";
import { Dropdown, Flex } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { css } from "@emotion/react";

interface Props {
selected: MetroID;
onClick?: (local: string) => void;
}

const LocalSelector = ({
selected, onClick = () => {
}
}: Props) => (
const LocalSelector = ({ selected, onClick = () => {} }: Props) => (
<Flex vertical align="center">
<Dropdown menu={{
items: [
{key: '1', label: 'One'},
{key: '2', label: 'Two'},
{type: 'divider'},
{key: '3', label: 'Three'},
{key: '4', label: 'Four'},
]
}}>
<Flex justify="center" align="center" gap="small" css={css`
@media (max-width: 768px) {
width: 80%;
}
width: 30%;
height: 20pt;
border-radius: 5pt;
background-color: white;
`}>
<Dropdown
menu={{
items: [
{ key: "1", label: "One" },
{ key: "2", label: "Two" },
{ type: "divider" },
{ key: "3", label: "Three" },
{ key: "4", label: "Four" },
],
}}
>
<Flex
justify="center"
align="center"
gap="small"
css={css`
@media (max-width: 768px) {
width: 80%;
}
width: 30%;
height: 20pt;
border-radius: 5pt;
background-color: white;
`}
>
기초 자치 단체 선택하기
<DownOutlined/>
<DownOutlined />
</Flex>
</Dropdown>
<div css={css`height: 15pt`}/>
<div
css={css`
height: 15pt;
`}
/>
<svg
version="1.1"
id="Layer_1"
Expand All @@ -55,8 +63,9 @@ const LocalSelector = ({
fill: ${MetroInfo[selected]?.color || "#4CC9F0"};
stroke: #080808;
stroke-width: 1px;
-webkit-transition: fill 0.2s,
stroke 0.2s
-webkit-transition:
fill 0.2s,
stroke 0.2s;
}
.local:hover {
fill: #080808;
Expand Down Expand Up @@ -93,7 +102,7 @@ const LocalSelector = ({
})}
</g>
) : (
<g key={group.groupId}/>
<g key={group.groupId} />
),
)}
</svg>
Expand Down
83 changes: 48 additions & 35 deletions src/components/organisms/MetroSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,51 @@
import {MapSVG, MetroInfo} from "@/../static/MapSVGData";
import {type ReactNode, useState} from "react";
import {Dropdown, Flex} from "antd";
import {css} from "@emotion/react";
import {DownOutlined} from "@ant-design/icons";
import { MapSVG, MetroInfo } from "@/../static/MapSVGData";
import { type ReactNode, useState } from "react";
import { Dropdown, Flex } from "antd";
import { css } from "@emotion/react";
import { DownOutlined } from "@ant-design/icons";

interface Props {
onClick?: (local: string) => void;
}

const MetroSelector = ({
onClick = () => {
}
}: Props) => {
const MetroSelector = ({ onClick = () => {} }: Props) => {
const [hover, setHover] = useState<string>("");
return (
<Flex vertical align="center">
<Dropdown menu={{
items: [
{key: '1', label: 'One'},
{key: '2', label: 'Two'},
{type: 'divider'},
{key: '3', label: 'Three'},
{key: '4', label: 'Four'},
]
}}>
<Flex justify="center" align="center" gap="small" css={css`
@media (max-width: 768px) {
width: 80%;
}
width: 30%;
height: 20pt;
border-radius: 5pt;
background-color: white;
`}>
<Dropdown
menu={{
items: [
{ key: "1", label: "One" },
{ key: "2", label: "Two" },
{ type: "divider" },
{ key: "3", label: "Three" },
{ key: "4", label: "Four" },
],
}}
>
<Flex
justify="center"
align="center"
gap="small"
css={css`
@media (max-width: 768px) {
width: 80%;
}
width: 30%;
height: 20pt;
border-radius: 5pt;
background-color: white;
`}
>
광역 자치 단체 선택하기
<DownOutlined/>
<DownOutlined />
</Flex>
</Dropdown>
<div css={css`height: 15pt`}/>
<div
css={css`
height: 15pt;
`}
/>
<svg
version="1.1"
id="Layer_1"
Expand All @@ -53,8 +61,9 @@ const MetroSelector = ({
}
width: 30%;
.metro {
-webkit-transition: fill 0.2s,
stroke 0.2s
-webkit-transition:
fill 0.2s,
stroke 0.2s;
}
`}
>
Expand All @@ -64,8 +73,12 @@ const MetroSelector = ({
id={group.groupId}
className="metro"
css={css`
fill: ${hover !== group.groupId ? MetroInfo[group.groupId].color : "#060606"};
stroke: ${hover !== group.groupId ? MetroInfo[group.groupId].color : "#060606"};
fill: ${hover !== group.groupId
? MetroInfo[group.groupId].color
: "#060606"};
stroke: ${hover !== group.groupId
? MetroInfo[group.groupId].color
: "#060606"};
`}
onMouseEnter={() => {
setHover(group.groupId);
Expand All @@ -79,11 +92,11 @@ const MetroSelector = ({
>
{group.component.map(shape => {
if (shape.type === `path`) {
return <path key={shape.id} id={shape.id} d={shape.data}/>;
return <path key={shape.id} id={shape.id} d={shape.data} />;
}
if (shape.type === `polygon`) {
return (
<polygon key={shape.id} id={shape.id} points={shape.data}/>
<polygon key={shape.id} id={shape.id} points={shape.data} />
);
}
throw new Error(`${shape.id} is not path or polygon`);
Expand Down
72 changes: 36 additions & 36 deletions src/components/pages/LocalCouncil.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import React, {useState} from "react";
import {Flex} from "antd";
import {css} from "@emotion/react";
import React, { useState } from "react";
import { Flex } from "antd";
import { css } from "@emotion/react";

import {Layout} from "@/components/templates";
import {LocalSelector, MetroSelector} from "@/components/organisms";
import {type MetroID} from "static/MapSVGData";
import {useNavigate} from "react-router-dom";
import { Layout } from "@/components/templates";
import { LocalSelector, MetroSelector } from "@/components/organisms";
import { type MetroID } from "static/MapSVGData";
import { useNavigate } from "react-router-dom";

const LocalCouncil: React.FC = () => {
const [metroId, setMetroId] = useState<MetroID>();
const navigate = useNavigate();
return (
<Layout>
<Flex
vertical
gap={40}
css={css`
margin: 40px 0 40px 0;
`}
>
{metroId ? (
<LocalSelector
selected={metroId}
onClick={id => {
navigate(`/localCouncilReport/${metroId}/${id}`);
}}
/>
) : (
<MetroSelector
onClick={id => {
setMetroId(id as MetroID);
}}
/>
)}
</Flex>
</Layout>
);
const [metroId, setMetroId] = useState<MetroID>();
const navigate = useNavigate();
return (
<Layout>
<Flex
vertical
gap={40}
css={css`
margin: 40px 0 40px 0;
`}
>
{metroId ? (
<LocalSelector
selected={metroId}
onClick={id => {
navigate(`/localCouncilReport/${metroId}/${id}`);
}}
/>
) : (
<MetroSelector
onClick={id => {
setMetroId(id as MetroID);
}}
/>
)}
</Flex>
</Layout>
);
};

export default LocalCouncil;
export default LocalCouncil;
40 changes: 23 additions & 17 deletions static/MapSVGData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,74 +17,80 @@ export type MetroID =
| "인천광역시"
| "서울특별시";

export const themeColors = ["#031273", "#0504AA", "#2337C6", "#4169E1", "#4CC9F0"]
export const themeColors = [
"#031273",
"#0504AA",
"#2337C6",
"#4169E1",
"#4CC9F0",
];

export const MetroInfo: {
[id in MetroID]: { color: string; viewBox?: string };
} = {
제주특별자치도: {
color: themeColors[0],
viewBox: "355 600 150 150"
viewBox: "355 600 150 150",
},
경상남도: {
color: themeColors[3],
viewBox: "200 400 250 250"
viewBox: "200 400 250 250",
},
경상북도: {
color: themeColors[4],
viewBox: "220 200 300 300"
viewBox: "220 200 300 300",
},
전라남도: {
color: themeColors[4],
viewBox: "0 450 280 280"
viewBox: "0 450 280 280",
},
전라북도: {
color: themeColors[1],
viewBox: "65 350 220 220"
viewBox: "65 350 220 220",
},
충청남도: {
color: themeColors[3],
viewBox: "30 220 220 220"
viewBox: "30 220 220 220",
},
충청북도: {
color: themeColors[2],
viewBox: "150 190 240 240"
viewBox: "150 190 240 240",
},
강원도: {
color: themeColors[3],
viewBox: "150 -30 320 320"
viewBox: "150 -30 320 320",
},
경기도: {
color: themeColors[4],
viewBox: "50 50 240 240"
viewBox: "50 50 240 240",
},
세종특별자치시: {
color: themeColors[1],
viewBox: "140 280 100 100"
viewBox: "140 280 100 100",
},
울산광역시: {
color: themeColors[2],
viewBox: "390 435 100 100"
viewBox: "390 435 100 100",
},
대전광역시: {
color: themeColors[4],
viewBox: "165 320 80 80"
viewBox: "165 320 80 80",
},
광주광역시: {
color: themeColors[3],
viewBox: "95 505 80 80"
viewBox: "95 505 80 80",
},
대구광역시: {
color: themeColors[1],
viewBox: "285 340 150 150"
viewBox: "285 340 150 150",
},
인천광역시: {
color: themeColors[1],
viewBox: "-20 80 180 180"
viewBox: "-20 80 180 180",
},
부산광역시: {
color: themeColors[0],
viewBox: "365 485 100 100"
viewBox: "365 485 100 100",
},
서울특별시: {
color: themeColors[0],
Expand Down

0 comments on commit 37097cb

Please sign in to comment.