From a345af6b471601b5b23d1014e6c96242f7085196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Wed, 4 Dec 2024 00:01:59 +0900 Subject: [PATCH 01/52] =?UTF-8?q?[FE][Feat]=20QA=20:=20title=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EC=95=88=EB=90=98=EB=A9=B4=20footer=20passive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/AddChannel.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx index 8c6d291f..3c1ddb29 100644 --- a/frontend/src/pages/AddChannel.tsx +++ b/frontend/src/pages/AddChannel.tsx @@ -47,6 +47,7 @@ export const AddChannel = () => { setFooterOnClick, resetFooterContext, } = useContext(FooterContext); + const navigate = useNavigate(); const goToMainPage = () => { navigate('/'); @@ -94,6 +95,9 @@ export const AddChannel = () => { user.marker_style.color !== '' ); }; + const isChannelNameComplete = (): boolean => { + return channelName.trim() !== ''; + }; /** * 사용자 추가 함수 @@ -139,14 +143,13 @@ export const AddChannel = () => { addUser(); // users가 비어있다면 기본 사용자 추가 } const allUsersComplete = users.every(isUserDataComplete); - // 모든 사용자가 완전한 데이터라면 Footer를 활성화 - if (allUsersComplete) { + if (allUsersComplete && isChannelNameComplete()) { setFooterActive(buttonActiveType.ACTIVE); } else { setFooterActive(buttonActiveType.PASSIVE); } - }, [users, setFooterActive]); // users가 변경될 때마다 실행 + }, [users, setFooterActive, channelName]); // users가 변경될 때마다 실행 const createChannelAPI = async () => { try { From 6ddb80f9f7650a86d8fa0e7213edba0f4ba3f33b Mon Sep 17 00:00:00 2001 From: effozen Date: Wed, 4 Dec 2024 11:46:18 +0900 Subject: [PATCH 02/52] =?UTF-8?q?[FE][Fix]=20#407=20:=20Alert=EB=A5=BC=20?= =?UTF-8?q?=EA=B8=B8=EA=B2=8C=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EB=A9=88=EC=B6=94=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/common/alert/Alert.tsx | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/frontend/src/component/common/alert/Alert.tsx b/frontend/src/component/common/alert/Alert.tsx index 07e4c452..47dbcdcb 100644 --- a/frontend/src/component/common/alert/Alert.tsx +++ b/frontend/src/component/common/alert/Alert.tsx @@ -8,41 +8,38 @@ interface IAlertProps { } export const AlertUI = ({ message, duration = 3000, autoClose = true, onClose }: IAlertProps) => { - const [progress, setProgress] = useState(100); + const [animateProgress, setAnimateProgress] = useState(false); useEffect(() => { if (!autoClose) return; - const start = performance.now(); + const timeout = setTimeout(() => { + setAnimateProgress(true); + }, 50); - const updateProgress = (current: number) => { - const elapsed = current - start; - const newProgress = Math.max(0, 100 - (elapsed / duration) * 100); + const timer = setTimeout(() => { + onClose?.(); + }, duration); - setProgress(newProgress); - - if (elapsed < duration) { - requestAnimationFrame(updateProgress); - } else { - onClose?.(); - } + return () => { + clearTimeout(timeout); + clearTimeout(timer); }; - - const animationFrame = requestAnimationFrame(updateProgress); - - return () => cancelAnimationFrame(animationFrame); }, [duration, autoClose, onClose]); return ( <> -
+
{message}
{autoClose ? ( -
+
) : ( From d885f41c5164f96ff7bf692349e72e678c08c5e0 Mon Sep 17 00:00:00 2001 From: effozen Date: Wed, 4 Dec 2024 11:56:19 +0900 Subject: [PATCH 03/52] =?UTF-8?q?[FE][Fix]=20#410=20:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20->=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20?= =?UTF-8?q?=ED=9B=84=20=EB=8B=AB=EA=B8=B0,=20=EB=8B=A4=EC=8B=9C=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=B0=BD=20=EC=98=AC=20=EC=8B=9C?= =?UTF-8?q?=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EA=B0=80=20=EC=9C=A0=EC=A7=80=EB=90=98=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/authmodal/AuthModal.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/authmodal/AuthModal.tsx b/frontend/src/component/authmodal/AuthModal.tsx index 79493a6b..1778664f 100644 --- a/frontend/src/component/authmodal/AuthModal.tsx +++ b/frontend/src/component/authmodal/AuthModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Modal } from '@/component/common/modal/Modal'; import { doLogin, doRegister } from '@/api/auth.api.ts'; import { saveLocalData } from '@/utils/common/manageLocalData.ts'; @@ -91,6 +91,10 @@ export const AuthModal = (props: IAuthModalProps) => { }); }; + useEffect(() => { + if (!props.isOpen) switchToLogin(); + }, [props.isOpen]); + return ( {modalType === 'login' ? ( From a884be09e482c426acbe4f5556555fc270260c57 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Wed, 4 Dec 2024 13:15:10 +0900 Subject: [PATCH 04/52] =?UTF-8?q?[FE][Feat]=20#411=20:=20=EC=B1=84?= =?UTF-8?q?=EB=84=90=EC=9D=84=20=EC=83=88=EB=A1=9C=20=EB=A7=8C=EB=93=A4?= =?UTF-8?q?=EB=A9=B4=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=EC=97=90=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Main.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index d5764146..7f9e80dc 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -80,8 +80,16 @@ export const Main = () => { ? prev.map(loc => (loc.token === data.token ? data : loc)) : [...prev, data], ); + } else if (data.type === 'channel') { + setChannels(prevChannels => { + if (prevChannels.some(channel => channel.id === data.channel.id)) { + return prevChannels; + } + return [...prevChannels, data.channel]; + }); } }; + return () => ws.close(); } return undefined; From a0a4b70ef7a31c701e4ee99bcac3244a38f43abb Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Wed, 4 Dec 2024 13:15:49 +0900 Subject: [PATCH 05/52] =?UTF-8?q?[FE][Fix]=20#411=20:=20=ED=95=9C=EA=B5=AD?= =?UTF-8?q?=20=EC=8B=9C=EA=B0=84=EA=B3=BC=20=EC=8B=9C=EA=B0=84=EC=9D=B4=20?= =?UTF-8?q?=EC=95=88=20=EB=A7=9E=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/content/Content.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx index 9eb9d5f3..50d3ca2b 100644 --- a/frontend/src/component/content/Content.tsx +++ b/frontend/src/component/content/Content.tsx @@ -41,11 +41,13 @@ export const Content = (props: IContentProps) => { year: 'numeric', month: '2-digit', day: '2-digit', + timeZone: 'UTC', }); const formattedTime = new Date(props.time).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', + timeZone: 'UTC', }); const navigate = useNavigate(); const { channelInfo, setChannelInfo } = useContext(ChannelContext); From 5ce0fdca552f86d79e3f9dbda64b9487966d5557 Mon Sep 17 00:00:00 2001 From: effozen Date: Wed, 4 Dec 2024 13:56:02 +0900 Subject: [PATCH 06/52] =?UTF-8?q?[FE][Fix]=20#413=20:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20->=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20?= =?UTF-8?q?=ED=9B=84=20=EB=8B=AB=EA=B8=B0,=20=EB=8B=A4=EC=8B=9C=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=B0=BD=20=EC=98=AC=20=EC=8B=9C?= =?UTF-8?q?=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EA=B0=80=20=EC=9C=A0=EC=A7=80=EB=90=98=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/common/modal/ModalFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/common/modal/ModalFooter.tsx b/frontend/src/component/common/modal/ModalFooter.tsx index c255754b..acddf835 100644 --- a/frontend/src/component/common/modal/ModalFooter.tsx +++ b/frontend/src/component/common/modal/ModalFooter.tsx @@ -13,7 +13,7 @@ export const ModalFooter = (props: IModalFooterProps) => (
))}
From e097f2b4da981e0dd742464a6224233e15479b16 Mon Sep 17 00:00:00 2001 From: effozen Date: Wed, 4 Dec 2024 20:22:38 +0900 Subject: [PATCH 15/52] =?UTF-8?q?[FE][Fix]=20#416=20:=20=EC=B1=84=EB=84=90?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=20=EB=A1=9C=EC=A7=81=20=EC=9E=AC=EB=9E=9C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EC=95=88=EB=90=98=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Main.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index f8716316..1185ed13 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -31,7 +31,7 @@ export const Main = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [showLoginModal, setShowLoginModal] = useState(false); const [channels, setChannels] = useState([]); - const [, setIsDeleted] = useState(false); + const [isDeleted, setIsDeleted] = useState(false); const { resetUsers } = useContext(UserContext); @@ -53,7 +53,7 @@ export const Main = () => { }); } } - }, []); + }, [isDeleted]); const navigate = useNavigate(); From 84e45c40a3fb67e803f918f5f2a17f252e620efd Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Wed, 4 Dec 2024 20:40:52 +0900 Subject: [PATCH 16/52] =?UTF-8?q?[FE][Feat]=20:=20zoomslider=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/zoomslider/ZoomSlider.css | 34 +++++++++++ .../src/component/zoomslider/ZoomSlider.tsx | 59 +++++++++++-------- 2 files changed, 70 insertions(+), 23 deletions(-) create mode 100644 frontend/src/component/zoomslider/ZoomSlider.css diff --git a/frontend/src/component/zoomslider/ZoomSlider.css b/frontend/src/component/zoomslider/ZoomSlider.css new file mode 100644 index 00000000..f7098168 --- /dev/null +++ b/frontend/src/component/zoomslider/ZoomSlider.css @@ -0,0 +1,34 @@ +.rangeInput { + width: 90%; + border-radius: 8px; + outline: none; + transition: background 450ms ease-in; + -webkit-appearance: none; + accent-color: #333c4a; + height: 8px; +} + +.rangeInput::-webkit-slider-thumb { + -webkit-appearance: none; + height: 15px; + width: 15px; + background-color: #333c4a; + border-radius: 50%; + cursor: pointer; + transform: translateY(-25%); + position: relative; +} +.rangeInput::-moz-range-thumb { + height: 15px; + width: 15px; + background-color: #333c4a; + border-radius: 50%; + cursor: pointer; + transform: translateY(-25%); + position: relative; +} + +.rangeInput::-webkit-slider-runnable-track { + height: 8px; + border-radius: 8px; +} diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx index 98071fdd..3b510121 100644 --- a/frontend/src/component/zoomslider/ZoomSlider.tsx +++ b/frontend/src/component/zoomslider/ZoomSlider.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; import { MdOutlineAdd, MdRemove } from 'react-icons/md'; +import './ZoomSlider.css'; interface IZoomSliderProps { /** Naver 지도 객체 */ @@ -28,29 +29,41 @@ const ZoomButton = ({ label, onClick }: IZoomButtonProps) => ( ); -const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) => ( -
- -
-
-); +const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) => { + const minZoom = 6; + const maxZoom = 22; + + const getBackgroundStyle = () => { + const gradientValue = ((zoomLevel - minZoom) / (maxZoom - minZoom)) * 100; + return `linear-gradient(to right, #333C4A 0%, #333C4A ${gradientValue}%, #ececec ${gradientValue}%, #ececec 100%)`; + }; + + return ( +
+ +
+
+ ); +}; export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10); From 94b6603290d1ac8e5573fbdf1bad56c497dbc557 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Wed, 4 Dec 2024 20:56:14 +0900 Subject: [PATCH 17/52] =?UTF-8?q?[FE][Feat]=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=20name=20=EC=9E=85=EB=A0=A5=20=EA=B0=80=EB=8A=A5=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../routebutton/RouteResultButton.tsx | 19 ++++++++++++++-- .../routebutton/RouteSettingButton.tsx | 14 +++++++++++- frontend/src/pages/AddChannel.tsx | 18 ++++++++++++--- frontend/src/pages/AddGuestPage.tsx | 22 ++++++++++++++----- frontend/src/pages/ChannelInfoPage.tsx | 2 +- 5 files changed, 63 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/routebutton/RouteResultButton.tsx b/frontend/src/component/routebutton/RouteResultButton.tsx index 984725a9..2a4245f2 100644 --- a/frontend/src/component/routebutton/RouteResultButton.tsx +++ b/frontend/src/component/routebutton/RouteResultButton.tsx @@ -11,6 +11,7 @@ import { Page } from './enum'; interface IRouteResultButtonProps { user: IUser; + setUserName?: (index: number, newName: string) => void; deleteUser?: (index: number) => void; page?: Page; isGuest?: boolean; @@ -40,10 +41,24 @@ export const RouteResultButton = (props: IRouteResultButtonProps) => { }); }; + const handleChangeName = (event: React.ChangeEvent) => { + if (props.setUserName) { + props.setUserName(props.user.index, event.target.value); + } + }; + return (
-

{props.user.name}

+ { + handleChangeName(e); + }} + disabled={props.isGuest} + />
)} - {props.isGuest ? ( + {props.isGuest && props.setUserName ? (
) : props.user.index === 1 && props.page === Page.ADD ? (
diff --git a/frontend/src/component/routebutton/RouteSettingButton.tsx b/frontend/src/component/routebutton/RouteSettingButton.tsx index 2082899d..ae1cb526 100644 --- a/frontend/src/component/routebutton/RouteSettingButton.tsx +++ b/frontend/src/component/routebutton/RouteSettingButton.tsx @@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom'; interface IRouteSettingButtonProps { user: IUser; + setUserName: (index: number, newName: string) => void; deleteUser?: (index: number) => void; } @@ -15,10 +16,21 @@ export const RouteSettingButton = (props: IRouteSettingButtonProps) => { navigate(`/add-channel/${user}/draw`); }; + const handleChangeName = (event: React.ChangeEvent) => { + props.setUserName(props.user.index, event.target.value); + }; + return (
-

{props.user.name}

+ { + handleChangeName(e); + }} + />
+
+ ) : ( +
+ + +
+ )} +
+
+ ); +}; diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx index 2d6802ae..cb16e560 100644 --- a/frontend/src/component/content/Content.tsx +++ b/frontend/src/component/content/Content.tsx @@ -1,6 +1,6 @@ import { MdGroup, MdMoreVert } from 'react-icons/md'; import { useNavigate } from 'react-router-dom'; -import { getChannelInfo, deleteChannel } from '@/api/channel.api'; +import { getChannelInfo } from '@/api/channel.api'; import { useContext } from 'react'; import { ChannelContext } from '@/context/ChannelContext'; import { Dropdown } from '../common/dropdown/Dropdown'; @@ -12,7 +12,7 @@ interface IContentProps { link: string; time: string; channelId: string; - setIsDeleted?: () => void; + onDelete?: (channelId: string) => void; } /** @@ -65,15 +65,7 @@ export const Content = (props: IContentProps) => { }; const deleteChannelItem = async () => { - try { - const result = window.confirm('정말로 삭제하시겠습니까?'); - if (result) { - await deleteChannel(props.channelId); - props.setIsDeleted?.(); - } - } catch (error) { - console.error('Failed to delete channel info:', error); - } + props.onDelete?.(props.channelId); }; const goToChannelInfoPage = () => { diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index 1185ed13..1e599d7c 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -1,11 +1,11 @@ -import { Fragment, useContext, useEffect, useState } from 'react'; +import { Fragment, useContext, useEffect, useRef, useState, ReactNode } from 'react'; import { MdLogout } from 'react-icons/md'; import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider'; import { useNavigate } from 'react-router-dom'; import { buttonActiveType } from '@/component/layout/enumTypes'; import { loadLocalData, saveLocalData, removeLocalData } from '@/utils/common/manageLocalData.ts'; import { AuthModal } from '@/component/authmodal/AuthModal'; -import { getUserChannels } from '@/api/channel.api.ts'; +import { deleteChannel, getUserChannels } from '@/api/channel.api.ts'; import { BottomSheet } from '@/component/bottomsheet/BottomSheet.tsx'; import { Content } from '@/component/content/Content.tsx'; import { AppConfig } from '@/lib/constants/commonConstants.ts'; @@ -15,6 +15,7 @@ import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx'; import { UserContext } from '@/context/UserContext'; import { ToggleProvider } from '@/context/DropdownContext.tsx'; +import { Confirm } from '@/component/confirm/Confirm.tsx'; export const Main = () => { const { @@ -31,11 +32,59 @@ export const Main = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [showLoginModal, setShowLoginModal] = useState(false); const [channels, setChannels] = useState([]); - const [isDeleted, setIsDeleted] = useState(false); + const [modalState, setModalState] = useState<'none' | 'confirm' | 'alert'>('none'); + const [modal, setModal] = useState(false); + + const deleteTargetRef = useRef(''); const { resetUsers } = useContext(UserContext); + const handleDeleteChannel = (channelId: string) => { + setModalState('confirm'); + deleteTargetRef.current = channelId; + // setIsDeleted(prev => !prev); + }; + + const handleDeleteModalCancel = () => { + setModalState('none'); + }; + + const handleDeleteModalConfirm = async () => { + try { + await deleteChannel(deleteTargetRef.current); + setModalState('alert'); + console.log(modalState); + } catch (err) { + console.error('Failed to delete channel info:', err); + } + }; + useEffect(() => { + if (modalState === 'confirm') { + setModal( + , + ); + return; + } + if (modalState === 'alert') { + setModal( + { + setModalState('none'); + }} + onCancel={() => {}} + type="alert" + />, + ); + return; + } + const token = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN); setIsLoggedIn(!!token); @@ -53,7 +102,7 @@ export const Main = () => { }); } } - }, [isDeleted]); + }, [modalState]); const navigate = useNavigate(); @@ -174,9 +223,7 @@ export const Main = () => { link={`/channel/${item.id}/host`} person={item.guest_count} time={item.generated_at} - setIsDeleted={() => { - setIsDeleted(prev => !prev); - }} + onDelete={handleDeleteChannel} />
@@ -195,6 +242,8 @@ export const Main = () => { )} + {modalState !== 'none' && modal} + {/* 로그인 모달 */}
From a2e45739e6d990a66779a809fc10b131f0b9358a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Wed, 4 Dec 2024 22:28:22 +0900 Subject: [PATCH 23/52] =?UTF-8?q?[FE][Feat]=20QA=20:=20=ED=81=B4=EB=9F=AC?= =?UTF-8?q?=EC=8A=A4=ED=84=B0=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useRedraw.ts | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts index 36ac929b..bee3e19d 100644 --- a/frontend/src/hooks/useRedraw.ts +++ b/frontend/src/hooks/useRedraw.ts @@ -60,6 +60,7 @@ enum MARKER_TYPE { START_MARKER = 'START_MARKER', END_MARKER = 'END_MARKER', CHARACTER = 'CHARACTER', + CLUSTER = 'CLUSTER', } export const useRedrawCanvas = ({ @@ -127,14 +128,6 @@ export const useRedrawCanvas = ({ return tempCanvas; }; - - const checkMarker = (path: string) => { - if (path.includes('startmarker') || path.includes('endmarker') || path.includes('mylocation')) { - return true; - } - return false; - }; - const drawCluster = ( ctx: CanvasRenderingContext2D, cluster: ICluster, @@ -149,14 +142,10 @@ export const useRedrawCanvas = ({ if (clusterCenter && image) { const markerSize = zoom < 18 ? Math.min(zoom * 5, 50) : (zoom - 15) * (zoom - 16) * 10; - ctx.fillStyle = color || '#000'; - ctx.strokeStyle = color || '#000'; ctx.save(); - ctx.translate(clusterCenter.x, clusterCenter.y); - let filteredImage; - if (checkMarker(image.src)) - filteredImage = colorizeImage(image, color, markerSize, markerSize); - else filteredImage = image; + ctx.translate(clusterCenter.x, clusterCenter.y - zoom); + ctx.rotate(0); + const filteredImage = colorizeImage(image, color, markerSize, markerSize); ctx.drawImage(filteredImage, -markerSize / 2, -markerSize / 2, markerSize, markerSize); ctx.restore(); } From 33d9e6614245d7220717f9974e722d20ef660940 Mon Sep 17 00:00:00 2001 From: effozen Date: Wed, 4 Dec 2024 23:56:36 +0900 Subject: [PATCH 24/52] =?UTF-8?q?[FE][Fix][Refactor]=20#416=20:=20Confirm?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EC=B0=BD=20UI=20=EC=A4=91=EC=8B=AC=20?= =?UTF-8?q?=EB=A7=9E=EC=B6=A4=20=EB=B0=8F=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/confirm/Confirm.tsx | 42 +++++++++++----------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/frontend/src/component/confirm/Confirm.tsx b/frontend/src/component/confirm/Confirm.tsx index 47efcdcf..8cddee57 100644 --- a/frontend/src/component/confirm/Confirm.tsx +++ b/frontend/src/component/confirm/Confirm.tsx @@ -1,3 +1,18 @@ +interface IConfirmButtonProps { + onClick: () => void; + text: string; +} + +const ConfirmButton = (props: IConfirmButtonProps) => ( + +); + interface IConfirmProps { message: string; onConfirm: () => void; @@ -9,34 +24,17 @@ interface IConfirmProps { export const Confirm = (props: IConfirmProps) => { return ( -
-
+
+
{props.message}
{props.type === 'alert' ? ( -
- -
+ ) : (
- - + +
)}
From b8870f0cef971af116dd729a0a73df12425f9771 Mon Sep 17 00:00:00 2001 From: effozen Date: Thu, 5 Dec 2024 00:04:43 +0900 Subject: [PATCH 25/52] =?UTF-8?q?[FE][Fix][Refactor]=20#416=20:=20Confirm?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EC=B0=BD=20UI=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=83=89=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/confirm/Confirm.tsx | 27 ++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/confirm/Confirm.tsx b/frontend/src/component/confirm/Confirm.tsx index 8cddee57..c8595380 100644 --- a/frontend/src/component/confirm/Confirm.tsx +++ b/frontend/src/component/confirm/Confirm.tsx @@ -1,11 +1,18 @@ +import classNames from 'classnames'; + interface IConfirmButtonProps { onClick: () => void; text: string; + type: 'confirm' | 'cancel'; } const ConfirmButton = (props: IConfirmButtonProps) => (
{props.type === 'alert' ? ( - + ) : (
- - + +
)}
From 5841d49e200e88f0f469f7c742b1ba59883e522b Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 11:51:54 +0900 Subject: [PATCH 26/52] =?UTF-8?q?[FE][Fix]=20#430=20:=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=EA=B0=80=20=EC=A3=BC=EA=B8=B0=EC=A0=81=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=9E=AC=EB=A0=8C=EB=8D=94=EB=A7=81=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 지도 객체 생성 조건 변경 --- .../canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 84c540cf..90b3a92f 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -36,7 +36,7 @@ export const MapCanvasForView = forwardRef { mapInstance.destroy(); }; - }, [lat, lng]); + }, []); const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => { if (!map || !projection || !canvasRef.current) return null; From e9756d6f341fac701b141b619b5f8e04e0ee5567 Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 11:53:30 +0900 Subject: [PATCH 27/52] =?UTF-8?q?[FE][Fix]=20=EC=A4=8C=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=EA=B0=92=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 기분 줌 레벨 값 변경 - 기본 줌 레벨 값 변수화 --- .../canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx | 5 +++-- .../canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx | 3 ++- .../canvasWithMapforDraw/MapProviderForDraw.tsx | 4 ++-- frontend/src/component/zoomslider/ZoomSlider.tsx | 5 +++-- frontend/src/lib/constants/mapConstants.ts | 2 ++ 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 90b3a92f..78c4c4ab 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -4,6 +4,7 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction'; import { useRedrawCanvas } from '@/hooks/useRedraw'; import { ZoomSlider } from '@/component/zoomslider/ZoomSlider'; import { ICluster, useCluster } from '@/hooks/useCluster'; +import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts'; export const MapCanvasForView = forwardRef( ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => { @@ -21,8 +22,8 @@ export const MapCanvasForView = forwardRef { @@ -48,7 +48,7 @@ export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => { width={windowSize.width} height={windowSize.height} initialCenter={DEFAULT_CENTER} - initialZoom={7} + initialZoom={DEFAULT_ZOOM} /> ); }; diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx index 3b510121..10606fef 100644 --- a/frontend/src/component/zoomslider/ZoomSlider.tsx +++ b/frontend/src/component/zoomslider/ZoomSlider.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { MdOutlineAdd, MdRemove } from 'react-icons/md'; import './ZoomSlider.css'; +import { DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts'; interface IZoomSliderProps { /** Naver 지도 객체 */ @@ -66,7 +67,7 @@ const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) = }; export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { - const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10); + const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? DEFAULT_ZOOM); useEffect(() => { if (!map) return undefined; @@ -87,7 +88,7 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { }; const handleSliderChange = (event: React.ChangeEvent) => { - const newZoom = parseInt(event.target.value, 10); + const newZoom = parseInt(event.target.value, DEFAULT_ZOOM); if (map) { map.setZoom(newZoom); setZoomLevel(newZoom); diff --git a/frontend/src/lib/constants/mapConstants.ts b/frontend/src/lib/constants/mapConstants.ts index 9ea59a6e..3b73dbf6 100644 --- a/frontend/src/lib/constants/mapConstants.ts +++ b/frontend/src/lib/constants/mapConstants.ts @@ -12,3 +12,5 @@ export const DEFAULT_CENTER = { export const MIN_ZOOM = 7; // 대한민국 전체가 보이는 최소 줌 레벨 export const MAX_ZOOM = 19; // 네이버 지도 최대 줌 레벨 + +export const DEFAULT_ZOOM = 18; From c91887951e3916e27c644407e6ac77a50235ee22 Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 11:54:12 +0900 Subject: [PATCH 28/52] =?UTF-8?q?[FE][Refactor]=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 불필요한 주석 제거 --- .../canvasWithMapforDraw/MapCanvasForDraw.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx index 95285140..8471196e 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx @@ -81,18 +81,6 @@ export const MapCanvasForDraw = ({ setMap(mapInstance); setProjection(mapInstance.getProjection()); - // TODO: 필요 없을 것으로 예상, 혹시나해서 남겨둔 것이니 필요 없다 판단되면 제거 필요 - // naver.maps.Event.addListener(mapInstance, 'zoom_changed', () => { - // setProjection(mapInstance.getProjection()); - // updateCanvasSize(); - // redrawCanvas(); - // }); - // - // naver.maps.Event.addListener(mapInstance, 'center_changed', () => { - // setProjection(mapInstance.getProjection()); - // redrawCanvas(); - // }); - return () => { mapInstance.destroy(); }; From 07f7f79414ac31e227ef8b1dd9f114f54214b354 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Thu, 5 Dec 2024 11:59:24 +0900 Subject: [PATCH 29/52] =?UTF-8?q?[FE][Feat]=20:=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=B0=BD=EC=97=90=EC=84=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B2=84=EB=B8=94=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/searchbox/SearchBox.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/searchbox/SearchBox.tsx b/frontend/src/component/searchbox/SearchBox.tsx index 2f000739..658a5548 100644 --- a/frontend/src/component/searchbox/SearchBox.tsx +++ b/frontend/src/component/searchbox/SearchBox.tsx @@ -147,7 +147,13 @@ export const SearchBox = (props: ISearchBoxProps) => { }; return ( -
+
{ + e.stopPropagation(); + e.preventDefault(); + }} + > {/* 검색 입력 */}
Date: Thu, 5 Dec 2024 11:59:46 +0900 Subject: [PATCH 30/52] =?UTF-8?q?[FE][Feat]=20:=20zoomslider=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=B2=84=EB=B8=94?= =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/zoomslider/ZoomSlider.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx index 3b510121..0182b140 100644 --- a/frontend/src/component/zoomslider/ZoomSlider.tsx +++ b/frontend/src/component/zoomslider/ZoomSlider.tsx @@ -96,7 +96,13 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { }; return ( -
+
{ + e.stopPropagation(); + e.preventDefault(); + }} + > } onClick={() => handleZoomChange(1)} /> } onClick={() => handleZoomChange(-1)} /> From d8ad24f3c0f29bc711e28a8e0882d546814a5041 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Thu, 5 Dec 2024 12:00:24 +0900 Subject: [PATCH 31/52] =?UTF-8?q?[FE][Delete]=20:=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=B2=84=EB=B8=94=EB=A7=81=20?= =?UTF-8?q?=EB=A7=89=EA=B8=B0=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvasWithMapforDraw/MapProviderForDraw.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx index e0cd5f8a..ad6a0bde 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx @@ -29,20 +29,6 @@ export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => { }; }, []); - useEffect(() => { - const preventDefault = (e: TouchEvent) => { - e.preventDefault(); - }; - - document.body.style.overflow = 'hidden'; - document.addEventListener('touchmove', preventDefault, { passive: false }); - - return () => { - document.body.style.overflow = 'auto'; - document.removeEventListener('touchmove', preventDefault); - }; - }, []); - return ( Date: Thu, 5 Dec 2024 12:01:12 +0900 Subject: [PATCH 32/52] =?UTF-8?q?[FE][Design]=20:=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=86=92=EC=9D=B4=20=EB=AC=B8=EC=A0=9C=EA=B0=80=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=B0=96=EC=9C=BC=EB=A1=9C=20=EB=84=98?= =?UTF-8?q?=EC=96=B4=EA=B0=84=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/DrawRoute.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/DrawRoute.tsx b/frontend/src/pages/DrawRoute.tsx index ab16dd54..dd79c0ad 100644 --- a/frontend/src/pages/DrawRoute.tsx +++ b/frontend/src/pages/DrawRoute.tsx @@ -130,7 +130,7 @@ export const DrawRoute = () => { return (
-
+
From 9145cc227c4d5572f74752908ace38efa0970bb1 Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 12:23:39 +0900 Subject: [PATCH 33/52] =?UTF-8?q?[FE][Fix]=20#433=20:=20=EC=9D=BC=EB=B6=80?= =?UTF-8?q?=20ios=EC=97=90=EC=84=9C=20=ED=84=B0=EC=B9=98=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=A0=9C=EB=8C=80=EB=A1=9C=20=EB=8F=99?= =?UTF-8?q?=EC=9E=91=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 일부 ios(아이폰 12)에서 터치 이벤트 제대로 동작하지 않는 문제 해결 - 아이폰 12 환경에서 테스트 --- frontend/src/App.css | 8 ++++++++ frontend/src/index.css | 12 ++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 77787acb..a2619de8 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -3,6 +3,14 @@ font-family: Pretendard, 'Pretendard Variable', sans-serif !important; } +@supports (-webkit-touch-callout: none) { + #root { + touch-action: manipulation; /* Safari 호환 옵션 */ + overscroll-behavior: none; + } +} + + .logo { height: 6em; padding: 1.5em; diff --git a/frontend/src/index.css b/frontend/src/index.css index 03968b36..6967f2d5 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,5 +1,3 @@ -/* src/index.css */ - @tailwind base; @tailwind components; @tailwind utilities; @@ -12,6 +10,7 @@ * { overscroll-behavior: none; overscroll-behavior-y: none; + touch-action: none; } *::before, *::after { @@ -20,8 +19,13 @@ box-sizing: border-box; /* padding과 border를 box 크기에 포함 */ } -html, -body, +html { + overflow: hidden; + overscroll-behavior: none; + overscroll-behavior-y: none; + touch-action: manipulation; +} +body div, span, applet, From 94e760fc581920f9ed2f7ba95dac50ad96f09a90 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Thu, 5 Dec 2024 12:45:49 +0900 Subject: [PATCH 34/52] =?UTF-8?q?[FE][Fix]=20:=20=EB=B9=84=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=8B=9C=20=EA=B8=80=EC=9E=90=EA=B0=80=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=96=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B2=97=EC=96=B4=EB=82=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/bottomsheet/BottomSheet.tsx | 2 +- frontend/src/pages/Main.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx index 209fea97..68049087 100644 --- a/frontend/src/component/bottomsheet/BottomSheet.tsx +++ b/frontend/src/component/bottomsheet/BottomSheet.tsx @@ -58,7 +58,7 @@ export const BottomSheet = ({ return (
{
))} -
+
) : ( From 48b9571ccf1adb950b7174f7362fe7a813f11566 Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 13:21:14 +0900 Subject: [PATCH 35/52] =?UTF-8?q?[FE][Fix]=20#436=20:=20=EB=B0=A9=ED=96=A5?= =?UTF-8?q?=20=EB=A7=9E=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 방향 로직 수정 --- frontend/src/hooks/useRedraw.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts index 36ac929b..8813b44c 100644 --- a/frontend/src/hooks/useRedraw.ts +++ b/frontend/src/hooks/useRedraw.ts @@ -376,12 +376,14 @@ export const useRedrawCanvas = ({ if (lat && lng) { const currentLocation = latLngToCanvasPoint({ lat, lng }); if (alpha) { + const normalizedAlpha = (alpha + 360) % 360; + const correctedAlpha = ((normalizedAlpha - 90 + 180) % 360) * (Math.PI / 180); drawMarker( ctx, currentLocation, character1Ref.current, zoom, - (alpha * Math.PI) / 180, + correctedAlpha, guests![0]?.markerStyle.color, MARKER_TYPE.CHARACTER, ); @@ -404,6 +406,8 @@ export const useRedrawCanvas = ({ lat: location.lat ? location.lat : 0, lng: location.lng ? location.lng : 0, }); + const normalizedAlpha = (location.alpha + 360) % 360; + const correctedAlpha = ((normalizedAlpha - 90 + 180) % 360) * (Math.PI / 180); drawNeonCircleAndDirection(ctx, locationPoint, zoom, color); drawMarker( @@ -411,7 +415,7 @@ export const useRedrawCanvas = ({ locationPoint, character2Ref.current, zoom, - (location.alpha * Math.PI) / 180, + correctedAlpha, color, MARKER_TYPE.CHARACTER, ); From 2f8fa86e81c3c8f77798436be3bcd5d4dfaad0e1 Mon Sep 17 00:00:00 2001 From: effozen Date: Thu, 5 Dec 2024 14:19:06 +0900 Subject: [PATCH 36/52] =?UTF-8?q?[FE][Feat]=20#438=20:=20=EA=B0=80?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=EC=97=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Main.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index 1e599d7c..8844598f 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -1,5 +1,5 @@ import { Fragment, useContext, useEffect, useRef, useState, ReactNode } from 'react'; -import { MdLogout } from 'react-icons/md'; +import { MdInfo, MdLogout } from 'react-icons/md'; import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider'; import { useNavigate } from 'react-router-dom'; import { buttonActiveType } from '@/component/layout/enumTypes'; @@ -53,7 +53,6 @@ export const Main = () => { try { await deleteChannel(deleteTargetRef.current); setModalState('alert'); - console.log(modalState); } catch (err) { console.error('Failed to delete channel info:', err); } @@ -172,12 +171,25 @@ export const Main = () => { setIsLoggedIn(!isLoggedIn); }; + const handleOnBoardingButton = () => { + saveLocalData(AppConfig.KEYS.FIRST_VISIT, 'true'); + window.location.reload(); + }; + const isUserLoggedIn = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN) !== null; return (
-
+
+ {isUserLoggedIn && ( + ); +}; diff --git a/frontend/src/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx index 131a1140..5b61b65f 100644 --- a/frontend/src/pages/AddChannel.tsx +++ b/frontend/src/pages/AddChannel.tsx @@ -188,8 +188,7 @@ export const AddChannel = () => { marker_style: user.marker_style, })), }; - const response = await createChannel(channelData); - console.log('채널 생성 성공:', response); + await createChannel(channelData); } catch (error) { console.error('채널 생성 실패:', error); } diff --git a/frontend/src/pages/DrawRoute.tsx b/frontend/src/pages/DrawRoute.tsx index ab16dd54..3b868799 100644 --- a/frontend/src/pages/DrawRoute.tsx +++ b/frontend/src/pages/DrawRoute.tsx @@ -10,8 +10,13 @@ import { getAddressFromCoordinates } from '@/utils/map/getAddress'; export const DrawRoute = () => { const { users, setUsers } = useContext(UserContext); - const { setFooterTitle, setFooterActive, setFooterOnClick, resetFooterContext } = - useContext(FooterContext); + const { + setFooterTitle, + setFooterActive, + setFooterOnClick, + setFooterTransparency, + resetFooterContext, + } = useContext(FooterContext); const { currentUser, setCurrentUser } = useContext(CurrentUserContext); const params = useParams>(); const navigate = useNavigate(); @@ -51,6 +56,7 @@ export const DrawRoute = () => { useEffect(() => { setFooterTitle('사용자 경로 추가 완료'); + setFooterTransparency(false); setFooterActive(buttonActiveType.PASSIVE); const user = getUser(); if (user) { diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index 1e599d7c..a25eec66 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -25,6 +25,7 @@ export const Main = () => { setFooterActive, resetFooterContext, } = useContext(FooterContext); + const mapRef = useRef(null); const { lat, lng, alpha, error } = getUserLocation(); const [otherLocations, setOtherLocations] = useState([]); const MIN_HEIGHT = 0.15; @@ -53,7 +54,6 @@ export const Main = () => { try { await deleteChannel(deleteTargetRef.current); setModalState('alert'); - console.log(modalState); } catch (err) { console.error('Failed to delete channel info:', err); } @@ -200,6 +200,7 @@ export const Main = () => { lat={lat} lng={lng} alpha={alpha} + ref={mapRef} otherLocations={otherLocations} /> ) : ( @@ -214,7 +215,14 @@ export const Main = () => { {isUserLoggedIn ? ( - + {channels.map(item => ( {
) : ( - +

로그인을 진행하여

From 56cc1da469aaa01531cbb1a7955e6cae3029fa8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 14:40:53 +0900 Subject: [PATCH 38/52] =?UTF-8?q?[FE][Feat]=20=EC=9E=98=EB=AA=BB=20?= =?UTF-8?q?=EB=A8=B8=EC=A7=80=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx | 2 +- frontend/vite.config.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 7ffe7c77..2b84e102 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -40,7 +40,7 @@ export const MapCanvasForView = forwardRef { mapInstance.destroy(); }; - }, [lat, lng]); + }, []); useImperativeHandle(ref, () => map as naver.maps.Map); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 62acd33c..345dbd45 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -5,7 +5,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'; // 추가된 부분 // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tsconfigPaths()], // tsconfigPaths 플러그인 추가 - // server: { - // hmr: false, // HMR 완전히 비활성화 - // }, + server: { + hmr: false, // HMR 완전히 비활성화 + }, }); From 093d5f19ea10325d8e7288614f11fd958b093f2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 14:42:01 +0900 Subject: [PATCH 39/52] =?UTF-8?q?[FE][Feat]=20build=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuestView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx index de77ebc6..3a568bd8 100644 --- a/frontend/src/pages/GuestView.tsx +++ b/frontend/src/pages/GuestView.tsx @@ -127,6 +127,7 @@ export const GuestView = () => { width="100%" height="100%" guests={[guestInfo]} + isMain={false} /> ) : ( From 43b85a0381742ae97fd61c573d5c8980ddcc849a Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 14:53:31 +0900 Subject: [PATCH 40/52] =?UTF-8?q?[FE][Fix]=20#258=20:=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=B0=BD,zoomslider=EC=97=90=EC=84=9C=20=ED=84=B0=EC=B9=98=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 검색창에서 터치로 스크롤되지 않는 문제 해결 - zoomslider에서 터치로 슬라이드되지 않는 문제 해결 --- .../src/component/searchbox/SearchBox.tsx | 44 ++++++++++++++++--- .../src/component/zoomslider/ZoomSlider.tsx | 24 +++++++--- 2 files changed, 56 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/searchbox/SearchBox.tsx b/frontend/src/component/searchbox/SearchBox.tsx index 658a5548..d5a338c9 100644 --- a/frontend/src/component/searchbox/SearchBox.tsx +++ b/frontend/src/component/searchbox/SearchBox.tsx @@ -146,13 +146,39 @@ export const SearchBox = (props: ISearchBoxProps) => { props.deleteMarker(); }; + const [, setScrollPosition] = useState(0); + const [touchStartY, setTouchStartY] = useState(null); + + const handleTouchStart = (e: React.TouchEvent) => { + // 터치 시작 지점 저장 + setTouchStartY(e.touches[0].clientY); + }; + + const handleTouchMove = (e: React.TouchEvent) => { + if (touchStartY !== null) { + const deltaY = e.touches[0].clientY - touchStartY; + + const scrollableElement = e.currentTarget; // 현재 스크롤이 가능한 요소 + const newScrollPosition = scrollableElement.scrollTop - deltaY; + + scrollableElement.scrollTop = newScrollPosition; + + setTouchStartY(e.touches[0].clientY); + + setScrollPosition(newScrollPosition); + } + }; + + const handleTouchEnd = () => { + setTouchStartY(null); + }; + return (
{ - e.stopPropagation(); - e.preventDefault(); - }} + onTouchStart={e => e.stopPropagation()} + onTouchMove={e => e.stopPropagation()} + onTouchEnd={e => e.stopPropagation()} > {/* 검색 입력 */}
@@ -172,7 +198,15 @@ export const SearchBox = (props: ISearchBoxProps) => { {/* 검색 결과 리스트 */} {searchResults.length > 0 && ( -
+
{loading &&

로딩 중...

} {error &&

{error}

} {searchResults.map(result => ( diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx index 60bdf072..facf1805 100644 --- a/frontend/src/component/zoomslider/ZoomSlider.tsx +++ b/frontend/src/component/zoomslider/ZoomSlider.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import { MdOutlineAdd, MdRemove } from 'react-icons/md'; import './ZoomSlider.css'; -import { DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts'; interface IZoomSliderProps { /** Naver 지도 객체 */ @@ -67,7 +66,7 @@ const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) = }; export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { - const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? DEFAULT_ZOOM); + const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10); useEffect(() => { if (!map) return undefined; @@ -88,7 +87,7 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { }; const handleSliderChange = (event: React.ChangeEvent) => { - const newZoom = parseInt(event.target.value, DEFAULT_ZOOM); + const newZoom = parseInt(event.target.value, 10); if (map) { map.setZoom(newZoom); setZoomLevel(newZoom); @@ -96,13 +95,24 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => { } }; + const handleTouchStart = (event: React.TouchEvent) => { + event.stopPropagation(); + }; + + const handleTouchMove = (event: React.TouchEvent) => { + event.stopPropagation(); + }; + + const handleTouchEnd = (event: React.TouchEvent) => { + event.stopPropagation(); + }; + return (
{ - e.stopPropagation(); - e.preventDefault(); - }} + onTouchStart={handleTouchStart} + onTouchMove={handleTouchMove} + onTouchEnd={handleTouchEnd} > } onClick={() => handleZoomChange(1)} /> From 6e19d63e89298e2c2eae03ea5f248641b97c6a00 Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 15:37:44 +0900 Subject: [PATCH 41/52] =?UTF-8?q?[FE][Fix]=20#441=20:=20BottomSheet=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - BottomSheet 이벤트 스크롤 문제 해결 --- .../src/component/bottomsheet/BottomSheet.tsx | 38 ++++++++++++++++++- .../canvasWithMapForView/MapCanvasForView.tsx | 10 ++--- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx index 68049087..358273d8 100644 --- a/frontend/src/component/bottomsheet/BottomSheet.tsx +++ b/frontend/src/component/bottomsheet/BottomSheet.tsx @@ -56,6 +56,32 @@ export const BottomSheet = ({ setSheetHeight(minHeight); }; + const [, setScrollPosition] = useState(0); + const [touchStartY, setTouchStartY] = useState(null); + + const handleContentTouchStart = (e: React.TouchEvent) => { + setTouchStartY(e.touches[0].clientY); + }; + + const handleContentTouchMove = (e: React.TouchEvent) => { + if (touchStartY !== null) { + const deltaY = e.touches[0].clientY - touchStartY; + + const scrollableElement = e.currentTarget; // 현재 스크롤이 가능한 요소 + const newScrollPosition = scrollableElement.scrollTop - deltaY; + + scrollableElement.scrollTop = newScrollPosition; + + setTouchStartY(e.touches[0].clientY); + + setScrollPosition(newScrollPosition); + } + }; + + const handleContentTouchEnd = () => { + setTouchStartY(null); + }; + return (
e.stopPropagation()} + onTouchMove={e => e.stopPropagation()} + onTouchEnd={e => e.stopPropagation()} >
-
{children}
+
+ {children} +
); }; diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 78c4c4ab..ae22b97f 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -4,7 +4,6 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction'; import { useRedrawCanvas } from '@/hooks/useRedraw'; import { ZoomSlider } from '@/component/zoomslider/ZoomSlider'; import { ICluster, useCluster } from '@/hooks/useCluster'; -import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts'; export const MapCanvasForView = forwardRef( ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => { @@ -22,8 +21,8 @@ export const MapCanvasForView = forwardRef { mapInstance.destroy(); }; - }, []); + }, [lat, lng]); const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => { if (!map || !projection || !canvasRef.current) return null; @@ -146,13 +145,14 @@ export const MapCanvasForView = forwardRef
From 7b6b674e3fb87e64c0ce3ad8ee53b1afa2e6cc54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 16:00:38 +0900 Subject: [PATCH 42/52] =?UTF-8?q?[FE][Feat]=20#429=20:=20=ED=98=84?= =?UTF-8?q?=EC=9E=AC=20=EC=9C=84=EC=B9=98=20=EB=B2=84=ED=8A=BC=20=EB=B0=94?= =?UTF-8?q?=ED=85=80=20=EC=8B=9C=ED=8A=B8=EC=97=90=20=EB=A7=9E=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/bottomsheet/BottomSheet.tsx | 63 +++++++++++-------- .../canvasWithMapForView/MapCanvasForView.tsx | 4 +- .../SetCurrentLocationButton.tsx | 6 +- 3 files changed, 41 insertions(+), 32 deletions(-) diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx index 7abcb937..eda28f3d 100644 --- a/frontend/src/component/bottomsheet/BottomSheet.tsx +++ b/frontend/src/component/bottomsheet/BottomSheet.tsx @@ -1,6 +1,7 @@ import React, { useState, useRef } from 'react'; import { MdClear } from 'react-icons/md'; -import { SetCurruntLocationButton } from '../setCurrentLocationButton/SetCurrentLocationButton'; +import classNames from 'classnames'; +import { SetCurrentLocationButton } from '../setCurrentLocationButton/SetCurrentLocationButton'; interface IBottomSheetProps { map: naver.maps.Map | null; @@ -62,38 +63,46 @@ export const BottomSheet = ({ const handleClose = () => { setSheetHeight(minHeight); }; - + console.log(sheetHeight); return ( -
-
- -
- + <>
-
+
-
- -
+
+
-
{children}
-
+
+ +
+ +
{children}
+
+ ); }; diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 2b84e102..a794b0c1 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -4,7 +4,7 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction'; import { useRedrawCanvas } from '@/hooks/useRedraw'; import { ZoomSlider } from '@/component/zoomslider/ZoomSlider'; import { ICluster, useCluster } from '@/hooks/useCluster'; -import { SetCurruntLocationButton } from '@/component/setCurrentLocationButton/SetCurrentLocationButton'; +import { SetCurrentLocationButton } from '@/component/setCurrentLocationButton/SetCurrentLocationButton'; import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts'; export const MapCanvasForView = forwardRef( @@ -171,7 +171,7 @@ export const MapCanvasForView = forwardRef
- {!isMain && } + {!isMain && }
); }, diff --git a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx index 8054fcb9..d1c808db 100644 --- a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx +++ b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx @@ -8,7 +8,7 @@ interface ISetCurruntLocationButton { isMain?: boolean; } -export const SetCurruntLocationButton = (props: ISetCurruntLocationButton) => { +export const SetCurrentLocationButton = (props: ISetCurruntLocationButton) => { const handleCurrentLocationButton = () => { if (props.lat && props.lng) { props.map?.setCenter(new window.naver.maps.LatLng(props.lat, props.lng)); @@ -21,8 +21,8 @@ export const SetCurruntLocationButton = (props: ISetCurruntLocationButton) => { type="button" onClick={() => handleCurrentLocationButton()} className={classNames( - 'bg-blueGray-800 shadow-floatButton absolute z-[5000] flex h-12 w-12 items-center justify-center rounded-full text-white', - props.isMain ? 'bottom-2 left-2' : 'bottom-5 left-5', + 'bg-blueGray-800 shadow-floatButton z-[5000] flex h-12 w-12 items-center justify-center rounded-full text-white', + props.isMain ? 'relative bottom-0 left-2' : 'absolute bottom-5 left-5', )} > From 363c68019003703f61cb4b6258ec3f9867cd3289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 16:08:08 +0900 Subject: [PATCH 43/52] =?UTF-8?q?[FE][Feat]=20#429=20:=20=ED=98=84?= =?UTF-8?q?=EC=9E=AC=20=EC=9C=84=EC=B9=98=20=EB=B2=84=ED=8A=BC=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=ED=81=AC=EA=B8=B0=20=EC=A6=9D=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../setCurrentLocationButton/SetCurrentLocationButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx index d1c808db..cadd6f7f 100644 --- a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx +++ b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx @@ -25,7 +25,7 @@ export const SetCurrentLocationButton = (props: ISetCurruntLocationButton) => { props.isMain ? 'relative bottom-0 left-2' : 'absolute bottom-5 left-5', )} > - + ); }; From 3a24a45ebd975112f7b63bad011f396c97aa3349 Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Thu, 5 Dec 2024 16:30:54 +0900 Subject: [PATCH 44/52] [FE][Fix] QA - QA --- .../canvasWithMapForView/MapCanvasForView.tsx | 7 ++++--- frontend/src/pages/Main.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 882d58a7..d70c7a78 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -5,6 +5,7 @@ import { useRedrawCanvas } from '@/hooks/useRedraw'; import { ZoomSlider } from '@/component/zoomslider/ZoomSlider'; import { ICluster, useCluster } from '@/hooks/useCluster'; import { SetCurrentLocationButton } from '@/component/setCurrentLocationButton/SetCurrentLocationButton'; +import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts'; export const MapCanvasForView = forwardRef( ( @@ -24,8 +25,8 @@ export const MapCanvasForView = forwardRef { mapInstance.destroy(); }; - }, [lat, lng]); + }, []); useImperativeHandle(ref, () => map as naver.maps.Map); diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index 9e1e8544..d80fe3ba 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -182,7 +182,7 @@ export const Main = () => { return (
-
+