From 9de7bd3e3b94b0e7fb8d22dde7c8ae5ce40e2621 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:45:11 +0900 Subject: [PATCH 01/17] =?UTF-8?q?fix:=20location=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD,=20place,=20customPlace=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Place/DetailPlaceForm.tsx | 8 +++++++- frontend/src/components/Place/SearchResults.tsx | 6 ++++-- frontend/src/types/index.ts | 12 +++++++----- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Place/DetailPlaceForm.tsx b/frontend/src/components/Place/DetailPlaceForm.tsx index c7b181c3..37ef28f0 100644 --- a/frontend/src/components/Place/DetailPlaceForm.tsx +++ b/frontend/src/components/Place/DetailPlaceForm.tsx @@ -73,7 +73,13 @@ const DetailPlaceForm = () => { 완료 - + ); }; diff --git a/frontend/src/components/Place/SearchResults.tsx b/frontend/src/components/Place/SearchResults.tsx index 611780f0..0ad92469 100644 --- a/frontend/src/components/Place/SearchResults.tsx +++ b/frontend/src/components/Place/SearchResults.tsx @@ -20,7 +20,6 @@ const SearchResults = ({ query }: SearchResultsProps) => { return lastPage.length > 4 ? lastPage.length : undefined; }, }); - const isEmptyResults = (data?: { pages: Place[][] }) => !data?.pages || data.pages.every((page) => page.length === 0); @@ -38,7 +37,10 @@ const SearchResults = ({ query }: SearchResultsProps) => { ))} diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 00acacd9..05761575 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -5,8 +5,8 @@ export type Place = { id: number; name: string; location: { - lat: number; - lng: number; + latitude: number; + longitude: number; }; google_place_id: string; detail_page_url: string; @@ -18,11 +18,13 @@ export type Place = { export type Map = { id: number; - author: User; - thumbnail_url: string; + user: User; title: string; + isPublic: boolean; + thumbnailUrl: string; description: string; - places: Place[]; + pinCount: number; + places: (Place & CustomPlace)[]; }; export type MapList = { From 7c1a807698f801eb209d3fc1e4300168c5daea94 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:46:53 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=ED=8E=98=EC=9D=B4=EC=A7=80=20=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Form/EditMapForm.tsx | 51 +++++++++++++++++++ frontend/src/components/Map/EditMapButton.tsx | 21 ++++++++ frontend/src/hooks/api/useEditMapMutation.ts | 17 +++++++ frontend/src/pages/MapEditPage.tsx | 18 +++++++ 4 files changed, 107 insertions(+) create mode 100644 frontend/src/components/Form/EditMapForm.tsx create mode 100644 frontend/src/components/Map/EditMapButton.tsx create mode 100644 frontend/src/hooks/api/useEditMapMutation.ts create mode 100644 frontend/src/pages/MapEditPage.tsx diff --git a/frontend/src/components/Form/EditMapForm.tsx b/frontend/src/components/Form/EditMapForm.tsx new file mode 100644 index 00000000..55c80520 --- /dev/null +++ b/frontend/src/components/Form/EditMapForm.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import BaseWrapper from '../common/BaseWrapper'; +import FormWrapper from './FormWrapper'; +import { BaseMap, Map } from '@/types'; +import { useEditMapMutation } from '@/hooks/api/useEditMapMutation'; +import { useMapForm } from '@/hooks/useMapForm'; + +import PlaceListPanel from '../Place/PlaceListPanel'; +import { useNavigate } from 'react-router-dom'; + +type EditMapFormProps = { + mapData: Map; +}; + +const EditMapForm = ({ mapData }: EditMapFormProps) => { + const editMapMutation = useEditMapMutation(); + const navigate = useNavigate(); + const initialMapData: BaseMap = { + title: mapData.title, + description: mapData.description, + isPublic: mapData.isPublic, + thumbnailUrl: mapData.thumbnailUrl, + mode: 'MAP', + }; + + const { mapInfo, updateMapInfo, isMapInfoValid } = useMapForm(initialMapData); + + const onSubmitHandler = (e: React.FormEvent) => { + e.preventDefault(); + editMapMutation.mutate({ mapId: mapData.id, ...mapInfo }); + navigate(`/map/${mapData.id}`); + }; + console.log(mapData); + return ( + <> + + + + + + ); +}; + +export default EditMapForm; diff --git a/frontend/src/components/Map/EditMapButton.tsx b/frontend/src/components/Map/EditMapButton.tsx new file mode 100644 index 00000000..e0e66266 --- /dev/null +++ b/frontend/src/components/Map/EditMapButton.tsx @@ -0,0 +1,21 @@ +import { useNavigate } from 'react-router-dom'; + +type EditMapButtonProps = { + mapId: number; + text: string; +}; + +const EditMapButton = ({ mapId, text }: EditMapButtonProps) => { + const navigate = useNavigate(); + + const onClick = () => { + navigate(`/edit/map/${mapId}`); + }; + return ( + + ); +}; + +export default EditMapButton; diff --git a/frontend/src/hooks/api/useEditMapMutation.ts b/frontend/src/hooks/api/useEditMapMutation.ts new file mode 100644 index 00000000..a881a44a --- /dev/null +++ b/frontend/src/hooks/api/useEditMapMutation.ts @@ -0,0 +1,17 @@ +import { editMap } from '@/api/map'; + +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +export const useEditMapMutation = () => { + const queryClient = useQueryClient(); + + const addMapMutation = useMutation({ + mutationFn: editMap, + onSuccess: (data) => { + const mapId = data?.id; + queryClient.invalidateQueries({ queryKey: ['map', mapId] }); + }, + }); + + return addMapMutation; +}; diff --git a/frontend/src/pages/MapEditPage.tsx b/frontend/src/pages/MapEditPage.tsx new file mode 100644 index 00000000..40de7327 --- /dev/null +++ b/frontend/src/pages/MapEditPage.tsx @@ -0,0 +1,18 @@ +import SideContainer from '@/components/common/SideContainer'; +import EditMapForm from '@/components/Form/EditMapForm'; + +import { useMapQuery } from '@/hooks/api/useMapQuery'; + +import { useParams } from 'react-router-dom'; + +const MapEditPage = () => { + const { id } = useParams(); + const mapData = useMapQuery(Number(id)); + return ( + + + + ); +}; + +export default MapEditPage; From 65e654502d7b253f2cc109d8748fae5cac0a4f3a Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:48:40 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EB=B3=B4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Map/MapDetailBoard.tsx | 70 +++++++++++++++++++ frontend/src/components/Map/MapThumbnail.tsx | 15 ++++ frontend/src/hooks/api/useMapQuery.ts | 8 +-- .../src/pages/MapDetail/MapDetailPage.tsx | 12 ++++ 4 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 frontend/src/components/Map/MapDetailBoard.tsx create mode 100644 frontend/src/components/Map/MapThumbnail.tsx create mode 100644 frontend/src/pages/MapDetail/MapDetailPage.tsx diff --git a/frontend/src/components/Map/MapDetailBoard.tsx b/frontend/src/components/Map/MapDetailBoard.tsx new file mode 100644 index 00000000..c42f0938 --- /dev/null +++ b/frontend/src/components/Map/MapDetailBoard.tsx @@ -0,0 +1,70 @@ +import BaseWrapper from '@/components/common/BaseWrapper'; +import Box from '@/components/common/Box'; +import DashBoardHeader from '@/components/common/DashBoardHeader'; +import { Map } from '@/types'; +import PlaceItem from '@/components/Place/PlaceItem'; +import { useMemo, useState } from 'react'; +import PlaceDetailPanel from '@/components/Place/PlaceDetailPanel'; +import { useStore } from '@/store/useStore'; +import SideContainer from '@/components/common/SideContainer'; +import Marker from '@/components/Marker/Marker'; +import DeleteMapButton from './DeleteMapButton'; +import EditMapButton from './EditMapButton'; + +type MapDetailBoardProps = { + mapData: Map; +}; + +const MapDetailBoard = ({ mapData }: MapDetailBoardProps) => { + const { title, description, isPublic, thumbnailUrl, pinCount, places } = + mapData; + const [isSidePanelOpen, setIsSidePanelOpen] = useState(false); + const activePlace = useStore((state) => state.place); + const customPlace = useMemo( + () => places.find((place) => place.id === activePlace.id), + [places, activePlace], + ); + + return ( + + + +
+ +
+ +

|

+ +
+
+ map +

{title}

+

지도 소개

+

{description}

+ + + {places.map((place) => ( +
setIsSidePanelOpen(true)}> + + +
+ ))} + + + {isSidePanelOpen && customPlace && ( + setIsSidePanelOpen(false)} + /> + )} + + ); +}; + +export default MapDetailBoard; diff --git a/frontend/src/components/Map/MapThumbnail.tsx b/frontend/src/components/Map/MapThumbnail.tsx new file mode 100644 index 00000000..3145bb07 --- /dev/null +++ b/frontend/src/components/Map/MapThumbnail.tsx @@ -0,0 +1,15 @@ +import image from '../../assets/Map.jpg'; + +type MapThumbnailProps = { + className?: string; +}; + +const MapThumbnail = ({ className }: MapThumbnailProps) => { + return ( +
+ 지도 썸네일 +
+ ); +}; + +export default MapThumbnail; diff --git a/frontend/src/hooks/api/useMapQuery.ts b/frontend/src/hooks/api/useMapQuery.ts index 14cae085..3295ad45 100644 --- a/frontend/src/hooks/api/useMapQuery.ts +++ b/frontend/src/hooks/api/useMapQuery.ts @@ -1,11 +1,11 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { getMap } from '@/api/map'; import { Map } from '@/types'; -export const useGetMap = (mapId: number) => { - const { data: mapData } = useQuery({ +export const useMapQuery = (mapId: number) => { + const { data } = useSuspenseQuery({ queryKey: ['map', mapId], queryFn: () => getMap(mapId), }); - return { mapData }; + return data; }; diff --git a/frontend/src/pages/MapDetail/MapDetailPage.tsx b/frontend/src/pages/MapDetail/MapDetailPage.tsx new file mode 100644 index 00000000..d519527f --- /dev/null +++ b/frontend/src/pages/MapDetail/MapDetailPage.tsx @@ -0,0 +1,12 @@ +import MapDetailBoard from '@/components/Map/MapDetailBoard'; +import { useMapQuery } from '@/hooks/api/useMapQuery'; +import { useParams } from 'react-router-dom'; + +const MapDetailPage = () => { + const { id } = useParams(); + const mapData = useMapQuery(Number(id)); + + return ; +}; + +export default MapDetailPage; From f4aad3c9aa017621fb648c6a223abe6d391ff7fc Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:49:12 +0900 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B5=AC=ED=98=84=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Map/DeleteMapButton.tsx | 23 +++++++++++++++++++ .../components/Place/DeletePlaceButton.tsx | 17 ++++++++++++++ .../src/hooks/api/useDeleteMapMutation.ts | 15 ++++++++++++ .../src/hooks/api/useDeletePlaceMutation.ts | 16 +++++++++++++ 4 files changed, 71 insertions(+) create mode 100644 frontend/src/components/Map/DeleteMapButton.tsx create mode 100644 frontend/src/components/Place/DeletePlaceButton.tsx create mode 100644 frontend/src/hooks/api/useDeleteMapMutation.ts create mode 100644 frontend/src/hooks/api/useDeletePlaceMutation.ts diff --git a/frontend/src/components/Map/DeleteMapButton.tsx b/frontend/src/components/Map/DeleteMapButton.tsx new file mode 100644 index 00000000..f4e055c5 --- /dev/null +++ b/frontend/src/components/Map/DeleteMapButton.tsx @@ -0,0 +1,23 @@ +import useDeleteMapMutation from '@/hooks/api/useDeleteMapMutation'; + +/**todo : 삭제 모달 구현*/ + +type DeleteMapButtonProps = { + mapId: number; + text: string; +}; + +const DeleteMapButton = ({ mapId, text }: DeleteMapButtonProps) => { + const deleteMutation = useDeleteMapMutation(); + + const onClick = () => { + deleteMutation.mutate(mapId); + }; + return ( + + ); +}; + +export default DeleteMapButton; diff --git a/frontend/src/components/Place/DeletePlaceButton.tsx b/frontend/src/components/Place/DeletePlaceButton.tsx new file mode 100644 index 00000000..838ae37e --- /dev/null +++ b/frontend/src/components/Place/DeletePlaceButton.tsx @@ -0,0 +1,17 @@ +import useDeletePlaceMutation from '@/hooks/api/useDeletePlaceMutation'; +import { useParams } from 'react-router-dom'; + +type DeletePlaceButtonProps = { + placeId: number; +}; + +const DeletePlaceButton = ({ placeId }: DeletePlaceButtonProps) => { + const id = Number(useParams().id); + const deletePlaceMutation = useDeletePlaceMutation(); + const onClick = () => { + deletePlaceMutation.mutate({ id, placeId }); + }; + return ; +}; + +export default DeletePlaceButton; diff --git a/frontend/src/hooks/api/useDeleteMapMutation.ts b/frontend/src/hooks/api/useDeleteMapMutation.ts new file mode 100644 index 00000000..72f6b2cf --- /dev/null +++ b/frontend/src/hooks/api/useDeleteMapMutation.ts @@ -0,0 +1,15 @@ +import { deleteMap } from '@/api/map'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +const useDeleteMapMutation = () => { + const queryClient = useQueryClient(); + const deleteMutation = useMutation({ + mutationFn: deleteMap, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['maps'] }); + }, + }); + return deleteMutation; +}; + +export default useDeleteMapMutation; diff --git a/frontend/src/hooks/api/useDeletePlaceMutation.ts b/frontend/src/hooks/api/useDeletePlaceMutation.ts new file mode 100644 index 00000000..c2b4a17b --- /dev/null +++ b/frontend/src/hooks/api/useDeletePlaceMutation.ts @@ -0,0 +1,16 @@ +import { deletePlaceToMap } from '@/api/place'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +const useDeletePlaceMutation = () => { + const queryClient = useQueryClient(); + const deleteMutation = useMutation({ + mutationFn: deletePlaceToMap, + onSuccess: (data) => { + const id = data?.id; + queryClient.invalidateQueries({ queryKey: ['map', id] }); + }, + }); + return deleteMutation; +}; + +export default useDeletePlaceMutation; From dc7ded0d1a48649e25f3e0bfc5f3fbbb08628650 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:50:21 +0900 Subject: [PATCH 05/17] =?UTF-8?q?Refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Place/AddPlaceButton.tsx | 2 +- frontend/src/components/Place/PlaceItem.tsx | 23 ++++++++++--------- frontend/src/constants/api.ts | 6 ++++- frontend/src/hooks/useInfiniteScroll.ts | 9 +++++--- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/Place/AddPlaceButton.tsx b/frontend/src/components/Place/AddPlaceButton.tsx index 6264cea4..28de1686 100644 --- a/frontend/src/components/Place/AddPlaceButton.tsx +++ b/frontend/src/components/Place/AddPlaceButton.tsx @@ -10,7 +10,7 @@ const AddPlaceButton = () => { ); diff --git a/frontend/src/components/common/Option.tsx b/frontend/src/components/common/Option.tsx index eeb7411e..d0fb54cc 100644 --- a/frontend/src/components/common/Option.tsx +++ b/frontend/src/components/common/Option.tsx @@ -8,6 +8,7 @@ type OptionProps = { const Option = ({ label, description, isSelected, onClick }: OptionProps) => { const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); onClick(); } }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 4db0b1da..abf447b9 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -5,6 +5,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { StrictMode } from 'react'; +const isDevelopment = process.env.NODE_ENV === 'development'; + const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, ); @@ -22,9 +24,7 @@ root.render( - {process.env.NODE_ENV === 'development' && ( - - )} + {isDevelopment && } , ); From 2212797ab7fc1095a5736ade6d9a91757b2ee0fc Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:52:13 +0900 Subject: [PATCH 08/17] =?UTF-8?q?fix:=20=EA=B2=BD=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/{ => Map}/MapItem.tsx | 2 +- frontend/src/components/{ => Map}/MapListPanel.tsx | 12 +++++------- frontend/src/components/MapThumbnail.tsx | 13 ------------- 3 files changed, 6 insertions(+), 21 deletions(-) rename frontend/src/components/{ => Map}/MapItem.tsx (95%) rename frontend/src/components/{ => Map}/MapListPanel.tsx (82%) delete mode 100644 frontend/src/components/MapThumbnail.tsx diff --git a/frontend/src/components/MapItem.tsx b/frontend/src/components/Map/MapItem.tsx similarity index 95% rename from frontend/src/components/MapItem.tsx rename to frontend/src/components/Map/MapItem.tsx index e820454f..fb38a9ff 100644 --- a/frontend/src/components/MapItem.tsx +++ b/frontend/src/components/Map/MapItem.tsx @@ -1,6 +1,6 @@ import { MapItemType } from '@/types'; import { Link } from 'react-router-dom'; -import PinIcon from './PinIcon'; +import PinIcon from '@/components/PinIcon'; import MapThumbnail from './MapThumbnail'; type MapItemProps = { diff --git a/frontend/src/components/MapListPanel.tsx b/frontend/src/components/Map/MapListPanel.tsx similarity index 82% rename from frontend/src/components/MapListPanel.tsx rename to frontend/src/components/Map/MapListPanel.tsx index 5acaf3a0..a56c1d81 100644 --- a/frontend/src/components/MapListPanel.tsx +++ b/frontend/src/components/Map/MapListPanel.tsx @@ -2,8 +2,8 @@ import { getMapList } from '@/api/map'; import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'; import { MapItemType, MapList } from '@/types'; import React from 'react'; -import MapItem from './MapItem'; -import NavigateButton from './common/NavigateButton'; +import MapItem from '@/components/Map/MapItem'; +import NavigateButton from '@/components/common/NavigateButton'; const MapListPanel = () => { const { data, isFetchingNextPage, hasNextPage, ref } = @@ -15,7 +15,7 @@ const MapListPanel = () => { ? lastPage.currentPage + 1 : undefined; }, - defaultFetch: true, + fetchWithoutQuery: true, }); return ( <> @@ -30,14 +30,12 @@ const MapListPanel = () => { {data?.pages.map((page, index) => ( {page.maps.map((map: MapItemType) => ( - - - + ))} ))} -
+
); }; diff --git a/frontend/src/components/MapThumbnail.tsx b/frontend/src/components/MapThumbnail.tsx deleted file mode 100644 index 9a587516..00000000 --- a/frontend/src/components/MapThumbnail.tsx +++ /dev/null @@ -1,13 +0,0 @@ -type MapThumbnailProps = { - className?: string; -}; - -const MapThumbnail = ({ className }: MapThumbnailProps) => { - return ( -
- Map Thumbnail -
- ); -}; - -export default MapThumbnail; From c8975e8e8be970993f3e63ce67b8e37051487e69 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:52:51 +0900 Subject: [PATCH 09/17] =?UTF-8?q?fix:=20=EA=B2=BD=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Place/SearchPanel.tsx | 2 +- frontend/src/pages/HomePage/HomePage.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Place/SearchPanel.tsx b/frontend/src/components/Place/SearchPanel.tsx index 3eb55fe1..2b48ad01 100644 --- a/frontend/src/components/Place/SearchPanel.tsx +++ b/frontend/src/components/Place/SearchPanel.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import BaseWrapper from '@/components/common/BaseWrapper'; import Box from '@/components/common/Box'; -import DashBoardHeader from '../common/DashBoardHeader'; +import DashBoardHeader from '@/components/common/DashBoardHeader'; import SearchBar from './SearchBar'; import SearchResults from './SearchResults'; diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx index 75dd7fdd..5aa720ce 100644 --- a/frontend/src/pages/HomePage/HomePage.tsx +++ b/frontend/src/pages/HomePage/HomePage.tsx @@ -1,7 +1,6 @@ import Footer from '@/pages/HomePage/Footer'; import Header from '@/pages/HomePage/Header'; -import NavigateButton from '@/components/common/NavigateButton'; -import MapListPanel from '@/components/MapListPanel'; +import MapListPanel from '@/components/Map/MapListPanel'; const Homepage = () => { return ( From 1097bab221b05a687081f5493c1b182c3329e680 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:53:13 +0900 Subject: [PATCH 10/17] =?UTF-8?q?style:=20=ED=8C=8C=EB=B9=84=EC=BD=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 2 +- frontend/public/{push-pin_17069602.svg => pin.svg} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename frontend/public/{push-pin_17069602.svg => pin.svg} (100%) diff --git a/frontend/index.html b/frontend/index.html index ae5525a3..43598265 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,7 @@ - + diff --git a/frontend/public/push-pin_17069602.svg b/frontend/public/pin.svg similarity index 100% rename from frontend/public/push-pin_17069602.svg rename to frontend/public/pin.svg From c3faf66acfa1462e52680fd83fa3b428653068df Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:53:46 +0900 Subject: [PATCH 11/17] =?UTF-8?q?feat:=20=EC=9E=A5=EC=86=8C=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Place/PlaceDetailPanel.tsx | 33 +++++++++++++++ .../src/components/Place/PlaceListPanel.tsx | 42 +++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 frontend/src/components/Place/PlaceDetailPanel.tsx create mode 100644 frontend/src/components/Place/PlaceListPanel.tsx diff --git a/frontend/src/components/Place/PlaceDetailPanel.tsx b/frontend/src/components/Place/PlaceDetailPanel.tsx new file mode 100644 index 00000000..ae62e625 --- /dev/null +++ b/frontend/src/components/Place/PlaceDetailPanel.tsx @@ -0,0 +1,33 @@ +import { CustomPlace, Place } from '@/types'; +import BaseWrapper from '../common/BaseWrapper'; +import DashBoardHeader from '../common/DashBoardHeader'; +import Box from '../common/Box'; +import PlaceItem from './PlaceItem'; +import PrevIcon from '../common/PrevIcon'; + +type PlaceDetailPanelProps = { + place: Place & CustomPlace; + onClosed: () => void; +}; + +const PlaceDetailPanel = ({ place, onClosed }: PlaceDetailPanelProps) => { + return ( + + + +

+ 장소 상세 정보 +

+ + + +

한줄평

+

{place.comment}

+ + + ); +}; + +export default PlaceDetailPanel; diff --git a/frontend/src/components/Place/PlaceListPanel.tsx b/frontend/src/components/Place/PlaceListPanel.tsx new file mode 100644 index 00000000..de28f92f --- /dev/null +++ b/frontend/src/components/Place/PlaceListPanel.tsx @@ -0,0 +1,42 @@ +import { CustomPlace, Place } from '@/types'; +import BaseWrapper from '../common/BaseWrapper'; +import Box from '../common/Box'; +import PlaceItem from './PlaceItem'; +import React, { useState } from 'react'; +import Marker from '../Marker/Marker'; + +type PlaceListPanelProps = { + places: (Place & CustomPlace)[]; +}; + +const PlaceListPanel = ({ places }: PlaceListPanelProps) => { + const [deleteMode, setDeleteMode] = useState(false); + return ( + + + + {places.map((place) => ( + + + + + ))} + + + ); +}; + +export default PlaceListPanel; From 3d7ae93423ef806c5d7df02ee6f7800a31fdbe42 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:54:02 +0900 Subject: [PATCH 12/17] =?UTF-8?q?Refactor:=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Place/SearchBar.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Place/SearchBar.tsx b/frontend/src/components/Place/SearchBar.tsx index 32da05a4..e097bb6f 100644 --- a/frontend/src/components/Place/SearchBar.tsx +++ b/frontend/src/components/Place/SearchBar.tsx @@ -8,17 +8,16 @@ type SearchBarProps = { const SearchBar = ({ onSearch }: SearchBarProps) => { const [input, setInput] = useState(''); + const isValidInput = (input: string) => input.trim().length > 0; + + const handleKeyPress = (e: React.KeyboardEvent) => + e.key === 'Enter' && handleSearch(); + const handleSearch = () => { - if (!input.trim()) return; + if (!isValidInput(input)) return; onSearch(input); }; - const handleKeyPress = (e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - handleSearch(); - } - }; - return (
Date: Mon, 18 Nov 2024 08:54:27 +0900 Subject: [PATCH 13/17] =?UTF-8?q?Refactor:=20props=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Form/FormWrapper.tsx | 40 +++++++++++--------- frontend/src/components/Place/CheckIcon.tsx | 18 +++++++-- frontend/src/components/common/PrevIcon.tsx | 8 ++-- 3 files changed, 43 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/Form/FormWrapper.tsx b/frontend/src/components/Form/FormWrapper.tsx index c2809580..78d98813 100644 --- a/frontend/src/components/Form/FormWrapper.tsx +++ b/frontend/src/components/Form/FormWrapper.tsx @@ -11,6 +11,7 @@ type FormWrapperProps = { updateMapInfo: (field: K, value: BaseMap[K]) => void; isMapInfoValid: boolean; onSubmitHandler: (e: React.FormEvent) => void; + isEditMode?: boolean; }; const FormWrapper = ({ @@ -19,6 +20,7 @@ const FormWrapper = ({ updateMapInfo, isMapInfoValid, onSubmitHandler, + isEditMode = false, }: FormWrapperProps) => { const { title, description, isPublic, mode, thumbnailUrl } = mapInfo; @@ -27,16 +29,18 @@ const FormWrapper = ({
- + {!isEditMode && ( + + )}
- + + +
); diff --git a/frontend/src/components/Place/CheckIcon.tsx b/frontend/src/components/Place/CheckIcon.tsx index b88d3771..f4d95aa9 100644 --- a/frontend/src/components/Place/CheckIcon.tsx +++ b/frontend/src/components/Place/CheckIcon.tsx @@ -1,11 +1,23 @@ -const CheckIcon = () => { +type CheckIconProps = { + width?: number; + height?: number; + className?: string; +}; + +const CheckIcon = ({ + width = 24, + height = 24, + className = '', +}: CheckIconProps) => { return ( { +const PrevIcon = ({ width = 24, height = 24, className }: PrevIconProps) => { return ( Date: Mon, 18 Nov 2024 08:54:43 +0900 Subject: [PATCH 14/17] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20api=20=EA=B5=AC=ED=98=84=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/map/index.ts | 61 +++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/frontend/src/api/map/index.ts b/frontend/src/api/map/index.ts index 69d044e0..eafb051e 100644 --- a/frontend/src/api/map/index.ts +++ b/frontend/src/api/map/index.ts @@ -5,6 +5,15 @@ import { END_POINTS } from '@/constants/api'; type MapResponse = { id: number; }; +type EditInfoResponse = { + id: number; + title: string; + description: string; +}; +type EditVisResponse = { + id: number; + isPublic: boolean; +}; export const getMap = async (mapId: number) => { const { data } = await axiosInstance.get(END_POINTS.MAP(mapId)); @@ -37,3 +46,55 @@ export const getCourseList = async () => { const { data } = await axiosInstance.get(END_POINTS.COURSES); return data; }; + +export const editMapInfo = async ({ + title, + description, + mapId, +}: { + title: string; + description: string; + mapId: number; +}) => { + const { data } = await axiosInstance.patch( + END_POINTS.EDIT_MAP_INFO(mapId), + { + title, + description, + }, + ); + return data; +}; + +export const editMapVisibility = async ({ + mapId, + isPublic, +}: { + mapId: number; + isPublic: boolean; +}) => { + const { data } = await axiosInstance.patch( + END_POINTS.EDIT_MAP_VISIBILITY(mapId), + { + isPublic, + }, + ); + return data; +}; + +export const editMap = async (data: BaseMap & { mapId: number }) => { + const [infoResponse, visibilityResponse] = await Promise.all([ + editMapInfo({ + title: data.title, + description: data.description, + mapId: data.mapId, + }), + editMapVisibility({ mapId: data.mapId, isPublic: data.isPublic }), + ]); + return { ...infoResponse, ...visibilityResponse }; +}; + +export const deleteMap = async (mapId: number) => { + const { data } = await axiosInstance.delete(END_POINTS.MAP(mapId)); + return data; +}; From cae7dedc8426444c72395964a7478165ff4e13d6 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:55:09 +0900 Subject: [PATCH 15/17] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EB=B0=8F=20=EC=84=9C=EC=8A=A4=ED=8E=9C=EC=8A=A4=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9e6adb6e..d42db837 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,13 +6,26 @@ import MapCreateCoursePage from '@/pages/MapCreation/MapCreateCoursePage'; import PlaceCreatePage from '@/pages/PlaceCreation/PlaceCreatePage'; import LayoutCreate from '@/LayoutCreate'; import NotFound from './pages/NotFound'; +import MapDetailPage from './pages/MapDetail/MapDetailPage'; +import { Suspense } from 'react'; +import MapEditPage from './pages/MapEditPage'; function App() { return ( } /> - }> + + Loading...
}> + + + } + > + } /> + }> } /> @@ -21,6 +34,12 @@ function App() { } /> } /> + }> + } /> + } /> + } /> + } /> + } /> From 92fa85181e1f1a192a364943cc3cb39bcc6853b2 Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:55:33 +0900 Subject: [PATCH 16/17] =?UTF-8?q?Refactor:=20button=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/PrevNavButton.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/common/PrevNavButton.tsx b/frontend/src/components/common/PrevNavButton.tsx index 751c4419..fe4e949c 100644 --- a/frontend/src/components/common/PrevNavButton.tsx +++ b/frontend/src/components/common/PrevNavButton.tsx @@ -4,7 +4,11 @@ import PrevIcon from './PrevIcon'; const PrevNavButton = () => { const navigate = useNavigate(); return ( - ); From 0dade624f6ec5b0a406937f2b455c367036c733b Mon Sep 17 00:00:00 2001 From: 1119wj <1119wj@naver.com> Date: Mon, 18 Nov 2024 08:55:51 +0900 Subject: [PATCH 17/17] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=ED=83=AD=20=ED=99=95=EC=9E=A5=EC=9C=84=ED=95=9C=20=EC=BB=A8?= =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=84=88=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #preview --- frontend/src/components/common/SideContainer.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/components/common/SideContainer.tsx diff --git a/frontend/src/components/common/SideContainer.tsx b/frontend/src/components/common/SideContainer.tsx new file mode 100644 index 00000000..4579ce9c --- /dev/null +++ b/frontend/src/components/common/SideContainer.tsx @@ -0,0 +1,15 @@ +const SideContainer = ({ + children, + className = '', +}: { + children: React.ReactNode; + className?: string; +}) => ( +
+ {children} +
+); + +export default SideContainer;