resolve conflicts by merging dev to feat&refactor/144-map

package.json

@@ -21,9 +21,11 @@
     "react-query": "^3.39.3",
     "react-router-dom": "^6.24.0",
     "sass": "^1.77.6",
+    "tsid-ts": "^0.0.9",
     "typescript": "^4.9.5",
     "typescript-cookie": "^1.0.6",
     "web-vitals": "^2.1.4",
+    "yorkie-js-sdk": "^0.4.28",
     "zustand": "^4.5.4"
   },
   "scripts": {

src/apis/auth/useProfileEditMutation.ts

@@ -0,0 +1,62 @@
+import { useMutation } from 'react-query';
+import instance from '../instance';
+import { BaseResponse } from '../../types/BaseResponse';
+import { LoginSuccess } from '../../types/auth/login';
+import { ResponseCode } from '../../types/enum/ResponseCode';
+import useRegisterStore from '../../stores/registerStore';
+import { useNavigate } from 'react-router-dom';
+
+export const useProfileUpdateMutation = (prevUrl: string) => {
+  const { setLogIn, setIsIdDuplicate } = useRegisterStore();
+  const navigate = useNavigate();
+
+  const mutation = useMutation({
+    mutationFn: async (data: FormData) => {
+      return await instance.patch<BaseResponse<LoginSuccess>>(
+        `/user`, 
+        data,
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        },
+      );
+    },
+    onSuccess: (response) => {
+      const responseData = response.data;
+
+      if (responseData.code === ResponseCode.SUCCESS) {
+        console.log('프로필 업데이트 성공!');
+
+        const profileId = responseData.result.profileId;
+        const imgUrl = responseData.result.imgUrl;
+        const accessToken = responseData.result.accessToken;
+        setLogIn(profileId, imgUrl, accessToken);
+
+        instance.defaults.headers.common['Authorization'] =
+          `Bearer ${accessToken}`; // 로그인된 유저에 대하여 모든 API 호출에 accessToken 포함시키는 코드
+
+        navigate(prevUrl);
+        return;
+      }
+      if (responseData.code === ResponseCode.ALREADY_EXIST_PROFILE_ID) {
+        // 중복된 profileId인 경우
+        console.log('사용 중인 아이디');
+        setIsIdDuplicate(true);
+        navigate(`${prevUrl + '?authState=signup'}`);
+        return;
+      } else {
+        // 프로필 업데이트 오류
+        console.log('프로필 업데이트 실패');
+        navigate(`${prevUrl === '/' ? prevUrl : prevUrl + '?authState=login'}`);
+        return;
+      }
+    },
+    onError: () => {
+      console.log('프로필 업데이트 실패');
+      navigate(prevUrl);
+    },
+  });
+
+  return mutation;
+};
+
+export default useProfileUpdateMutation;

src/apis/follow/getFollowing.tsx

