From 99faae74bcd80d9075153df650fdc22800bd733c Mon Sep 17 00:00:00 2001 From: Patrick Date: Tue, 15 Aug 2023 22:09:05 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EB=82=B4=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/InfoDefalutImg.svg | 2 +- frontend/src/components/Layout/index.tsx | 24 ++- frontend/src/components/MyInfo/index.tsx | 7 +- .../MyInfoContainer/MyInfoList/index.tsx | 161 ++++++++++++++++++ .../src/components/MyInfoContainer/index.tsx | 67 ++++++++ .../src/components/NotFound/LoginError.tsx | 10 +- frontend/src/components/PinCard/index.tsx | 68 ++++++++ frontend/src/components/TopicCard/index.tsx | 2 + frontend/src/pages/MyInfoPage.tsx | 48 ++++++ frontend/src/router.tsx | 6 +- frontend/src/types/MyInfo.ts | 19 +++ 11 files changed, 402 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/MyInfoContainer/MyInfoList/index.tsx create mode 100644 frontend/src/components/MyInfoContainer/index.tsx create mode 100644 frontend/src/components/PinCard/index.tsx create mode 100644 frontend/src/pages/MyInfoPage.tsx diff --git a/frontend/src/assets/InfoDefalutImg.svg b/frontend/src/assets/InfoDefalutImg.svg index 6c7f9a2e..edafb60a 100644 --- a/frontend/src/assets/InfoDefalutImg.svg +++ b/frontend/src/assets/InfoDefalutImg.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx index 66a92ea3..17cc6eb0 100644 --- a/frontend/src/components/Layout/index.tsx +++ b/frontend/src/components/Layout/index.tsx @@ -14,6 +14,7 @@ import Navbar from './Navbar'; import Back from '../../assets/Back.svg'; import ModalProvider from '../../context/ModalContext'; import NavbarHighlightsProvider from '../../context/NavbarHighlightsContext'; +import InfoDefalutImg from '../../assets/InfoDefalutImg.svg'; type LayoutProps = { children: React.ReactNode; @@ -30,6 +31,11 @@ const Layout = ({ children }: LayoutProps) => { const { Tmapv3 } = window; const mapContainer = useRef(null); const { width } = useContext(LayoutWidthContext); + const isLogined = localStorage.getItem('userToken'); + + const loginButtonClick = () => { + window.location.href = 'https://mapbefine.kro.kr/api/oauth/kakao'; + }; const [map, setMap] = useState(null); @@ -58,9 +64,16 @@ const Layout = ({ children }: LayoutProps) => { height="100vh" $backgroundColor="white" > - + - + {isLogined ? ( + + ) : ( + + )} { $justifyContent="center" $alignItems="center" > - {isThereImg ? ( - - ) : ( - - )} + @@ -66,6 +62,7 @@ const MyInfo = () => { }; const MyInfoContainer = styled(Flex)` + position: relative; border: 1px solid ${({ theme }) => theme.color.lightGray}; `; diff --git a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx new file mode 100644 index 00000000..dd822ac5 --- /dev/null +++ b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx @@ -0,0 +1,161 @@ +import { Fragment, useEffect, useState } from 'react'; +import { styled } from 'styled-components'; +import { getApi } from '../../../apis/getApi'; +import { MyInfoPinType, MyInfoTopicType } from '../../../types/MyInfo'; +import PinCard from '../../PinCard'; +import TopicCard from '../../TopicCard'; + +const data = [ + { + id: 1, + name: '준팍의 또 토픽', + image: 'https://map-befine-official.github.io/favicon.png', + pinCount: 3, + bookmarkCount: 0, + isBookmarked: false, + updatedAt: '2023-08-14T13:15:40.15966098', + }, + { + id: 2, + name: '준팍의 두번째 토픽', + image: 'https://map-befine-official.github.io/favicon.png', + pinCount: 5, + bookmarkCount: 0, + isBookmarked: false, + updatedAt: '2023-08-14T13:15:40.15966888', + }, + { + id: 3, + name: '준팍의 또 토픽', + image: 'https://map-befine-official.github.io/favicon.png', + pinCount: 3, + bookmarkCount: 0, + isBookmarked: false, + updatedAt: '2023-08-14T13:15:40.15966098', + }, + { + id: 4, + name: '준팍의 두번째 토픽', + image: 'https://map-befine-official.github.io/favicon.png', + pinCount: 5, + bookmarkCount: 0, + isBookmarked: false, + updatedAt: '2023-08-14T13:15:40.15966888', + }, +]; + +const data2 = [ + { + id: 1, + name: '매튜의 산스장', + address: '지번 주소', + description: '매튜가 사랑하는 산스장', + latitude: 37.0, + longitude: 127.0, + }, + { + id: 2, + name: '매튜의 안갈집', + address: '지번 주소', + description: '매튜가 두번은 안 갈 집', + latitude: 37.0, + longitude: 127.0, + }, + { + id: 3, + name: '매튜의 산스장', + address: '지번 주소', + description: '매튜가 사랑하는 산스장', + latitude: 37.0, + longitude: 127.0, + }, + { + id: 4, + name: '매튜의 안갈집', + address: '지번 주소', + description: '매튜가 두번은 안 갈 집', + latitude: 37.0, + longitude: 127.0, + }, +]; + +interface MyInfoListProps { + isTopic: boolean; +} + +const MyInfoList = ({ isTopic }: MyInfoListProps) => { + const [myInfoTopics, setMyInfoTopics] = useState([]); + const [myInfoPins, setMyInfoPins] = useState([]); + + const getMyInfoListFromServer = async () => { + if (isTopic) { + const serverMyInfoTopics = await getApi( + 'default', + '/members/pins', + ); + setMyInfoTopics(serverMyInfoTopics); + } + + if (!isTopic) { + const serverMyInfoPins = await getApi( + 'default', + '/members/topics', + ); + setMyInfoPins(serverMyInfoPins); + } + }; + + useEffect(() => { + // getMyInfoListFromServer(); + }, []); + + if (!isTopic) + return ( + + {data2.map((pin, index) => { + return ( + index < 3 && ( + + + + ) + ); + })} + + ); + + if (!data) return <>; + + return ( + + {data.map((topic, index) => { + return ( + index < 3 && ( + + + + ) + ); + })} + + ); +}; + +const MyInfoListWrapper = styled.ul` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + grid-row-gap: ${({ theme }) => theme.spacing[5]}; +`; + +export default MyInfoList; diff --git a/frontend/src/components/MyInfoContainer/index.tsx b/frontend/src/components/MyInfoContainer/index.tsx new file mode 100644 index 00000000..600453e8 --- /dev/null +++ b/frontend/src/components/MyInfoContainer/index.tsx @@ -0,0 +1,67 @@ +import { styled } from 'styled-components'; +import Flex from '../common/Flex'; +import Text from '../common/Text'; +import Box from '../common/Box'; +import Space from '../common/Space'; +import { lazy, Suspense } from 'react'; +import TopicCardListSeleton from '../TopicCardList/TopicCardListSeleton'; +import Button from '../common/Button'; +import MyInfoList from './MyInfoList'; + +interface MyInfoContainerProps { + containerTitle: string; + containerDescription: string; + routeWhenSeeAll: () => void; +} + +const MyInfoContainer = ({ + containerTitle, + containerDescription, + routeWhenSeeAll, +}: MyInfoContainerProps) => ( +
+ + + + {containerTitle} + + + + {containerDescription} + + + + { + + 전체 보기 + + } + + + + + }> + {containerTitle === '나의 핀' ? ( + + ) : ( + + )} + +
+); + +const SeeAllButton = styled(Button)` + cursor: pointer; +`; + +export default MyInfoContainer; diff --git a/frontend/src/components/NotFound/LoginError.tsx b/frontend/src/components/NotFound/LoginError.tsx index e410b7d0..b6a1877b 100644 --- a/frontend/src/components/NotFound/LoginError.tsx +++ b/frontend/src/components/NotFound/LoginError.tsx @@ -6,12 +6,16 @@ import Space from '../common/Space'; import Text from '../common/Text'; const LoginError = () => { + const loginButtonClick = () => { + window.location.href = 'https://mapbefine.kro.kr/api/oauth/kakao'; + }; + return ( @@ -25,7 +29,9 @@ const LoginError = () => { 나만의 지도를 만들어 보세요. - 카카오로 시작하기 + + 카카오로 시작하기 + ); diff --git a/frontend/src/components/PinCard/index.tsx b/frontend/src/components/PinCard/index.tsx new file mode 100644 index 00000000..c1d6c951 --- /dev/null +++ b/frontend/src/components/PinCard/index.tsx @@ -0,0 +1,68 @@ +import { styled } from 'styled-components'; +import Text from '../common/Text'; +import useNavigator from '../../hooks/useNavigator'; +import Box from '../common/Box'; +import Image from '../common/Image'; +import { SyntheticEvent } from 'react'; +import Space from '../common/Space'; +import Flex from '../common/Flex'; +import FavoriteSVG from '../../assets/favoriteBtn_filled.svg'; +import SeeTogetherSVG from '../../assets/seeTogetherBtn_filled.svg'; +import SmallTopicPin from '../../assets/smallTopicPin.svg'; +import SmallTopicStar from '../../assets/smallTopicStar.svg'; +import { DEFAULT_TOPIC_IMAGE } from '../../constants'; +import AddSeeTogether from '../AddSeeTogether'; +import AddFavorite from '../AddFavorite'; + +export interface PinCardProps { + pinId: number; + pinTitle: string; + pinAddress: string; + pinDescription: string; +} + +const PinCard = ({ + pinId, + pinTitle, + pinAddress, + pinDescription, +}: PinCardProps) => { + const { routePage } = useNavigator(); + + return ( + + + + + + {pinTitle} + + + + + + + {pinAddress} + + + + + {pinDescription} + + + + + ); +}; + +const Wrapper = styled.li` + width: 332px; + height: 140px; + cursor: pointer; + border: 1px solid ${({ theme }) => theme.color.gray}; + border-radius: ${({ theme }) => theme.radius.small}; + + margin: 0 auto; +`; + +export default PinCard; diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index 739a43c6..b4049f65 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -107,6 +107,8 @@ const Wrapper = styled.li` cursor: pointer; border: 1px solid ${({ theme }) => theme.color.gray}; border-radius: ${({ theme }) => theme.radius.small}; + + margin: 0 auto; `; const ButtonWrapper = styled.div` diff --git a/frontend/src/pages/MyInfoPage.tsx b/frontend/src/pages/MyInfoPage.tsx new file mode 100644 index 00000000..0860f4d0 --- /dev/null +++ b/frontend/src/pages/MyInfoPage.tsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import { styled } from 'styled-components'; +import Box from '../components/common/Box'; +import Flex from '../components/common/Flex'; +import Space from '../components/common/Space'; +import MyInfo from '../components/MyInfo'; +import MyInfoContainer from '../components/MyInfoContainer'; +import useNavigator from '../hooks/useNavigator'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; + +const MyInfoPage = () => { + const { routePage } = useNavigator(); + const { navbarHighlights: __ } = useSetNavbarHighlight('profile'); + + const goToPopularTopics = () => { + routePage('/see-all/popularity'); + }; + + return ( + + + + + + + + + + ); +}; + +const MyInfoPageWrapper = styled(Box)` + width: 70vw; + margin: 0 auto; +`; + +const MyInfoWrapper = styled(Flex)` + margin-top: ${({ theme }) => theme.spacing[6]}; +`; +export default MyInfoPage; diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 2e4720c9..b42f51b4 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -16,6 +16,8 @@ import AskLoginPage from './pages/AskLoginPage'; import { ReactNode } from 'react'; import AuthLayout from './components/Layout/AuthLayout'; import NotFound from './components/NotFound'; +import MyInfoPage from './pages/MyInfoPage'; +import LoginError from './components/NotFound/LoginError'; interface routeElement { path: string; @@ -81,7 +83,7 @@ const routes: routeElement[] = [ }, { path: 'my-page', - element: , + element: , withAuth: true, }, { @@ -91,7 +93,7 @@ const routes: routeElement[] = [ }, { path: '/askLogin', - element: , + element: , withAuth: false, }, ], diff --git a/frontend/src/types/MyInfo.ts b/frontend/src/types/MyInfo.ts index 352df24d..8e3b8619 100644 --- a/frontend/src/types/MyInfo.ts +++ b/frontend/src/types/MyInfo.ts @@ -2,3 +2,22 @@ export interface MyInfoType { name: string; email: string; } + +export interface MyInfoTopicType { + id: number; + name: string; + image: string; + pinCount: number; + bookmarkCount: number; + isBookmarked: boolean; + updatedAt: string; +} + +export interface MyInfoPinType { + id: number; + name: string; + address: string; + description: string; + latitude: number; + longitude: number; +} From dc13809100fd7c4a532331c6f8111cde12a59054 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 16 Aug 2023 10:27:34 +0900 Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20early=20return=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=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/MyInfoContainer/MyInfoList/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx index dd822ac5..84200dd2 100644 --- a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx +++ b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx @@ -109,6 +109,9 @@ const MyInfoList = ({ isTopic }: MyInfoListProps) => { // getMyInfoListFromServer(); }, []); + if (!data) return <>; + if (!data2) return <>; + if (!isTopic) return ( @@ -129,8 +132,6 @@ const MyInfoList = ({ isTopic }: MyInfoListProps) => { ); - if (!data) return <>; - return ( {data.map((topic, index) => { From c8eaa483843af0aff2a49e7627b2a52ef5460460 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 16 Aug 2023 10:40:06 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20width=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/NotFound/LoginError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/NotFound/LoginError.tsx b/frontend/src/components/NotFound/LoginError.tsx index b6a1877b..b8b62d3f 100644 --- a/frontend/src/components/NotFound/LoginError.tsx +++ b/frontend/src/components/NotFound/LoginError.tsx @@ -15,7 +15,7 @@ const LoginError = () => { $flexDirection="column" $justifyContent="center" $alignItems="center" - width="100%" + width="100vw" height="100vh" > From fbaa97696d23d5567377c1184d73ecef5e0f0f58 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 16 Aug 2023 10:45:25 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20MyInfoPage=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=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/MyInfoPage.tsx | 48 ------------------------------- frontend/src/pages/Profile.tsx | 43 +++++++++++++++++++++++++-- frontend/src/router.tsx | 5 ++-- 3 files changed, 43 insertions(+), 53 deletions(-) delete mode 100644 frontend/src/pages/MyInfoPage.tsx diff --git a/frontend/src/pages/MyInfoPage.tsx b/frontend/src/pages/MyInfoPage.tsx deleted file mode 100644 index 0860f4d0..00000000 --- a/frontend/src/pages/MyInfoPage.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useState } from 'react'; -import { styled } from 'styled-components'; -import Box from '../components/common/Box'; -import Flex from '../components/common/Flex'; -import Space from '../components/common/Space'; -import MyInfo from '../components/MyInfo'; -import MyInfoContainer from '../components/MyInfoContainer'; -import useNavigator from '../hooks/useNavigator'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; - -const MyInfoPage = () => { - const { routePage } = useNavigator(); - const { navbarHighlights: __ } = useSetNavbarHighlight('profile'); - - const goToPopularTopics = () => { - routePage('/see-all/popularity'); - }; - - return ( - - - - - - - - - - ); -}; - -const MyInfoPageWrapper = styled(Box)` - width: 70vw; - margin: 0 auto; -`; - -const MyInfoWrapper = styled(Flex)` - margin-top: ${({ theme }) => theme.spacing[6]}; -`; -export default MyInfoPage; diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index cf3fe697..e08a0993 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -1,9 +1,48 @@ +import { useState } from 'react'; +import { styled } from 'styled-components'; +import Box from '../components/common/Box'; +import Flex from '../components/common/Flex'; +import Space from '../components/common/Space'; +import MyInfo from '../components/MyInfo'; +import MyInfoContainer from '../components/MyInfoContainer'; +import useNavigator from '../hooks/useNavigator'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; const Profile = () => { - const { navbarHighlights: _ } = useSetNavbarHighlight('profile'); + const { routePage } = useNavigator(); + const { navbarHighlights: __ } = useSetNavbarHighlight('profile'); - return
profile
; + const goToPopularTopics = () => { + routePage('/see-all/popularity'); + }; + + return ( + + + + + + + + + + ); }; +const ProfileWrapper = styled(Box)` + width: 70vw; + margin: 0 auto; +`; + +const MyInfoWrapper = styled(Flex)` + margin-top: ${({ theme }) => theme.spacing[6]}; +`; export default Profile; diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index b42f51b4..d3a9029a 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -9,14 +9,13 @@ import SeeAllNearTopics from './pages/SeeAllNearTopics'; import SeeAllLatestTopics from './pages/SeeAllLatestTopics'; import SeeTogetherTopics from './pages/SeeTogetherTopics'; import Favorite from './pages/Favorite'; -import Profile from './pages/Profile'; import KakaoRedirectPage from './pages/KaKaoRedirectPage'; import ErrorPage from './pages/ErrorPage'; import AskLoginPage from './pages/AskLoginPage'; import { ReactNode } from 'react'; import AuthLayout from './components/Layout/AuthLayout'; import NotFound from './components/NotFound'; -import MyInfoPage from './pages/MyInfoPage'; +import Profile from './pages/Profile'; import LoginError from './components/NotFound/LoginError'; interface routeElement { @@ -83,7 +82,7 @@ const routes: routeElement[] = [ }, { path: 'my-page', - element: , + element: , withAuth: true, }, { From 0847d46909a78ada55d0519ba11604c67f64cf2b Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 16 Aug 2023 14:39:00 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20Profile=20=EB=82=B4=20=ED=86=A0?= =?UTF-8?q?=ED=94=BD=20get=20=EC=9A=94=EC=B2=AD=20=EB=B0=9B=EC=95=84=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=9B=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 --- .../MyInfoContainer/MyInfoList/index.tsx | 148 +++--------------- .../src/components/MyInfoContainer/index.tsx | 14 +- frontend/src/pages/Profile.tsx | 7 - 3 files changed, 19 insertions(+), 150 deletions(-) diff --git a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx index 84200dd2..f69c2d1b 100644 --- a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx +++ b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx @@ -5,148 +5,36 @@ import { MyInfoPinType, MyInfoTopicType } from '../../../types/MyInfo'; import PinCard from '../../PinCard'; import TopicCard from '../../TopicCard'; -const data = [ - { - id: 1, - name: '준팍의 또 토픽', - image: 'https://map-befine-official.github.io/favicon.png', - pinCount: 3, - bookmarkCount: 0, - isBookmarked: false, - updatedAt: '2023-08-14T13:15:40.15966098', - }, - { - id: 2, - name: '준팍의 두번째 토픽', - image: 'https://map-befine-official.github.io/favicon.png', - pinCount: 5, - bookmarkCount: 0, - isBookmarked: false, - updatedAt: '2023-08-14T13:15:40.15966888', - }, - { - id: 3, - name: '준팍의 또 토픽', - image: 'https://map-befine-official.github.io/favicon.png', - pinCount: 3, - bookmarkCount: 0, - isBookmarked: false, - updatedAt: '2023-08-14T13:15:40.15966098', - }, - { - id: 4, - name: '준팍의 두번째 토픽', - image: 'https://map-befine-official.github.io/favicon.png', - pinCount: 5, - bookmarkCount: 0, - isBookmarked: false, - updatedAt: '2023-08-14T13:15:40.15966888', - }, -]; - -const data2 = [ - { - id: 1, - name: '매튜의 산스장', - address: '지번 주소', - description: '매튜가 사랑하는 산스장', - latitude: 37.0, - longitude: 127.0, - }, - { - id: 2, - name: '매튜의 안갈집', - address: '지번 주소', - description: '매튜가 두번은 안 갈 집', - latitude: 37.0, - longitude: 127.0, - }, - { - id: 3, - name: '매튜의 산스장', - address: '지번 주소', - description: '매튜가 사랑하는 산스장', - latitude: 37.0, - longitude: 127.0, - }, - { - id: 4, - name: '매튜의 안갈집', - address: '지번 주소', - description: '매튜가 두번은 안 갈 집', - latitude: 37.0, - longitude: 127.0, - }, -]; - -interface MyInfoListProps { - isTopic: boolean; -} - -const MyInfoList = ({ isTopic }: MyInfoListProps) => { +const MyInfoList = () => { const [myInfoTopics, setMyInfoTopics] = useState([]); - const [myInfoPins, setMyInfoPins] = useState([]); const getMyInfoListFromServer = async () => { - if (isTopic) { - const serverMyInfoTopics = await getApi( - 'default', - '/members/pins', - ); - setMyInfoTopics(serverMyInfoTopics); - } - - if (!isTopic) { - const serverMyInfoPins = await getApi( - 'default', - '/members/topics', - ); - setMyInfoPins(serverMyInfoPins); - } + const serverMyInfoTopics = await getApi( + 'default', + '/members/my/topics', + ); + setMyInfoTopics(serverMyInfoTopics); }; useEffect(() => { - // getMyInfoListFromServer(); + getMyInfoListFromServer(); }, []); - if (!data) return <>; - if (!data2) return <>; - - if (!isTopic) - return ( - - {data2.map((pin, index) => { - return ( - index < 3 && ( - - - - ) - ); - })} - - ); + if (!myInfoTopics) return <>; return ( - {data.map((topic, index) => { + {myInfoTopics.map((topic, index) => { return ( - index < 3 && ( - - - - ) + + + ); })} diff --git a/frontend/src/components/MyInfoContainer/index.tsx b/frontend/src/components/MyInfoContainer/index.tsx index 600453e8..a7b85892 100644 --- a/frontend/src/components/MyInfoContainer/index.tsx +++ b/frontend/src/components/MyInfoContainer/index.tsx @@ -11,13 +11,11 @@ import MyInfoList from './MyInfoList'; interface MyInfoContainerProps { containerTitle: string; containerDescription: string; - routeWhenSeeAll: () => void; } const MyInfoContainer = ({ containerTitle, containerDescription, - routeWhenSeeAll, }: MyInfoContainerProps) => (
@@ -40,22 +38,12 @@ const MyInfoContainer = ({ {containerDescription} - - { - - 전체 보기 - - } }> - {containerTitle === '나의 핀' ? ( - - ) : ( - - )} +
); diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index e08a0993..e8f2a5c8 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -25,13 +25,6 @@ const Profile = () => { - - ); From bbfa912c8641815b06981b262248ed5a62d2bc31 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 16 Aug 2023 15:45:15 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=90=90?= =?UTF-8?q?=EC=9D=84=20=EC=8B=9C=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=82=AC=EC=A7=84=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Layout/index.tsx | 3 ++- frontend/src/components/MyInfo/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx index 17cc6eb0..9d39e1ad 100644 --- a/frontend/src/components/Layout/index.tsx +++ b/frontend/src/components/Layout/index.tsx @@ -32,6 +32,7 @@ const Layout = ({ children }: LayoutProps) => { const mapContainer = useRef(null); const { width } = useContext(LayoutWidthContext); const isLogined = localStorage.getItem('userToken'); + const user = JSON.parse(localStorage.getItem('user') || ''); const loginButtonClick = () => { window.location.href = 'https://mapbefine.kro.kr/api/oauth/kakao'; @@ -70,7 +71,7 @@ const Layout = ({ children }: LayoutProps) => { > {isLogined ? ( - + ) : ( )} diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx index 6a435dc2..d3b0dd80 100644 --- a/frontend/src/components/MyInfo/index.tsx +++ b/frontend/src/components/MyInfo/index.tsx @@ -16,6 +16,7 @@ const MyInfo = () => { name: 'Patrick', email: 'qkrtk9230@naver.com', }); + const user = JSON.parse(localStorage.getItem('user') || ''); // useEffect(()=>{ // setMyInfoName() @@ -44,7 +45,7 @@ const MyInfo = () => { $justifyContent="center" $alignItems="center" > - + From f44cdac7ecfd764460fd13236eac0733f5996f93 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 16 Aug 2023 15:53:08 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20MyInfo=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/MyInfo/index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx index d3b0dd80..c3d79504 100644 --- a/frontend/src/components/MyInfo/index.tsx +++ b/frontend/src/components/MyInfo/index.tsx @@ -55,9 +55,6 @@ const MyInfo = () => { {myInfoNameAndEmail.email} - - - ); }; @@ -74,10 +71,4 @@ const MyInfoImg = styled.img` border-radius: 50%; `; -const MyInfoModifyIcon = styled(Box)` - position: absolute; - right: 32px; - top: 32px; -`; - export default MyInfo;