diff --git a/src/Router.tsx b/src/Router.tsx
index 4572b89..aae8af5 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -20,12 +20,12 @@ const Router = () => {
     },
     {
       index: true,
-      path: '/map/:mapName/edit',
+      path: '/map/:mapId/edit',
       element: <Map />,
     },
     {
       index: true,
-      path: '/map/:mapName/view',
+      path: '/map/:mapId/view',
       element: <Map />,
     },
     {
diff --git a/src/apis/Map/fetchMapBasicInfo.ts b/src/apis/Map/fetchMapBasicInfo.ts
new file mode 100644
index 0000000..c3ac15d
--- /dev/null
+++ b/src/apis/Map/fetchMapBasicInfo.ts
@@ -0,0 +1,32 @@
+import { useQuery } from 'react-query';
+import instance from '../instance';
+import { BaseResponse } from '../../types/BaseResponse';
+import { MapBasicInfo } from '../../types/map/MapBasicInfo';
+import { MapMode } from '../../types/enum/MapMode';
+
+export const fetchMapBasicInfo = async (id: number) => {
+  const response = await instance.get<BaseResponse<MapBasicInfo>>(
+    `/map/${id}/basic-info/edit`,
+  );
+  return response.data;
+};
+
+export const fetchMapBasicInfoForViewer = async (id: number) => {
+  const response = await instance.get<BaseResponse<MapBasicInfo>>(
+    `/map/${id}/basic-info/view`,
+  );
+  return response.data;
+};
+
+export const useMapBasicInfoQuery = (id: number, mapMode: MapMode) => {
+  const { data: mapBasicInfo, isLoading: isMapBasicInfoLoading } = useQuery({
+    queryKey: ['fetchMapBasicInfo'],
+
+    queryFn: () => {
+      if (mapMode === MapMode.EDIT) return fetchMapBasicInfo(id);
+      if (mapMode === MapMode.VIEW) return fetchMapBasicInfoForViewer(id);
+    },
+  });
+
+  return { mapBasicInfo, isMapBasicInfoLoading };
+};
diff --git a/src/components/explore/MapList.tsx b/src/components/explore/MapList.tsx
index 769c7b4..0b5ded0 100644
--- a/src/components/explore/MapList.tsx
+++ b/src/components/explore/MapList.tsx
@@ -115,7 +115,7 @@ const MapList: React.FC<MapListProps> = ({ map, keywordMap }) => {
             <div className={styles.editor}>
               <img
                 className={styles.editorImg}
-                src={map?.user.imageUrl ? map.user.imageUrl : user_default}
+                src={map?.user.imgUrl ? map.user.imgUrl : user_default}
                 alt="User"
               />
               <div className={styles.editorInfo}>
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.module.scss b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.module.scss
index c372981..82b43e5 100644
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.module.scss
+++ b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.module.scss
@@ -8,3 +8,65 @@
   padding: 16px;
   border-bottom: 1px solid var(--gray_50);
 }
+
+.mapInfoInputContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--gray_50);
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#mapTitle {
+  width: calc(100% - 24px);
+  border: none;
+  font-size: 20px;
+  font-weight: 600;
+}
+#mapTitle:disabled,
+#mapDescription:disabled {
+  background: none;
+}
+
+#mapDescription {
+  border: none;
+  resize: none;
+  font-size: 14px;
+  overflow: hidden;
+  width: 100%;
+  field-sizing: content;
+}
+#mapDescription:focus {
+  outline: none;
+}
+#mapTitle::-webkit-input-placeholder,
+#mapDescription::-webkit-input-placeholder {
+  color: var(--gray_400);
+}
+
+.bookmarkBtn:hover {
+  cursor: pointer;
+}
+
+.locationInfoContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.locationInfo {
+  display: flex;
+  justify-content: space-between;
+  span {
+    font-size: 14px;
+  }
+}
+.location__title {
+  color: var(--gray_400);
+}
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.tsx b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.tsx
index e2b5c23..00e3072 100644
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.tsx
+++ b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.tsx
@@ -1,17 +1,119 @@
+import { useEffect, useState } from 'react';
 import styles from './MapBasicInfoContainer.module.scss';
-import MapTitleAndDescriptionInputContainer from './MapTitleAndDescriptionInputContainer';
-import LocationInfoContainer from './MapLocationInfoContainer';
+import { useMapBasicInfoQuery } from '../../../../../apis/Map/fetchMapBasicInfo';
+import useRegisterStore from '../../../../../stores/registerStore';
 import { MapMode } from '../../../../../types/enum/MapMode';
+import { RegisterStatus } from '../../../../../types/enum/RegisterStatus';
+import BookmarkDefault from '../../../../../assets/btn_bookmark_default.svg';
+import BookmarkSelected from '../../../../../assets/btn_bookmark_selected.svg';
 
 interface Props {
   mode: MapMode;
+  mapId: number;
 }
 
