diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx index 6647251..d74992f 100644 --- a/src/components/global/GlobalNavigationBar.tsx +++ b/src/components/global/GlobalNavigationBar.tsx @@ -16,6 +16,7 @@ import { ReactComponent as User } from '../../assets/user.svg'; import { ReactComponent as Login } from '../../assets/btn_login.svg'; import { ReactComponent as Logout } from '../../assets/btn_logout.svg'; import useLogOutMutation from '../../apis/auth/useLogOutMutation'; +import useUserViewState from '../../stores/userViewState'; import instance from '../../apis/instance'; @@ -29,6 +30,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { useRegisterStore(); const logOutMutation = useLogOutMutation(prevUrl); + const { viewUserData } = useUserViewState(); const [userData, setUserData] = useState({ nickname: '', profileId: '', @@ -120,7 +122,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
- {userData.imgUrl ? ( + {/* {userData.imgUrl ? ( User Profile { /> ) : ( + )} */} + { viewUserData.nickname != '' ? ( + User Profile + ) : ( + User Profile )}
diff --git a/src/components/timeLine/editorList/EditorProfileCard.tsx b/src/components/timeLine/editorList/EditorProfileCard.tsx index a7d9faf..a78b912 100644 --- a/src/components/timeLine/editorList/EditorProfileCard.tsx +++ b/src/components/timeLine/editorList/EditorProfileCard.tsx @@ -14,7 +14,9 @@ import { FollowType } from '../../../types/follow/FollowType'; import { useDeleteUnFollow } from '../../../apis/follow/useDeleteUnFollow'; import { useQuery } from 'react-query'; import { fetchFollowing } from '../../../apis/follow/useGetFollowing'; +import instance from '../../../apis/instance'; +import { useUserViewState } from '../../../stores/userViewState'; interface ProfileCardProps { Editor: EditorType; token: string | undefined; @@ -33,11 +35,35 @@ const EditorProfileCard: React.FC = ({ const pathname = useLocation().pathname; const Followmutation = usePostFollow(); const UnFollowmutation = useDeleteUnFollow(); + const { setViewUserData } = useUserViewState(); const { data: followingData } = useQuery(['followindData'], () => fetchFollowing(token), ); + const handleUserProfile = (userId: number) => { + const fetchUserData = async () => { + try { + const response = await instance.get(`/user/${userId}`); + const data = response.data.result; + console.log(data); + setViewUserData({ + nickname: data.nickname, + profileId: data.profileId, + imgUrl: data.imgUrl, + mapCnt: data.mapCnt, + followerCnt: data.followerCnt, + followingCnt: data.followingCnt, + }); + + navigate(`/user/${data.profileId}`); + } catch (error) { + console.error('Failed to fetch user data', error); + } + }; + fetchUserData(); + } + const handleFollow = (followingId: number) => { if (!isLog) { setLoginNeededStatus(true); @@ -86,7 +112,12 @@ const EditorProfileCard: React.FC = ({ )} - + { + handleUserProfile(Editor.userId); + }} + >
= ({
- {/*
- Editor Image - -
-
{Editor.nickname}
- @{Editor.profileId} -
-
*/} + {isDropdownOpen && ( +
+
selectCategory('edited')} + className={styles.dropdownItem} + > + 편집 가능한 지도 +
+
selectCategory('bookmarked')} + className={styles.dropdownItem} + > + 북마크한 지도 +
+
+ )} + +
+
+
+ + { + setMapTitle(e.target.value); + setCurrentPage(1); + }} + placeholder="검색" + /> +
+
+
+ + +
+ {/*
+ +
*/} +
+
+ {view === 'gallery' && ( +
+ {currentItems.map((map :any) => ( + +
+
+ mapImage +
+
+
+
{map.title}
+
{map.region}
+
+ userProfileImage +
+
+ + ))} +
+ )} + {view === 'list' && ( +
+
+
지도 이름
+
+
권한
+
참여자
+
제작한 날짜
+
중앙 위치
+
+
+
+ {currentItems.map((map:any) => ( + +
+
+ mapImage +
+
+
+ {map.title} +
+
+ {map.region} +
+
+
+
+
{map.role}
+
+ userProfileImage +
+
{map.createdDate}
+
{map.center}
+
+ + ))} +
+
+ )} + {view === 'gallery' && ( +
+ + + {currentPage} / {totalPages} + + +
+ )} +
+ {isNewMapOpen && } + + ); +}; + +export default GetUser; diff --git a/src/components/userProfile/getNewMap/NewMap.module.scss b/src/components/userProfile/getNewMap/NewMap.module.scss index b8e6dd2..2eea0a3 100644 --- a/src/components/userProfile/getNewMap/NewMap.module.scss +++ b/src/components/userProfile/getNewMap/NewMap.module.scss @@ -14,7 +14,8 @@ .modalContent { background-color: #fff; width: 412px; - height: 430px; + min-height: 430px; + max-height: 80vh; padding: 20px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); @@ -161,3 +162,32 @@ .offMapCreate { background-color: var(--gray_200); } + +.citiesList { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px; +} + +.cityButton { + padding: 8px 16px; + border: 1px solid white; + border-radius: 8px; + background-color: white; + height: 48px; + &:not(.selectedCityButton):hover { // 선택되지 않은 버튼에만 호버 효과 적용 + background-color: var(--gray_50); + color: var(--black); + } + text-align: left; + font-weight: 400; + font-size: 18px; + line-height: 27px; +} + +.selectedCityButton { + background-color: var(--sub); + color: var(--main); + font-weight: 600; +} \ No newline at end of file diff --git a/src/components/userProfile/getNewMap/NewMap.tsx b/src/components/userProfile/getNewMap/NewMap.tsx index e1ecef8..85c5976 100644 --- a/src/components/userProfile/getNewMap/NewMap.tsx +++ b/src/components/userProfile/getNewMap/NewMap.tsx @@ -19,6 +19,19 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { const [zoomLevel, setZoomLever] = useState(0); const [isOnSearch, setIsOnSearch] = useState(true); const [keywords,setKeywords] = useState(["추천"]); + const [showCity,setShowCity] = useState(false); + + const cities = [ + "서울특별시", + "부산광역시", + "대구광역시", + "인천광역시", + "광주광역시", + "대전광역시", + "울산광역시", + "세종특별자치시", + "제주특별자치도" + ]; const getButtonStyle = (buttonLocation: string) => { return location === buttonLocation @@ -45,6 +58,7 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { const mapContainer = useRef(null); const handleCurrentLocation = () => { + setShowCity(false); setLocation('현재 위치'); kakao.maps.load(() => { if (navigator.geolocation) { @@ -69,6 +83,20 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { }); }; + const handleAllLocation = () => { + setLocation('전국'); + setShowCity(false); + } + + const handleCityLocation = () => { + setLocation('광역자치단체'); + setShowCity(true); + } + + const handleCitySelect = (city:string) => { + setLocation(city); + } + const sendDataToBackend = async (data:any) => { try { @@ -83,7 +111,8 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { const handleSubmit = (event:any) => { event.preventDefault(); - if(!mapTitle || !latitude || !longitude){ + // if(!mapTitle || !latitude || !longitude) + if(!mapTitle || !location){ alert('모든 필수 정보를 입력해주세요'); return; } @@ -95,7 +124,7 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { latitude, longitude, zoomLevel, - publishLink : imageUrl, + publishLink : "https://example.com/maps/seoul-food-tour", isOnSearch, keywords, }; @@ -134,17 +163,30 @@ const NewMap = ({ onClose }: { onClose: () => void }) => { + + {showCity && ( +
+ {cities.map((city) => ( + + ))} +
+ )}
{ @@ -30,20 +31,18 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => { followerCnt: 0, followingCnt: 0, }); + const { viewUserData} = useUserViewState(); useEffect(() => { const fetchUserData = async () => { try { - const response = await instance.get(`/user/${otherUserProfileId}`); - const data = response.data.result; - setUserData({ - nickname: data.nickname, - profileId: data.profileId, - imgUrl: data.imgUrl, - mapCnt: data.mapCnt, - followerCnt: data.followerCnt, - followingCnt: data.followingCnt, + nickname: viewUserData.nickname, + profileId: viewUserData.profileId, + imgUrl: viewUserData.imgUrl, + mapCnt: viewUserData.mapCnt, + followerCnt: viewUserData.followerCnt, + followingCnt: viewUserData.followingCnt, }); } catch (error) { console.error('Failed to fetch user data', error); diff --git a/src/pages/UserProfile/UserProfile.tsx b/src/pages/UserProfile/UserProfile.tsx index e3828db..c63dd81 100644 --- a/src/pages/UserProfile/UserProfile.tsx +++ b/src/pages/UserProfile/UserProfile.tsx @@ -6,12 +6,15 @@ import GlobalNavigationBar from '../../components/global/GlobalNavigationBar'; import styles from './UserProfile.module.scss'; import GetUser from '../../components/userProfile/GetUser'; import EmptyUser from '../../components/userProfile/EmptyUser'; +import OtherUser from '../../components/userProfile/OtherUser'; + import EmtpyUserInfobar from '../../components/userProfile/userInfoBarCard/EmptyUserInfoBar'; import GetUserInfobar from '../../components/userProfile/userInfoBarCard/GetUserInfoBar'; import OtherUserInfobar from '../../components/userProfile/userInfoBarCard/OtherUserInfoBar'; import useRegisterStore from '../../stores/registerStore'; import { RegisterStatus } from '../../types/enum/RegisterStatus'; +import useUserViewState from '../../stores/userViewState'; import instance from '../../apis/instance'; @@ -20,6 +23,7 @@ const UserProfile = () => { const { profileId } = useParams(); const [isLog, setIsLog] = useState(false); const [isOverlayVisible, setIsOverlayVisible] = useState(false); + const { viewUserData, resetViewUserData } = useUserViewState(); const [userData, setUserData] = useState({ nickname: '', profileId: '', @@ -74,13 +78,27 @@ const UserProfile = () => { titleElement.innerHTML = `${userData.nickname}님의 페이지 | MAPU`; //api 호출 -> 사용자 타이틀에 추가 }, [userData.nickname]); + // useEffect(() => { + // return () => { + // resetViewUserData(); + // } + // }, [resetViewUserData]); console.log(registerStatus); return (
- {registerStatus === RegisterStatus.LOG_IN ? : } - {registerStatus === RegisterStatus.LOG_IN ? : } + {registerStatus === RegisterStatus.LOG_IN ? ( + viewUserData.nickname!='' ? : + ): ( + + )} + + {registerStatus === RegisterStatus.LOG_IN ? ( + viewUserData.nickname!='' ? : + ): ( + + )}
); }; diff --git a/src/stores/userViewState.ts b/src/stores/userViewState.ts new file mode 100644 index 0000000..6745fc6 --- /dev/null +++ b/src/stores/userViewState.ts @@ -0,0 +1,36 @@ +import { create } from 'zustand'; + +interface userViewState { + viewUserData: { + nickname: string; + profileId: string; + imgUrl: string; + mapCnt: number; + followerCnt: number; + followingCnt: number; + }; + resetViewUserData: () => void; + setViewUserData: (data: userViewState['viewUserData']) => void; +} + +export const useUserViewState = create((set) => ({ + viewUserData: { + nickname: '', + profileId: '', + imgUrl: '', + mapCnt: 0, + followerCnt: 0, + followingCnt: 0, + }, + resetViewUserData: () => set({ viewUserData: { + nickname: '', + profileId: '', + imgUrl: '', + mapCnt: 0, + followerCnt: 0, + followingCnt: 0, + } }), + setViewUserData: (data) => set({ viewUserData: data }), +})); + +export default useUserViewState; \ No newline at end of file