@@ -76,11 +110,19 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
)}
-
+
- 
+ ) : (
+
+ ) : (
+ = ({ 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 (
('');
- const [mapCategory,setMapCategory] = useState('edited');
+ const [mapCategory, setMapCategory] = useState('edited');
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
- const placeholderImage = 'https://via.placeholder.com/150';
+ const [mapData, setMapData] = useState([]);
+
const openNewMap = () => {
setIsNewMapOpen(true);
@@ -35,101 +40,42 @@ const GetUser = (props: { children?: React.ReactNode }) => {
const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
- }
+ };
- const selectCategory = (category : string) => {
+ const selectCategory = (category: string) => {
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 {
+ 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)) {
+ setMapData(data.result); // result 배열을 mapData로 설정
+ } else {
+ console.error('Fetched data is not an array:', data.result);
+ }
+ } catch (error) {
+ console.error('Failed to fetch map data', error);
+ }
+ };
+ fetchUserData();
+ }, []);
+
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) {
@@ -163,15 +109,21 @@ const GetUser = (props: { children?: React.ReactNode }) => {
- 
+
{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..2742b3a 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,18 +13,22 @@ 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
-
(false);
useEffect(() => {
@@ -76,19 +77,19 @@ const TimeLine: React.FC = () => {
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
+}
selectCategory('edited')} className={styles.dropdownItem}>
- 편집 가능한 지도
-
- selectCategory('bookmarked')} className={styles.dropdownItem}>
- 북마크한 지도
-
+
+
+ )}
selectCategory('edited')}
+ className={styles.dropdownItem}
+ >
+ 편집 가능한 지도
- )}
+ selectCategory('bookmarked')}
+ className={styles.dropdownItem}
+ >
+ 북마크한 지도
+
+
@@ -206,20 +158,20 @@ const GetUser = (props: { children?: React.ReactNode }) => {
(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
{view === 'gallery' && (
(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 () => {
- 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);
- };
- }, []);
+ // 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);
+ // };
+ // }, []);
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,
+ 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 }) => {
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
- {currentItems.map((map) => (
+ {currentItems.map((map :any) => (
-
우리 동네 맛집 지도
- 성북구 정릉동
+ {map.title}
+ {map.region}
- {listMapData.map((map) => (
+ {currentItems.map((map:any) => (
diff --git a/src/components/userProfile/getNewMap/NewMap.module.scss b/src/components/userProfile/getNewMap/NewMap.module.scss
index c8a88e9..b8e6dd2 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; /* 선의 높이 지정 */
@@ -140,7 +140,7 @@
color: var(--main);
}
-.createBtn {
+.createBtn{
background-color: var(--gray_100);
color: white;
display: flex;
@@ -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..07ddf15 100644
--- a/src/components/userProfile/getNewMap/NewMap.tsx
+++ b/src/components/userProfile/getNewMap/NewMap.tsx
@@ -1,58 +1,99 @@
-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';
+import axios from 'axios';
+import instance from '../../../apis/instance';
-const {kakao} = window;
+const { kakao } = window;
const NewMap = ({ onClose }: { onClose: () => void }) => {
+ const [location, setLocation] = useState('');
+ const [mapTitle, setMapTitle] = useState('');
+ const [mapDescription, setMapDescription] = useState('ddd');
+ const [imageUrl, setImageUrl] =useState('ddd');
+ const [mapCreate, setMapCreate] = useState(false);
+ const [latitude, setLatitude] = useState(null); //위도(기본값 null)
+ const [longitude, setLongitude] = useState(null); //경도(기본값 null)
+ const [zoomLevel, setZoomLever] = useState(0);
+ const [isOnSearch, setIsOnSearch] = useState(true);
+ const [keywords,setKeywords] = useState(["추천"]);
- 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);
+ setLongitude(lon);
+ console.log(lat, lon);
});
- } else{
+ } else {
alert('현재 위치 사용 불가');
}
- })
- }
+ });
+ };
+
+ const sendDataToBackend = async (data:any) => {
+ try {
+ const response = await instance.post('/map/create', data);
+ console.log('Data sent successfully:', response.data);
+ } catch (error) {
+ console.error('Failed to send data:', error);
+ }
+ };
+
+ const handleSubmit = (event:any) => {
+ event.preventDefault();
+
+ if(!mapTitle || !latitude || !longitude){
+ alert('모든 필수 정보를 입력해주세요');
+ return;
+ }
+ const formData = {
+ mapTitle,
+ mapDescription,
+ address: location,
+ imageUrl: "https://example.com/maps/seoul-food-tour",
+ latitude,
+ longitude,
+ zoomLevel,
+ publishLink : imageUrl,
+ isOnSearch,
+ keywords,
+ };
+
+ console.log('데이터 생성 완료')
+ console.log(formData);
+ sendDataToBackend(formData);
+ };
+
return (
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 a0ac2d1..d3bcfe9 100644
--- a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx
+++ b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx
@@ -12,73 +12,73 @@ 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
- 우리 동네 맛집 지도
+ {map.title}
- 성북구 정릉동
+ {map.region}
-
{map.permissions}
- {map.date}
+ {map.role}
+
+
+ {map.createdDate}
{map.center}
@@ -64,7 +105,7 @@ const NewMap = ({ onClose }: { onClose: () => void }) => {
지도 이름
- void }) => {
시작 위치
-
-
-
+
+
+
-
생성하기
+ 생성하기
{userData.imgUrl ? (
-
+
) : (
+
) : (
- 로그인하기
+ 프로필 편집
{isFollowingOpen &&
- {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) => (
+
{/* */}
- {selectedList.map((keyword) => {
- const data = mapData[keyword.title] || [];
- return data.length > 0 ? (
-
+
+ {selectedList.map((keyword) => {
+ const data = mapData[keyword.title] || [];
+ return data.length > 0 ? (
+
{/* */}