-const MapBasicInfoContainer: React.FC<Props> = ({ mode }) => {
+const MapBasicInfoContainer: React.FC<Props> = ({ mode, mapId }) => {
+  const { registerStatus, setLoginNeededStatus } = useRegisterStore();
+  const [editedTitle, setEditedTitle] = useState<string>('');
+  const [editedDescription, setEditedDescription] = useState<string>('');
+
+  const { mapBasicInfo, isMapBasicInfoLoading } = useMapBasicInfoQuery(
+    mapId,
+    mode,
+  );
+
+  useEffect(() => {
+    if (!isMapBasicInfoLoading) {
+      const mapBasicInfoResult = mapBasicInfo!.result;
+      setEditedTitle(mapBasicInfoResult.title);
+      setEditedDescription(mapBasicInfoResult.description);
+    }
+  }, [isMapBasicInfoLoading]);
+
+  const handleTitleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditedTitle(e.currentTarget.value);
+  };
+
+  const handleDescriptionOnChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    setEditedDescription(e.currentTarget.value);
+  };
+
+  const handleFocusOutTitle = () => {
+    //TODO: 지도 제목 저장 api 호출
+  };
+
+  const handleFocusOutDescription = () => {
+    //TODO: 지도 설명 저장 api 호출
+  };
+
+  const handleSwitchIsBookmarked = () => {
+    if (registerStatus !== RegisterStatus.LOG_IN) {
+      setLoginNeededStatus(true);
+    } else {
+      //TODO: 북마크 설정 api 호출
+    }
+  };
   return (
     <div className={styles.mapContentTitleContainer}>
-      <MapTitleAndDescriptionInputContainer mode={mode} />
-      <LocationInfoContainer />
+      <div className={styles.mapInfoInputContainer}>
+        <div className={styles.titleContainer}>
+          <input
+            type="text"
+            name="mapTitle"
+            id={styles.mapTitle}
+            value={editedTitle}
+            placeholder="지도 이름"
+            onChange={handleTitleOnChange}
+            onBlur={handleFocusOutTitle}
+            disabled={mode === MapMode.VIEW ? true : false}
+          />
+          {mapBasicInfo !== undefined &&
+            !mapBasicInfo.result.mine &&
+            (mapBasicInfo.result.bookmarked ? (
+              <img
+                src={BookmarkSelected}
+                alt="북마크함"
+                className={styles.bookmarkBtn}
+                onClick={handleSwitchIsBookmarked}
+              />
+            ) : (
+              <img
+                src={BookmarkDefault}
+                alt="북마크하지 않음"
+                className={styles.bookmarkBtn}
+                onClick={handleSwitchIsBookmarked}
+              />
+            ))}
+        </div>
+        <textarea
+          name="mapDescription"
+          id={styles.mapDescription}
+          placeholder="지도 설명"
+          value={editedDescription}
+          onChange={handleDescriptionOnChange}
+          onBlur={handleFocusOutDescription}
+          disabled={mode === MapMode.VIEW ? true : false}
+        />
+      </div>
+      <div className={styles.locationInfoContainer}>
+        <div className={styles.locationInfo}>
+          <span className={styles.location__title}>위치</span>
+          <span>
+            {mapBasicInfo !== undefined && mapBasicInfo!.result.address}
+          </span>
+        </div>
+        {/* TODO: 날씨, 미세/초미세 추후 목표로 보류 */}
+        {/* <div className={styles.locationInfo}>
+        <span className={styles.location__title}>날씨</span>
+        <span>날씨 api 호출 결과</span>
+      </div>
+      <div className={styles.locationInfo}>
+        <span className={styles.location__title}>미세/초미세</span>
+        <span>미세먼지 api 호출 결과</span>
+      </div> */}
+      </div>
     </div>
   );
 };
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapLocationInfoContainer.module.scss b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapLocationInfoContainer.module.scss
deleted file mode 100644
index 38c4079..0000000
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapLocationInfoContainer.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.locationInfoContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.locationInfo {
-  display: flex;
-  justify-content: space-between;
-  span {
-    font-size: 14px;
-  }
-}
-.location__title {
-  color: var(--gray_400);
-}
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapLocationInfoContainer.tsx b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapLocationInfoContainer.tsx
deleted file mode 100644
index 4a41c80..0000000
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapLocationInfoContainer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styles from './MapLocationInfoContainer.module.scss';
-import useMapInfoStore from '../../../../../stores/mapInfoStore';
-
-const MapLocationInfoContainer = () => {
-  const { mapInfo } = useMapInfoStore();
-
-  return (
-    <div className={styles.locationInfoContainer}>
-      <div className={styles.locationInfo}>
-        <span className={styles.location__title}>위치</span>
-        <span>{mapInfo.location}</span>
-      </div>
-      {/* TODO: 날씨, 미세/초미세 추후 목표로 보류 */}
-      {/* <div className={styles.locationInfo}>
-        <span className={styles.location__title}>날씨</span>
-        <span>날씨 api 호출 결과</span>
-      </div>
-      <div className={styles.locationInfo}>
-        <span className={styles.location__title}>미세/초미세</span>
-        <span>미세먼지 api 호출 결과</span>
-      </div> */}
-    </div>
-  );
-};
-
-export default MapLocationInfoContainer;
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.module.scss b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.module.scss
deleted file mode 100644
index c86f596..0000000
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.mapInfoInputContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--gray_50);
-}
-
-.titleContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-#mapTitle {
-  width: calc(100% - 24px);
-  border: none;
-  font-size: 20px;
-  font-weight: 600;
-}
-#mapTitle:disabled,
-#mapDescription:disabled {
-  background: none;
-}
-
-#mapDescription {
-  border: none;
-  resize: none;
-  font-size: 14px;
-  overflow: hidden;
-  width: 100%;
-  field-sizing: content;
-}
-#mapDescription:focus {
-  outline: none;
-}
-#mapTitle::-webkit-input-placeholder,
-#mapDescription::-webkit-input-placeholder {
-  color: var(--gray_400);
-}
-
-.bookmarkBtn:hover {
-  cursor: pointer;
-}
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.tsx b/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.tsx
deleted file mode 100644
index 8b1568c..0000000
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import styles from './MapTitleAndDescriptionInputContainer.module.scss';
-import useMapInfoStore from '../../../../../stores/mapInfoStore';
-import BookmarkDefault from '../../../../../assets/btn_bookmark_default.svg';
-import BookmarkSelected from '../../../../../assets/btn_bookmark_selected.svg';
-import useRegisterStore from '../../../../../stores/registerStore';
-import { RegisterStatus } from '../../../../../types/enum/RegisterStatus';
-import { MapMode } from '../../../../../types/enum/MapMode';
-
-interface Props {
-  mode: MapMode;
-}
-
-const MapTitleAndDescriptionInputContainer: React.FC<Props> = ({ mode }) => {
-  const { mapInfo } = useMapInfoStore();
-  const { registerStatus, setLoginNeededStatus } = useRegisterStore();
-  const [editedTitle, setEditedTitle] = useState<string>('');
-  const [editedDescription, setEditedDescription] = useState<string>('');
-
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    setEditedTitle(mapInfo.title);
-    setEditedDescription(mapInfo.description);
-  }, []);
-
-  const handleTitleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEditedTitle(e.currentTarget.value);
-  };
-
-  const handleDescriptionOnChange = (
-    e: React.ChangeEvent<HTMLTextAreaElement>,
-  ) => {
-    setEditedDescription(e.currentTarget.value);
-  };
-
-  const handleFocusOutTitle = () => {
-    //TODO: 지도 제목 저장 api 호출, 응답으로 받은 지도 제목 사용
-    // setTitle(editedTitle);
-    navigate(`/map/${editedTitle.replaceAll(' ', '-')}/${mode}`);
-  };
-
-  const handleFocusOutDescription = () => {
-    //TODO: 지도 설명 저장 api 호출
-    // setDescription(editedDescription);
-  };
-
-  const handleSwitchIsBookmarked = () => {
-    if (registerStatus !== RegisterStatus.LOG_IN) {
-      setLoginNeededStatus(true);
-    } else {
-      //TODO: 북마크 설정 api 호출
-      // switchIsBookmarked();
-    }
-  };
-
-  return (
-    <div className={styles.mapInfoInputContainer}>
-      <div className={styles.titleContainer}>
-        <input
-          type="text"
-          name="mapTitle"
-          id={styles.mapTitle}
-          value={editedTitle}
-          placeholder="지도 이름"
-          onChange={handleTitleOnChange}
-          onBlur={handleFocusOutTitle}
-          disabled={mode === MapMode.VIEW ? true : false}
-        />
-        {!mapInfo.isMine &&
-          (mapInfo.isBookmarked ? (
-            <img
-              src={BookmarkSelected}
-              alt="북마크함"
-              className={styles.bookmarkBtn}
-              onClick={handleSwitchIsBookmarked}
-            />
-          ) : (
-            <img
-              src={BookmarkDefault}
-              alt="북마크하지 않음"
-              className={styles.bookmarkBtn}
-              onClick={handleSwitchIsBookmarked}
-            />
-          ))}
-      </div>
-      <textarea
-        name="mapDescription"
-        id={styles.mapDescription}
-        placeholder="지도 설명"
-        value={editedDescription}
-        onChange={handleDescriptionOnChange}
-        onBlur={handleFocusOutDescription}
-        disabled={mode === MapMode.VIEW ? true : false}
-      />
-    </div>
-  );
-};
-
-export default MapTitleAndDescriptionInputContainer;
diff --git a/src/components/map/MapInfoPanel/MapBasicInfo/MapProducerContainer/MapProducerContainer.tsx b/src/components/map/MapInfoPanel/MapBasicInfo/MapProducerContainer/MapProducerContainer.tsx
index 9e5d1a0..31412c5 100644
--- a/src/components/map/MapInfoPanel/MapBasicInfo/MapProducerContainer/MapProducerContainer.tsx
+++ b/src/components/map/MapInfoPanel/MapBasicInfo/MapProducerContainer/MapProducerContainer.tsx
@@ -1,35 +1,38 @@
-import { useState } from 'react';
 import styles from './MapProducerContainer.module.scss';