@@ -4,7 +4,7 @@ import { BaseResponse } from "../../types/BaseResponse";
 
 export const getFollowing = async () => {
   try{
-    const response = await instance.get<BaseResponse<FollowingType>>('following')
+    const response = await instance.get<BaseResponse<FollowingType>>('/following')
     console.log('response', response)
     return response.data.result || undefined
   } catch (error) {

src/apis/follow/useGetFollowing.tsx

@@ -4,7 +4,9 @@ import { FollowingType } from "../../types/follow/FollowingType";
 export const  fetchFollowing = async (token:string| undefined): Promise<FollowingType | undefined> => {
   try {
     if(token) {
-      return await getFollowing();
+      const result = await getFollowing();
+      console.log(result)
+      return result;
     } else {
       return undefined;
     }

src/apis/mapData/followingMap.tsx

@@ -5,6 +5,7 @@ import { BaseResponse } from "../../types/BaseResponse";
 export const followingMap = async () => {
   try {
     const response = await instance.get<BaseResponse<FollowingMapType[] | undefined>>('/home/map');
+    console.log(response)
     return response.data.result;
   } catch (error) {
     console.error('Error fetching data:',error);

src/components/explore/MapKeywordCard.tsx

@@ -4,25 +4,32 @@ import ico_carousel_backward from '../../assets/ico_carousel_backward.svg';
 import ico_carousel_forward from '../../assets/ico_carousel_forward.svg';
 import { getKeywordMap } from '../../apis/keywords/getKeywordMap';
 import { KeywordMapType } from '../../types/keywords/KeywordMapType';
+import { Link } from 'react-router-dom';
 
 interface MapKeywordCardProps {
   keyword: string;
   mapId: number;
   isSelect: boolean;
 }
 
-const MapKeywordCard: React.FC<MapKeywordCardProps> = ({ keyword, isSelect, mapId }) => {
+const MapKeywordCard: React.FC<MapKeywordCardProps> = ({
+  keyword,
+  isSelect,
+  mapId,
+}) => {
   const INIT_RENDER = 4;
   const MAP_PER_PAGE = 3;
   const [renderKeyword, setRenderKeyword] = useState(INIT_RENDER);
-  const [keywordMap, setKeywordMap] = useState<KeywordMapType | undefined>(undefined);
+  const [keywordMap, setKeywordMap] = useState<KeywordMapType | undefined>(
+    undefined,
+  );
 
   const handleForward = () => {
-    setRenderKeyword(prev => prev - MAP_PER_PAGE);
+    setRenderKeyword((prev) => prev - MAP_PER_PAGE);
   };
 
   const handleBackward = () => {
-    setRenderKeyword(prev => prev + MAP_PER_PAGE);
+    setRenderKeyword((prev) => prev + MAP_PER_PAGE);
   };
 
   const fetchKeywordMap = async () => {
@@ -55,16 +62,20 @@ const MapKeywordCard: React.FC<MapKeywordCardProps> = ({ keyword, isSelect, mapI
           <img src={ico_carousel_backward} alt="Backward" />
         </button>
       </div>
-      {isSelect && mapId && keywordMap?.maps
-        .slice(renderKeyword - INIT_RENDER, renderKeyword)
-        .map((map, index) => (
-          <div key={index} className={styles.keywordItem}>
-            <img src={map.mapImage} className={styles.keywordImg} />
-            <div className={styles.keywordInfo}>
-              <span className={styles.keywordTitle}>{map.mapTitle}</span>
+      {isSelect &&
+        mapId &&
+        keywordMap?.maps
+          .slice(renderKeyword - INIT_RENDER, renderKeyword)
+          .map((map, index) => (
+            <div key={index} className={styles.keywordItem}>
+              <Link to={`/map/${map.mapId}/view`}>
+                <img src={map.mapImage} className={styles.keywordImg} />
+              </Link>
+              <div className={styles.keywordInfo}>
+                <span className={styles.keywordTitle}>{map.mapTitle}</span>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
     </div>
   );
 };

src/components/explore/MapList.module.scss

@@ -10,15 +10,17 @@
 .Images {
   display: flex;
   flex-direction: column;
-  width: 492px;
+
   height: 100%;
+  width: 492px;
 
   border-radius: 6px;
   border: 1px solid#EBEEF2;
 }
 
 .mapImg {
   width: 100%;
+
   height: 216px;
   border-bottom: 1px solid#EBEEF2;
 }

src/components/explore/MapList.tsx

@@ -41,9 +41,11 @@ const MapList: React.FC<MapListProps> = ({ map, keywordMap }) => {
                 to={`/map/${mapItem.mapTitle}/view`}
                 style={{ textDecoration: 'none' }}
               >
-                <div className={styles.mapImg}>
-                  <img src={mapItem.mapImage} alt="Map" />
-                </div>
+                <img
+                  src={mapItem.mapImage}
+                  className={styles.mapImg}
+                  alt="Map"
+                />
               </Link>
               <div className={styles.editor}>
                 <img
@@ -105,7 +107,7 @@ const MapList: React.FC<MapListProps> = ({ map, keywordMap }) => {
         <div className={styles.MapListRoot}>
           <div className={styles.Images}>
             <Link
-              to={`/map/${map?.title}/view`}
+              to={`/map/${map?.mapId}/view`}
               style={{ textDecoration: 'none' }}
             >
               <img src={map?.imageUrl} className={styles.mapImg} alt="Map" />

src/components/global/GlobalNavigationBar.module.scss

@@ -2,7 +2,6 @@
   display: flex;
   z-index: 10;
   width: 72px;
-  overflow: hidden;
 }
 
 .LeftSideBar {

src/components/global/GlobalNavigationBar.tsx

@@ -45,7 +45,6 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
       console.log('setDimmed(true');
     } else {
       setIsLog(true);
-      setIsOverlayVisible(false);
       console.log('setDimmed(false)');
     }
   }, [loginNeeded, registerStatus]);