Merge pull request #132 from KUIT-MAPU/feat/131-UserProfile-Edit-API

Feat/131 user profile map-data api
KUIT-MAPU · Aug 16, 2024 · 86af1af · 86af1af
2 parents 9ac3ebb + f1464f9
commit 86af1af
Show file tree

Hide file tree

Showing 24 changed files with 500 additions and 433 deletions.
diff --git 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`.
     -->
-    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%=process.env.REACT_APP_KAKAOMAP_API_KEY%>&libraries=drawing,services"></script>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%=process.env.REACT_APP_KAKAOMAP_API_KEY%>&libraries=drawing,services"
+    ></script>
     <title>MAPU</title>
   </head>
   <body>

diff --git 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<EditorType[]> => {
+export const fetchEditorData = async (
+  token: string | undefined,
+): Promise<EditorType[]> => {
   try {
     if (token) {
       return await getEditorDataWithToken();
@@ -12,4 +17,4 @@ export const fetchEditorData = async (token: string | undefined): Promise<Editor
     console.error('Error fetching editor data:', error);
     throw new Error('정보를 불러올 수 없음.');
   }
-};
+};
diff --git a/src/apis/editors/getEditorsData.ts b/src/apis/editors/getEditorsData.ts
@@ -1,10 +1,11 @@
-import instance from "../instance";
-import { EditorType } from "../../types/getEditors/EditorType";
-import { BaseResponse } from "../../types/BaseResponse";
+import instance from '../instance';
+import { EditorType } from '../../types/getEditors/EditorType';
+import { BaseResponse } from '../../types/BaseResponse';
 
 export const getEditorDataWithToken = async () => {
   try {
-    const response = await instance.get<BaseResponse<EditorType[]>>('/home/editor');
+    const response =
+      await instance.get<BaseResponse<EditorType[]>>('/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<BaseResponse<EditorType[]>>('/home/editor');
+    const response =
+      await instance.get<BaseResponse<EditorType[]>>('/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
@@ -13,7 +13,9 @@ interface MapListProps {
 }
 
 const MapList: React.FC<MapListProps> = ({ map, keyword }) => {
-  const [selectedKeyword, setSelectedKeyword] = useState<MapKeywordType | null>(null);
+  const [selectedKeyword, setSelectedKeyword] = useState<MapKeywordType | null>(
+    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
@@ -83,4 +83,3 @@
 .iconContainer_off {
   background-color: var(--white);
 }
-
diff --git 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,14 +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<boolean>(false);
   const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(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) {
       setIsLog(false);
@@ -44,9 +56,31 @@ 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();
+  }, []);
+
   const isHomeActive = location.pathname === '/timeline';
   const isExploreActive = location.pathname === '/explore';
-  const isUserpageActive = location.pathname === '/user/:userId';
+  const isUserpageActive = location.pathname === `/user/${userData.profileId}`;
 
   return (
     <div className={styles.container}>
@@ -76,11 +110,19 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
             )}
           </div>
         </Link>
-        <Link to="/user/:userId" className={styles.link}>
+        <Link to='/user/:userId' className={styles.link}>
           <div
             className={`${styles.iconContainer} ${isUserpageActive ? styles.iconContainer_on : styles.iconContainer_off}`}
           >
-            <User className={styles.icon} />
+            {userData.imgUrl ? (
+              <img
+                src={userData.imgUrl}
+                alt="User Profile"
+                className={styles.iconContainer}
+              />
+            ) : (
+              <User />
+            )}
           </div>
         </Link>
         <div

diff --git a/src/components/map/BaseMap/BaseMap.tsx b/src/components/map/BaseMap/BaseMap.tsx
@@ -44,7 +44,8 @@ const BaseMap: React.FC<BaseMapProps> = ({ mode }) => {
   const [dotShape, setDotShape] = useState<string>('dot thin');
   const [dotColor, setDotColor] = useState<string>('#111111');
   const [isShare, setIsShare] = useState<boolean>(false);
-  const [selectedMarker, setSelectedMarker] = useState< kakao.maps.Marker | null>(null); // 마커 지우기 위해서 사용
+  const [selectedMarker, setSelectedMarker] =
+    useState<kakao.maps.Marker | null>(null); // 마커 지우기 위해서 사용
 
   const managerRef =
     useRef<
@@ -237,9 +238,8 @@ const BaseMap: React.FC<BaseMapProps> = ({ 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<BaseMapProps> = ({ mode }) => {
         setSelectedMarker(null);
       }
     });
-  },[marker, selectedMarker]);
-
+  }, [marker, selectedMarker]);
 
   return (
     <>

diff --git a/src/components/timeLine/editorList/EditorList.tsx b/src/components/timeLine/editorList/EditorList.tsx
@@ -14,14 +14,15 @@ interface EditorListProps {
 const EditorList: React.FC<EditorListProps> = ({ 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
@@ -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<ProfileCardProps> = ({ Editor }) => {
   return (
     <div className={styles.cardRoot}>
       <div className={styles.editorInfo}>
-        <img className={styles.editorImg} src={Editor.image ? Editor.image : userImg} alt="Editor Image" />
+        <img
+          className={styles.editorImg}
+          src={Editor.image ? Editor.image : userImg}
+          alt="Editor Image"
+        />
 
         <div className={styles.editorNameNid}>
           <div className={styles.editorName}>{Editor.nickname}</div>

diff --git 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
@@ -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 }) => {
           <Gallery />
           <List />
         </div>
-        <div className={styles.newMap}><CreatMap /></div>
+        <div className={styles.newMap}>
+          <CreatMap />
+        </div>
       </div>
       <div className={styles.emptyAlert}>
         <div>지도 파일이 없습니다</div>

diff --git 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);
-}
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -83,4 +83,3 @@
		.iconContainer_off {
		background-color: var(--white);
		}