Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] 2.1.0 배포 #624

Merged
merged 3 commits into from
Nov 18, 2023
Merged

[FE] 2.1.0 배포 #624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
206fd06
[FE] Refactor/#613 지도 클러스터링 기능 추가 및 지도 상태 리팩토링 (#615)
semnil5202 Nov 7, 2023
b05ba62
[FE] Refactor/#620 모아보기 클러스터링 (#622)
semnil5202 Nov 17, 2023
e47f052
refactor: 사용자가 지도를 회전 및 기울인 뒤 지도 이동시 원래대로 조정 (#623)
semnil5202 Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ module.exports = {
'no-unused-expressions': 'off',
'react/jsx-props-no-spreading': 'off',
'react/no-unused-prop-types': 'off',
'import/no-extraneous-dependencies': 'off',
'no-underscore-dangle': 'off',
},
settings: {
'import/resolver': {
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/components/Map/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const getZoomMinLimit = () => {

function Map() {
const { Tmapv3 } = window;

const { markers } = useContext(MarkerContext);
const { width } = useContext(LayoutWidthContext);
const { mapInstance, setMapInstance } = useMapStore((state) => state);
Expand All @@ -47,26 +46,25 @@ function Map() {
const map = new Tmapv3.Map(mapContainer.current, {
center: new Tmapv3.LatLng(37.5154, 127.1029),
scaleBar: false,
width: '100%',
height: '100%',
});

if (!map) return;

map.setZoomLimit(getZoomMinLimit(), 17);

setMapInstance(map);

// eslint-disable-next-line consistent-return
return () => {
map.destroy();
};
}, []);

useMapClick(mapInstance);
useClickedCoordinate(mapInstance);
useUpdateCoordinates(mapInstance);
useMapClick();
useClickedCoordinate();
useUpdateCoordinates();

useFocusToMarker(mapInstance, markers);
onFocusClickedPin(mapInstance, markers);
useFocusToMarker(markers);
onFocusClickedPin();

return (
<MapContainer>
Expand All @@ -84,6 +82,8 @@ function Map() {
}

const MapContainer = styled.div`
width: 100%;
height: 100%;
position: relative;
`;

Expand Down Expand Up @@ -116,4 +116,4 @@ const CurrentLocationIcon = styled(CurrentLocation)`
}
`;

export default Map;
export default Map;
2 changes: 1 addition & 1 deletion frontend/src/components/PinPreview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function PinPreview({
const { pathname } = useLocation();
const { routePage } = useNavigator();
const { tags, setTags } = useContext(TagContext);
const [announceText, setAnnounceText] = useState<string>('토픽 핀 선택');
const [announceText, setAnnounceText] = useState<string>('지도 핀 선택');
const inputRef = useRef<HTMLInputElement | null>(null);

const onAddTagOfTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/PullPin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function PullPin({
tabIndex={1}
aria-label={
confirmButton === '같이보기'
? `선택된 ${tag.title} 토픽 태그`
? `선택된 ${tag.title} 지도 태그`
: `선택된 ${tag.title} 핀 태그`
}
>
Expand All @@ -64,7 +64,7 @@ function PullPin({
onClick={onClickClose}
aria-label={
confirmButton === '같이보기'
? '선택된 토픽들 같이보기 취소하기'
? '선택된 지도들 같이보기 취소하기'
: '선택된 핀들 뽑아오기 취소하기'
}
>
Expand All @@ -76,7 +76,7 @@ function PullPin({
onClick={onClickConfirm}
aria-label={
confirmButton === '같이보기'
? '선택된 토픽들 같이보기'
? '선택된 지도들 같이보기'
: '선택된 핀들 뽑아오기'
}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TopicCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ function TopicCard({
color="black"
$fontSize="default"
$fontWeight="bold"
aria-label={`토픽 이름 ${name}`}
aria-label={`지도 이름 ${name}`}
>
{name}
</MediaText>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/TopicInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ function TopicInfo({
try {
const topicUrl = window.location.href.split('?')[0];
await navigator.clipboard.writeText(topicUrl);
showToast('info', '토픽 링크가 복사되었습니다.');
showToast('info', '지도 링크가 복사되었습니다.');
} catch (err) {
showToast('error', '토픽 링크를 복사하는데 실패했습니다.');
showToast('error', '지도 링크를 복사하는데 실패했습니다.');
}
};

Expand Down
67 changes: 64 additions & 3 deletions frontend/src/components/common/Flex/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { styled } from 'styled-components';

import Box, { BoxProps } from '../Box';
import theme from '../../../themes';
import { colorThemeKey } from '../../../themes/color';
import { radiusKey } from '../../../themes/radius';
import { SpaceThemeKeys } from '../../../themes/spacing';

interface FlexProps extends BoxProps {
interface FlexProps {
$flexDirection?: string;
$flexWrap?: string;
$flexBasis?: string;
Expand All @@ -14,9 +17,34 @@ interface FlexProps extends BoxProps {
$justifyItems?: string;
flex?: string;
$gap?: string;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Box 컴포넌트를 다 밀고 여기로 옮겨졌네요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네넹 그 Flex 인터페이스 타입 못 읽는 에러 때문에 옮겼습니다.

width?: string;
height?: string;
$minWidth?: string;
$minHeight?: string;
$maxWidth?: string;
$maxHeight?: string;
padding?: SpaceThemeKeys | string;
$backgroundColor?: colorThemeKey;
$backdropFilter?: string;
overflow?: string;
color?: colorThemeKey;
position?: string;
right?: string;
top?: string;
left?: string;
bottom?: string;
$borderRadius?: radiusKey;
$borderTop?: string;
$borderRight?: string;
$borderBottom?: string;
$borderLeft?: string;
cursor?: string;
opacity?: string;
$zIndex?: number;
}

const Flex = styled(Box)<FlexProps>`
const Flex = styled.div<FlexProps>`
display: flex;
flex-direction: ${({ $flexDirection }) => $flexDirection};
flex-wrap: ${({ $flexWrap }) => $flexWrap};
Expand All @@ -29,6 +57,39 @@ const Flex = styled(Box)<FlexProps>`
justify-items: ${({ $justifyItems }) => $justifyItems};
flex: ${({ flex }) => flex};
gap: ${({ $gap }) => $gap};

background-color: ${({ $backgroundColor }) =>
$backgroundColor && theme.color[$backgroundColor]};
backdrop-filter: ${({ $backdropFilter }) => $backdropFilter};
color: ${({ color }) => color && theme.color[color]};
padding: ${({ padding }) => padding && convertPadding(padding)};
width: ${({ width }) => width};
height: ${({ height }) => height};
min-width: ${({ $minWidth }) => $minWidth};
min-height: ${({ $minHeight }) => $minHeight};
max-width: ${({ $maxWidth }) => $maxWidth};
max-height: ${({ $maxHeight }) => $maxHeight};
overflow: ${({ overflow }) => overflow};
position: ${({ position }) => position};
right: ${({ right }) => right};
top: ${({ top }) => top};
left: ${({ left }) => left};
bottom: ${({ bottom }) => bottom};
border-radius: ${({ $borderRadius }) =>
$borderRadius && theme.radius[$borderRadius]};
border-top: ${({ $borderTop }) => $borderTop};
border-right: ${({ $borderRight }) => $borderRight};
border-bottom: ${({ $borderBottom }) => $borderBottom};
border-left: ${({ $borderLeft }) => $borderLeft};
cursor: ${({ cursor }) => cursor};
opacity: ${({ opacity }) => opacity};
z-index: ${({ $zIndex }) => $zIndex};
`;

const convertPadding = (padding: SpaceThemeKeys | string) => {
if (typeof padding === 'string' && padding.length > 1) return padding;

return theme.spacing[Number(padding)];
};

export default Flex;
2 changes: 2 additions & 0 deletions frontend/src/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ export const DEFAULT_PROFILE_IMAGE =

export const DEFAULT_PROD_URL =
process.env.APP_URL || 'https://mapbefine.kro.kr/api';

export const PIN_SIZE = 60;
73 changes: 66 additions & 7 deletions frontend/src/constants/pinImage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,26 @@ export const USER_LOCATION_IMAGE = `<svg width="24" height="24" viewBox="0 0 24
`;

export const pinImageMap: PinImageMap = {
1: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
0: `
<svg width="40" height="59" viewBox="0 0 40 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 50.0736C9.81988 51.3889 7.73559 50.3006 8.22893 48.7078L14.5909 28.1672C14.868 27.2727 15.8879 26.8479 16.718 27.2813L23.5743 30.8611C24.4044 31.2945 24.6388 32.3742 24.0632 33.1129L10.8449 50.0736Z" fill="#454545"/>
<circle cx="23.9766" cy="16.8848" r="16" fill="url(#paint0_linear_3559_24273)"/>
<circle cx="17.7548" cy="9.77333" r="3.55556" fill="white" fill-opacity="0.6"/>
<path d="M28.4206 24.4327C30.5005 25.3845 32.8504 24.7942 34.6186 22.798" stroke="black" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="32.4193" cy="13.7738" r="1.33333" fill="black"/>
<circle cx="27.0872" cy="18.2181" r="1.33333" fill="black"/>
<defs>
<linearGradient id="paint0_linear_3559_24273" x1="23.9766" y1="0.884766" x2="23.9766" y2="32.8848" gradientUnits="userSpaceOnUse">
<stop stop-color="#E1325C"/>
<stop offset="0.25" stop-color="#F9CB55"/>
<stop offset="0.5" stop-color="#2AC1BC"/>
<stop offset="0.75" stop-color="#4B5CFA"/>
<stop offset="1" stop-color="#C340B6"/>
</linearGradient>
</defs>
</svg>
`,
1: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#E1325C"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -18,7 +37,7 @@ export const pinImageMap: PinImageMap = {
<circle cx="27.0872" cy="17.3333" r="1.33333" fill="black"/>
</svg>
`,
2: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
2: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#F9CB55"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -27,7 +46,7 @@ export const pinImageMap: PinImageMap = {
<circle cx="27.0872" cy="17.3333" r="1.33333" fill="black"/>
</svg>
`,
3: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
3: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#4B5CFA"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -36,7 +55,7 @@ export const pinImageMap: PinImageMap = {
<circle cx="27.0872" cy="17.3333" r="1.33333" fill="black"/>
</svg>
`,
4: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
4: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#57B148"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -45,7 +64,7 @@ export const pinImageMap: PinImageMap = {
<circle cx="27.0872" cy="17.3333" r="1.33333" fill="black"/>
</svg>
`,
5: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
5: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#2AC1BC"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -54,7 +73,7 @@ export const pinImageMap: PinImageMap = {
<circle cx="27.0872" cy="17.3333" r="1.33333" fill="black"/>
</svg>
`,
6: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
6: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#FD842D"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -63,7 +82,7 @@ export const pinImageMap: PinImageMap = {
<circle cx="27.0872" cy="17.3333" r="1.33333" fill="black"/>
</svg>
`,
7: `<svg width="40" height="58" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
7: `<svg width="60" height="60" viewBox="0 0 40 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8449 48.4877C9.81988 49.803 7.73559 48.7147 8.22893 47.1219L14.5909 26.5813C14.868 25.6867 15.8879 25.262 16.718 25.6954L23.5743 29.2752C24.4044 29.7086 24.6388 30.7883 24.0632 31.5269L10.8449 48.4877Z" fill="#454545"/>
<circle cx="23.9766" cy="16" r="16" fill="#C340B6"/>
<circle cx="17.7548" cy="8.88856" r="3.55556" fill="white" fill-opacity="0.6"/>
Expand All @@ -75,6 +94,7 @@ export const pinImageMap: PinImageMap = {
};

export const pinColors: PinImageMap = {
0: '#454545',
1: '#E1325C',
2: '#F9CB55',
3: '#4B5CFA',
Expand All @@ -83,3 +103,42 @@ export const pinColors: PinImageMap = {
6: '#FD842D',
7: '#C340B6',
};

export const getInfoWindowTemplate = ({
backgroundColor,
pinName,
pins,
condition,
}: {
backgroundColor: string;
pinName: string;
pins: [];
condition: number;
}) => `
<div style="position: relative;">
${
condition !== 1
? pins
.map(
(
pin: any,
) => `<div style="border-bottom: 1px solid white; padding: 4px 12px; display:flex; border-radius: 20px; justify-content: center; align-items: center; height:32px; font-size:14px; color:#ffffff; background-color: ${backgroundColor};">
${pin.name}
</div>`,
)
.join('')
: `<div style="padding: 4px 12px; display:flex; border-radius: 20px; justify-content: center; align-items: center; height:32px; font-size:14px; color:#ffffff; background-color: ${backgroundColor};">
${pinName}
</div>
${
pins.length > 1
? `
<div style="position: absolute; top: -14px; right: -12px; padding: 2px 4px; font-size: 14px; background-color: #fff; border-radius: 50%; border: 1px solid ${backgroundColor}; color: ${backgroundColor}">
+${pins.length}
</div>
`
: ''
}
`
}
</div>`;
Loading
Loading