From 7924374646b36be3ad2111f56c82adee4010eb7a Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 27 Sep 2023 17:36:33 +0900 Subject: [PATCH 01/13] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=95=84=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EB=B9=84=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EB=8F=84=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/AddSeeTogether/index.tsx | 22 +- frontend/src/components/Layout/Navbar.tsx | 231 ++++++++++++------ .../components/SeeTogetherCounter/index.tsx | 2 +- frontend/src/components/TopicCard/index.tsx | 9 +- frontend/src/components/TopicInfo/index.tsx | 5 + frontend/src/context/SeeTogetherContext.tsx | 8 +- frontend/src/pages/SelectedTopic.tsx | 1 - frontend/src/router.tsx | 10 - 8 files changed, 199 insertions(+), 89 deletions(-) diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx index 9acfed43..ca60407d 100644 --- a/frontend/src/components/AddSeeTogether/index.tsx +++ b/frontend/src/components/AddSeeTogether/index.tsx @@ -12,6 +12,7 @@ interface AddSeeTogetherProps { id: number; children: React.ReactNode; getTopicsFromServer: () => void; + onClickAtlas: () => void; } const AddSeeTogether = ({ @@ -19,11 +20,14 @@ const AddSeeTogether = ({ id, children, getTopicsFromServer, + onClickAtlas, }: AddSeeTogetherProps) => { const { showToast } = useToast(); const { seeTogetherTopics, setSeeTogetherTopics } = useContext(SeeTogetherContext); + const accessToken = localStorage.getItem('userToken'); + const addSeeTogetherList = async (e: React.MouseEvent) => { e.stopPropagation(); @@ -37,10 +41,11 @@ const AddSeeTogether = ({ const topics = await getApi('/members/my/atlas'); - setSeeTogetherTopics(topics); + setSeeTogetherTopics(topics.map((topic) => topic.id)); // TODO: 모아보기 페이지에서는 GET /members/my/atlas 두 번 됨 getTopicsFromServer(); + onClickAtlas(); showToast('info', '모아보기에 추가했습니다.'); } catch { @@ -56,10 +61,11 @@ const AddSeeTogether = ({ const topics = await getApi('/members/my/atlas'); - setSeeTogetherTopics(topics); + setSeeTogetherTopics(topics.map((topic) => topic.id)); // TODO: 모아보기 페이지에서는 GET /members/my/atlas 두 번 됨 getTopicsFromServer(); + onClickAtlas(); showToast('info', '해당 지도를 모아보기에서 제외했습니다.'); } catch { @@ -67,6 +73,18 @@ const AddSeeTogether = ({ } }; + const onChangeIsInAtlas = (e: React.MouseEvent) => { + e.stopPropagation(); + + setSeeTogetherTopics((prev) => [...prev, id]); + + onClickAtlas(); + }; + + if (accessToken === null) { + return {children}; + } + return ( {children} diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx index 085afe28..5ec0d425 100644 --- a/frontend/src/components/Layout/Navbar.tsx +++ b/frontend/src/components/Layout/Navbar.tsx @@ -4,6 +4,7 @@ import useNavigator from '../../hooks/useNavigator'; import Flex from '../common/Flex'; import Button from '../common/Button'; import Space from '../common/Space'; +import Text from '../common/Text'; import Home from '../../assets/nav_home.svg'; import SeeTogether from '../../assets/nav_seeTogether.svg'; import Favorite from '../../assets/nav_favorite.svg'; @@ -15,74 +16,155 @@ import FocusFavorite from '../../assets/nav_favorite_focus.svg'; import FocusAddMapOrPin from '../../assets/nav_addMapOrPin_focus.svg'; import FocusProfile from '../../assets/nav_profile_focus.svg'; import Modal from '../Modal'; -import { - NavbarHighlightKeys, - NavbarHighlightsContext, -} from '../../context/NavbarHighlightsContext'; -import NavbarItem from './NavbarItem'; +import { ModalContext } from '../../context/ModalContext'; +import { NavbarHighlightsContext } from '../../context/NavbarHighlightsContext'; +import { useParams } from 'react-router-dom'; +import SeeTogetherCounter from '../SeeTogetherCounter'; +import useKeyDown from '../../hooks/useKeyDown'; +import { SeeTogetherContext } from '../../context/SeeTogetherContext'; interface NavBarProps { $layoutWidth: '100vw' | '372px'; } -interface NavbarItemProps { - key: NavbarHighlightKeys; - label: string; - icon: React.FunctionComponent; - focusIcon: React.FunctionComponent; -} - -const NAV_ITEMS: NavbarItemProps[] = [ - { key: 'home', label: '홈', icon: Home, focusIcon: FocusHome }, - { - key: 'seeTogether', - label: '모아보기', - icon: SeeTogether, - focusIcon: FocusSeeTogether, - }, - { - key: 'addMapOrPin', - label: '추가하기', - icon: AddMapOrPin, - focusIcon: FocusAddMapOrPin, - }, - { - key: 'favorite', - label: '즐겨찾기', - icon: Favorite, - focusIcon: FocusFavorite, - }, - { - key: 'profile', - label: '내 정보', - icon: Profile, - focusIcon: FocusProfile, - }, -]; - const Navbar = ({ $layoutWidth }: NavBarProps) => { - const { routingHandlers } = useNavigator(); + const { routePage } = useNavigator(); + const { topicId } = useParams(); + const { openModal, closeModal } = useContext(ModalContext); const { navbarHighlights } = useContext(NavbarHighlightsContext); + const { elementRef: firstElement, onElementKeyDown: firstKeyDown } = + useKeyDown(); + const { elementRef: secondElement, onElementKeyDown: secondKeyDown } = + useKeyDown(); + const { elementRef: thirdElement, onElementKeyDown: thirdKeyDown } = + useKeyDown(); + const { elementRef: fourElement, onElementKeyDown: fourKeyDown } = + useKeyDown(); + const { elementRef: FifthElement, onElementKeyDown: FifthKeyDown } = + useKeyDown(); + const { seeTogetherTopics } = + useContext(SeeTogetherContext); + + const goToHome = () => { + routePage('/'); + }; + + const goToSeeTogether = () => { + routePage(`/topics/${seeTogetherTopics?.join(',')}`); + }; + + const onClickAddMapOrPin = () => { + openModal('addMapOrPin'); + }; + + const goToFavorite = () => { + routePage('/favorite'); + }; + + const goToProfile = () => { + routePage('/my-page'); + }; + + const goToNewTopic = () => { + routePage('/new-topic'); + closeModal('addMapOrPin'); + }; + + const goToNewPin = () => { + routePage('/new-pin', topicId); + closeModal('addMapOrPin'); + }; + return ( - <> - + + {navbarHighlights.home ? : } + + 홈 + + + + + {navbarHighlights.seeTogether ? : } + + 모아보기 + + + + + + {navbarHighlights.addMapOrPin ? : } + + 추가하기 + + + + - {NAV_ITEMS.map((item) => { - return ( - routingHandlers[item.key]()} - $layoutWidth={$layoutWidth} - /> - ); - })} - + {navbarHighlights.favorite ? : } + + 즐겨찾기 + + + + + {navbarHighlights.profile ? : } + + 내 정보 + + { left={$layoutWidth === '100vw' ? '' : `${372 / 2}px`} > - + 지도 추가하기 - + 핀 추가하기 - + ); }; @@ -141,6 +215,25 @@ const Wrapper = styled.nav<{ } `; +const IconWrapper = styled.div<{ $layoutWidth: '100vw' | '372px' }>` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 52px; + cursor: pointer; + margin-right: ${({ $layoutWidth }) => + $layoutWidth === '100vw' ? '48px' : '0'}; + + &:last-of-type { + margin-right: 0; + } + + @media (max-width: 1076px) { + margin-right: 0; + } +`; + const RouteButton = styled(Button)` box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5); `; diff --git a/frontend/src/components/SeeTogetherCounter/index.tsx b/frontend/src/components/SeeTogetherCounter/index.tsx index 4c372916..dec3fc93 100644 --- a/frontend/src/components/SeeTogetherCounter/index.tsx +++ b/frontend/src/components/SeeTogetherCounter/index.tsx @@ -16,7 +16,7 @@ const SeeTogetherCounter = () => { if (!userToken) return; const topics = await getApi('/members/my/atlas'); - setSeeTogetherTopics(topics); + setSeeTogetherTopics(topics.map((topic) => topic.id)); } catch { showToast( 'error', diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index 91f54434..6dc72af9 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -3,7 +3,7 @@ import Text from '../common/Text'; import useNavigator from '../../hooks/useNavigator'; import Box from '../common/Box'; import Image from '../common/Image'; -import { SyntheticEvent, useContext } from 'react'; +import { SyntheticEvent, useContext, useState } from 'react'; import Space from '../common/Space'; import Flex from '../common/Flex'; import FavoriteSVG from '../../assets/favoriteBtn_filled.svg'; @@ -47,6 +47,7 @@ const TopicCard = ({ const { routePage } = useNavigator(); const { closeModal } = useContext(ModalContext); const { elementRef, onElementKeyDown } = useKeyDown(); + const [atlas, setAtlas] = useState(isInAtlas); const goToSelectedTopic = () => { routePage(`/topics/${id}`, [id]); @@ -60,6 +61,9 @@ const TopicCard = ({ closeModal('newPin'); }; + const onChangeIsInAtlas = () => { + setAtlas(!atlas); + }; return ( - {isInAtlas ? : } + {atlas ? : } { + isInAtlas = !isInAtlas; + } + useEffect(() => { if (!isUpdate) setTopicsFromServer(); }, [isUpdate]); @@ -153,6 +157,7 @@ const TopicInfo = ({ diff --git a/frontend/src/context/SeeTogetherContext.tsx b/frontend/src/context/SeeTogetherContext.tsx index 81af69af..ed9d57fb 100644 --- a/frontend/src/context/SeeTogetherContext.tsx +++ b/frontend/src/context/SeeTogetherContext.tsx @@ -8,8 +8,8 @@ import { import { TopicCardProps } from '../types/Topic'; interface SeeTogetherContextProps { - seeTogetherTopics: TopicCardProps[] | null; - setSeeTogetherTopics: Dispatch>; + seeTogetherTopics: number[] | null; + setSeeTogetherTopics: Dispatch>; } interface SeeTogetherProviderProps { @@ -23,8 +23,8 @@ export const SeeTogetherContext = createContext({ const SeeTogetherProvider = ({ children }: SeeTogetherProviderProps) => { const [seeTogetherTopics, setSeeTogetherTopics] = useState< - TopicCardProps[] | null - >(null); + number[] | [] + >([]); return ( { import('./pages/SelectedTopic')); const NewPin = lazy(() => import('./pages/NewPin')); const NewTopic = lazy(() => import('./pages/NewTopic')); @@ -102,15 +101,6 @@ const routes: routeElement[] = [ ), withAuth: false, }, - { - path: 'see-together', - element: ( - - - - ), - withAuth: true, - }, { path: 'favorite', element: ( From 85528fb452bc6fe1387fb8d74c3d363badc5a288 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 27 Sep 2023 18:19:43 +0900 Subject: [PATCH 02/13] =?UTF-8?q?fix:=20=ED=99=94=EB=A9=B4=20=ED=84=B0?= =?UTF-8?q?=EC=A7=80=EB=8D=98=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Layout/Navbar.tsx | 2 +- frontend/src/pages/SelectedTopic.tsx | 47 +++++++++++++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx index 5ec0d425..592a56f3 100644 --- a/frontend/src/components/Layout/Navbar.tsx +++ b/frontend/src/components/Layout/Navbar.tsx @@ -50,7 +50,7 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => { }; const goToSeeTogether = () => { - routePage(`/topics/${seeTogetherTopics?.join(',')}`); + routePage(`/topics/${seeTogetherTopics?.length===0 ? -1 : seeTogetherTopics?.join(',')}`); }; const onClickAddMapOrPin = () => { diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx index 9321a7f5..3f21eb47 100644 --- a/frontend/src/pages/SelectedTopic.tsx +++ b/frontend/src/pages/SelectedTopic.tsx @@ -21,6 +21,11 @@ import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; import PinsOfTopicSkeleton from '../components/Skeletons/PinsOfTopicSkeleton'; import { TagContext } from '../context/TagContext'; import { PinProps } from '../types/Pin'; +import { SeeTogetherContext } from '../context/SeeTogetherContext'; +import Flex from '../components/common/Flex'; +import Button from '../components/common/Button'; +import SeeTogetherNotFilledSVG from '../assets/seeTogetherBtn_notFilled.svg'; +import Text from '../components/common/Text'; const PinsOfTopic = lazy(() => import('../components/PinsOfTopic')); @@ -38,8 +43,16 @@ const SelectedTopic = () => { const { tags, setTags } = useContext(TagContext); const { width } = useSetLayoutWidth(SIDEBAR); const { navbarHighlights: __ } = useSetNavbarHighlight('home'); + const { seeTogetherTopics, setSeeTogetherTopics } = + useContext(SeeTogetherContext); + + const goToHome = () => { + routePage('/'); + }; const getAndSetDataFromServer = async () => { + if (topicId === '-1') return; + const data = await getApi(`/topics/ids?ids=${topicId}`); const topicHashmap = new Map([]); @@ -105,6 +118,29 @@ const SelectedTopic = () => { setIsOpen(!isOpen); }; + console.log(topicId); + + if (!seeTogetherTopics) return <>; + + if (seeTogetherTopics.length === 0 && topicId === '-1') { + return ( + + + + + + 버튼을 눌러 지도를 추가해보세요. + + + + + + + ); + } + if (!topicDetails) return <>; if (!topicId) return <>; @@ -218,4 +254,15 @@ const ToggleButton = styled.button<{ } `; +const WrapperWhenEmpty = styled.section<{ width: '372px' | '100vw' }>` + width: ${({ width }) => `calc(${width} - 40px)`}; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin: 0 auto; +`; + export default SelectedTopic; From eb57e86a9dc979abe78ec4d335c2b30f10722706 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 27 Sep 2023 18:51:08 +0900 Subject: [PATCH 03/13] =?UTF-8?q?fix:=20=EB=AA=A8=EC=95=84=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EC=82=AD=EC=A0=9C=20=ED=95=98=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/AddSeeTogether/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx index ca60407d..2857fa28 100644 --- a/frontend/src/components/AddSeeTogether/index.tsx +++ b/frontend/src/components/AddSeeTogether/index.tsx @@ -76,7 +76,11 @@ const AddSeeTogether = ({ const onChangeIsInAtlas = (e: React.MouseEvent) => { e.stopPropagation(); - setSeeTogetherTopics((prev) => [...prev, id]); + if (seeTogetherTopics?.includes(id)) + setSeeTogetherTopics( + seeTogetherTopics.filter((topicId) => topicId !== id), + ); + else setSeeTogetherTopics((prev) => [...prev, id]); onClickAtlas(); }; From 0cbb0dd1dba216c68c5a46dad8a0bfc7415d5d94 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 27 Sep 2023 18:52:11 +0900 Subject: [PATCH 04/13] =?UTF-8?q?refactor:=20=EB=B9=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=20=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=99=88?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=A9=B4=20?= =?UTF-8?q?=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=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/Home.tsx | 12 ++++++++++-- frontend/src/pages/SelectedTopic.tsx | 2 -- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index b14bbd26..22596584 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -8,23 +8,31 @@ import { Suspense, lazy, useContext, useEffect } from 'react'; import { MarkerContext } from '../context/MarkerContext'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; import { setFullScreenResponsive } from '../constants/responsive'; +import { SeeTogetherContext } from '../context/SeeTogetherContext'; const TopicListContainer = lazy( () => import('../components/TopicCardContainer'), ); const Home = () => { - console.log(`${process.env.APP_URL}`, '환경변수 테스트'); const { routingHandlers } = useNavigator(); const { goToPopularTopics, goToLatestTopics, goToNearByMeTopics } = routingHandlers; - + const { seeTogetherTopics, setSeeTogetherTopics } = + useContext(SeeTogetherContext); const { markers, removeMarkers, removeInfowindows } = useContext(MarkerContext); + const accessToken = localStorage.getItem('userToken'); useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); + useEffect(() => { + if (accessToken === null && seeTogetherTopics?.length !== 0) { + setSeeTogetherTopics([]); + } + }, []); + useEffect(() => { if (markers && markers.length > 0) { removeMarkers(); diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx index 3f21eb47..996a5b52 100644 --- a/frontend/src/pages/SelectedTopic.tsx +++ b/frontend/src/pages/SelectedTopic.tsx @@ -118,8 +118,6 @@ const SelectedTopic = () => { setIsOpen(!isOpen); }; - console.log(topicId); - if (!seeTogetherTopics) return <>; if (seeTogetherTopics.length === 0 && topicId === '-1') { From b30ce94d992f64b24bf228a76a80a69b20f9b681 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 4 Oct 2023 19:57:51 +0900 Subject: [PATCH 05/13] =?UTF-8?q?refactor:=20=EC=B6=A9=EB=8F=8C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20=EA=B3=BC=EC=A0=95=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=A1=A4=EB=B0=B1=EB=90=9C=20Navbar=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=EC=BD=94=EB=93=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/components/Layout/Navbar.tsx | 244 +++++++--------------- 1 file changed, 71 insertions(+), 173 deletions(-) diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx index 592a56f3..e27791ea 100644 --- a/frontend/src/components/Layout/Navbar.tsx +++ b/frontend/src/components/Layout/Navbar.tsx @@ -4,7 +4,6 @@ import useNavigator from '../../hooks/useNavigator'; import Flex from '../common/Flex'; import Button from '../common/Button'; import Space from '../common/Space'; -import Text from '../common/Text'; import Home from '../../assets/nav_home.svg'; import SeeTogether from '../../assets/nav_seeTogether.svg'; import Favorite from '../../assets/nav_favorite.svg'; @@ -16,155 +15,71 @@ import FocusFavorite from '../../assets/nav_favorite_focus.svg'; import FocusAddMapOrPin from '../../assets/nav_addMapOrPin_focus.svg'; import FocusProfile from '../../assets/nav_profile_focus.svg'; import Modal from '../Modal'; -import { ModalContext } from '../../context/ModalContext'; -import { NavbarHighlightsContext } from '../../context/NavbarHighlightsContext'; -import { useParams } from 'react-router-dom'; -import SeeTogetherCounter from '../SeeTogetherCounter'; -import useKeyDown from '../../hooks/useKeyDown'; -import { SeeTogetherContext } from '../../context/SeeTogetherContext'; +import { + NavbarHighlightKeys, + NavbarHighlightsContext, +} from '../../context/NavbarHighlightsContext'; +import NavbarItem from './NavbarItem'; interface NavBarProps { $layoutWidth: '100vw' | '372px'; } -const Navbar = ({ $layoutWidth }: NavBarProps) => { - const { routePage } = useNavigator(); - const { topicId } = useParams(); - const { openModal, closeModal } = useContext(ModalContext); - const { navbarHighlights } = useContext(NavbarHighlightsContext); - const { elementRef: firstElement, onElementKeyDown: firstKeyDown } = - useKeyDown(); - const { elementRef: secondElement, onElementKeyDown: secondKeyDown } = - useKeyDown(); - const { elementRef: thirdElement, onElementKeyDown: thirdKeyDown } = - useKeyDown(); - const { elementRef: fourElement, onElementKeyDown: fourKeyDown } = - useKeyDown(); - const { elementRef: FifthElement, onElementKeyDown: FifthKeyDown } = - useKeyDown(); - const { seeTogetherTopics } = - useContext(SeeTogetherContext); - - const goToHome = () => { - routePage('/'); - }; - - const goToSeeTogether = () => { - routePage(`/topics/${seeTogetherTopics?.length===0 ? -1 : seeTogetherTopics?.join(',')}`); - }; - - const onClickAddMapOrPin = () => { - openModal('addMapOrPin'); - }; - - const goToFavorite = () => { - routePage('/favorite'); - }; - - const goToProfile = () => { - routePage('/my-page'); - }; - - const goToNewTopic = () => { - routePage('/new-topic'); - closeModal('addMapOrPin'); - }; +interface NavbarItemProps { + key: NavbarHighlightKeys; + label: string; + icon: React.FunctionComponent; + focusIcon: React.FunctionComponent; +} - const goToNewPin = () => { - routePage('/new-pin', topicId); - closeModal('addMapOrPin'); - }; +const NAV_ITEMS: NavbarItemProps[] = [ + { key: 'home', label: '홈', icon: Home, focusIcon: FocusHome }, + { + key: 'seeTogether', + label: '모아보기', + icon: SeeTogether, + focusIcon: FocusSeeTogether, + }, + { + key: 'addMapOrPin', + label: '추가하기', + icon: AddMapOrPin, + focusIcon: FocusAddMapOrPin, + }, + { + key: 'favorite', + label: '즐겨찾기', + icon: Favorite, + focusIcon: FocusFavorite, + }, + { + key: 'profile', + label: '내 정보', + icon: Profile, + focusIcon: FocusProfile, + }, +]; +const Navbar = ({ $layoutWidth }: NavBarProps) => { + const { routingHandlers } = useNavigator(); + const { navbarHighlights } = useContext(NavbarHighlightsContext); return ( - - - {navbarHighlights.home ? : } - - 홈 - - - - - {navbarHighlights.seeTogether ? : } - - 모아보기 - - - - - - {navbarHighlights.addMapOrPin ? : } - - 추가하기 - - - - - {navbarHighlights.favorite ? : } - - 즐겨찾기 - - - - - {navbarHighlights.profile ? : } - - 내 정보 - - + <> + + {NAV_ITEMS.map((item) => { + return ( + routingHandlers[item.key]()} + $layoutWidth={$layoutWidth} + /> + ); + })} + { width="252px" height="64px" $dimmedColor="rgba(0,0,0,0)" - top="calc(100vh - 100px)" + top="calc(var(--vh, 1vh) * 100 - 100px)" left={$layoutWidth === '100vw' ? '' : `${372 / 2}px`} > - + 지도 추가하기 - + 핀 추가하기 - + ); }; const Wrapper = styled.nav<{ - $isAddPage: boolean; $layoutWidth: '100vw' | '372px'; }>` width: 100%; @@ -205,32 +127,8 @@ const Wrapper = styled.nav<{ @media (max-width: 1076px) { justify-content: space-around; - - ${({ $isAddPage }) => - $isAddPage && - css` - position: fixed; - bottom: 0; - `} - } -`; - -const IconWrapper = styled.div<{ $layoutWidth: '100vw' | '372px' }>` - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: 52px; - cursor: pointer; - margin-right: ${({ $layoutWidth }) => - $layoutWidth === '100vw' ? '48px' : '0'}; - - &:last-of-type { - margin-right: 0; - } - - @media (max-width: 1076px) { - margin-right: 0; + position: fixed; + bottom: 0; } `; From a1c7eb7550794062f12a979c44b57e2c9f8c79af Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 4 Oct 2023 20:11:38 +0900 Subject: [PATCH 06/13] =?UTF-8?q?refactor:=20=EB=84=A4=EC=9D=B4=EB=B0=8D?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=9D=B4=20=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EB=B6=80=EB=B6=84=EB=93=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCard/index.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index 6dc72af9..a66baa4c 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -47,7 +47,8 @@ const TopicCard = ({ const { routePage } = useNavigator(); const { closeModal } = useContext(ModalContext); const { elementRef, onElementKeyDown } = useKeyDown(); - const [atlas, setAtlas] = useState(isInAtlas); + const [isInNonMemberAtlas, setIsInNonMemberAtlas] = + useState(isInAtlas); const goToSelectedTopic = () => { routePage(`/topics/${id}`, [id]); @@ -61,8 +62,8 @@ const TopicCard = ({ closeModal('newPin'); }; - const onChangeIsInAtlas = () => { - setAtlas(!atlas); + const onClickIsInAtlas = () => { + setIsInNonMemberAtlas(!isInNonMemberAtlas); }; return ( - {atlas ? : } + {isInNonMemberAtlas ? ( + + ) : ( + + )} Date: Wed, 4 Oct 2023 20:19:00 +0900 Subject: [PATCH 07/13] =?UTF-8?q?refactor:=20TopicInfo=EC=97=90=EC=84=9C?= =?UTF-8?q?=EB=8A=94=20=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20=EB=8B=B4?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=A0=9C=ED=95=9C=20=EB=B0=8F?= =?UTF-8?q?=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EC=95=8C=EB=A6=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicInfo/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx index b1284744..9c50d551 100644 --- a/frontend/src/components/TopicInfo/index.tsx +++ b/frontend/src/components/TopicInfo/index.tsx @@ -67,8 +67,8 @@ const TopicInfo = ({ }; const onChangeIsInAtlas = () => { - isInAtlas = !isInAtlas; - } + showToast('warning', '비회원은 홈에서만 모아보기에 담을 수 있습니다.'); + }; useEffect(() => { if (!isUpdate) setTopicsFromServer(); @@ -157,7 +157,7 @@ const TopicInfo = ({ From bbfda89f3847cfcdcf1772e579d90982fc4ee1bd Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 4 Oct 2023 20:37:09 +0900 Subject: [PATCH 08/13] =?UTF-8?q?refactor:=20NavBar=20=EB=A1=A4=EB=B0=B1?= =?UTF-8?q?=ED=95=98=EB=A9=B0=20=EB=B9=BC=EB=A8=B9=EC=9D=80=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20useNavigator=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useNavigator.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/hooks/useNavigator.ts b/frontend/src/hooks/useNavigator.ts index 77f76cde..84ba1355 100644 --- a/frontend/src/hooks/useNavigator.ts +++ b/frontend/src/hooks/useNavigator.ts @@ -1,12 +1,15 @@ import { useContext } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { ModalContext } from '../context/ModalContext'; +import { SeeTogetherContext } from '../context/SeeTogetherContext'; const useNavigator = () => { const navigator = useNavigate(); const { openModal, closeModal } = useContext(ModalContext); const { topicId } = useParams(); + const { seeTogetherTopics } = useContext(SeeTogetherContext); + const routePage = (url: string | -1, value?: string | number | number[]) => { if (typeof url === 'string') navigator(url, { state: value }); if (url === -1) navigator(url); @@ -15,7 +18,12 @@ const useNavigator = () => { return { routingHandlers: { home: () => routePage('/'), - seeTogether: () => routePage('/see-together'), + seeTogether: () => + routePage( + `/topics/${ + seeTogetherTopics?.length === 0 ? -1 : seeTogetherTopics?.join(',') + }`, + ), addMapOrPin: () => openModal('addMapOrPin'), favorite: () => routePage('/favorite'), profile: () => routePage('/my-page'), From d00ac55ed0c0e109a2b2b5a304bd5c13768443d3 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 4 Oct 2023 20:37:22 +0900 Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EC=96=B4=EC=A7=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/SeeTogetherTopics.tsx | 154 ----------------------- frontend/src/router.tsx | 1 - 2 files changed, 155 deletions(-) delete mode 100644 frontend/src/pages/SeeTogetherTopics.tsx diff --git a/frontend/src/pages/SeeTogetherTopics.tsx b/frontend/src/pages/SeeTogetherTopics.tsx deleted file mode 100644 index a4c5a0af..00000000 --- a/frontend/src/pages/SeeTogetherTopics.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { useContext } from 'react'; -import { SIDEBAR } from '../constants'; -import useNavigator from '../hooks/useNavigator'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import { SeeTogetherContext } from '../context/SeeTogetherContext'; -import Text from '../components/common/Text'; -import SeeTogetherNotFilledSVG from '../assets/seeTogetherBtn_notFilled.svg'; -import { styled } from 'styled-components'; -import Flex from '../components/common/Flex'; -import Space from '../components/common/Space'; -import TopicCard from '../components/TopicCard'; -import Button from '../components/common/Button'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import { deleteApi } from '../apis/deleteApi'; -import useToast from '../hooks/useToast'; -import { getApi } from '../apis/getApi'; -import { TopicCardProps } from '../types/Topic'; - -const SeeTogetherTopics = () => { - const { routePage } = useNavigator(); - const { width } = useSetLayoutWidth(SIDEBAR); - const { seeTogetherTopics, setSeeTogetherTopics } = - useContext(SeeTogetherContext); - const { showToast } = useToast(); - useSetNavbarHighlight('seeTogether'); - - const goToHome = () => { - routePage('/'); - }; - - const setTopicsFromServer = async () => { - try { - const topics = await getApi('/members/my/atlas'); - - setSeeTogetherTopics(topics); - } catch { - showToast('error', '로그인 후 이용해주세요.'); - } - }; - - const goToSelectedTopic = () => { - if (!seeTogetherTopics) return; - - const seeTogetherTopicIds = seeTogetherTopics - .map((topic) => topic.id) - .join(','); - - routePage(`/topics/${seeTogetherTopicIds}`, seeTogetherTopicIds); - }; - - const onClickDeleteSeeTogetherTopics = () => { - if (!seeTogetherTopics) return; - - const deleteTopics = seeTogetherTopics; - - try { - deleteTopics.forEach(async (topic) => { - await deleteApi(`/atlas/topics?id=${topic.id}`); - }); - - showToast('info', '모아보기를 비웠습니다.'); - - setSeeTogetherTopics([]); - } catch (e) { - showToast('info', '모아보기를 비우는데 실패했습니다.'); - } - }; - - if (!seeTogetherTopics) return <>; - - if (seeTogetherTopics.length === 0) { - return ( - - - - - - 버튼을 눌러 지도를 추가해보세요. - - - - - - - ); - } - - return ( - - - {seeTogetherTopics.map((topic, idx) => ( -
    - - {idx !== seeTogetherTopics.length - 1 ? : <>} -
- ))} - - - - - - - - - - - ); -}; - -const Wrapper = styled.section<{ width: '372px' | '100vw' }>` - width: ${({ width }) => `calc(${width} - 40px)`}; - height: 100%; - display: flex; - flex-direction: column; - - margin: 0 auto; -`; - -const WrapperWhenEmpty = styled.section<{ width: '372px' | '100vw' }>` - width: ${({ width }) => `calc(${width} - 40px)`}; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - margin: 0 auto; -`; - -const ButtonsWrapper = styled.div` - display: flex; - justify-content: end; - align-items: center; -`; - -export default SeeTogetherTopics; diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index a4e2dbd9..e285b5a3 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -12,7 +12,6 @@ const SeeAllPopularTopics = lazy(() => import('./pages/SeeAllPopularTopics')); const SeeAllNearTopics = lazy(() => import('./pages/SeeAllNearTopics')); const SeeAllLatestTopics = lazy(() => import('./pages/SeeAllLatestTopics')); const KakaoRedirect = lazy(() => import('./pages/KakaoRedirect')); -const SeeTogetherTopics = lazy(() => import('./pages/SeeTogetherTopics')); const Profile = lazy(() => import('./pages/Profile')); const AskLogin = lazy(() => import('./pages/AskLogin')); const Bookmark = lazy(() => import('./pages/Bookmark')); From 07c91b2dee6980296e6f82f02b214c0b1c642659 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Thu, 5 Oct 2023 16:45:47 +0900 Subject: [PATCH 10/13] =?UTF-8?q?fix:=20pinDetail=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20split=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicInfo/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx index 9c50d551..d3142da4 100644 --- a/frontend/src/components/TopicInfo/index.tsx +++ b/frontend/src/components/TopicInfo/index.tsx @@ -158,7 +158,7 @@ const TopicInfo = ({ {isInAtlas ? ( @@ -170,7 +170,7 @@ const TopicInfo = ({ {isBookmarked ? : } From a5d9a9fd78e9e957556b9b6116c2dbb6c9a7c1ef Mon Sep 17 00:00:00 2001 From: GC-Park Date: Thu, 5 Oct 2023 16:55:27 +0900 Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20=EB=B9=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EB=95=8C=20=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=ED=95=A0=20=EC=8B=9C=20toast=20=EC=95=8C=EB=9E=8C=20=EB=9C=A8?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCard/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index a66baa4c..fa26eb74 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -18,6 +18,7 @@ import AddFavorite from '../AddFavorite'; import { TopicCardProps } from '../../types/Topic'; import useKeyDown from '../../hooks/useKeyDown'; import { ModalContext } from '../../context/ModalContext'; +import useToast from '../../hooks/useToast'; interface OnClickDesignatedProps { topicId: number; @@ -49,6 +50,7 @@ const TopicCard = ({ const { elementRef, onElementKeyDown } = useKeyDown(); const [isInNonMemberAtlas, setIsInNonMemberAtlas] = useState(isInAtlas); + const { showToast } = useToast(); const goToSelectedTopic = () => { routePage(`/topics/${id}`, [id]); @@ -64,6 +66,11 @@ const TopicCard = ({ const onClickIsInAtlas = () => { setIsInNonMemberAtlas(!isInNonMemberAtlas); + if (!isInNonMemberAtlas) { + showToast('info', '모아보기에 추가했습니다.'); + return; + } + showToast('info', '해당 지도를 모아보기에서 제외했습니다.'); }; return ( Date: Thu, 5 Oct 2023 17:09:24 +0900 Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20topicInfo=EC=97=90=EC=84=9C?= =?UTF-8?q?=EB=8A=94=20=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=95=88=EB=90=98=EB=8F=84=EB=A1=9D=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 --- frontend/src/components/AddSeeTogether/index.tsx | 16 +++++++++------- frontend/src/components/TopicCard/index.tsx | 3 ++- frontend/src/components/TopicInfo/index.tsx | 1 + 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx index 2857fa28..afffe28e 100644 --- a/frontend/src/components/AddSeeTogether/index.tsx +++ b/frontend/src/components/AddSeeTogether/index.tsx @@ -12,7 +12,7 @@ interface AddSeeTogetherProps { id: number; children: React.ReactNode; getTopicsFromServer: () => void; - onClickAtlas: () => void; + onClickAtlas: () => boolean; } const AddSeeTogether = ({ @@ -76,13 +76,15 @@ const AddSeeTogether = ({ const onChangeIsInAtlas = (e: React.MouseEvent) => { e.stopPropagation(); - if (seeTogetherTopics?.includes(id)) - setSeeTogetherTopics( - seeTogetherTopics.filter((topicId) => topicId !== id), - ); - else setSeeTogetherTopics((prev) => [...prev, id]); + const isChangeAtlas = onClickAtlas(); - onClickAtlas(); + if (isChangeAtlas) { + if (seeTogetherTopics?.includes(id)) + setSeeTogetherTopics( + seeTogetherTopics.filter((topicId) => topicId !== id), + ); + else setSeeTogetherTopics((prev) => [...prev, id]); + } }; if (accessToken === null) { diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index fa26eb74..637e6e29 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -68,9 +68,10 @@ const TopicCard = ({ setIsInNonMemberAtlas(!isInNonMemberAtlas); if (!isInNonMemberAtlas) { showToast('info', '모아보기에 추가했습니다.'); - return; + return true; } showToast('info', '해당 지도를 모아보기에서 제외했습니다.'); + return true; }; return ( { showToast('warning', '비회원은 홈에서만 모아보기에 담을 수 있습니다.'); + return false; }; useEffect(() => { From 930261cf829dec89b374d63e70433ffc1a9022fd Mon Sep 17 00:00:00 2001 From: GC-Park Date: Fri, 6 Oct 2023 10:44:42 +0900 Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=95=84=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20highlight=20=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/SelectedTopic.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx index 996a5b52..67a96749 100644 --- a/frontend/src/pages/SelectedTopic.tsx +++ b/frontend/src/pages/SelectedTopic.tsx @@ -42,7 +42,9 @@ const SelectedTopic = () => { const { setCoordinates } = useContext(CoordinatesContext); const { tags, setTags } = useContext(TagContext); const { width } = useSetLayoutWidth(SIDEBAR); - const { navbarHighlights: __ } = useSetNavbarHighlight('home'); + const { navbarHighlights: __ } = useSetNavbarHighlight( + topicId && topicId.split(',').length > 1 ? 'seeTogether' : 'home', + ); const { seeTogetherTopics, setSeeTogetherTopics } = useContext(SeeTogetherContext);