From a7fa5b78eec765d461aff4a76c9b70185b7d179e Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 16:04:05 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:GlobalNavigationBar=20=EC=9C=A0?= =?UTF-8?q?=EC=A0=80=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EC=8B=9C=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/global/GlobalNavigationBar.tsx | 44 ++++++++++- .../userInfoBarCard/GetUserInfoBar.tsx | 74 +++++++++---------- 2 files changed, 77 insertions(+), 41 deletions(-) diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx index 8e2f9f5..fbebe93 100644 --- a/src/components/global/GlobalNavigationBar.tsx +++ b/src/components/global/GlobalNavigationBar.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; -import { Link, useLocation } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; +import { Navigate } from 'react-router-dom'; import AuthContainer from '../login/AuthContainer'; import useRegisterStore from '../../stores/registerStore'; @@ -14,13 +15,25 @@ import { ReactComponent as Explore_on } from '../../assets/btn_explore_on.svg'; import { ReactComponent as User } from '../../assets/user.svg'; import { ReactComponent as Login } from '../../assets/login.svg'; +import instance from '../../apis/instance'; + const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { + const navigate=useNavigate(); const [isLog, setIsLog] = useState(false); const [isOverlayVisible, setIsOverlayVisible] = useState(false); const location = useLocation(); - const { loginNeeded, registerStatus, setLoginNeededStatus } = useRegisterStore(); + + const [userData, setUserData] = useState({ + nickname:'', + profileId:'', + imgUrl:'', + mapCnt:0, + followerCnt:0, + followingCnt:0, + }); + useEffect(() => { if (registerStatus !== RegisterStatus.LOG_IN && loginNeeded) { @@ -44,9 +57,32 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { setIsOverlayVisible(true); }; + useEffect(() => { + const fetchUserData = async () => { + try { + const response = await instance.get('/user'); + const data = response.data.result; + + setUserData({ + nickname: data.nickname, + profileId: data.profileId, + imgUrl: data.imgUrl, + mapCnt:data.mapCnt, + followerCnt: data.followerCnt, + followingCnt: data.followingCnt, + }); + + } catch (error) { + console.error('Failed to fetch user data', error); + } + }; + + fetchUserData(); + }, [navigate]); + const isHomeActive = location.pathname === '/timeline'; const isExploreActive = location.pathname === '/explore'; - const isUserpageActive = location.pathname === '/user/:userId'; + const isUserpageActive = location.pathname === `/user/${userData.profileId}`; return (
@@ -76,7 +112,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { )}
- +
diff --git a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx index a0ac2d1..dbbe0cc 100644 --- a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx +++ b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx @@ -26,43 +26,43 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => { followingCnt:0, }); - const {setAccessToken, clearAccessToken} = useRegisterStore(); - useEffect(() => { - const reIssueToken = async () => { - try { - const response = await instance.get('/jwt/reissue'); - const data = response.data; - - if (data && data.accessToken) { - setAccessToken(data.accessToken); - instance.defaults.headers.common['Authorization'] = `Bearer ${data.accessToken}`; - } - } catch (error) { - console.error('Failed to reissue token', error); - clearAccessToken(); // 실패 시 토큰 초기화 (로그아웃 처리) - } - }; - - const responseInterceptor = instance.interceptors.response.use( - (response) => response, // 성공적인 응답 그대로 전달 - async (error) => { - const originalRequest = error.config; + // const {setAccessToken, clearAccessToken} = useRegisterStore(); + // useEffect(() => { + // const reIssueToken = async () => { + // try { + // const response = await instance.get('/jwt/reissue'); + // const data = response.data; + + // if (data && data.accessToken) { + // setAccessToken(data.accessToken); + // instance.defaults.headers.common['Authorization'] = `Bearer ${data.accessToken}`; + // } + // } catch (error) { + // console.error('Failed to reissue token', error); + // clearAccessToken(); // 실패 시 토큰 초기화 (로그아웃 처리) + // } + // }; + + // const responseInterceptor = instance.interceptors.response.use( + // (response) => response, // 성공적인 응답 그대로 전달 + // async (error) => { + // const originalRequest = error.config; - if (!originalRequest._retry) { - originalRequest._retry = true; // 무한 루프 방지 - await reIssueToken(); // 토큰 재발급 시도 - return instance(originalRequest); // 재발급 후 원래 요청 재시도 - } - - return Promise.reject(error); - } - ); - - return () => { - // 컴포넌트 언마운트 시 인터셉터 해제 - instance.interceptors.response.eject(responseInterceptor); - }; - }, []); + // if (!originalRequest._retry) { + // originalRequest._retry = true; // 무한 루프 방지 + // await reIssueToken(); // 토큰 재발급 시도 + // return instance(originalRequest); // 재발급 후 원래 요청 재시도 + // } + + // return Promise.reject(error); + // } + // ); + + // return () => { + // // 컴포넌트 언마운트 시 인터셉터 해제 + // instance.interceptors.response.eject(responseInterceptor); + // }; + // }, []); useEffect(() => { const fetchUserData = async () => { @@ -157,7 +157,7 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
- 로그인하기 + 프로필 편집
{isFollowingOpen && } From 3d1e5bfe1e736f101e44f102d45341569ba67387 Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 16:09:51 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:Profile=20image=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 5 +- src/apis/editors/fetchEditorsData.ts | 13 +- src/apis/editors/getEditorsData.ts | 12 +- src/components/explore/MapList.tsx | 4 +- .../global/GlobalNavigationBar.module.scss | 1 - src/components/global/GlobalNavigationBar.tsx | 36 +-- src/components/map/BaseMap/BaseMap.tsx | 9 +- .../timeLine/editorList/EditorList.tsx | 17 +- .../timeLine/editorList/EditorProfileCard.tsx | 8 +- .../timeLine/mapCard/MapCard.module.scss | 1 - src/components/userProfile/EmptyUser.tsx | 7 +- .../userProfile/GetUser.module.scss | 15 +- src/components/userProfile/GetUser.tsx | 36 +-- .../userProfile/getNewMap/NewMap.module.scss | 16 +- .../userProfile/getNewMap/NewMap.tsx | 78 +++--- .../EmptyUSerInfobar.module.scss | 233 +++++++++--------- .../userInfoBarCard/GetUserInfoBar.tsx | 30 ++- src/pages/Explore/Explore.tsx | 78 +++--- src/pages/Map/Map.tsx | 9 +- src/pages/TimeLine/TimeLine.module.scss | 6 +- src/pages/TimeLine/TimeLine.tsx | 29 +-- src/stores/keywordStore.ts | 2 +- src/stores/registerStore.ts | 6 +- src/types/getEditors/EditorType.ts | 4 +- 24 files changed, 348 insertions(+), 307 deletions(-) diff --git a/public/index.html b/public/index.html index b99947f..be7d5f3 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,10 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - + MAPU diff --git a/src/apis/editors/fetchEditorsData.ts b/src/apis/editors/fetchEditorsData.ts index 586ecf8..ea7e7d9 100644 --- a/src/apis/editors/fetchEditorsData.ts +++ b/src/apis/editors/fetchEditorsData.ts @@ -1,7 +1,12 @@ -import { getEditorDataWithToken, getEditorDataWithoutToken } from "./getEditorsData"; -import { EditorType } from "../../types/getEditors/EditorType"; +import { + getEditorDataWithToken, + getEditorDataWithoutToken, +} from './getEditorsData'; +import { EditorType } from '../../types/getEditors/EditorType'; -export const fetchEditorData = async (token: string | undefined): Promise => { +export const fetchEditorData = async ( + token: string | undefined, +): Promise => { try { if (token) { return await getEditorDataWithToken(); @@ -12,4 +17,4 @@ export const fetchEditorData = async (token: string | undefined): Promise { try { - const response = await instance.get>('/home/editor'); + const response = + await instance.get>('/home/editor'); console.log('Data without Token:', response.data); return response.data.result || []; } catch (error) { @@ -15,7 +16,8 @@ export const getEditorDataWithToken = async () => { export const getEditorDataWithoutToken = async () => { try { - const response = await instance.get>('/home/editor'); + const response = + await instance.get>('/home/editor'); console.log('Data without Token:', response.data); return response.data.result || []; } catch (error) { diff --git a/src/components/explore/MapList.tsx b/src/components/explore/MapList.tsx index bb6fe00..4f38528 100644 --- a/src/components/explore/MapList.tsx +++ b/src/components/explore/MapList.tsx @@ -13,7 +13,9 @@ interface MapListProps { } const MapList: React.FC = ({ map, keyword }) => { - const [selectedKeyword, setSelectedKeyword] = useState(null); + const [selectedKeyword, setSelectedKeyword] = useState( + null, + ); const handleSelectPills = (mapKeyword: MapKeywordType) => { if (selectedKeyword?.keyword === mapKeyword.keyword) { diff --git a/src/components/global/GlobalNavigationBar.module.scss b/src/components/global/GlobalNavigationBar.module.scss index 0b93da9..fa46eaf 100644 --- a/src/components/global/GlobalNavigationBar.module.scss +++ b/src/components/global/GlobalNavigationBar.module.scss @@ -83,4 +83,3 @@ .iconContainer_off { background-color: var(--white); } - diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx index fbebe93..dd9fe7c 100644 --- a/src/components/global/GlobalNavigationBar.tsx +++ b/src/components/global/GlobalNavigationBar.tsx @@ -18,22 +18,21 @@ import { ReactComponent as Login } from '../../assets/login.svg'; import instance from '../../apis/instance'; const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { - const navigate=useNavigate(); + const navigate = useNavigate(); const [isLog, setIsLog] = useState(false); const [isOverlayVisible, setIsOverlayVisible] = useState(false); const location = useLocation(); const { loginNeeded, registerStatus, setLoginNeededStatus } = useRegisterStore(); - + const [userData, setUserData] = useState({ - nickname:'', - profileId:'', - imgUrl:'', - mapCnt:0, - followerCnt:0, - followingCnt:0, - }); - + nickname: '', + profileId: '', + imgUrl: '', + mapCnt: 0, + followerCnt: 0, + followingCnt: 0, + }); useEffect(() => { if (registerStatus !== RegisterStatus.LOG_IN && loginNeeded) { @@ -62,23 +61,22 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { try { const response = await instance.get('/user'); const data = response.data.result; - + setUserData({ nickname: data.nickname, profileId: data.profileId, imgUrl: data.imgUrl, - mapCnt:data.mapCnt, + mapCnt: data.mapCnt, followerCnt: data.followerCnt, followingCnt: data.followingCnt, }); - } catch (error) { console.error('Failed to fetch user data', error); } }; fetchUserData(); - }, [navigate]); + }, []); const isHomeActive = location.pathname === '/timeline'; const isExploreActive = location.pathname === '/explore'; @@ -116,7 +114,15 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
- + {userData.imgUrl ? ( + User Profile + ) : ( + + )}
= ({ mode }) => { const [dotShape, setDotShape] = useState('dot thin'); const [dotColor, setDotColor] = useState('#111111'); const [isShare, setIsShare] = useState(false); - const [selectedMarker, setSelectedMarker] = useState< kakao.maps.Marker | null>(null); // 마커 지우기 위해서 사용 + const [selectedMarker, setSelectedMarker] = + useState(null); // 마커 지우기 위해서 사용 const managerRef = useRef< @@ -237,9 +238,8 @@ const BaseMap: React.FC = ({ mode }) => { select = object; }); }); - - useEffect(()=> { + useEffect(() => { window.addEventListener('keydown', (ev: KeyboardEvent) => { if (ev.key === 'Delete' && selectedMarker) { selectedMarker.setMap(null); @@ -253,8 +253,7 @@ const BaseMap: React.FC = ({ mode }) => { setSelectedMarker(null); } }); - },[marker, selectedMarker]); - + }, [marker, selectedMarker]); return ( <> diff --git a/src/components/timeLine/editorList/EditorList.tsx b/src/components/timeLine/editorList/EditorList.tsx index a6be4a0..f8f49f3 100644 --- a/src/components/timeLine/editorList/EditorList.tsx +++ b/src/components/timeLine/editorList/EditorList.tsx @@ -14,14 +14,15 @@ interface EditorListProps { const EditorList: React.FC = ({ className }) => { const token = useRegisterStore((state) => state.accessToken); - const { data: editorData, error, isLoading, refetch } = useQuery( - ['editorsData', token], - () => fetchEditorData(token), - { - enabled: true, - refetchOnWindowFocus: false, - } - ); + const { + data: editorData, + error, + isLoading, + refetch, + } = useQuery(['editorsData', token], () => fetchEditorData(token), { + enabled: true, + refetchOnWindowFocus: false, + }); const handleRefreshClick = () => { refetch(); diff --git a/src/components/timeLine/editorList/EditorProfileCard.tsx b/src/components/timeLine/editorList/EditorProfileCard.tsx index 6a41993..4e61136 100644 --- a/src/components/timeLine/editorList/EditorProfileCard.tsx +++ b/src/components/timeLine/editorList/EditorProfileCard.tsx @@ -5,7 +5,7 @@ import useRegisterStore from '../../../stores/registerStore'; import { RegisterStatus } from '../../../types/enum/RegisterStatus'; import styles from './EditorProfileCard.module.scss'; -import userImg from '../../../assets/img_user_default_profile.svg' +import userImg from '../../../assets/img_user_default_profile.svg'; interface ProfileCardProps { Editor: EditorType; @@ -27,7 +27,11 @@ const EditorProfileCard: React.FC = ({ Editor }) => { return (
- Editor Image + Editor Image
{Editor.nickname}
diff --git a/src/components/timeLine/mapCard/MapCard.module.scss b/src/components/timeLine/mapCard/MapCard.module.scss index 6419a7b..6300108 100644 --- a/src/components/timeLine/mapCard/MapCard.module.scss +++ b/src/components/timeLine/mapCard/MapCard.module.scss @@ -47,7 +47,6 @@ width: 100%; justify-content: space-between; align-items: flex-end; - } .mapInfo { diff --git a/src/components/userProfile/EmptyUser.tsx b/src/components/userProfile/EmptyUser.tsx index dbcb1e0..09f1dee 100644 --- a/src/components/userProfile/EmptyUser.tsx +++ b/src/components/userProfile/EmptyUser.tsx @@ -6,8 +6,7 @@ import { ReactComponent as DownArrow } from '../../assets/DownArrow.svg'; import { ReactComponent as Search } from '../../assets/Search.svg'; import { ReactComponent as Gallery } from '../../assets/GalleryView.svg'; import { ReactComponent as List } from '../../assets/ListView.svg'; -import {ReactComponent as CreatMap} from '../../assets/btn_map_create.svg'; - +import { ReactComponent as CreatMap } from '../../assets/btn_map_create.svg'; const EmptyUser = (props: { children?: React.ReactNode }) => { return ( @@ -37,7 +36,9 @@ const EmptyUser = (props: { children?: React.ReactNode }) => {
-
+
+ +
지도 파일이 없습니다
diff --git a/src/components/userProfile/GetUser.module.scss b/src/components/userProfile/GetUser.module.scss index f0de296..5d8545b 100644 --- a/src/components/userProfile/GetUser.module.scss +++ b/src/components/userProfile/GetUser.module.scss @@ -26,8 +26,8 @@ } .square { - width: 48px; - height: 48px; + width: 48px; + height: 48px; display: flex; align-items: center; justify-content: center; @@ -51,11 +51,11 @@ .dropdown { top: 100%; width: 100%; - max-height: 150px; + max-height: 150px; background-color: white; border: 1px solid var(--gray_400); border-radius: 4px; - z-index: 1000; + z-index: 1000; } .dropdownItem { @@ -104,7 +104,7 @@ color: black; &::placeholder { - color: var(--gray_400); + color: var(--gray_400); } } @@ -252,7 +252,7 @@ gap: 140px; } -.mapInfo div, +.mapInfo div, .mapListInfo div { width: 186px; /* 각 요소의 너비를 동일하게 설정 */ text-align: left; /* 텍스트 왼쪽 정렬 */ @@ -265,7 +265,6 @@ flex-direction: column; } - .mapList { display: flex; width: 1366px; @@ -329,4 +328,4 @@ font-size: 14px; line-height: 21px; color: var(--gray_500); -} \ No newline at end of file +} diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index e3a552d..5e44507 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -20,9 +20,9 @@ const GetUser = (props: { children?: React.ReactNode }) => { const [isNewMapOpen, setIsNewMapOpen] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [mapTitle, setMapTitle] = useState(''); - const [mapCategory,setMapCategory] = useState('edited'); + const [mapCategory, setMapCategory] = useState('edited'); const [isDropdownOpen, setIsDropdownOpen] = useState(false); - + const placeholderImage = 'https://via.placeholder.com/150'; const openNewMap = () => { @@ -35,12 +35,12 @@ const GetUser = (props: { children?: React.ReactNode }) => { const toggleDropdown = () => { setIsDropdownOpen(!isDropdownOpen); - } + }; - const selectCategory = (category : string) => { + const selectCategory = (category: string) => { setMapCategory(category); setIsDropdownOpen(false); - } + }; const listMapData = [ { @@ -163,15 +163,21 @@ const GetUser = (props: { children?: React.ReactNode }) => { {isDropdownOpen && ( -
-
selectCategory('edited')} className={styles.dropdownItem}> - 편집 가능한 지도 -
-
selectCategory('bookmarked')} className={styles.dropdownItem}> - 북마크한 지도 -
+
+
selectCategory('edited')} + className={styles.dropdownItem} + > + 편집 가능한 지도
- )} +
selectCategory('bookmarked')} + className={styles.dropdownItem} + > + 북마크한 지도 +
+
+ )}
@@ -261,7 +267,9 @@ const GetUser = (props: { children?: React.ReactNode }) => {
{map.permissions}
-
+
+ +
{map.date}
{map.center}
diff --git a/src/components/userProfile/getNewMap/NewMap.module.scss b/src/components/userProfile/getNewMap/NewMap.module.scss index c8a88e9..5a915df 100644 --- a/src/components/userProfile/getNewMap/NewMap.module.scss +++ b/src/components/userProfile/getNewMap/NewMap.module.scss @@ -74,14 +74,14 @@ } .emptyInput { - color: var(--gray_400); + color: var(--gray_400); } .filledInput { - color: var(--black); + color: var(--black); } -.mapStartText{ +.mapStartText { display: flex; width: 52px; height: 24px; @@ -109,14 +109,14 @@ justify-content: center; align-items: center; width: 118px; - height: 40px; - border-radius: 4px; - cursor: pointer; + height: 40px; + border-radius: 4px; + cursor: pointer; position: relative; } .btnLocation button:not(:last-child)::after { - content: ""; + content: ''; position: absolute; right: -5px; /* 요소 사이에 여백을 만들어 선이 중앙에 오도록 */ height: 36px; /* 선의 높이 지정 */ @@ -160,4 +160,4 @@ .offMapCreate { background-color: var(--gray_200); -} \ No newline at end of file +} diff --git a/src/components/userProfile/getNewMap/NewMap.tsx b/src/components/userProfile/getNewMap/NewMap.tsx index ed4ca84..090c07f 100644 --- a/src/components/userProfile/getNewMap/NewMap.tsx +++ b/src/components/userProfile/getNewMap/NewMap.tsx @@ -1,57 +1,56 @@ -import React, {useState,useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import styles from './NewMap.module.scss'; import { ReactComponent as ModalClose } from '../../../assets/btn_followmodal_close.svg'; import { ReactComponent as NewMapIcon } from '../../../assets/ico_newmap.svg'; -const {kakao} = window; +const { kakao } = window; const NewMap = ({ onClose }: { onClose: () => void }) => { + const [location, setLocation] = useState(''); + const [mapTitle, setMapTitle] = useState(''); + const [mapCreate, setMapCreate] = useState(false); + const [latitude, setLatitude] = useState(null); //위도(기본값 null) + const [longtitude, setLongtitude] = useState(null); //경도(기본값 null) - const [location,setLocation] = useState(''); - const [mapTitle,setMapTitle] = useState(''); - const [mapCreate,setMapCreate] = useState(false); - const [latitude,setLatitude] = useState(null); //위도(기본값 null) - const [longtitude,setLongtitude] = useState(null); //경도(기본값 null) - - const getButtonStyle = (buttonLocation : string) => { - return location===buttonLocation - ? `${styles.selectedButton}` - : `${styles.defaultButton}`; - } + const getButtonStyle = (buttonLocation: string) => { + return location === buttonLocation + ? `${styles.selectedButton}` + : `${styles.defaultButton}`; + }; const getInputTextStyle = () => { return mapTitle ? `${styles.filledInput}` : `${styles.emptyInput}`; }; useEffect(() => { - if(location && mapTitle) { + if (location && mapTitle) { setMapCreate(true); - } else{ + } else { setMapCreate(false); } - },[location,mapTitle]); + }, [location, mapTitle]); const getMapCreateStyle = () => { return mapCreate ? `${styles.onMapCreate}` : `${styles.offMapCreate}`; - } - + }; + const handleCurrentLocation = () => { setLocation('현재 위치'); kakao.maps.load(() => { - if(navigator.geolocation) { + if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { - const lat=position.coords.latitude; - const lon=position.coords.longitude; + const lat = position.coords.latitude; + const lon = position.coords.longitude; setLatitude(lat); setLongtitude(lon); - console.log(lat,lon); + console.log(lat, lon); }); - } else{ + } else { alert('현재 위치 사용 불가'); } - }) - } + }); + }; return (
@@ -64,7 +63,7 @@ const NewMap = ({ onClose }: { onClose: () => void }) => {
지도 이름
- void }) => {
시작 위치
- - - + + +
생성하기
diff --git a/src/components/userProfile/userInfoBarCard/EmptyUSerInfobar.module.scss b/src/components/userProfile/userInfoBarCard/EmptyUSerInfobar.module.scss index 5765612..8d34723 100644 --- a/src/components/userProfile/userInfoBarCard/EmptyUSerInfobar.module.scss +++ b/src/components/userProfile/userInfoBarCard/EmptyUSerInfobar.module.scss @@ -1,118 +1,117 @@ @font-face { - font-family: Freesentation; - src: url('../../../assets/fonts/Freesentation-Bold.woff'); - } - - @font-face { - font-family: Freesentation; - src: url('../../../assets/fonts/Freesentation-Regular.woff'); - } - - @font-face { - font-family: Freesentation; - src: url('../../../assets/fonts/Freesentation-SemiBold.woff'); - } - - .UserInfoBar { - width: 300px; - background-color: var(--white); - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - border-right: 1px solid var(--gray_50); - } - - .UserPhoto { - width: 120px; - height: 120px; - background-color: var(--gray_100); - margin-top: 72px; - border-radius: 760px; - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - } - - .UserName { - margin-top: 4px; - min-width: 111px; - width: auto; - min-height: 64px; - height: auto; - padding: 10px; - background-color: white; - text-align: center; - } - - .UserName h1 { - font-size: 22px; - font-weight: 600; - line-height: 33px; - font: 'Freesentation'; - } - - .UserName span { - size: 18px; - font-weight: 400; - line-height: 27px; - font: 'Freesentation'; - color: var(--gray_500); - } - - .UserProfileNumber { - margin-top: 12px; - min-width: 216px; - width: auto; - min-height: 72px; - height: auto; - background-color: white; - display: flex; - justify-content: space-around; - gap: 10px; - align-items: center; - cursor: pointer; - } - - .UserProfilBox { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - } - - .UserProfileBox span { - display: block; - text-align: center; - margin-bottom: 5px; - } - - .ProfileBottom { - margin-top: 20px; - width: 260px; - height: 32px; - background-color: var(--gray_50); - text-align: center; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - cursor: pointer; - } - - .authContainer { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - } - \ No newline at end of file + font-family: Freesentation; + src: url('../../../assets/fonts/Freesentation-Bold.woff'); +} + +@font-face { + font-family: Freesentation; + src: url('../../../assets/fonts/Freesentation-Regular.woff'); +} + +@font-face { + font-family: Freesentation; + src: url('../../../assets/fonts/Freesentation-SemiBold.woff'); +} + +.UserInfoBar { + width: 300px; + background-color: var(--white); + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + border-right: 1px solid var(--gray_50); +} + +.UserPhoto { + width: 120px; + height: 120px; + background-color: var(--gray_100); + margin-top: 72px; + border-radius: 760px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.UserName { + margin-top: 4px; + min-width: 111px; + width: auto; + min-height: 64px; + height: auto; + padding: 10px; + background-color: white; + text-align: center; +} + +.UserName h1 { + font-size: 22px; + font-weight: 600; + line-height: 33px; + font: 'Freesentation'; +} + +.UserName span { + size: 18px; + font-weight: 400; + line-height: 27px; + font: 'Freesentation'; + color: var(--gray_500); +} + +.UserProfileNumber { + margin-top: 12px; + min-width: 216px; + width: auto; + min-height: 72px; + height: auto; + background-color: white; + display: flex; + justify-content: space-around; + gap: 10px; + align-items: center; + cursor: pointer; +} + +.UserProfilBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.UserProfileBox span { + display: block; + text-align: center; + margin-bottom: 5px; +} + +.ProfileBottom { + margin-top: 20px; + width: 260px; + height: 32px; + background-color: var(--gray_50); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + cursor: pointer; +} + +.authContainer { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} diff --git a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx index dbbe0cc..d3bcfe9 100644 --- a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx +++ b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx @@ -12,20 +12,20 @@ import Follower from '../followModal/Follower'; import instance from '../../../apis/instance'; const UserInfoBar = (props: { children?: React.ReactNode }) => { - const navigate=useNavigate(); + const navigate = useNavigate(); const [isFollowingOpen, setIsFollowingOpen] = useState(false); const [isFollowerOpen, setIsFollowerOpen] = useState(false); const [isLog, setIsLog] = useState(false); const [isOverlayVisible, setIsOverlayVisible] = useState(false); const [userData, setUserData] = useState({ - nickname:'', - profileId:'', - imgUrl:'', - mapCnt:0, - followerCnt:0, - followingCnt:0, + nickname: '', + profileId: '', + imgUrl: '', + mapCnt: 0, + followerCnt: 0, + followingCnt: 0, }); - + // const {setAccessToken, clearAccessToken} = useRegisterStore(); // useEffect(() => { // const reIssueToken = async () => { @@ -47,7 +47,7 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => { // (response) => response, // 성공적인 응답 그대로 전달 // async (error) => { // const originalRequest = error.config; - + // if (!originalRequest._retry) { // originalRequest._retry = true; // 무한 루프 방지 // await reIssueToken(); // 토큰 재발급 시도 @@ -69,16 +69,16 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => { try { const response = await instance.get('/user'); const data = response.data.result; - + setUserData({ nickname: data.nickname, profileId: data.profileId, imgUrl: data.imgUrl, - mapCnt:data.mapCnt, + mapCnt: data.mapCnt, followerCnt: data.followerCnt, followingCnt: data.followingCnt, }); - + navigate(`/user/${data.profileId}`); } catch (error) { console.error('Failed to fetch user data', error); @@ -133,7 +133,11 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
{userData.imgUrl ? ( - User Profile + User Profile ) : ( )} diff --git a/src/pages/Explore/Explore.tsx b/src/pages/Explore/Explore.tsx index 3eebb12..3b55a7c 100644 --- a/src/pages/Explore/Explore.tsx +++ b/src/pages/Explore/Explore.tsx @@ -146,45 +146,45 @@ const Explore: React.FC = () => {
-
- {isCheck === 'random' && ( - 랜덤순 탐색 - )} - {isCheck === 'recent' && ( - 날짜순 탐색 - )} - - {isPopup && ( -
- -
- )} -
- -
- {mapData !== null && mapData.length !== 0 ? ( - mapData.map((map: MapType) => ( - - )) - ) : ( - - )} -
+
+ {isCheck === 'random' && ( + 랜덤순 탐색 + )} + {isCheck === 'recent' && ( + 날짜순 탐색 + )} + + {isPopup && ( +
+ +
+ )} +
+ +
+ {mapData !== null && mapData.length !== 0 ? ( + mapData.map((map: MapType) => ( + + )) + ) : ( + + )} +
{/* */}
diff --git a/src/pages/Map/Map.tsx b/src/pages/Map/Map.tsx index 86733eb..7520099 100644 --- a/src/pages/Map/Map.tsx +++ b/src/pages/Map/Map.tsx @@ -29,7 +29,8 @@ const Map = () => { : MapMode.UNVALID; //error; const navigate = useNavigate(); const { mapName } = useParams(); - const { registerStatus, loginNeeded, setLoginNeededStatus } = useRegisterStore(); + const { registerStatus, loginNeeded, setLoginNeededStatus } = + useRegisterStore(); const [dimmed, setDimmed] = useState(false); useEffect(() => { @@ -84,9 +85,9 @@ const Map = () => { )} {dimmed && } - - - + + +
); }; diff --git a/src/pages/TimeLine/TimeLine.module.scss b/src/pages/TimeLine/TimeLine.module.scss index bb8a309..14f046c 100644 --- a/src/pages/TimeLine/TimeLine.module.scss +++ b/src/pages/TimeLine/TimeLine.module.scss @@ -21,7 +21,7 @@ } .TimelineMain { - display: flex; + display: flex; flex-direction: column; justify-content: flex-start; flex: 1; @@ -46,6 +46,6 @@ } &::-webkit-scrollbar-thumb { width: 4px; - background-color: #EBEEF2; + background-color: #ebeef2; } -} \ No newline at end of file +} diff --git a/src/pages/TimeLine/TimeLine.tsx b/src/pages/TimeLine/TimeLine.tsx index 99a80d0..ead74a9 100644 --- a/src/pages/TimeLine/TimeLine.tsx +++ b/src/pages/TimeLine/TimeLine.tsx @@ -22,7 +22,8 @@ const TimeLine: React.FC = () => { const navigate = useNavigate(); const pathname = useLocation().pathname; - const { loginNeeded, registerStatus, setLoginNeededStatus } = useRegisterStore(); + const { loginNeeded, registerStatus, setLoginNeededStatus } = + useRegisterStore(); const [isOverlayVisible, setIsOverlayVisible] = useState(false); useEffect(() => { @@ -76,19 +77,19 @@ const TimeLine: React.FC = () => {
-
- {selectedList.map((keyword) => { - const data = mapData[keyword.title] || []; - return data.length > 0 ? ( - - ) : null; - })} -
+
+ {selectedList.map((keyword) => { + const data = mapData[keyword.title] || []; + return data.length > 0 ? ( + + ) : null; + })} +
{/* */}
diff --git a/src/stores/keywordStore.ts b/src/stores/keywordStore.ts index 9a550fe..210460c 100644 --- a/src/stores/keywordStore.ts +++ b/src/stores/keywordStore.ts @@ -9,7 +9,7 @@ const cookieStorage: StateStorage = { return cookie ? JSON.parse(cookie) : null; }, setItem: (name: string, value: string) => { - setCookie(name, value, { path: "/" }); + setCookie(name, value, { path: '/' }); }, removeItem: (name: string) => { removeCookie(name); diff --git a/src/stores/registerStore.ts b/src/stores/registerStore.ts index f8d1474..33f65e8 100644 --- a/src/stores/registerStore.ts +++ b/src/stores/registerStore.ts @@ -44,11 +44,11 @@ const useRegisterStore = create( set({ loginNeeded: status }); }, setAccessToken: (accessToken) => { - set({accessToken:accessToken}); + set({ accessToken: accessToken }); }, clearAccessToken: () => { - set({accessToken:undefined}); - } + set({ accessToken: undefined }); + }, }), { name: 'registerStatusStorage' }, ), diff --git a/src/types/getEditors/EditorType.ts b/src/types/getEditors/EditorType.ts index 50b65d4..b2c0d4f 100644 --- a/src/types/getEditors/EditorType.ts +++ b/src/types/getEditors/EditorType.ts @@ -1,6 +1,6 @@ export interface EditorType { userId: number; - image : string | null; + image: string | null; nickname: string; profileId: string; -} \ No newline at end of file +} From 6dc407d7ab295cfc777401b8a3496260e9313d24 Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 16:27:46 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:userProfile=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=A7=B5=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=9B=EC=95=84?= =?UTF-8?q?=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/userProfile/GetUser.tsx | 40 ++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index 5e44507..98f6482 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { Map, MapMarker } from 'react-kakao-maps-sdk'; +import { Navigate } from 'react-router-dom'; import styles from './GetUser.module.scss'; import { ReactComponent as BackArrow } from '../../assets/BackArrow.svg'; @@ -12,16 +13,29 @@ import { ReactComponent as List } from '../../assets/ListView.svg'; import { ReactComponent as ExampleUser } from '../../assets/ico_exampleuser_profile.svg'; import { ReactComponent as CreatMap } from '../../assets/btn_map_create.svg'; +import useRegisterStore from '../../stores/registerStore'; +import { RegisterStatus } from '../../types/enum/RegisterStatus'; + import instance from '../../apis/instance'; import NewMap from './getNewMap/NewMap'; const GetUser = (props: { children?: React.ReactNode }) => { + const navigate=useNavigate(); const [view, setView] = useState('gallery'); //gallery를 기본으로 설정 const [isNewMapOpen, setIsNewMapOpen] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [mapTitle, setMapTitle] = useState(''); const [mapCategory, setMapCategory] = useState('edited'); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [mapData, setMapData] = useState({ + imageUrl: '', + title: '', + region: '', + description: '', + userImageUrl: '', + userNickName: '', + userProfileId: '', + }); const placeholderImage = 'https://via.placeholder.com/150'; @@ -125,6 +139,32 @@ const GetUser = (props: { children?: React.ReactNode }) => { }, ]; //지도 데이터 임시 저장 + useEffect(() => { + const fetchUserData = async () => { + try { + const response = await instance.get(`/user`); + const data = response.data.result; + const userMapData =response.data.result.user; + + setMapData({ + imageUrl: data.imageUrl, + title: data.title, + region: data.region, + description: data.description, + userImageUrl: userMapData.imageUrl, + userNickName: userMapData.nickName, + userProfileId: userMapData.profileId, + }); + + navigate(`/user/${data.profileId}`); + } catch (error) { + console.error('Failed to fetch user data', error); + } + }; + + fetchUserData(); + }, [navigate]); + const ITEMS_PER_PAGE = 9; //한 페이지에 표시되는 항목 수는 9개 const indexOfLastItem = currentPage * ITEMS_PER_PAGE; const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE; From 10c84160bc30520bfd752ec430f32456855a7f9c Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 16:52:00 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:mapData=20get=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/userProfile/GetUser.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index 98f6482..d744aca 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -28,13 +28,14 @@ const GetUser = (props: { children?: React.ReactNode }) => { const [mapCategory, setMapCategory] = useState('edited'); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [mapData, setMapData] = useState({ + mapId: 0, imageUrl: '', title: '', region: '', - description: '', - userImageUrl: '', - userNickName: '', - userProfileId: '', + role: '', + createDate: '', + longtitude: 0, + latitude: 0, }); const placeholderImage = 'https://via.placeholder.com/150'; @@ -144,19 +145,18 @@ const GetUser = (props: { children?: React.ReactNode }) => { try { const response = await instance.get(`/user`); const data = response.data.result; - const userMapData =response.data.result.user; setMapData({ + mapId: data.mapId, imageUrl: data.imageUrl, title: data.title, region: data.region, - description: data.description, - userImageUrl: userMapData.imageUrl, - userNickName: userMapData.nickName, - userProfileId: userMapData.profileId, + role: data.role, + createDate: data.createDate, + longtitude: data.longtitude, + latitude: data.latitude, }); - navigate(`/user/${data.profileId}`); } catch (error) { console.error('Failed to fetch user data', error); } From 340339378a1c1fdb4cdfd38430d76f311e375883 Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 18:30:56 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:UserMapDate=20=EB=B0=B1=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=97=B0=EB=8F=99=ED=95=B4=20=EC=98=A4=EA=B8=B0=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/global/GlobalNavigationBar.tsx | 2 +- src/components/userProfile/GetUser.tsx | 230 ++++++++---------- 2 files changed, 108 insertions(+), 124 deletions(-) diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx index dd9fe7c..bec1b52 100644 --- a/src/components/global/GlobalNavigationBar.tsx +++ b/src/components/global/GlobalNavigationBar.tsx @@ -110,7 +110,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { )}
- +
diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index d744aca..5e0974d 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -27,18 +27,8 @@ const GetUser = (props: { children?: React.ReactNode }) => { const [mapTitle, setMapTitle] = useState(''); const [mapCategory, setMapCategory] = useState('edited'); const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [mapData, setMapData] = useState({ - mapId: 0, - imageUrl: '', - title: '', - region: '', - role: '', - createDate: '', - longtitude: 0, - latitude: 0, - }); + const [mapData, setMapData] = useState([]); - const placeholderImage = 'https://via.placeholder.com/150'; const openNewMap = () => { setIsNewMapOpen(true); @@ -57,119 +47,113 @@ const GetUser = (props: { children?: React.ReactNode }) => { setIsDropdownOpen(false); }; - const listMapData = [ - { - id: 1, - name: 'Map 1', - permissions: '편집자', - participants: 5, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 2, - name: 'Map 2', - permissions: '편집자', - participants: 4, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 3, - name: 'Map 3', - permissions: '편집자', - participants: 3, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 4, - name: 'Map 4', - permissions: '편집자', - participants: 2, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 5, - name: 'Map 5', - permissions: '편집자', - participants: 1, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 6, - name: 'Map 6', - permissions: '편집자', - participants: 6, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 7, - name: 'Map 7', - permissions: '편집자', - participants: 7, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 8, - name: 'Map 8', - permissions: '편집자', - participants: 7, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 9, - name: 'Map 9', - permissions: '편집자', - participants: 7, - date: '2024.05.06', - center: '서울시 광진구', - }, - { - id: 10, - name: 'Map 10', - permissions: '편집자', - participants: 7, - date: '2024.05.06', - center: '서울시 광진구', - }, - ]; //지도 데이터 임시 저장 + // const listMapData = [ + // { + // id: 1, + // name: 'Map 1', + // permissions: '편집자', + // participants: 5, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 2, + // name: 'Map 2', + // permissions: '편집자', + // participants: 4, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 3, + // name: 'Map 3', + // permissions: '편집자', + // participants: 3, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 4, + // name: 'Map 4', + // permissions: '편집자', + // participants: 2, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 5, + // name: 'Map 5', + // permissions: '편집자', + // participants: 1, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 6, + // name: 'Map 6', + // permissions: '편집자', + // participants: 6, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 7, + // name: 'Map 7', + // permissions: '편집자', + // participants: 7, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 8, + // name: 'Map 8', + // permissions: '편집자', + // participants: 7, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 9, + // name: 'Map 9', + // permissions: '편집자', + // participants: 7, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // { + // id: 10, + // name: 'Map 10', + // permissions: '편집자', + // participants: 7, + // date: '2024.05.06', + // center: '서울시 광진구', + // }, + // ]; //지도 데이터 임시 저장 useEffect(() => { const fetchUserData = async () => { try { - const response = await instance.get(`/user`); - const data = response.data.result; - - setMapData({ - mapId: data.mapId, - imageUrl: data.imageUrl, - title: data.title, - region: data.region, - role: data.role, - createDate: data.createDate, - longtitude: data.longtitude, - latitude: data.latitude, - }); - + const response = await instance.get(`/user/maps?editable=true&bookmarked=false`); + const data = response.data; + + if (Array.isArray(data.result)) { + setMapData(data.result); // result 배열을 mapData로 설정 + } else { + console.error('Fetched data is not an array:', data.result); + } } catch (error) { - console.error('Failed to fetch user data', error); + console.error('Failed to fetch map data', error); } }; fetchUserData(); - }, [navigate]); + }, []); const ITEMS_PER_PAGE = 9; //한 페이지에 표시되는 항목 수는 9개 const indexOfLastItem = currentPage * ITEMS_PER_PAGE; const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE; - const currentItems = listMapData.slice(indexOfFirstItem, indexOfLastItem); - const totalPages = Math.ceil(10 / ITEMS_PER_PAGE); //10은 가지고 있는 맵의 개수(백과 연동하면 나중에 바꿔야함) + const currentItems = mapData.slice(indexOfFirstItem, indexOfLastItem); + const totalPages = Math.ceil(mapData.length / ITEMS_PER_PAGE); //10은 가지고 있는 맵의 개수(백과 연동하면 나중에 바꿔야함) const handlePreviousPage = () => { if (currentPage > 1) { @@ -252,20 +236,20 @@ const GetUser = (props: { children?: React.ReactNode }) => {
{view === 'gallery' && (
- {currentItems.map((map) => ( + {currentItems.map((map :any) => (
placeholder
-
우리 동네 맛집 지도
-
성북구 정릉동
+
{map.title}
+
{map.region}
@@ -286,31 +270,31 @@ const GetUser = (props: { children?: React.ReactNode }) => {
- {listMapData.map((map) => ( + {currentItems.map((map:any) => (
placeholder
- 우리 동네 맛집 지도 + {map.title}
- 성북구 정릉동 + {map.region}
-
{map.permissions}
+
{map.role}
-
{map.date}
+
{map.createdDate}
{map.center}
From 0894054ca1d4f09fdda910dbaef547a1a0663a29 Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 18:31:24 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=EC=9E=84=EC=8B=9C=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/userProfile/GetUser.tsx | 85 +------------------------- 1 file changed, 1 insertion(+), 84 deletions(-) diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index 5e0974d..3e214f5 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -46,90 +46,7 @@ const GetUser = (props: { children?: React.ReactNode }) => { setMapCategory(category); setIsDropdownOpen(false); }; - - // const listMapData = [ - // { - // id: 1, - // name: 'Map 1', - // permissions: '편집자', - // participants: 5, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 2, - // name: 'Map 2', - // permissions: '편집자', - // participants: 4, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 3, - // name: 'Map 3', - // permissions: '편집자', - // participants: 3, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 4, - // name: 'Map 4', - // permissions: '편집자', - // participants: 2, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 5, - // name: 'Map 5', - // permissions: '편집자', - // participants: 1, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 6, - // name: 'Map 6', - // permissions: '편집자', - // participants: 6, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 7, - // name: 'Map 7', - // permissions: '편집자', - // participants: 7, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 8, - // name: 'Map 8', - // permissions: '편집자', - // participants: 7, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 9, - // name: 'Map 9', - // permissions: '편집자', - // participants: 7, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // { - // id: 10, - // name: 'Map 10', - // permissions: '편집자', - // participants: 7, - // date: '2024.05.06', - // center: '서울시 광진구', - // }, - // ]; //지도 데이터 임시 저장 - + useEffect(() => { const fetchUserData = async () => { try { From b05ef02bce8302b160b345a03ae4a1370bf8f02d Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 18:37:21 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=ED=8E=B8=EC=A7=91=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=9C=20=EC=A7=80=EB=8F=84,=20=EB=B6=81=EB=A7=88?= =?UTF-8?q?=ED=81=AC=ED=95=9C=20=EC=A7=80=EB=8F=84=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EB=B0=9B=EC=95=84=EC=98=A4=EA=B8=B0=20=EA=B5=AC?= =?UTF-8?q?=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/userProfile/GetUser.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index 3e214f5..4d0cf45 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -46,11 +46,16 @@ const GetUser = (props: { children?: React.ReactNode }) => { setMapCategory(category); setIsDropdownOpen(false); }; - + useEffect(() => { const fetchUserData = async () => { try { - const response = await instance.get(`/user/maps?editable=true&bookmarked=false`); + let response; + if(mapCategory==='edited'){ + response = await instance.get(`/user/maps?editable=true&bookmarked=false`); + }else{ + response = await instance.get(`/user/maps?editable=false&bookmarked=true`); + } const data = response.data; if (Array.isArray(data.result)) { From b3e361b377f3ce6651689a2df80a682749d32ceb Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 19:04:14 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20MapCreate=20=EB=B0=B1=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../userProfile/getNewMap/NewMap.module.scss | 2 +- .../userProfile/getNewMap/NewMap.tsx | 42 ++++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/components/userProfile/getNewMap/NewMap.module.scss b/src/components/userProfile/getNewMap/NewMap.module.scss index 5a915df..b8e6dd2 100644 --- a/src/components/userProfile/getNewMap/NewMap.module.scss +++ b/src/components/userProfile/getNewMap/NewMap.module.scss @@ -140,7 +140,7 @@ color: var(--main); } -.createBtn { +.createBtn{ background-color: var(--gray_100); color: white; display: flex; diff --git a/src/components/userProfile/getNewMap/NewMap.tsx b/src/components/userProfile/getNewMap/NewMap.tsx index 090c07f..963ad54 100644 --- a/src/components/userProfile/getNewMap/NewMap.tsx +++ b/src/components/userProfile/getNewMap/NewMap.tsx @@ -3,15 +3,21 @@ import React, { useState, useEffect } from 'react'; import styles from './NewMap.module.scss'; import { ReactComponent as ModalClose } from '../../../assets/btn_followmodal_close.svg'; import { ReactComponent as NewMapIcon } from '../../../assets/ico_newmap.svg'; +import axios from 'axios'; const { kakao } = window; const NewMap = ({ onClose }: { onClose: () => void }) => { const [location, setLocation] = useState(''); const [mapTitle, setMapTitle] = useState(''); + const [mapDescription, setMapDescription] = useState(''); + const [imageUrl, setImageUrl] =useState(''); const [mapCreate, setMapCreate] = useState(false); const [latitude, setLatitude] = useState(null); //위도(기본값 null) const [longtitude, setLongtitude] = useState(null); //경도(기본값 null) + const [zoomLevel, setZoomLever] = useState(0); + const [isOnSearch, setIsOnSearch] = useState(true); + const [keywords,setKeywords] = useState([]); const getButtonStyle = (buttonLocation: string) => { return location === buttonLocation @@ -52,6 +58,38 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { }); }; + const sendDataToBackend = async (data:any) => { + try { + const response = await axios.post('/map/create', data); + console.log('Data sent successfully:', response.data); + } catch (error) { + console.error('Failed to send data:', error); + } + }; + + // 예를 들어, form 데이터를 백엔드로 전송 + const handleSubmit = (event:any) => { + event.preventDefault(); + + if(!mapTitle || !latitude || !longtitude){ + alert('모든 필수 정보를 입력해주세요'); + return; + } + const formData = { + mapTitle, + mapDescription, + address: location, + latitude, + longtitude, + zoomLevel, + publishLink : imageUrl, // 예시에서는 imageUrl로 대체 + isOnSearch, + keywords, + }; + + sendDataToBackend(formData); + }; + return (
@@ -93,7 +131,9 @@ const NewMap = ({ onClose }: { onClose: () => void }) => {
-
생성하기
+
생성하기
From 61b6bf61ac0f1d84326c47570e9072a70405b206 Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 19:25:12 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:MapCreate=20=EB=B0=B1=EC=97=94?= =?UTF-8?q?=EB=93=9C=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../userProfile/getNewMap/NewMap.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/userProfile/getNewMap/NewMap.tsx b/src/components/userProfile/getNewMap/NewMap.tsx index 963ad54..ca068c1 100644 --- a/src/components/userProfile/getNewMap/NewMap.tsx +++ b/src/components/userProfile/getNewMap/NewMap.tsx @@ -4,20 +4,21 @@ import styles from './NewMap.module.scss'; import { ReactComponent as ModalClose } from '../../../assets/btn_followmodal_close.svg'; import { ReactComponent as NewMapIcon } from '../../../assets/ico_newmap.svg'; import axios from 'axios'; +import instance from '../../../apis/instance'; const { kakao } = window; const NewMap = ({ onClose }: { onClose: () => void }) => { const [location, setLocation] = useState(''); const [mapTitle, setMapTitle] = useState(''); - const [mapDescription, setMapDescription] = useState(''); - const [imageUrl, setImageUrl] =useState(''); + const [mapDescription, setMapDescription] = useState('ddd'); + const [imageUrl, setImageUrl] =useState('ddd'); const [mapCreate, setMapCreate] = useState(false); const [latitude, setLatitude] = useState(null); //위도(기본값 null) - const [longtitude, setLongtitude] = useState(null); //경도(기본값 null) + const [longitude, setLongitude] = useState(null); //경도(기본값 null) const [zoomLevel, setZoomLever] = useState(0); const [isOnSearch, setIsOnSearch] = useState(true); - const [keywords,setKeywords] = useState([]); + const [keywords,setKeywords] = useState(["추천"]); const getButtonStyle = (buttonLocation: string) => { return location === buttonLocation @@ -49,7 +50,7 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { const lat = position.coords.latitude; const lon = position.coords.longitude; setLatitude(lat); - setLongtitude(lon); + setLongitude(lon); console.log(lat, lon); }); } else { @@ -60,18 +61,18 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { const sendDataToBackend = async (data:any) => { try { - const response = await axios.post('/map/create', data); + const response = await instance.post('/map/create', data); console.log('Data sent successfully:', response.data); } catch (error) { console.error('Failed to send data:', error); } }; - // 예를 들어, form 데이터를 백엔드로 전송 + const handleSubmit = (event:any) => { event.preventDefault(); - if(!mapTitle || !latitude || !longtitude){ + if(!mapTitle || !latitude || !longitude){ alert('모든 필수 정보를 입력해주세요'); return; } @@ -80,13 +81,15 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { mapDescription, address: location, latitude, - longtitude, + longitude, zoomLevel, - publishLink : imageUrl, // 예시에서는 imageUrl로 대체 + publishLink : imageUrl, isOnSearch, keywords, }; - + + console.log('데이터 생성 완료') + console.log(formData); sendDataToBackend(formData); }; From f1464f96c573d9f7cdcee25cc650a4f2398475ff Mon Sep 17 00:00:00 2001 From: Demian Date: Fri, 16 Aug 2024 20:32:28 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20UserMapData=20=EB=B0=9B=EC=95=84?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/userProfile/GetUser.tsx | 2 +- src/components/userProfile/getNewMap/NewMap.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx index 4d0cf45..2742b3a 100644 --- a/src/components/userProfile/GetUser.tsx +++ b/src/components/userProfile/GetUser.tsx @@ -75,7 +75,7 @@ const GetUser = (props: { children?: React.ReactNode }) => { const indexOfLastItem = currentPage * ITEMS_PER_PAGE; const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE; const currentItems = mapData.slice(indexOfFirstItem, indexOfLastItem); - const totalPages = Math.ceil(mapData.length / ITEMS_PER_PAGE); //10은 가지고 있는 맵의 개수(백과 연동하면 나중에 바꿔야함) + const totalPages = Math.ceil(mapData.length / ITEMS_PER_PAGE); //10은 가지고 있는 맵의 개수(백과 연동하면 나중에 바꿔야함) 변경완료 const handlePreviousPage = () => { if (currentPage > 1) { diff --git a/src/components/userProfile/getNewMap/NewMap.tsx b/src/components/userProfile/getNewMap/NewMap.tsx index ca068c1..07ddf15 100644 --- a/src/components/userProfile/getNewMap/NewMap.tsx +++ b/src/components/userProfile/getNewMap/NewMap.tsx @@ -80,6 +80,7 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { mapTitle, mapDescription, address: location, + imageUrl: "https://example.com/maps/seoul-food-tour", latitude, longitude, zoomLevel,