-import { MapProducerInfo } from '../../../../../types/map/MapProducerInfo';
+import { useMapBasicInfoQuery } from '../../../../../apis/Map/fetchMapBasicInfo';
 import useRegisterStore from '../../../../../stores/registerStore';
 import { RegisterStatus } from '../../../../../types/enum/RegisterStatus';
+import { MapMode } from '../../../../../types/enum/MapMode';
+import { UserType } from '../../../../../types/UserType';
+import UserDefaultProfile from '../../../../../assets/img_user_default_profile.svg';
 
-const MapProducerConatiner = () => {
-  const [mockData, setMockData] = useState<MapProducerInfo>({
-    profileId: 'mockUser',
-    profileImgUrl: 'http://placehold.co/32x32',
-    nickname: 'producer',
-    amIFollowing: false,
-  });
+interface Props {
+  mode: MapMode;
+  mapId: number;
+}
+
+const MapProducerConatiner: React.FC<Props> = ({ mode, mapId }) => {
+  const owner: UserType = useMapBasicInfoQuery(mapId, mode).mapBasicInfo!.result
+    .owner;
   const { registerStatus, setLoginNeededStatus } = useRegisterStore();
 
   const handleFollowBtn = () => {
     if (registerStatus !== RegisterStatus.LOG_IN) setLoginNeededStatus(true);
     else {
       //TODO: 팔로우 api
-      setMockData((state) => {
-        return { ...state, amIFollowing: true };
-      });
     }
   };
 
   return (
     <div className={styles.mapProducerContainer}>
       <div className={styles.mapProducer__info}>
-        <img src={mockData.profileImgUrl} alt="프로필 이미지" />
-        <span>{mockData.nickname}</span>
+        <img
+          src={owner !== undefined ? owner.imgUrl! : UserDefaultProfile}
+          alt="프로필 이미지"
+        />
+        <span>{owner !== undefined && owner.nickName!}</span>
       </div>
-      {mockData.amIFollowing ? (
+      {owner !== undefined && owner.amIFollowing ? (
         <button type="button" className={styles.followBtn} disabled>
           팔로잉
         </button>
diff --git a/src/components/map/MapInfoPanel/MapInfoPanel.tsx b/src/components/map/MapInfoPanel/MapInfoPanel.tsx
index 542c829..571cfcb 100644
--- a/src/components/map/MapInfoPanel/MapInfoPanel.tsx
+++ b/src/components/map/MapInfoPanel/MapInfoPanel.tsx
@@ -1,30 +1,23 @@
-import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from './MapInfoPanel.module.scss';
 import MapProducerConatiner from './MapBasicInfo/MapProducerContainer/MapProducerContainer';
 import MapBasicInfoContainer from './MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer';
-import useMapInfoStore from '../../../stores/mapInfoStore';
 import ObjectList from './ObjectOutlineList/ObjectList';
 import { MapMode } from '../../../types/enum/MapMode';
 import BlackBackBtn from '../../../assets/btn_arrow_left_black.svg';
 import useRegisterStore from '../../../stores/registerStore';
+import { useMapBasicInfoQuery } from '../../../apis/Map/fetchMapBasicInfo';
+import useMapInfoStore from '../../../stores/mapInfoStore';
 
 interface Props {
   mode: MapMode;
+  mapId: number;
 }
 
-const MapInfoPanel: React.FC<Props> = ({ mode }) => {
-  const { mapInfo } = useMapInfoStore();
-  const { loginNeeded } = useRegisterStore();
-
+const MapInfoPanel: React.FC<Props> = ({ mode, mapId }) => {
   const navigate = useNavigate();
-
-  useEffect(() => {
-    //TODO: 내가 제작한 지도인지 판단
-    //아니라면
-    //1. 상단에 지도 제작자 프로필 표시
-    //2. 팔로잉 중인지 판단
-  }, []);
+  const { loginNeeded } = useRegisterStore();
+  const { mapBasicInfo } = useMapBasicInfoQuery(mapId, mode);
 
   const handleGoBack = () => {
     navigate(-1);
@@ -43,9 +36,9 @@ const MapInfoPanel: React.FC<Props> = ({ mode }) => {
             />
           </button>
         </div>
-        <MapProducerConatiner />
-        <MapBasicInfoContainer mode={mode} />
-        <ObjectList />
+        <MapProducerConatiner mode={mode} mapId={mapId} />
+        <MapBasicInfoContainer mode={mode} mapId={mapId} />
+        <ObjectList mode={mode} mapId={mapId} />
       </section>
     );
 
@@ -62,9 +55,11 @@ const MapInfoPanel: React.FC<Props> = ({ mode }) => {
             />
           </button>
         </div>
-        {!mapInfo.isMine && <MapProducerConatiner />}
-        <MapBasicInfoContainer mode={mode} />
-        {!loginNeeded && <ObjectList />}
+        {mapBasicInfo !== undefined && !mapBasicInfo.result.mine && (
+          <MapProducerConatiner mode={mode} mapId={mapId} />
+        )}
+        <MapBasicInfoContainer mode={mode} mapId={mapId} />
+        {!loginNeeded && <ObjectList mode={mode} mapId={mapId} />}
       </section>
     );
 
diff --git a/src/components/map/MapInfoPanel/ObjectOutlineList/ObjectList.tsx b/src/components/map/MapInfoPanel/ObjectOutlineList/ObjectList.tsx
index 1296973..e1f706c 100644
--- a/src/components/map/MapInfoPanel/ObjectOutlineList/ObjectList.tsx
+++ b/src/components/map/MapInfoPanel/ObjectOutlineList/ObjectList.tsx
@@ -1,9 +1,17 @@
 import styles from './ObjectList.module.scss';
 import ObjectOutlineBtn from './ObjectOutlineBtn';
 import useMapInfoStore from '../../../../stores/mapInfoStore';
+import { useMapBasicInfoQuery } from '../../../../apis/Map/fetchMapBasicInfo';
+import { MapMode } from '../../../../types/enum/MapMode';
 
-const ObjectList = () => {
-  const { mapInfo, innerData } = useMapInfoStore();
+interface Props {
+  mode: MapMode;
+  mapId: number;
+}
+
+const ObjectList: React.FC<Props> = ({ mode, mapId }) => {
+  const { innerData } = useMapInfoStore();
+  const { mapBasicInfo } = useMapBasicInfoQuery(mapId, mode);
 
   return (
     <div className={styles.objectListContainer}>
@@ -12,7 +20,7 @@ const ObjectList = () => {
       </div>
       <div
         className={
-          mapInfo.isMine
+          mapBasicInfo !== undefined && mapBasicInfo!.result.mine
             ? `${styles.objectList}`
             : `${styles.objectList} ${styles.notMineList}`
         }
diff --git a/src/components/map/ObjectInfoPanel/ObjectInfoPanel.tsx b/src/components/map/ObjectInfoPanel/ObjectInfoPanel.tsx
index f05048b..c1ba583 100644
--- a/src/components/map/ObjectInfoPanel/ObjectInfoPanel.tsx
+++ b/src/components/map/ObjectInfoPanel/ObjectInfoPanel.tsx
@@ -8,14 +8,15 @@ import useMapInfoStore from '../../../stores/mapInfoStore';
 
 interface Props {
   mode: MapMode;
+  mapId: number;
 }
 
-const ObjectInfoPanel: React.FC<Props> = ({ mode }) => {
+const ObjectInfoPanel: React.FC<Props> = ({ mode, mapId }) => {
   const object = useMapInfoStore((state) => state.getSelectedObject());
 
   return (
     <div id={styles.objectInfoPanel}>
-      <PublishLinkContainer mode={mode} />
+      <PublishLinkContainer mode={mode} mapId={mapId} />
       <ObjectBasicInfoContainer mode={mode} object={object} />
       {mode === MapMode.EDIT && (
         <EditorObjectInfoInputContainer
diff --git a/src/components/map/ObjectInfoPanel/PublishLinkContainer/PublishLinkContainer.tsx b/src/components/map/ObjectInfoPanel/PublishLinkContainer/PublishLinkContainer.tsx
index e2f1ed4..c28cd6f 100644
--- a/src/components/map/ObjectInfoPanel/PublishLinkContainer/PublishLinkContainer.tsx
+++ b/src/components/map/ObjectInfoPanel/PublishLinkContainer/PublishLinkContainer.tsx
@@ -1,21 +1,27 @@
 import styles from './PublishLinkContainer.module.scss';
 import publicStyles from '../ObjectContainerPublicStyle.module.scss';
+import { useMapBasicInfoQuery } from '../../../../apis/Map/fetchMapBasicInfo';
 import useMapInfoStore from '../../../../stores/mapInfoStore';
 import PublishBtn from '../../../../assets/map/btn_publish.svg';
 import PublishCancelBtn from '../../../../assets/map/btn_cancel_publish.svg';
 import CopyLinkBtn from '../../../../assets/map/btn_link_copy.svg';
+import { MapMode } from '../../../../types/enum/MapMode';
 
 interface Props {
-  mode: string;
+  mode: MapMode;
+  mapId: number;
 }
 
-const PublishLinkContainer: React.FC<Props> = ({ mode }) => {
-  const { mapInfo, innerData } = useMapInfoStore();
+const PublishLinkContainer: React.FC<Props> = ({ mode, mapId }) => {
+  const { innerData } = useMapInfoStore();
+  const { mapBasicInfo } = useMapBasicInfoQuery(mapId, mode);
 
   const handleCopyLink = async () => {
     //클립보드에 공유 링크 복사
     try {
-      await navigator.clipboard.writeText(`${mapInfo.publicLink}`);
+      await navigator.clipboard.writeText(
+        `mapu-frontend.vercel.app/map/2/view`,
+      );
     } catch (e) {
       //TODO: 에러 상태로 설정
       alert('공유 링크 복사에 실패하였습니다.');
@@ -24,7 +30,6 @@ const PublishLinkContainer: React.FC<Props> = ({ mode }) => {
 
   const handleSwitchIsPublished = () => {
     //TODO: 게시 여부 설정 api 호출
-    // swithIsPublished();
   };
 
   //editor
@@ -33,7 +38,7 @@ const PublishLinkContainer: React.FC<Props> = ({ mode }) => {
       <section
         className={`${styles.objectInfoHeader} ${styles.publishContainer}`}
       >
-        {mapInfo.isPublished ? (
+        {mapBasicInfo !== undefined && mapBasicInfo.result.published ? (
           <div className={publicStyles.publicTextContainer}>
             <span className={publicStyles.boxTitle}>지도 게시 취소하기</span>
             <span className={publicStyles.publicDescription}>
@@ -61,7 +66,7 @@ const PublishLinkContainer: React.FC<Props> = ({ mode }) => {
             </span>
           </div>
         )}
-        {mapInfo.isPublished ? (
+        {mapBasicInfo !== undefined && mapBasicInfo.result.published ? (
           <button
             type="button"
             className={styles.publishBtn}
@@ -96,7 +101,9 @@ const PublishLinkContainer: React.FC<Props> = ({ mode }) => {
     >
       <span className={publicStyles.boxTitle}>지도 링크</span>
       <div className={styles.linkContainer}>
-        <span className={styles.publicLink}>{mapInfo.publicLink}</span>
+        <span
+          className={styles.publicLink}
+        >{`mapu-frontend.vercel.app/map/2/view`}</span>
         <img
           src={CopyLinkBtn}
           alt="링크 복사하기"
diff --git a/src/components/timeLine/mapCard/MapCard.tsx b/src/components/timeLine/mapCard/MapCard.tsx
index c3c7e1a..a869389 100644
--- a/src/components/timeLine/mapCard/MapCard.tsx
+++ b/src/components/timeLine/mapCard/MapCard.tsx
@@ -8,10 +8,8 @@ import ico_carousel_forward from '../../../assets/ico_carousel_forward.svg';
 import { Link } from 'react-router-dom';
 import { MapsType as KeywordMapsType } from '../../../types/keywords/MapsType';
 import { MapsType } from '../../../types/mapData/MapsType';
-import { APIMapsType } from '../../../types/keywords/APIMapsType';
 import { FollowingMapType } from '../../../types/mapData/FollowingMapType';
 import { KeywordType } from '../../../types/keywords/KeywordType';
-import { keywordMap } from '../../../apis/keywords/keywordMap';
 
 interface MapCardProps {
   KeywordmapData?: KeywordMapsType[];
@@ -41,7 +39,11 @@ const MapCard: React.FC<MapCardProps> = ({
     }
     return styles.backward;
   };
-  
+
+  useEffect(() => {
+    console.log('MapCard followingMap:', followingMap);
+  }, [followingMap]);
+
   const handleForward = () => {
     setRenderMap((preVisibleItems) => preVisibleItems - MAP_PER_PAGE);
   };
@@ -65,10 +67,7 @@ const MapCard: React.FC<MapCardProps> = ({
             <img src={ico_carousel_forward} alt="Forward" />
           </button>
 
-          <button
-            className={buttonClassName()}
-            onClick={handleBackward}
-          >
+          <button className={buttonClassName()} onClick={handleBackward}>
             <img src={ico_carousel_backward} alt="Backward" />
           </button>
         </div>
diff --git a/src/pages/Map/Map.tsx b/src/pages/Map/Map.tsx
index adf3e7b..f9e9f94 100644
--- a/src/pages/Map/Map.tsx
+++ b/src/pages/Map/Map.tsx
@@ -9,9 +9,9 @@ import MapInfoPanel from '../../components/map/MapInfoPanel/MapInfoPanel';
 import ObjectInfoPanel from '../../components/map/ObjectInfoPanel/ObjectInfoPanel';
 import AuthContainer from '../../components/login/AuthContainer';
 import BaseMap from '../../components/map/BaseMap/BaseMap';
-import EditDesignPanel from '../../components/map/BaseMap/EditDesignPanel';
 import GlobalNavigationBar from '../../components/global/GlobalNavigationBar';
 import { MapMode } from '../../types/enum/MapMode';
+import { useMapBasicInfoQuery } from '../../apis/Map/fetchMapBasicInfo';
 import { YorkieDocType } from '../../types/map/object/ObjectInfo';
 import useMapInfoStore from '../../stores/mapInfoStore';
 
@@ -31,7 +31,8 @@ const Map = () => {
         ? MapMode.VIEW
         : MapMode.UNVALID; //error;
   const navigate = useNavigate();
-  const { mapName } = useParams();
+  const mapIdStr = useParams().mapId;
+  const mapId = Number(mapIdStr);
   const { registerStatus, loginNeeded, setLoginNeededStatus } =
     useRegisterStore();
   const [dimmed, setDimmed] = useState<boolean>(false);
@@ -44,6 +45,11 @@ const Map = () => {
     setInnerData,
   } = useMapInfoStore();
 
+  const { mapBasicInfo, isMapBasicInfoLoading } = useMapBasicInfoQuery(
+    mapId,
+    mapMode,
+  );
+
   useEffect(() => {
     if (mapMode === MapMode.UNVALID) {
       //TODO: error 잘못된 접근 (모드)
@@ -52,11 +58,13 @@ const Map = () => {
 
   //TODO: 지도 정보 api 호출 -> react query의 캐시로 데이터 관리
   useEffect(() => {
-    const titleElement = document.getElementsByTagName('title')[0];
-    //TODO: 지도 제목이 바뀐 경우, 이전으로 갔을 때 오류 반환해야 함
-    //mapId를 통해 지도 정보 api 호출 -> 지도 제목이 일치하는지 확인 -> 불일치시 에러
-    titleElement.innerHTML = `${mapName!.replaceAll('-', ' ')} | MAPU`;
-  }, [mapName]);
+    if (!isMapBasicInfoLoading) {
+      const titleElement = document.getElementsByTagName('title')[0];
+      //TODO: 지도 제목이 바뀐 경우, 이전으로 갔을 때 오류 반환해야 함
+      //mapId를 통해 지도 정보 api 호출 -> 지도 제목이 일치하는지 확인 -> 불일치시 에러
+      titleElement.innerHTML = `${mapBasicInfo!.result.title} | MAPU`;
+    }
+  }, [isMapBasicInfoLoading]);
 
   useEffect(() => {
     if (mapMode === MapMode.EDIT) {
@@ -89,7 +97,7 @@ const Map = () => {
     const YORKIE_CLIENT_API_KEY = process.env.REACT_APP_YORKIE_API_KEY;
     const YORKIE_ENDPOINT = process.env.REACT_APP_YORKIE_URL;
 
-    if (!mapName || !YORKIE_CLIENT_API_KEY || !YORKIE_ENDPOINT) {
+    if (!mapIdStr || !YORKIE_CLIENT_API_KEY || !YORKIE_ENDPOINT) {
       return;
     }
 
@@ -99,7 +107,7 @@ const Map = () => {
       });
       await client.activate();
 
-      const doc = new yorkie.Document<YorkieDocType>(mapName);
+      const doc = new yorkie.Document<YorkieDocType>(mapIdStr + '111');
       await client.attach(doc);
 
       doc.update((root) => {
@@ -119,7 +127,7 @@ const Map = () => {
         client.deactivate();
       }
     };
-  }, [mapName]);
+  }, [mapIdStr]);
 
   if (!client || !doc) {
     return <div>Loading...</div>;
@@ -148,14 +156,9 @@ const Map = () => {
       )}
       {dimmed && <AuthContainer className={styles.authContainer} />}
       <GlobalNavigationBar />
-      <MapInfoPanel mode={mapMode} />
+      <MapInfoPanel mode={mapMode} mapId={mapId} />
       <BaseMap mode={mapMode} />
-      <ObjectInfoPanel mode={mapMode} />
-      <div className={styles.main}>
-        <MapInfoPanel mode={mapMode} />
-        <BaseMap mode={mapMode} />
-        <ObjectInfoPanel mode={mapMode} />
-      </div>
+      <ObjectInfoPanel mode={mapMode} mapId={mapId} />
     </div>
   );
 };
diff --git a/src/stores/mapInfoStore.ts b/src/stores/mapInfoStore.ts
index 0312c71..2ba2fa9 100644
--- a/src/stores/mapInfoStore.ts
+++ b/src/stores/mapInfoStore.ts
@@ -1,11 +1,9 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { MapInfo } from '../types/map/MapInfo';
 import { MapObject, YorkieDocType } from '../types/map/object/ObjectInfo';
 import { Document } from 'yorkie-js-sdk';
 
 interface State {
-  mapInfo: MapInfo;
   innerData: YorkieDocType;
   selectedObjectId?: string;
   doc?: Document<any, any>;
@@ -25,7 +23,6 @@ interface State {
 const useMapInfoStore = create(
   persist<State>(
     (set, get) => ({
-      mapInfo: {} as MapInfo,
       innerData: {
         informationAttributes: [],
         objects: [],
diff --git a/src/types/UserType.ts b/src/types/UserType.ts
index c73d324..03a8e34 100644
--- a/src/types/UserType.ts
+++ b/src/types/UserType.ts
@@ -1,6 +1,7 @@
 export interface UserType {
-  imageUrl: string | null;
+  imgUrl: string | null;
   nickName: string;
   profileId: string;
-  userId:number;
+  userId: number;
+  amIFollowing: boolean;
 }
diff --git a/src/types/follow/FollowingType.ts b/src/types/follow/FollowingType.ts
index 64f3b98..2fb4830 100644
--- a/src/types/follow/FollowingType.ts
+++ b/src/types/follow/FollowingType.ts
@@ -1,6 +1,6 @@
-import { UserType } from "../UserType"
+import { UserType } from '../UserType';
 
 export interface FollowingType {
   userId: number;
-  users : UserType[];
-}
\ No newline at end of file
+  users: UserType[];
+}
diff --git a/src/types/map/MapBasicInfo.ts b/src/types/map/MapBasicInfo.ts
new file mode 100644
index 0000000..201721a
--- /dev/null
+++ b/src/types/map/MapBasicInfo.ts
@@ -0,0 +1,14 @@
+import { UserType } from '../UserType';
+
+export interface MapBasicInfo {
+  mapId: number;
+  title: string;
+  address: string;
+  description: string;
+  latitude: number;
+  longitude: number;
+  published: boolean;
+  mine: boolean;
+  bookmarked: boolean;
+  owner: UserType;
+}
diff --git a/src/types/map/MapInfo.ts b/src/types/map/MapInfo.ts
deleted file mode 100644
index 24729bc..0000000
--- a/src/types/map/MapInfo.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface MapInfo {
-  id: number;
-  title: string;
-  description: string;
-  location: string;
-  latitude: number;
-  longitude: number;
-  isPublished: boolean;
-  publicLink?: string;
-  isMine: boolean;
-  isBookmarked?: boolean;
-}
diff --git a/src/types/mapData/APIExploreMapType .ts b/src/types/mapData/APIExploreMapType .ts
index f585e0c..7768250 100644
--- a/src/types/mapData/APIExploreMapType .ts	
+++ b/src/types/mapData/APIExploreMapType .ts	
@@ -1,12 +1,11 @@
-import { UserType } from "../UserType";
-import { KeywordType } from "../keywords/KeywordType";
+import { UserType } from '../UserType';
 
 export interface APIExploreMapType {
   mapId: number;
   imageUrl: string;
   title: string;
-  region : string;
+  region: string;
   description: string;
-  user : UserType;
-  keyword:string[];
+  user: UserType;
+  keyword: string[];
 }
diff --git a/src/types/mapData/ExploreMapType.ts b/src/types/mapData/ExploreMapType.ts
index 23df6f5..e6a93a5 100644
--- a/src/types/mapData/ExploreMapType.ts
+++ b/src/types/mapData/ExploreMapType.ts
@@ -1,12 +1,12 @@
-import { UserType } from "../UserType";
-import { KeywordType } from "../keywords/KeywordType";
+import { KeywordType } from '../keywords/KeywordType';
+import { UserType } from '../UserType';
 
 export interface ExploreMapType {
   mapId: number;
   imageUrl: string;
   title: string;
-  region : string;
+  region: string;
   description: string;
-  user : UserType;
+  user: UserType;
   keyword: KeywordType[];
 }
diff --git a/src/types/mapData/FollowingMapType.ts b/src/types/mapData/FollowingMapType.ts
index 456aeb7..160527f 100644
--- a/src/types/mapData/FollowingMapType.ts
+++ b/src/types/mapData/FollowingMapType.ts
@@ -1,8 +1,8 @@
-import { MapsType } from "./MapsType";
+import { MapsType } from './MapsType';
 
 export interface FollowingMapType {
   nickname: string;
   profileId: string;
   userImages: string;
   maps: MapsType[];
-}
\ No newline at end of file
+}